Beaver Builder vs Divi 2022

Diterbitkan: 2017-03-06
Beaver Builder vs Divi 2022

kelebihan

Pro pembuat berang-berang

Antarmuka yang sederhana dan ramah pengguna. Tata letak, baris, dan modul semuanya dimuat dengan cepat. Kualitas templat halaman arahan dan templat halaman konten tinggi. Setiap bagian dari tata letak Anda dapat disimpan untuk digunakan nanti.

Divi Pro

Termasuk editor halaman frontend dan backend serbaguna. Pustaka besar tata letak dan paket tata letak pra-dibuat. Ribuan opsi penyesuaian tersedia dalam Divi Builder. Keanggotaan Elegant Themes menawarkan nilai uang yang luar biasa.

Kontra

Kontra Pembangun Berang-berang

Biayanya jauh lebih mahal untuk mendapatkan akses ke Beaver Builder Theme. Modul konten tidak bergaya seperti Divi Builder. Tata letak yang dibuat sebelumnya terlihat bagus, tetapi tidak banyak yang bisa dipilih.

Divi Kontra

Perlu sedikit lebih lama untuk mempelajari cara kerja Divi Builder. Divi membutuhkan lebih banyak sumber daya untuk berjalan secara efisien. Tidak secepat Beaver Builder.

Ringkasan

Beaver Builder dan Divi adalah dua solusi pembuatan halaman drag-and-drop terbaik di dunia WordPress. Sangat mudah untuk merekomendasikan kedua solusi, namun keanggotaan Tema Elegan umumnya memberikan nilai lebih untuk uang karena produk WordPress premium lainnya yang disertakan dalam paket.

Beaver Builder dan Divi adalah dua solusi pembuatan halaman drag-and-drop terbaik di dunia WordPress. Sangat mudah untuk merekomendasikan kedua solusi, namun keanggotaan Tema Elegan umumnya memberikan nilai lebih untuk uang karena produk WordPress premium lainnya yang disertakan dalam paket.

Apa yang Anda Lihat adalah Apa yang Anda Dapatkan (WYSIWYG) editor telah menjadi bahan pokok dalam perangkat lunak komputasi sejak tahun 1970-an, tetapi di dunia WordPress, kami melihat semakin banyak pemilik situs web beralih ke pembuat halaman seret dan lepas untuk membantu mereka membuat gaya posting blog dan halaman profesional.

Adopsi ini semakin intensif sejak WordPress memperkenalkan editor blok baru bernama Gutenberg di WordPress 5.0 pada tahun 2018. Tentu saja, Editor Klasik masih tersedia bagi mereka yang lebih menyukai editor visual lama.

Editor blok baru gratis untuk digunakan, menawarkan antarmuka yang ramah pengguna dan memiliki banyak blok konten berguna yang tersedia untuk dipilih.

Saya menyukai kesederhanaan editor blok WordPress, tetapi tidak dapat disangkal bahwa ini adalah solusi dasar. Blok kontennya memiliki beberapa opsi penyesuaian dan tidak ada sistem templating bawaan. Ini sangat membatasi apa yang dapat Anda buat.

Jika Anda ingin membawa situs web Anda ke tingkat berikutnya, saya sarankan menggunakan solusi pembuatan halaman drag-and-drop lanjutan seperti Beaver Builder atau Divi.

Plugin WordPress responsif ini memberi Anda kontrol lebih besar atas bagaimana Anda menata posting blog, halaman, dan jenis posting khusus Anda.

Dalam artikel ini, saya ingin menunjukkan kepada Anda bagaimana plugin pembuatan halaman ini dibandingkan untuk membantu Anda melihat mana yang terbaik untuk Anda dan proyek Anda.

Versi ringan Beaver Builder tersedia di WordPress.org, tetapi karena versi gratisnya tidak memiliki banyak fitur, artikel ini akan berfokus pada versi lengkap Beaver Builder.

Antarmuka Pembuat Berang-berang

Beaver Builder adalah editor frontend yang dapat diluncurkan dari beberapa area berbeda di WordPress.

Saat Anda membuat posting blog baru, halaman, atau jenis posting khusus dalam editor blok WordPress, Anda akan melihat opsi untuk "Luncurkan Beaver Builder" atau "Gunakan Editor Standar".

Luncurkan Beaver Builder

Tombol 'Luncurkan Beaver Builder' tidak secara otomatis ditampilkan di editor Gutenberg. Itu hanya muncul ketika Anda menambahkan blok Beaver Builder ke halaman Anda.

Jika blok Beaver Builder tidak tersedia, periksa halaman pengaturan Beaver Builder untuk memastikan bahwa jenis posting yang sesuai diaktifkan.

Blok Pembangun Berang-berang

Beaver Builder juga dapat diluncurkan dari Editor Klasik dan halaman daftar utama posting, halaman, dan jenis posting khusus.

Saat masuk, Anda juga akan melihat opsi untuk memodifikasi halaman di bilah admin WordPress.

Luncurkan Beaver Builder Dari Bilah Admin WordPress

Saat Beaver Builder dimuat, Anda akan melihat menu di sisi kanan yang menampilkan modul yang tersedia. Tab untuk baris, templat, dan tata letak yang disimpan juga ditampilkan di sini.

Mengklik simbol X di atas akan menutup menu, tetapi Anda dapat memuat ulang menu dengan mengklik simbol + yang sekarang ditampilkan.

Antarmuka Pembuat Berang-berang

Di sisi kanan atas halaman, Anda akan melihat pengingat bahwa halaman Anda telah diedit dan memiliki perubahan yang belum dipublikasikan. Jika Anda mengklik tombol Selesai, opsi akan ditampilkan untuk membiarkan Anda membuang tata letak, menyimpan draf, atau menerbitkan tata letak Anda.

Tombol Hemat Beaver Builder

Sisi kiri atas halaman menunjukkan posting, halaman, atau jenis posting khusus yang Anda edit. Mengkliknya akan memuat menu alat Beaver Builder.

Ada banyak pengaturan dan fitur yang tersimpan di menu ini.

Dari sini, Anda dapat memublikasikan tata letak, menyimpan tata letak sebagai template, menduplikasi tata letak, melihat semua revisi, memeriksa riwayat edit, dan banyak lagi.

Pengaturan global dan pengaturan Javascript dan CSS dapat diakses dari menu ini juga, dan bagian bawah menu menampilkan pintasan ke area admin WordPress dan halaman dukungan.

Alat Pembuat Berang-berang

Di sebelah kanan menu alat adalah bel notifikasi yang menampilkan pembaruan plugin dan posting terbaru dari blog Beaver Builder.

Pemberitahuan Pembuat Berang-berang

Untuk menambahkan modul atau baris baru ke dalam tata letak Anda, Anda cukup menarik dan melepasnya ke area kanvas utama.

Beberapa pengaturan kolom yang telah dikonfigurasi sebelumnya tersedia untuk baris bersama dengan tata letak kolom yang disimpan, baris yang disimpan, dan baris yang telah dibuat sebelumnya.

Kolom Pembuat Berang-berang

Setelah Anda menambahkan baris baru, garis besar struktur ditampilkan di halaman Anda. Anda dapat menarik dan melepas modul konten ke salah satu kotak ini.

Garis Besar Baris dan Kolom

Di sisi kiri atas baris dan modul, Anda akan melihat opsi untuk memindahkan elemen ke bagian lain dari tata letak Anda. Baris atau modul yang dimaksud juga dapat diduplikasi atau dihapus dari sini.

Baris dan kolom memiliki tombol pengaturan dan tombol tindakan yang memungkinkan Anda mengatur ulang lebar baris dan kolom.

Lebar, warna, latar belakang, batas, dan lainnya, dapat disesuaikan di tab gaya di kotak pengaturan. Selain margin dan padding, tab lanjutan memungkinkan Anda membatasi visibilitas ke pengguna yang masuk dan menyesuaikan titik henti sementara untuk pengguna seluler.

Pengaturan Baris Beaver Builder

Dibutuhkan sedikit waktu untuk membiasakan diri dengan pembuat halaman WordPress apa pun, namun Beaver Builder tidak diragukan lagi merupakan salah satu solusi termudah untuk diambil. Ini juga salah satu yang tercepat, dengan perubahan yang Anda buat memuat hampir seketika.

Beaver Builder memungkinkan Anda untuk menata setiap aspek tata letak Anda, tetapi seperti yang akan Anda lihat, Divi menawarkan lebih banyak opsi penyesuaian saat membuat tata letak.

Antarmuka Pembuat Divi

Tema Elegan menggunakan kata Divi untuk menggambarkan tema WordPress populer dan pembuat halaman seret dan lepas.

Hal ini menyebabkan sedikit kebingungan di antara mereka yang baru mengenal Tema Elegan, itulah sebabnya mereka terkadang membedakan produk dengan menyebut desain "Tema Divi" dan pembuat halaman "Pembuat Divi".

Untuk saat ini, saya ingin fokus pada Divi Builder. Pembuat halaman ini dimasukkan ke dalam Tema Divi tetapi juga tersedia sebagai plugin WordPress mandiri bagi mereka yang ingin menggunakannya dengan tema WordPress lainnya.

Setelah Divi Builder diaktifkan, Anda akan melihat opsi untuk "Gunakan Divi Builder" ketika Anda menambahkan posting baru, halaman, atau jenis posting khusus.

Ini akan meluncurkan pembuat visual frontend, tetapi editor backend yang disebut Legacy Builder juga akan tersedia.

Bangun Tata Letak Anda Menggunakan Divi

Anda dapat beralih ke Divi Builder kapan saja dari editor blok WordPress default.

Gunakan Tombol Divi Builder

Divi Builder juga dapat diluncurkan dari halaman daftar utama posting, halaman, dan jenis posting khusus.

Seperti Beaver Builder, jika Anda masuk, Anda akan melihat opsi untuk mengaktifkan Divi Builder dari bilah admin WordPress.

Aktifkan Pembuat Visual

Tema Elegan juga memiliki Blok Tata Letak Divi.

Blok ini memungkinkan Anda untuk memasukkan tata letak Divi apa pun langsung ke tata letak yang telah Anda buat dengan editor blok WordPress default.

Blok Tata Letak Divi

Saat pertama kali meluncurkan Divi Builder, Anda akan ditanya apakah Anda ingin membuat tata letak dari awal, memilih tata letak yang sudah jadi, atau mengkloning halaman lain yang sudah Anda buat.

Layar Pemilihan Divi Builder

Jika Anda memulai dari awal, Divi Builder akan memuat kanvas kosong Anda dan menampilkan kotak untuk menyisipkan baris baru.

Ada 20 baris yang tersedia untuk dipilih, dan masing-masing memiliki struktur kolom yang berbeda.

Sisipkan Baris Baru di Divi

Setelah Anda memasukkan baris, Divi Builder meminta Anda untuk memilih modul untuk ditambahkan ke halaman Anda.

Memasukkan Modul Baru di Divi

Divi Builder kemudian memuat kotak pengaturan untuk modul yang Anda pilih.

Pengaturan Tombol

Jika Anda baru mengenal Divi Builder, saya sarankan untuk membiasakan diri Anda dengan cara kerja editor dengan memilih tata letak yang sudah jadi, karena ini memberi Anda sesuatu untuk dimainkan.

Pengguna berpengalaman mungkin lebih suka memulai dengan kanvas kosong, tetapi perlu diketahui bahwa menu utama tidak dimuat secara otomatis saat Anda memilih opsi ini.

Untuk memuat menu utama, klik tombol dengan tiga titik horizontal di bagian bawah halaman.

Menu Utama Divi Builder

Pilihan menu utama dibagi menjadi tiga kolom.

Anda dapat memuat pengaturan pembuat melalui ikon tiga titik vertikal di sisi kiri menu.

Tiga mode tampilan yang berbeda dapat ditambahkan ke menu Anda dari sini: mode hover, mode klik, dan mode grid. Mode ini mengubah cara Anda berinteraksi dengan tata letak dan membuat perubahan. Misalnya, dalam mode hover, hanya dengan mengarahkan kursor ke bagian halaman Anda akan menyorot modul, kolom, baris, dan bagian, dan Anda kemudian dapat membuat modifikasi.

Pengaturan lain di kotak pengaturan pembuat mencakup mode tampilan default, interval status riwayat, dan alur pembuatan halaman.

Pengaturan Pembuat Visual

Jika Anda telah membuat tata letak yang rumit, mungkin ada situasi di mana bagian halaman yang salah disorot. Misalnya, Anda mungkin ingin memindahkan kolom, tetapi Anda tidak sengaja memilih baris tempatnya.

Salah satu cara untuk mengatasi ini adalah dengan menggunakan mode tampilan wireframe. Ini menghilangkan elemen desain yang tidak perlu dari tampilan Anda untuk membantu Anda melihat struktur halaman dengan lebih mudah. Ini sangat berguna saat memindahkan berbagai hal dalam tata letak yang kompleks.

Sisi kiri menu juga memiliki opsi untuk memungkinkan Anda melihat desain dalam tampilan desktop, tablet, dan seluler.

Tampilan Wireframe Divi Builder

Ada tujuh opsi di menu tengah. Tombol X di tengah menutup menu.

Di sebelah kiri, Anda dapat memuat tata letak dari pustaka, menyimpan tata letak Anda saat ini, dan menghapus tata letak Anda. Di sebelah kanan, Anda dapat melihat pengaturan halaman, riwayat pengeditan, dan portabilitas.

Kotak pengaturan posting/halaman memungkinkan Anda untuk mengubah judul, kutipan, gambar unggulan, dan kategori. Sejumlah pengaturan desain juga tersedia di sini, seperti spasi, palet warna, CSS khusus, dan visibilitas.

Kotak riwayat pengeditan memungkinkan Anda dengan mudah membatalkan dan mengulang perubahan terbaru dan melihat riwayat lengkap semua perubahan yang telah Anda buat.

Tata letak dapat diekspor dan diimpor dalam format JSON melalui kotak pengaturan portabilitas. Ini berguna untuk mentransfer tata letak ke situs web lain.

Riwayat Pengeditan Pembuat Divi

Tata letak Anda dapat disimpan dan dipublikasikan di sisi kanan halaman.

Video tutorial dan pintasan keyboard juga dapat ditampilkan melalui kotak Divi Helper di area ini. Ada juga fitur pencarian yang membantu Anda menemukan fitur dan dokumentasi.

Sisi Kanan Menu Utama

Antarmuka pengguna untuk Beaver Builder dan Divi Builder bekerja secara berbeda, namun ketika harus menyesuaikan baris dan kolom, mereka sebenarnya bekerja dengan cara yang sama.

Kedua solusi menampilkan pengaturan di sudut kiri atas dan memungkinkan Anda memindahkan, menduplikasi, dan menyesuaikan baris dan kolom. Namun, Divi memiliki lebih banyak opsi penyesuaian.

Contoh Baris dan Kolom di Divi Builder

Divi Builder memiliki elemen di atas baris, yang disebut bagian.

Bagian dapat berisi beberapa baris, dan setiap baris dapat berisi beberapa kolom. Ini memberi Anda sedikit fleksibilitas ekstra dengan cara Anda membuat halaman.

Sisipkan Bagian di Divi Builder

Di versi Divi Builder sebelumnya, tata letak dibuat langsung dari editor WordPress, namun pembuat visual frontend sekarang menjadi cara standar untuk membuat tata letak dengan Divi.

Untungnya, editor lama masih tersedia di Divi Builder.

Untuk mengaktifkan Legacy Builder, pertama-tama Anda harus pergi ke bagian lanjutan dari area opsi plugin Divi, menonaktifkan pengalaman Divi Builder terbaru dan mengaktifkan Editor Klasik.

Mengaktifkan Pembuat Warisan

Antarmuka pengguna Legacy Builder terlihat mirip dengan mode tampilan gambar rangka yang tersedia di editor visual.

Meskipun tidak memungkinkan Anda untuk melihat pratinjau perubahan yang Anda buat secara real-time, saya suka seberapa cepat dan efisiennya. Semuanya dimuat sedikit lebih cepat daripada di editor frontend, dan lebih mudah untuk melihat struktur halaman Anda.

Antarmuka Legacy Divi Builder

Beaver Builder memuat semuanya sedikit lebih cepat daripada Divi Builder, dan antarmuka penggunanya lebih mudah diambil, namun Divi Builder menawarkan lebih banyak pengaturan penyesuaian dan fitur tambahan yang tidak ada di Beaver Builder.

Dimasukkannya mode wireframe dan Legacy Builder bisa dibilang membuat Divi Builder menjadi solusi yang lebih fleksibel juga.

Untuk tampilan yang lebih komprehensif tentang cara kerja Divi Builder, silakan lihat ulasan lengkap kami tentang Divi Builder.

Tata Letak Pra-Made Beaver Builder

Saya penggemar berat tata letak pra-dibuat karena sangat mengurangi waktu yang diperlukan untuk membuat konten yang bergaya. Mereka juga membantu Anda memahami cara membuat tata letak tingkat lanjut.

Beaver Builder tidak menawarkan tata letak pra-dibuat sebanyak Divi, tetapi kualitas setiap template sama tingginya.

Templat halaman arahan dan templat halaman konten tersedia di tab templat menu konten utama di samping templat tersimpan yang Anda miliki.

Templat halaman arahan adalah templat halaman penuh yang lengkap. Sebanyak 15 templat halaman arahan tersedia bersama dengan templat halaman kanvas kosong.

Ada template untuk usaha kecil, gym, pengacara, musisi, fotografer, restoran, eBook, dan banyak lagi.

Memilih Template Halaman Arahan

Saat Anda memilih templat halaman arahan, Anda akan ditanya apakah Anda ingin mengganti tata letak yang ada atau menambahkannya ke yang sudah Anda miliki.

Tambahkan atau Ganti Tata Letak

Tata letak yang dibuat sebelumnya dimasukkan ke dalam tata letak Anda dalam hitungan detik.

Setelah ditambahkan, Anda dapat menyesuaikannya sesuai keinginan dan menyimpannya sebagai templat khusus.

Templat Halaman Arahan yang Disisipkan

Templat halaman konten adalah templat universal untuk bagian halaman yang cocok untuk semua jenis situs web.

25 templat halaman konten tersedia. Ada tata letak untuk membantu Anda menyisipkan tentang area, info tim, layanan, formulir kontak, tabel harga, formulir pendaftaran, dan banyak lagi.

Templat Halaman Konten

Beaver Builder juga menawarkan lusinan baris yang sudah dibuat sebelumnya. Tata letak ini dapat dengan mudah dimasukkan ke bagian mana pun dari halaman Anda.

Anda akan menemukannya di bawah tab baris menu konten utama.

Baris Pra-Dibangun

Jika Anda menggunakan sistem templating Beaver Builder, Anda dapat sangat mengurangi waktu yang diperlukan untuk membuat tata letak baru.

Tata letak dapat disimpan kapan saja dan digunakan kembali sebanyak yang Anda inginkan.

Simpan Tata Letak Anda

Semua template yang disimpan dapat dikelola dari menu admin Beaver Builder utama dan diedit nanti jika diperlukan.

Anda dapat menyimpan template, baris, kolom, dan modul, dan setiap tata letak yang disimpan dapat ditetapkan ke kategori.

Menu Admin Pembuat Berang-berang

Beaver Builder melakukan pekerjaan luar biasa dalam mengintegrasikan tata letak yang dibuat sebelumnya ke dalam antarmuka pengguna mereka. Tata letak dapat dimasukkan dalam hitungan detik dan penyesuaian dapat disimpan dan digunakan berulang kali.

Tata Letak Divi yang Dibuat Sebelumnya

Seperti Beaver Builder, Divi menawarkan kepada pengguna berbagai macam tata letak yang telah dibuat sebelumnya.

Lebih dari 1.100 paket tata letak tersedia untuk dipilih.

150 dari tata letak ini adalah paket tata letak yang mencakup desain untuk sejumlah area di situs web Anda seperti halaman tentang, blog, halaman arahan, dan galeri Anda.

Seperti disebutkan sebelumnya, saat Anda meluncurkan Divi Builder di halaman baru, salah satu opsi yang tersedia adalah memilih tata letak yang sudah jadi.

Layar Pemilihan Divi Builder

Perpustakaan Divi juga dapat dimuat dari menu utama.

Muat Dari Perpustakaan

Divi Library memungkinkan Anda memasukkan tata letak yang sudah dibuat sebelumnya, tata letak yang disimpan, dan seluruh halaman.

Anda dapat mempersempit pencarian Anda untuk tata letak yang sesuai dengan menggunakan kotak pencarian atau memilih salah satu dari 13 kategori tata letak yang ditetapkan.

Pastikan untuk menyimpan tata letak Anda saat ini sebelum memasukkan tata letak yang telah dibuat sebelumnya, karena Divi Builder akan menimpanya.

Paket Tata Letak Divi Builder

Paket tata letak menyoroti semua tata letak yang disertakan dalam paket, namun saya sangat menyarankan mengklik tombol "Lihat Demo Langsung" untuk melihat dengan tepat bagaimana tampilan situs web Anda jika Anda memilih desain.

Untuk membantu mengilustrasikan hal ini, lihat area demo untuk desain Divi Web Freelancer yang ditunjukkan pada tangkapan layar di bawah.

Desain Situs Web Freelancer

Bergantung pada pengaturan hosting Anda, Divi Builder dapat memakan waktu hingga satu menit untuk mengimpor semua tata letak dalam paket tata letak.

Setelah Anda memasukkan tata letak ke halaman Anda, Anda dapat menyesuaikannya dan menjadikannya milik Anda sendiri dengan mengubah warna, menambahkan modul, dan menghapus bagian yang tidak relevan bagi Anda.

Memodifikasi Paket Tata Letak Saya

Tata letak dapat disimpan ke Perpustakaan Divi kapan saja dari menu utama Divi.

Anda dapat memberi nama setiap tata letak dan mengelompokkannya ke dalam kategori.

Menyimpan Tata Letak ke Perpustakaan Divi

Menu admin Divi tertaut ke halaman opsi plugin utama, Divi Theme Builder, Divi Library, dan beberapa halaman pengaturan lainnya (yang akan kita bahas nanti).

Menu Admin Pembuat Divi

Divi Theme Builder adalah alat luar biasa yang memungkinkan Anda membuat templat halaman khusus. Anda kemudian dapat menetapkan template untuk posting, halaman, dan jenis posting kustom.

Untuk setiap template, Anda dapat menetapkan tata letak ke header, body, dan footer. Anda kemudian dapat menentukan dengan tepat area mana dari situs web Anda template ini harus digunakan.

Misalnya, Anda dapat membuat desain unik untuk blog Anda, tetapi mengecualikannya dari kategori posting tertentu. Anda juga dapat membuat template unik untuk halaman hasil pencarian, halaman 404, arsip, halaman beranda, dan lainnya.

Tambahkan Template Baru

Semua tata letak yang disimpan dapat dilihat dari halaman "Perpustakaan Divi" yang ditautkan di menu admin utama Divi.

Tata letak dapat diimpor dan diekspor dari halaman ini. Anda juga dapat mengelola kategori tata letak Anda dari sini.

Tata Letak Tersimpan Divi Builder

Saat Anda mengklik untuk mengedit tata letak dari halaman utama Divi Library, Anda akan dibawa ke gambaran umum desain Anda dalam mode tampilan wireframe.

Mode ini berguna untuk menyesuaikan struktur tata letak Anda, tetapi jika Anda ingin membuat perubahan yang lebih spesifik, Anda dapat beralih ke tampilan desktop, tampilan tablet, atau tampilan ponsel. Melakukan ini memungkinkan Anda mengubah tata letak yang disimpan menggunakan editor visual.

Jika mau, Anda dapat meluncurkan editor visual frontend biasa dan membuat penyesuaian pada halaman itu sendiri.

Mengedit Tata Letak Tersimpan di Divi

Berdampingan, saya tidak percaya kualitas tata letak pra-dibuat Divi Builder lebih baik daripada desain yang tersedia di Beaver Builder, namun seluruh pengaturan di Divi Builder jauh lebih baik.

Paket tata letak Divi Builder memberi Anda hingga selusin templat untuk membantu Anda membangun situs web yang lengkap, sementara Beaver Builder hanya menawarkan tata letak dan tata letak satu halaman untuk bagian tertentu dari halaman Anda.

Ada lebih banyak pilihan di Divi Builder juga, dengan plugin yang menawarkan 950 templat halaman arahan terhadap 15 Beaver Builder. Banyak pilihan tata letak pihak ketiga juga tersedia untuk Divi.

Penting untuk dicatat, bagaimanapun, bahwa Beaver Builder cenderung memasukkan tata letak ke halaman Anda sedikit lebih cepat daripada Divi Builder.

Lihat halaman Tata Letak Divi untuk melihat tata letak siap pakai apa yang tersedia dengan Divi Builder.

Modul Konten Pembuat Beaver

Sebanyak 29 modul tersedia di Beaver Builder. Modul dibagi menjadi enam kategori: Basic, Media, Actions, Layout, Info, dan Posts.

Ada beragam modul yang bagus untuk menambahkan konten yang kaya, menyesuaikan tata letak Anda, dan menarik konten dari blog Anda.

Daftar Modul Pembuat Berang-berang

Salah satu modul dalam kategori tata letak adalah modul bilah sisi, yang memungkinkan Anda memasukkan widget WordPress. Ini membuka banyak kemungkinan untuk mengintegrasikan fungsionalitas ke dalam tata letak Anda dari plugin WordPress lainnya.

Widget WordPress di Beaver Builder

Ketika sebuah modul telah diseret dan dijatuhkan ke area kanvas Anda, kotak pengaturannya akan muncul.

Anda akan menemukan pengaturan umum di semua modul untuk gaya, spasi, visibilitas, animasi, dan lainnya, namun setiap modul memiliki pengaturan unik untuk memungkinkan Anda mengubah apa yang ditampilkan.

Misalnya pada modul peta terdapat kolom untuk memasukkan alamat peta, tinggi peta, dan atribut judul peta.

Modul Peta

Beaver Builder tidak memiliki koleksi modul konten terbesar, dan tidak menawarkan opsi penyesuaian sebanyak Divi.

Saya percaya, bagaimanapun, bahwa Beaver Builder memiliki semua yang Anda butuhkan untuk membuat tata letak yang indah, karena fungsionalitas yang hilang dapat dimasukkan ke dalam tata letak melalui widget WordPress.

Modul Konten Pembuat Divi

38 modul konten tersedia untuk dipilih di Divi Builder.

Di samping modul penting seperti gambar, video, portofolio, dan testimonial, ada modul yang berguna untuk menambahkan penghitung batang, uraian, penggeser, dan ajakan bertindak.

Divi Builder juga menambahkan jenis pos kustom baru untuk proyek.

Seperti Beaver Builder, Divi memiliki modul bilah sisi sehingga Anda dapat mengintegrasikan widget WordPress ke dalam tata letak Anda.

Modul Konten Pembuat Divi

Divi Builder menggunakan sistem kode warna untuk membantu Anda membuat tata letak yang bergaya.

Bagian berwarna biru, baris berwarna hijau, dan modul berwarna abu-abu gelap (hampir hitam).

Anda dapat menambahkan modul baru dengan mengarahkan kursor ke kolom dan mengklik tombol “Tambah Modul Baru”.

Menambahkan Modul Baru

Seperti yang saya tunjukkan sebelumnya, ketika Anda memilih modul, kotak pengaturan modul akan muncul secara otomatis sehingga Anda dapat memasukkan nilai dan menyesuaikan gaya.

Penyesuaian apa pun yang Anda buat dapat disimpan ke Perpustakaan Divi. Ini dapat menghemat banyak waktu Anda saat membuat halaman.

Misalnya, Anda dapat memodifikasi modul peta sehingga menampilkan peta alamat perusahaan Anda. Anda kemudian dapat dengan mudah menyimpan peta dan memasukkannya ke halaman tentang, formulir kontak, posting blog, dan banyak lagi.

Masukkan Modul Tersimpan

Divi Builder menawarkan lebih banyak opsi gaya dan penyesuaian daripada Beaver Builder dan memiliki sembilan modul konten tambahan, tetapi saya tidak percaya siapa pun akan merasa dibatasi dengan apa yang tersedia di salah satu plugin WordPress, terutama karena widget WordPress dapat dimasukkan ke dalam tata letak menggunakan modul bilah sisi.

Mengonfigurasi Beaver Builder

Kotak pengaturan global dapat dimuat dari menu alat dalam antarmuka pengguna Beaver Builder.

Ini memungkinkan Anda untuk mengaktifkan dan menonaktifkan judul halaman dan margin serta padding baris, kolom, dan modul. Tata letak responsif juga dapat disesuaikan dari area ini, dan ada kotak untuk menyisipkan kode CSS dan Javascript.

Pengaturan Global Beaver Builder

Halaman pengaturan Beaver Builder utama dibagi menjadi beberapa bagian.

Untuk menerima pembaruan plugin otomatis, Anda harus memasukkan kunci lisensi Anda di bagian lisensi. Modul dan jenis posting dapat diaktifkan dan dinonaktifkan di bagian berikutnya.

Pengaturan Jenis Posting Beaver Builder

Akses ke sistem template dapat disesuaikan di bagian selanjutnya. Anda dapat mengaktifkan template inti, template pengguna, atau semua template. Template juga dapat dinonaktifkan.

Area pengaturan akses pengguna memungkinkan Anda menentukan grup pengguna WordPress apa yang dapat menggunakan Beaver Builder. Izin dibagi menjadi lima area berbeda seperti akses ke builder dan menu admin Beaver Builder.

Halaman pengaturan umum juga memungkinkan Anda mengaktifkan dan menonaktifkan kumpulan ikon, merek plugin, merek tema, dan pengaturan bantuan. Caching dan debugging tersedia di bagian alat.

Pengaturan Akses Pengguna Beaver Builder

Saya sarankan untuk memeriksa halaman pengaturan Beaver Builder setelah menginstal Beaver Builder, tetapi sebagian besar penyesuaian yang akan Anda lakukan terjadi di dalam antarmuka Beaver Builder utama.

Mengonfigurasi Divi Builder

Seperti Beaver Builder, sebagian besar waktu Anda akan dihabiskan untuk menyesuaikan tata letak dalam editor Divi Builder itu sendiri, tetapi ada beberapa pengaturan penting yang dapat ditemukan dari menu utama admin Divi.

Halaman opsi plugin utama memiliki tab untuk memasukkan nama pengguna Tema Elegan dan kunci API Anda. Anda harus menyelesaikan ini untuk menerima pembaruan plugin otomatis.

Di tab berikutnya, Anda dapat memasukkan kunci Google API Anda. Ini diperlukan jika Anda ingin menggunakan modul peta. Google Font dapat dinonaktifkan dari halaman ini juga.

Tab berikutnya memungkinkan Anda untuk mengaktifkan dan menonaktifkan Divi Builder untuk jenis posting WordPress tertentu. Ini berguna jika Anda ingin membatasi akses ke Divi Builder untuk jenis posting tertentu seperti galeri Anda.

Opsi Integrasi Jenis Posting

Di tab lanjutan, Anda dapat mengaktifkan dan menonaktifkan minifikasi CSS dan Javascript. Ini juga tempat Anda dapat mengaktifkan editor Legacy Builder.

Opsi Pembuat Divi Tingkat Lanjut

Divi Builder memberi Anda kendali penuh atas apa yang dapat dan tidak dapat dilakukan oleh setiap grup pengguna di situs web Anda.

Sementara Beaver Builder memungkinkan Anda membatasi akses ke beberapa area utama, Divi Builder memungkinkan Anda menentukan dengan tepat fitur apa yang dapat diakses pengguna.

Misalnya, Anda dapat menghentikan pengguna dari memuat tata letak atau menonaktifkan fitur di dalam Divi Builder.

Editor Peran Divi

Pusat dukungan Divi menyediakan laporan tentang sistem Anda. Ini dapat membantu Anda mendiagnosis masalah apa pun dengan pengaturan hosting Anda.

Misalnya, untuk situs web WordPress pengujian saya, laporan menunjukkan bahwa instalasi WordPress saya memiliki sumber daya yang terbatas.

Akses jarak jauh juga tersedia di halaman ini. Ini dapat membantu tim dukungan Tema Elegan menyelesaikan masalah apa pun yang Anda miliki dengan Divi Builder.

Pusat Bantuan & Dukungan Divi Builder

Pusat dukungan juga memiliki tautan ke tutorial video yang berguna, dan ada mode aman yang menonaktifkan fitur yang dapat menyebabkan masalah dengan plugin dan tema WordPress lainnya.

Kesalahan juga ditampilkan di halaman ini, jika WP_DEBUG_LOG diaktifkan.

Pusat Bantuan & Dukungan Divi Builder

Divi Builder adalah plugin WordPress sederhana untuk diatur, dengan hanya beberapa pengaturan untuk diperiksa setelah instalasi.

Fitur menonjol di area pengaturan adalah Divi Role Editor. Ini adalah sesuatu yang akan dihargai oleh pemilik situs web WordPress besar dengan banyak staf.

Tema Berang-berang Builder

Beaver Builder Theme adalah kerangka kerja WordPress HTML5 dan Bootstrap yang disertakan dalam paket Beaver Builder Pro dan Agency.

Ini adalah desain WordPress minimal yang berfungsi sebagai kanvas kosong untuk membuat desain dengan Beaver Builder. Kait dan filter tersedia dalam tema untuk membantu pengembang memodifikasi desain situs web, dan ini memiliki dukungan hebat untuk WooCommerce.

Mengaktifkan Tema Berang-berang Builder

Semua pengaturan untuk Tema Beaver Builder terdapat di dalam WordPress Customizer.

Gaya dan posisi dapat disesuaikan untuk lusinan area halaman Anda. Ada juga tata letak untuk header, menu navigasi, blog, arsip, posting blog, halaman WooCommerce, dan footer Anda.

Penyesuai Tema Berang-berang Builder

Sementara pada intinya, Beaver Builder tetap menjadi tema WordPress minimal, para pengembang telah bekerja lebih keras untuk menambahkan banyak opsi penyesuaian tambahan.

Ambil logo situs web Anda, misalnya. Anda dapat mengunggah gambar logo biasa, satu untuk perangkat retina, logo fade-in untuk perangkat biasa dan perangkat retina, dan logo lainnya untuk perangkat seluler.

Mengunggah Logo di Tema Beaver Builder

Di banyak tema WordPress lainnya, bagian desain yang berbeda seperti header, sidebar, dan footer dapat menghentikan Beaver Builder menampilkan tata letak dengan benar. Inilah sebabnya mengapa banyak pengguna Beaver Builder telah beralih ke Beaver Builder Theme.

Ini adalah pilihan yang bagus jika Anda ingin menggunakan tata letak Beaver Builder di situs web Anda.

Tema Divi

Beaver Builder memasarkan desain mereka sebagai tema kerangka kerja untuk Beaver Builder, sementara Elegant Themes memasarkan Divi Theme sebagai tema WordPress all-in-one serbaguna.

Ini menyoroti betapa berpengaruhnya pemasaran karena ada lebih banyak kesamaan antara Tema Beaver Builder dan Tema Divi daripada yang dipikirkan orang.

Pada awalnya, Divi adalah tema WordPress all-in-one, namun sebagian besar keserbagunaan yang terkait dengan Tema Divi kemudian dimigrasikan ke Divi Builder. Ini tidak diragukan lagi adalah hal yang benar untuk dilakukan.

Jadi dengan sebagian besar fungsionalitas yang dimasukkan ke dalam Divi Builder, Divi Theme dapat dianggap sebagai kerangka kerja seperti Beaver Builder Theme. Oleh karena itu, jika Anda memiliki kedua produk tersebut, Anda dapat menggunakan Tema Divi dengan Beaver Builder atau Tema Beaver Builder dengan Divi Builder.

Aktivasi Tema Divi

Setelah Tema Divi diaktifkan, Anda akan melihat beberapa perubahan halus di menu admin Divi.

Ini termasuk halaman opsi plugin yang diganti dengan halaman opsi tema dan tautan ke WordPress Customizer.

Terlepas dari area pengaturan yang diperluas, yang lainnya tetap sama.

Menariknya, jika Divi Theme diaktifkan, plugin Divi Builder akan otomatis dinonaktifkan. Ini diperlukan karena fungsionalitas Divi Builder dibangun langsung ke dalam Tema Divi (dan tema WordPress Ekstra Tema Elegan).

Menu Admin Tema Divi

Anda akan menemukan ratusan opsi berguna dalam Penyesuai WordPress, tersebar di sekitar selusin bagian. Ini dapat digunakan untuk mengontrol area seperti header, footer, dan sidebar Anda.

Area konten utama untuk posting, halaman, dan jenis posting khusus, masih dikendalikan oleh Divi Builder.

Penyesuai Tema WordPress Tema Divi

Ketika datang untuk menyesuaikan desain situs web Anda, saya tidak percaya Tema Divi lebih baik atau lebih buruk daripada Tema Beaver Builder. Ada beberapa area di mana Divi Theme memberi Anda lebih banyak opsi dan beberapa area di mana Beaver Builder Theme memberi lebih banyak.

Pengaturan Tata Letak Tema Divi

Semua opsi plugin Divi Builder telah diintegrasikan ke dalam area opsi Divi Theme yang lebih luas.

Misalnya, pengaturan jenis posting sekarang tersedia di tab pembuat, dan opsi dari halaman pengaturan lanjutan sekarang berada di halaman opsi umum.

Halaman pengaturan umum juga memiliki bidang untuk ikon media sosial, pengguliran, kode CSS khusus, dan banyak lagi.

Opsi Tema Divi Umum

Opsi tambahan juga tersedia untuk pengguna Divi Theme.

Ada area opsi khusus untuk menu navigasi situs web Anda dan halaman tata letak tempat Anda dapat menyatakan fitur mana yang harus diaktifkan pada posting dan halaman.

Ada juga halaman untuk menambahkan spanduk 468x60 piksel dan detail SEO umum tentang situs web Anda.

Opsi Tema Divi Navigasi

Seperti Tema Beaver Builder, Divi Theme adalah tema WordPress minimal yang telah dioptimalkan untuk digunakan dengan Divi Builder.

Saya sangat merekomendasikan menggunakan desain ini jika Anda ingin memanfaatkan berbagai macam tata letak pra-divi yang dibuat sebelumnya.

Biaya Pembangun Berang-berang

Fitur dan fungsionalitas adalah dua faktor yang perlu Anda pertimbangkan saat meninjau Beaver Builder dan Divi, namun Anda juga perlu mempertimbangkan biaya produk ini dan anggaran yang tersedia untuk proyek Anda.

Banyak perusahaan WordPress premium mengenakan biaya lebih untuk menggunakan produk mereka di situs web tambahan. Misalnya, paket tingkat awal dapat mendukung satu situs web, paket menengah dapat mendukung tiga situs web, dan paket lanjutan dapat mendukung sepuluh situs web.

Beaver Builder dan Elegant Themes lebih murah hati, menawarkan dukungan dan pembaruan untuk jumlah situs web yang tidak terbatas.

Sementara artikel ini berfokus terutama pada versi premium Beaver Builder, saya tetap merekomendasikan untuk memeriksa Beaver Builder Lite.

Ini adalah solusi yang baik untuk situs web sederhana dan juga membantu Anda melihat cara kerja antarmuka Beaver Builder.

Harap dicatat, bagaimanapun, bahwa versi gratis Beaver Builder tidak memiliki modul yang berguna seperti formulir kontak, tabel harga, dan peta. There is no access to the Beaver Builder templating system or pre-made layouts either.

Upgrading Beaver Builder Lite

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

Harga Beaver Builder

Beaver Builder menawarkan jaminan uang kembali 30 hari.

Semua anggota Beaver Builder juga menerima diskon 40% setelah satu tahun. Ini menurunkan harga paket Beaver Builder di tahun-tahun berikutnya menjadi $59,40 per tahun, $119,40 per tahun, dan $239,40 per tahun.

Jika Anda tidak yakin tentang aspek apa pun dalam menggunakan Beaver Builder, saya sangat menyarankan untuk memeriksa basis pengetahuan terperinci mereka. Anda juga dapat meminta bantuan melalui dukungan tiket, dan di forum komunitas Beaver Builder, grup Facebook Beaver Builder, dan ruang Beaver Builder Slack.

Area Dukungan Beaver Builder

Biaya Divi

Kebijakan penetapan harga keanggotaan Elegant Themes lebih mudah.

Ada dua paket yang tersedia, dan kedua paket memberi Anda akses penuh ke semua produk Tema Elegan.

Keanggotaan Elegant Themes tahunan berharga $89 per tahun.

Seperti Beaver Builder, Anda dapat terus menggunakan produk seperti Divi Builder setelah keanggotaan Anda kedaluwarsa, namun Anda tidak akan menerima dukungan dan pembaruan jika Anda tidak memperbarui.

Jika Anda berpikir Anda akan memperbarui keanggotaan Anda selama beberapa tahun, Anda mungkin ingin mempertimbangkan untuk mendapatkan paket akses seumur hidup. Dengan biaya satu kali sebesar $249, Anda akan menerima akses, dukungan, dan pembaruan seumur hidup, untuk semua produk Elegant Themes.

Paket Tema Elegan

Elegant Themes juga menawarkan jaminan uang kembali 30 hari untuk semua pelanggan baru.

Untuk membantu Anda memahami produk mereka dengan lebih baik, Elegant Themes telah membuat salah satu area dokumentasi terluas yang pernah saya lihat. Ada ratusan tutorial tertulis dan tutorial video yang menjelaskan cara kerja tema dan plugin WordPress Elegant Themes.

Anggota juga dapat meminta bantuan melalui dukungan tiket, dan ada forum komunitas besar, jaringan Meetup, dan grup Facebook populer juga.

Area Dukungan Tema Elegan

Membandingkan biaya Beaver Builder dan Divi sulit karena mereka memiliki model harga yang sedikit berbeda.

Meskipun lebih terbatas, saya menghargai kenyataan bahwa versi gratis Beaver Builder tersedia, karena Beaver Builder Lite cukup untuk blog dasar dan proyek situs web sederhana.

Namun, saya percaya bahwa versi lengkap Beaver Builder adalah pilihan terbaik untuk sebagian besar pengguna WordPress.

Dengan harga $99, lisensi standar untuk Beaver Builder berharga $10 lebih mahal daripada Elegant Themes, namun pembaruan selanjutnya hanya dikenakan biaya $59,40 per tahun.

Ini adalah diskon besar untuk anggota setia, namun paket seumur hidup Tema Elegan mungkin masih lebih murah bagi banyak pemilik situs web.

Keanggotaan Elegant Themes juga mencakup Divi Theme, di mana Anda harus membayar $199 untuk mendapatkan akses ke Beaver Builder Theme.

Lebih penting lagi, keanggotaan Elegant Themes mencakup lima produk berkualitas tinggi: Divi Theme, Divi Builder, tema majalah WordPress Extra, plugin email opt-in WordPress Bloom, dan plugin media sosial WordPress Monarch.

Karena itu, saya percaya keanggotaan Tema Elegan menawarkan nilai uang yang lebih baik untuk sebagian besar pengguna WordPress.

Pikiran Akhir

Pembuat halaman drag-and-drop dapat membantu pengguna WordPress membuat tata letak situs web yang indah dalam hitungan menit melalui antarmuka yang ramah pengguna.

Dalam artikel perbandingan seperti ini, adalah tanggung jawab saya untuk menunjukkan kekuatan dan kelemahan Beaver Builder dan Divi, namun penting untuk diingat bahwa kedua solusi ini adalah produk yang disempurnakan dan ada banyak kesamaan di antara mereka.

Proses pembuatan baris dan kolom baru serupa di kedua produk, tetapi saya merasa bahwa antarmuka Beaver Builder lebih mudah dipelajari dan juga sedikit lebih cepat.

Divi menawarkan lebih banyak opsi penyesuaian dan lebih banyak tata letak yang dibuat sebelumnya. Dengan lima produk yang disertakan dalam keanggotaan Elegant Themes, menurut saya itu juga menawarkan nilai uang yang lebih baik.

Saya harap Anda menikmati pandangan mendalam kami tentang Beaver Builder dan Divi.

Untuk mempelajari lebih lanjut tentang Beaver Builder, lihat halaman penjualan resmi atau baca ulasan lengkap kami tentang Beaver Builder. Anda juga bisa mendapatkan pemahaman yang lebih baik tentang cara kerja Beaver Builder dengan mengunjungi halaman demo Beaver Builder atau dengan menguji versi gratis plugin.

Anda dapat mempelajari tentang bagaimana Divi di situs web Tema Elegan dan dalam ulasan lengkap kami tentang Divi Builder. Meskipun tidak ada versi gratis Divi Builder yang tersedia, Anda dapat menguji plugin di halaman demo Divi Builder. Ini akan membantu Anda melihat apa yang dapat dilakukan Divi Builder.

Terima kasih sudah membaca.
Kevin