Cara Membuat Halaman / Page Website Menggunakan Divi Builder

0
25
tutorial-divi-harrybudi
tutorial-divi-harrybudi

Divi Builder merupakan salah satu tools yang terdapat pada tema Premium DIVI dari Elegant Theme. Pada kesempatan ini saya akan memberikan tutorial cara membuat halaman – halaman layout pada sebuah website.

Langsung saja, mari kita berasumsi bahwa kita sudah login ke dashboard WordPress Admin (namadomain.com/wp-admin). Pastikan juga teman-teman sudah menginstall Tema Divi dan sudah terupdate ya.

Jika sudah masuk ke dashboard WordPress Admin, pada side bar sebelah kiri arahkan cursor mouse ke Bagian Pages > Add New dan klik pada menu Add New tersebut.

Jika sudah akan muncul halaman berikut:

Saat ini saya akan membuat halaman Home untuk landing page ketika pengunjung mengunjungi halaman website saya pertama kali. Lalu saya ketikkan ‘Home’ pada field “Add title” tersebut.

Jika sudah dilakukan, sekarang masuk ke halaman builder dengan meng-klik tombol “Use Divi Builder”

Jika sudah diklik, maka akan muncul halaman builder di bawah ini.

Ada beberapa pilihan pada menu layout tersebut, Start Building, Browse Layouts, dan Choose Page. Saat ini kita akan mencoba untuk melakukan import layout yang sudah disediakan oleh Divi Builder. Silahkan klik tombol Browser Layouts dan akan muncul banyak pilihan layout yang ditampilkan.

Pilih salah satu Layout tersebut dan jika sudah klik “Use This Layout”

Progress Bar akan muncul ketika tombol sudah diklik dan tunggu sampai proses tersebut selesai.

Kalau proses import sudah berhasil, maka layout yang diimport akan muncul pada editor tersebut. Contohnya ada pada gambar di bawah ini.

Kemudian klik tombol Publish agar halaman dapat segera dipublikasikan.

Setelah klik tombol Publish, maka layout page untuk website kamu sudah tampil di halaman Home. Namun masih ada beberapa proses lagi yang harus dilakukan agar pada saat pengunjung mengunjungi website kamu dan pertama kali langsung masuk ke halaman Home yang kamu buat.

Menentukan Halaman Home Page

Pada side bar sebelah kiri, arahkan cursor ke Menu Settings > Reading dan klik pada Reading

Kemudian muncul pada menu “Your Home Page Display”. Menu ini berfungsi untuk mengarahkan halaman mana yang akan dituju jika ada pengunjung masuk ke website kamu. Karena kita sudah membuat halaman Home, maka kita akan memilih halaman Home untuk landing page nya.

Jangan lupa untuk klik bullets “A static Page” dan pilih Home pada dropdown “Homepage”

Jangan lupa untuk klik Save Changes kalau sudah.

Langkah Menampilkan Menu Pada Website

Setelah itu mari kita membuat menu yang akan ditampilkan pada bagian Header website. Caranya adalah arahkan cursor ke bagian side bar di Appearance > Menus

Jika sudah masuk ke halaman menu, mari kita membuat menu. Akan muncul tampilan seperti di bawah ini:

Mari masukkan nama menu yang ingin kita buat. Nama menu di sini artinya bukan seperti tombol Home, About, Gallery dan sebagainya yang ada pada header. Namun Template untuk mengatur struktur menu.

Saya pakai nama “menu1”, bisa pakai nama apa saja tapi saya sudah biasa menggunakan nama menu1, jika nanti ada perubahan struktur menu bisa membuat lagi dengan nama menu2, dan sebagainya. Jika sudah bisa klik pada tombol “Create Menu”

Jika menu sudah dibuat, lalu akan muncul Atribut pada bagian Pages yang kita buat. Karena kita sudah membuat halaman Home, maka halaman Home tersebut bisa ditaruh di menu. Caranya adalah dengan meng-checklist halaman Home tersebut dan klik tombol “Add to menu” dan jika sudah menu Home sudah muncul di sebelah kanan. Jika sudah semuanya lalu klik tombol “Save Menu”.

Kalau sudah akan seperti gambar berikut:

Selesai. Sekarang halaman home sudah tampil pada website kamu. Lakukan berulang langkah pada pembuatan halaman layout hingga terbentuk beberapa halaman. Jika sudah, masukkan halaman tersebut pada Menu seperti pada langkah “Menampilkan Menu Pada Website”

Sekian dan terima kasih atas perhatian teman-teman semua. Kalau ada pertanyaan atau ada yang bingung, silahkan kontak saya ke me@harrybudi.com ya.

LEAVE A REPLY

Please enter your comment!
Please enter your name here