Cara Membuat Custom Layout Dengan Beaver Builder

51

Apakah kamu sedang ingin membuat layout halaman custom di WordPress? Jika iya, sekarang berada di halaman yang tepat.

Beaver Builder memungkinkan pengguna untuk membuat tata letak halaman sendiri tanpa menggunakan kode sama sekali.

Pada artikel ini, kami akan membahas Beaver Builder dan menunjukkan kepada kamu cara membuat tata letak halaman custom di WordPress menggunakan Beaver Builder.

Alasan Mengapa Harus Membuat Custom Page Layout

Sekarang sudah banyak tema WordPress premium yang hadir dengan tata letak halaman siap pakai untuk berbagai bagian website. Namun, terkadang tata letak bawaan tema masih tidak sesuai dengan kebutuhan pengguna.

Oleh karena itu, kamu masih dapat membuat template halaman custom di WordPress dengan membuat tema anak dan kemudian menambahkan template halaman sendiri. Tetapi untuk melakukan semua itu, kamu memerlukan pengetahuan tentang PHP, HTML, dan CSS.

Jika kamu tidak menguasainya, maka kamu dapat menggunakan plugin Beaver Builder. Ini adalah plugin page builder drag and drop untuk WordPress yang dapat membantu kamu dalam membuat tata letak halaman custom sendiri tanpa menggunakan kode apa pun.

Menyiapkan Plugin Beaver Builder

Pertama kamu harus membeli plugin Beaver Builder. Sebenarnya plugin ini juga tersedia versi gratis tetapi memiliki sedikit fitur, dan untuk yang premium kamu bisa membayarnya mulai dari $99 untuk unlimited website.

Sekarang, kamu harus menginstal dan mengaktifkan plugin Beaver Builder. Untuk detail lebih lanjut, lihat panduan kami tentang cara memasang plugin WordPress.

Setelah di aktivasi, pada menu samping dashboard admin buka halaman Settings > Beaver Builder untuk memasukkan license key.

Halaman lisensi beaver builder

Setelah memasukkan kunci lisensi, kamu sekarang siap untuk membuat tata letak halaman yang di inginkan.

Membuat Custom Page Layout Dengan Beaver Builder

Cukup buat halaman baru di WordPress dengan mengunjungi Pages > Add New. Kamu akan langsung melihat block yang berada di tengah halaman editor.

Halaman page editor

Sekarang klik pada Launch Beaver Builder.

Jika ini adalah pertama kalinya menggunakan Beaver Builder, maka kamu akan melihat popup selamat datang yang menawarkan tur panduan.

Kamu bisa menolaknya dengan mengklik tombol No Thanks button to skip the tour. Karena kami akan memandu kamu melalui berbagai fitur dalam panduan ini.

Setelah itu kamu perlu mengklik tombol Tambah di bagian kanan atas. Kemudian beralih ke tab Template.

Buka pada tab template

Seperti yang terlihat, Beaver Builder hadir dengan beberapa template yang sudah dirancang secara profesional untuk membantu pengguna.

Jangan khawatir, karena nantinya kamu dapat menyesuaikan template sesukanya. Ini hanyalah cara cepat untuk memulai layout.

Pilih grup layout

Bahkan kamu juga di berikan fitur berdasarkan group untuk memilih layout mana yang sesuai dan kamu inginkan. Setelah menemukannya, klik template untuk mulai mengimpor.

Untuk melakukan pengeditan, kamu cukup mengklik icon kunci inggris pada item yang disorot.

Klik ikon kunci inggris

Beaver Builder akan menampilkan popup yang dapat kamu gunakan untuk mengedit seperti teks, warna, background, font, padding, margin, dll.

Kamu juga dapat mengklik item di live preview, kemudian menarik dan melepas untuk memindahkannya di sekitar halaman.

Layout Beaver Builder di dasarkan pada baris. Kamu dapat menarik dan melepas untuk mengatur ulang baris. Bahkan menghapusnya atau menambahkan baris baru.

Cukup klik tombol Tambah di sudut kanan atas dan beralih ke tab Rows, kemudian pilih jumlah kolom yang kamu inginkan di baris tersebut.

Pilih jumlah kolom pada baris

Sekarang untuk menambahkannya kamu hanya perlu seret dan lepas kolom ke pratinjau langsung situs.

Untuk menambahkan item baru ke baris, kamu bisa menggunakan modul atau widget. Jika menggunakan module, ini memungkinkan kamu untuk menambahkan elemen yang paling umum di gunakan seperti tombol, judul, teks, gambar, slide, audio, video, dll.

Caranya cukup pilih item dan seret ke baris yang baru saja kamu tambahkan. Klik pada item tersebut untuk mulai mengeditnya.

Kamu bahkan bisa menyimpan baris atau module untuk digunakan kembali nanti di halaman lain. Klik tombol Save As saat mengedit baris atau module.

Save module beaver builder

Jika sudah merasa puas dengan tampilan halaman, sekarang klik tombol Done untuk menyimpan atau mempublikasikan halaman.

Bahkan kamu juga dapat menggunakan kembali seluruh page layout untuk halaman lain situs WordPress. Cukup buka halaman yang tadi kamu buat dengan Beaver Builder, lalu klik pada logo beaver di sudut kiri atas.

Sekarang akan muncul daftar menu, di mana kamu dapat menyimpan halaman sebagai template, dan dengan cepat membuat halaman duplikat dengan tata letak yang sama.

Klik logo berang-berang untuk menampilkan menu

Kami harap artikel ini membantu kamu membuat tata letak halaman custom di WordPress menggunakan Beaver Builder.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.

Baca Lainnya
Tinggalkan pesanan

Alamat email anda tidak akan disiarkan.