Dwi Marta Marwatul Wardah
Latest posts by Dwi Marta Marwatul Wardah (see all)

Pengantar

Hallo sobat jagoan!!!! Kembali di website tutorial 

Kali ini kita akan bahas mengenai tutorial membuat web pribadi dengan wordpress dan divi builder 

Sudah tahu tentang divi builder dan wordpress? Akan mimin paparkan sedikit mengenai keduanya. Biar yang tidak tau jadi tau dan yang tau jadi tambah tau

Jadi WordPress sendiri merupakan CMS (Content Management System) dimana kita bisa bikin web tanpa coding dengan menambahkan beberapa konten yang kemudian di launch sehingga lebih mudah. 

Sedangkan untuk Divi Builder ini merupakan salah satu pluginnya yang berfungsi untuk membuat platform kamu semakin powerful.

Nah itu sob, sekilas tentang wordpress dan juga divi builder 

Yuk kita menuju tutorial, Let’s go..

Prasyarat

Sebelum ke tutorial kamu perlu memenuhi beberapa prasyarat berikut: 

Langkah 1, Menyiapkan Draft Konten

Ibarat sebuah bekal, kamu harus menyiapkan isinya dulu baru tempat bekalnya, jadi kamu perlu untuk menyiapkan konten sebelum membuat sebuah website. Langkah ini penting untuk kamu lakukan terlebih dahulu sebelum membuat website agar lebih mudah dalam mengatur layout di langkah selanjutnya.

Hal yang perlu kamu perhatikan dalam menyiapkan draft konten yaitu:

  • List kebutuhan halaman 

Kamu perlu untuk menentukan berapa banyak halaman yang kamu butuhkan saat membuat website sehingga kamu tidak kebingungan saat eksekusinya nanti.

Salah satu list halaman untuk website pribadi seperti berikut:

buatlah struktur list halaman seperti ini

  • Siapkan Draft tulisan 

Karena ide itu sering tidak muncul disaat yang kita mau, maka kamu tidak bisa memastikan idemu akan muncul saat kamu membuat website. Untuk itu kamu perlu menyiapkan draft tulisan terlebih dahulu yang nantinya digunakan untuk mengisi  website kamu.

buat draft tulisan juga

  • Sertakan gambar dan video, karya 

Agar website kamu lebih powerful kamu perlu menambahkan gambar atau video sebagai penunjang, tapi untuk video kamu bisa menggunakan youtube sebagai media sharingnya untuk menghemat hosting kamu hehehe.. 

Oiya sob kalau kamu memiliki beberapa karya yang menarik, kamu juga bisa  mengunggahnya di website kamu dengan mencantumkan link sehingga ketika orang lain mengunjungi websitemu mereka akan terhubung dengan karyamu juga

ini contoh karya yang bisa kamu tambahkan

Nah jika semua hal diatas sudah kamu siapkan, maka saatnya kita mengatur layout atau tata letak kontenmu

Langkah 2, Membuat dan Menyusun Sketsa Layout

Langkah ini tentu saja perlu kamu lakukan karena tidak mungkin kamu membuat website dengan layout yang tidak kamu atur sebelumnya, bisa jadi nanti website mu malah terlihat berantakan dan asal-asalan, tidak mau bukan??

buatlah konsep sketsa layout terlebih dahulu

Sedikit tips untuk langkah ini jika kamu kebingungan membuat sketsa layout kamu bisa mencari referensi di berbagai platform salah satunya pinterest dengan keyword “wireframe landing page template” 

Pilih saja salah satu, Jangan sampai kebingungan ya 

Kamu juga bisa menyusun sketsa layout secara langsung saat membuka Landing page dengan template yang sudah di sediakan di divi builder, nah dalam langkah ini kamu bisa gunakan metode ATM yaitu Amati, Tiru dan Modifikasi. Layout yang telah kamu buat sebelumnya bisa kamu modifikasi dengan layout yang sudah disediakan nantinya 

Pilihlah salah satu

Langkah 3, Merancang Landing Page

Nahh ketika konten mu sudah siap dan sketsa mu sudah siap maka selanjutnya kamu akan mengeksekusi websitemu. 

  1. Log in di wp admin, iyap! Tentu saja kamu harus login terlebih dahulu sob
  2. Setelah berada di dashboard maka tekan pages lalu add new untuk membuat halaman baru.
  3. Pada langkah ini cukup tuliskan judul halaman kemudian tekan tombol ungu bertuliskan “use divi builder” untuk berlanjut pada page builder. Nanti akan muncul menu seperti pada gambar berikut

    klik kotak yang tengah yaa

    Keterangan:

    • Build From Scratch, menu ini untuk membuat landing page dari awal atau halaman kosong, jadi kamu sendiri yang mengatur konsep dari landing page mu.
    • Choose a Premade Layout, membuat landing page dengan menggunakan template yang sudah disediakan.
    • Clone Existing Page, menduplikat halaman yang sudah ada di dashboard sebelumnya, biar gak kerja dua kali sob
  4. Agar lebih mudah, kamu bisa memilih kotak di tengah bertuliskan Choose a Premade Layout, ya… 
  5. Setelah muncul halaman untuk memilih template layout, kamu hanya perlu mengklik tiap layout untuk melihat detailnya, dan jika sudah cocok dengan salah satunya kamu bisa gunakan ‘use this layout’ untuk mengaplikasikannya

    pilih kotak warna hijau untuk lanjut eksekusi

  6. Nah setelah itu akan muncul gambar seperti berikut, klik ‘Build on The Front End’

    klik kotak yang sudah ditandai

  7. Selanjutnya akan muncul gambar seperti berikut, maka kamu siap untuk membuat website mu dengan draft dan sketsa yang telah tersedia.

    Selamat berkreasi

    Pada gambar di atas kamu melihat row, column dan module. Row merupakan wadah dari konten yang berbentuk horizontal sedangkan column yang bentuknya vertikal nah untuk module sendiri adalah wadah untuk media seperti teks, gambar, tombol dan masih banyak lagi opsi module lainnya yang bisa kamu coba. Jadi jangan lupa untuk bereksplorasi yaaa..

  8. Dan ketika kamu ingin mengedit hasil kerjamu seperti merubah font, menduplikat column dan sebagainya, kamu cukup menyorotnya maka akan keluar menu setting atau kamu bisa mengklik ikon setting langsung untuk mengedit hasil kerjamu.

Penutup

Nah itu tadi langkah-langkah yang perlu kamu lakukan untuk membuat website pribadi dengan wordpress dan divi builder, tapi bukan hanya untuk pribadi sob.. kamu juga bisa membuat website untuk sekolah, organisasi, perusahaan dan masih banyak lagi dengan menggunakan wordpress dan divi builder. 

Selamat mencoba ..

Apakah artikel ini membantu, Sob?

Berikan rating buat artikel ini!

Rata-rata rating 5 / 5. Dari total vote 1

Pertamax, Sob! Jadilah pertama yang memberi vote artikel ini!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?