Cara Menggunakan Divi Builder untuk Membangun Situs Kustom | Langkah demi Langkah

Ingin menggunakan plugin Divi Builder untuk membangun tata letak situs web Anda?

Divi adalah salah satu yang paling populer plugin pembangun halaman yang memudahkan Anda untuk membuat dan menyesuaikan tata letak yang indah untuk situs web Anda. Di artikel ini, kami akan memberi tahu Anda cara menggunakan Divi Builder untuk membuat tata letak Anda.

Tapi sebelum itu, mari kita lihat apa itu plugin Divi Builder.

Apa itu Divi Builder?

Plugin Divi Builder adalah pembangun halaman WordPress yang memungkinkan Anda membuat, menyesuaikan, dan mengedit tata letak situs web Anda tanpa menulis satu baris kode pun. Salah satu keuntungan menggunakan pembuat halaman ini adalah memungkinkan Anda membuat desain yang sepenuhnya dikustomisasi dan benar-benar unik.

Selain itu, Anda dapat melihat pratinjau perubahan yang Anda buat saat sedang mengerjakannya. Ini berarti bahwa tidak seperti bekerja dengan editor teks WordPress tradisional, menggunakan Divi tidak melibatkan pengalihan tab secara terus-menerus untuk memeriksa kemajuan Anda. Itu adalah editor WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan) dalam arti sebenarnya.

Divi Builder bekerja sangat baik dengan tema Divi, tetapi bahkan jika Anda tidak
menggunakannya bersama-sama, ini bekerja dengan baik dengan yang lain Tema WordPress pilihan anda.

Ini menawarkan fleksibilitas besar dalam hal teks sebaris dan pengeditan responsif. Anda juga bisa menggunakan 40 elemen situs web, 800+ desain pra-bangun, 100+ paket situs web lengkap, berbagai pembagi bentuk, dan banyak lagi. Plus, Anda bahkan dapat menambahkan kode Anda sendiri jika Anda menginginkan opsi penataan gaya lanjut.

Untuk mempelajari lebih lanjut tentang Divi, baca ulasan terperinci kami di sini.

Dalam langkah-langkah berikut, kami akan menunjukkan kepada Anda cara menggunakan Divi untuk membuat desain Anda.

Langkah 1: Memulai Dengan Divi Builder

Untuk memulai dengan Divi Builder, pertama-tama Anda harus menginstal dan mengaktifkan plugin di situs web Anda. Jika Anda tidak tahu cara melakukannya, baca artikel ini di cara menginstal dan mengaktifkan plugin.

Setelah plugin diinstal dan diaktifkan, Anda dapat mulai menggunakannya untuk membangun tata letak Anda. Mari kita buat halaman baru dengan Divi.

Langkah 2: Membangun Halaman Pertama Anda Dengan Divi Builder

Untuk membangun halaman pertama Anda dengan Divi, buka dasbor WordPress Anda dan klik Halaman »Tambah Baru. Halaman baru sekarang akan muncul di layar Anda dengan Gunakan Divi Builder tombol. Klik tombol ini:

Kemudian klik pada Gunakan Divi Builder tombol:

Ini akan membawa Anda ke layar baru di mana Anda memiliki 3 opsi. Jika Anda ingin membuat desain dari awal tanpa menggunakan tata letak yang sudah dibuat sebelumnya, pilih opsi 1. Jika Anda ingin menggunakan tata letak yang dibuat sebelumnya, pilih opsi ke-2. Dengan memilih opsi ke-2, Anda dapat segera memulai karena semuanya sudah dibangun untuk Anda.

Opsi ke-3 memungkinkan Anda menggunakan kembali desain yang ada.

Anda dapat memilih mana yang menurut Anda merupakan pilihan terbaik untuk Anda.

Langkah 3: Mengimpor Situs Layout / Demo yang Sudah Dibangun

Jika Anda tidak ingin membangun situs web Anda dari awal, Anda dapat memilih tata letak yang sudah dibuat sebelumnya. Untuk itu, pilih saja Pilih Tata Letak Premade pilihan. Ini akan menampilkan perpustakaan tata letak yang sudah dibuat sebelumnya untuk Anda:

Tergantung pada ceruk situs web Anda, Anda mungkin ingin mencari tata letak dalam kategori tertentu. Untuk melakukannya, Anda dapat memilih kategori di sebelah kiri atau menggunakan bidang pencarian untuk mencari kategori. Divi akan menampilkan semua tata letak yang sesuai dengan kebutuhan Anda.

Anda kemudian dapat memilih tata letak yang Anda suka. Ini akan menunjukkan kepada Anda pratinjau tata letak dengan 2 opsi berbeda.

Lihat demo langsung. Gunakan tata letak ini

Pilih menu Gunakan tata letak ini pilihan. Ini akan meminta Anda untuk mengautentikasi plugin. Gunakan nama pengguna dan API Anda untuk mengautentikasi:

Setelah itu, Anda dapat mulai menyesuaikan tata letak Anda. Namun, demi tutorial ini, kami akan memilih opsi 1, Mulai Membangun, yang akan memungkinkan kami membangun semuanya dari awal.

Langkah 4: Menambahkan Baris dan Modul Anda

Setelah Anda memilih opsi 1, Anda akan dibawa ke halaman baru di mana Anda dapat memilih jumlah baris yang ingin Anda tambahkan.

Anda akan melihat berbagai opsi di sini. Bergantung pada kebutuhan Anda, pilih baris yang ingin Anda tambahkan ke halaman Anda. Mari kita pilih opsi tiga baris.

Anda sekarang akan melihat popup yang menampilkan semua modul yang dapat ditambahkan. Pilih modul yang Anda inginkan dengan mengkliknya. Ini bisa berupa klip audio, ajakan bertindak, tombol, formulir kontak, dan lainnya.

Anda dapat menggunakan kotak pencarian untuk menemukan modul jika Anda memiliki opsi tertentu dalam pikiran.

Di sini kami telah menambahkan modul teks, gambar, dan tombol dalam tiga baris berbeda. Sekarang halaman kami terlihat seperti ini:

Berikut rekap singkat bagaimana kami melakukan itu:

Untuk menambahkan lebih banyak baris, Anda dapat menggunakan ‘+’ ikon di bawah baris Anda saat ini.

Langkah 5: Menyesuaikan Baris dan Modul

Sekarang setelah baris dan modul ditambahkan, saatnya bagi Anda untuk menyesuaikannya. Pertama, kami akan bekerja pada modul teks.

Untuk mengedit teks, cukup klik dua kali pada modul teks dan klik pada ikon pengaturan. Anda akan melihat jendela sembulan kecil muncul dengan berbagai opsi penyesuaian.

Anda dapat menggunakannya untuk mengetahui bagaimana Anda ingin teks Anda muncul. Anda akan memiliki 3 tab di sini:

Dalam Kandungan tab, Anda dapat mengerjakan teks, menambahkan tautan ke teks Anda, mengubah latar belakang, dan banyak lagi. Dalam Rancangan tab, Anda dapat bekerja pada cara modul Anda muncul.

Di sini Anda dapat bekerja mengubah pos, menambahkan spasi, perbatasan, animasi, dan banyak lagi.

Jika Anda membutuhkan lebih banyak opsi pengaturan, Anda dapat menggunakan Maju tab juga.

Untuk gambar, pilih modul dengan mengkliknya. Sekarang klik pada Pengaturan ikon. Anda akan melihat jendela sembulan baru di layar Anda. Klik ruang gambar dan unggah gambar dari komputer Anda. Anda juga dapat menggunakannya dari Perpustakaan Media Anda.

Setelah gambar ditambahkan, Anda dapat menambahkan tautan ke gambar dengan menggulir ke bawah. Anda juga akan melihat opsi lain, seperti membuka tautan gambar di tab baru, membuka tautan gambar di lightbox, dan lainnya.

Anda juga dapat menambahkan warna latar belakang ke gambar Anda dari tautan yang ada di sebelahnya.

Untuk opsi desain klik pada Rancangan tab. Di sini Anda memiliki opsi untuk menambahkan animasi, spasi, filter, dan banyak lagi. Itu Maju tab memungkinkan Anda menambahkan ID dan Kelas CSS Anda sendiri, serta CSS khusus. Opsi ini untuk pengguna tingkat lanjut yang ingin menambahkan kode mereka sendiri.

Tetapi jika Anda bukan seorang pembuat kode, Anda dapat sepenuhnya melewati tab ini.

Jangan lupa untuk menekan tanda centang hijau untuk menyimpan pengaturan Anda.

Tombol kustomisasi bekerja dengan cara yang sama persis seperti menambahkan teks dan gambar. Cukup pilih modul tombol dengan mengkliknya. Kemudian mulai menyesuaikannya dengan menggunakan opsi yang muncul di jendela sembulan di layar Anda.

Kemudian tekan tanda centang hijau untuk menyimpan pengaturan Anda. Anda dapat melakukan ini untuk modul apa saja yang ingin Anda tambahkan dan sesuaikan.

Langkah 6: Pengaturan Halaman

Sekarang setelah Anda tahu cara menambahkan dan mengubahsuaikan baris dan modul Anda, mari kita lihat cara bekerja pada pengaturan halaman Anda. Untuk mengubah pengaturan halaman, Anda perlu mengklik 3 titik ungu di bagian bawah halaman Anda.

Ini akan memperluas bilah pengaturan dengan beberapa opsi. Klik ikon roda gigi (pengaturan):

Anda akan melihat popup halaman pengaturan dengan 3 tab:

Dalam Kandungan tab, Anda dapat bekerja pada judul halaman, menambahkan gambar unggulan, menambahkan latar belakang ke halaman Anda dan juga melakukan tes split untuk melihat seberapa baik kinerja halaman Anda:

Untuk menambahkan gambar unggulan, klik pada ‘+’ tanda tangani dan tambahkan gambar dari perpustakaan media Anda atau unggah yang baru dari komputer Anda.

Berikutnya adalah Rancangan tab. Di sini Anda dapat bekerja pada skema warna, jarak halaman Anda, dan warna teks Anda. Cukup klik pada opsi yang ingin Anda kerjakan dan lakukan perubahan:

Akhirnya, Anda memiliki Maju tab. Di tab ini, Anda dapat menambahkan CSS khusus, dan mengaktifkan opsi pembuatan file CSS statis. Anda juga dapat memilih bagaimana Anda ingin halaman Anda ditampilkan untuk pengguna Anda.

Setelah perubahan dibuat, klik tanda centang hijau di bawah untuk menyimpan perubahan Anda. Anda juga dapat membatalkan perubahan Anda dengan menggunakan tombol ungu dan mengulang perubahan Anda menggunakan tombol biru di sebelah tanda centang hijau.

Langkah 7: Menyimpan Tata Letak Anda Sendiri untuk Masa Depan

Setelah membuat tata letak sendiri, Anda dapat menyimpannya untuk digunakan di lain waktu. Ini akan disimpan di perpustakaan Divi. Lain kali Anda ingin menggunakan tata letak ini, Anda dapat memilihnya dan menambahkan teks Anda segera.

Untuk menyimpan tata letak Anda, arahkan kursor ke halaman Anda dan klik ikon perpustakaan di dalam bilah pengaturan halaman. Munculan akan muncul tempat Anda dapat menambahkan nama ke tata letak. Anda juga memiliki opsi untuk menambahkan kategori ke dalamnya:

Kemudian klik pada Simpan ke Perpustakaan pilihan. Tata letak Anda sekarang akan disimpan untuk digunakan di masa mendatang. Setelah item ditambahkan ke perpustakaan, item itu akan muncul di Tambah Dari Perpustakaan tab saat menambahkan tata letak, bagian, baris, dan modul Divi baru.

Anda juga dapat menyimpan modul tertentu dengan mengikuti proses yang sama. Pastikan Anda mengarahkan kursor ke elemen untuk menemukan simpan ke perpustakaan tombol.

Langkah 8: Memeriksa Respon Layout Divi

Setelah Anda membuat tata letak, Divi memungkinkan Anda memeriksa tampilannya di berbagai ukuran layar. Untuk memeriksa respons tata letak Anda, klik ikon layar di sisi kiri bawah layar Anda:

Ikon ke-1 menunjukkan kepada Anda tampilan bingkai gambar dari tata letak Anda. Ikon kaca pembesar di sebelahnya memungkinkan Anda memeriksa bagaimana tata letak Anda akan muncul jika pengguna ingin memiliki tampilan zoom-in.

Ikon berikutnya menawarkan tampilan desktop tata letak Anda, diikuti oleh tampilan tablet dan layar ponsel. Anda dapat mengklik pada masing-masing ikon ini untuk melihat apakah tata letak Anda cukup responsif.

Langkah 9: Mempublikasikan Layout Divi Anda

Setelah semuanya siap, dan Anda yakin ingin menerbitkan halaman Anda dengan tata letak yang Anda buat, klik pada Menerbitkan tombol di sudut kanan bawah layar Anda:

Halaman Anda akan ditayangkan segera setelah Anda menekan tombol Menerbitkan tombol.

Begitulah mudahnya menggunakan Divi Builder untuk membuat tata letak Anda.

Kami harap Anda menyukai artikel ini. Jika Anda masih tidak yakin apakah Anda harus menggunakan Divi atau tidak, Anda mungkin mencari pembuat halaman lain untuk situs WordPress Anda.

Lihat ini ulasan tentang plugin Beaver Builder yang merupakan plugin pembangun halaman populer lainnya.

Sumber Artikel