Cara menggunakan modul Flip Divi Builder

bahkan Blair Jersyer | Divi

Sebelum Anda dapat menambahkan modul Toggle ke halaman Anda, Anda harus terlebih dahulu masuk ke Divi Builder. sekali Tema Divi diinstal pada Anda situs jaringan, Anda akan melihat tombol Gunakan Divi Builder di atas editor posting setiap kali Anda membuat halaman baru. Klik tombol ini untuk mengaktifkan Divi Builder dan mengakses semua modul Divi Builder. Kemudian klik tombolnya Gunakan Visual Builder untuk memulai generator dalam mode visual. Anda juga dapat mengklik tombol tersebut Aktifkan Visual Builder saat Anda menelusuri situs jaringan di latar depan jika Anda masuk ke dasbor WordPress Anda.

akses ke pembangun visual

Setelah Anda berada di Visual Builder, Anda dapat mengklik tombol plus abu-abu untuk menambahkan modul baru ke halaman Anda. Modul baru hanya dapat ditambahkan di dalam baris. Jika Anda memulai halaman baru, ingatlah untuk menambahkan baris ke halaman Anda terlebih dahulu.

flip flop divi module.png

Temukan modul sakelar dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik "toggle" lalu tekan enter untuk menemukan dan secara otomatis menambahkan modul toggle! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Contoh kasus penggunaan: halaman FAQ

Halaman FAQ adalah salah satu tempat terbaik untuk menggabungkan informasi menggunakan modul Toggle. Ini memungkinkan pengguna untuk dengan cepat mengidentifikasi pertanyaan yang mereka cari tanpa harus membaca banyak teks. Untuk contoh ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan modul Toggle untuk mendesain bagian FAQ modern untuk halaman FAQ Anda dalam hitungan menit.
halaman sampel FAQ.jpg

Menggunakan Visual Builder, tambahkan bagian baru dengan baris lebar penuh (1 kolom). Kemudian tambahkan modul Divider ke baris. Di bawah tab Content dari pengaturan modul Divider, pilih opsi "Show Divider".

contoh tombol divi.png di balik tombol

Pada tab Desain, masukkan opsi berikut ini:

Warna: # 000000 (hitam)
Divider Style: Solid
Posisi Pemisah:
Pembagi yang terpusat secara vertikal Berat: 4px
Tinggi: 1

opsi konfigurasi toggle divi.png

Kemudian tambahkan modul sakelar di bawah pemisah yang baru saja saya buat di baris yang sama. Di pengaturan Toggle module, perbarui yang berikut ini:

Tab konten

Judul: [masukkan judul Anda]
Konten: [masukkan konten Anda]
Status: Tutup
Buka warna Latar Belakang: #ffffff
Ditutup Beralih warna latar belakang: #ffffff
Warna latar: #ffffff

Tab desain

Warna Ikon: # 000000
Buka Toggle Text Color: # 000000
Closed Toggle Text Color: # 000000
Font Judul: Open Sans, Bold
Ukuran font: 24px
Warna Teks Judul: # 000000
Font Tubuh: Buka Sans
Ukuran Font Tubuh: 18px
Warna Teks Tubuh: # 666666
Ketinggian garis tubuh: 1.6em
Gunakan border: YES
Lebar perbatasan: 0px
Padding khusus: 2px Atas, 2px Bawah

konten baru dengan rocker divi.png

Setelah menyimpan pengaturan Anda untuk modul sakelar, duplikat modul pembagi yang Anda buat dan letakkan di bawah modul sakelar. Ini akan membingkai jungkat-jungkit dengan garis pemisah atas dan bawah. Setelah itu duplikat modul sakelar Anda dan letakkan setelah garis pemisah bawah. Karena ini adalah duplikat modul Toggle, semua pengaturan desain telah ditransfer ke modul Toggle baru dan yang perlu Anda lakukan hanyalah memperbarui konten modul Toggle baru. Kemudian lanjutkan dengan proses duplikasi modul Divisi dan Skala Modul dan perbarui konten timbangan Anda sampai Anda menyelesaikan seluruh bagian FAQ.

Itu saja. Anda sekarang memiliki bagian FAQ modern menggunakan modul Toggle untuk menggabungkan pertanyaan dan jawaban Anda.

modul beralih divi.gif

Sekarang Anda telah melihat modul sakelar beraksi, selami SEMUA pengaturannya di bagian di bawah ini. Kami telah memberikan tampilan mendetail tentang apa yang akan Anda temukan di setiap tab pengaturan modul dan penjelasan tentang fungsinya masing-masing.

Parameter konten dari modul Toggle

parameter flip-flops divi.png

Tab konten modul sakelar diatur dalam grup parameter berikut (yang juga bergantian!).

teks

Di sinilah Anda dapat menambahkan judul dan mengalihkan konten.

Negara

Anda dapat memilih apakah Anda ingin tombol Anda terbuka atau tertutup secara default dengan pengaturan ini.

konteks

Di sini Anda dapat mengubah warna latar belakang saat sakelar terbuka dan warna latar belakang saat ditutup. Anda juga dapat dengan mudah membuatnya sama dengan mengatur opsi warna latar belakang. Ada juga opsi untuk mengatur atau mengunggah gambar latar belakang.

Label Admin

Secara default, modul sakelar Anda akan muncul dengan label bertuliskan 'Toggle' di generator. Tag Admin memungkinkan Anda mengubah tag ini untuk memudahkan identifikasi.

Parameter desain modul rocker

pilihan desain toggle wordpress.png

Parameter desain dari modul sakelar telah dikelompokkan bersama dalam sakelar tarik-turun berikut di bawah tab Desain.

icon

Di sinilah Anda dapat mengubah warna ikon sakelar.

teks

Di sini Anda dapat mengatur warna untuk teks beralih terbuka dan tertutup.

Teks judul

Di sini Anda dapat menyesuaikan font teks judul, berat, ukuran, warna, jarak, tinggi baris, dan banyak lagi.

Tubuh teks

Di sini Anda dapat menyesuaikan font, berat, ukuran, warna, jarak, tinggi baris, dan lainnya.

perbatasan

Di sini Anda dapat memilih untuk menggunakan perbatasan. Dan jika Anda memilih untuk menggunakan bingkai, Anda juga dapat memilih warnanya, mengubah lebarnya, dan memilih gayanya.

jarak

Di area spasi, Anda dapat menambahkan padding kustom ke atas, kanan, bawah, atau kiri toggle. Anda juga dapat mengubah nilai ini untuk desktop, tablet, atau perangkat seluler.

Pengaturan lanjutan dari sakelar modul

parameter flip-flop divi.png

Di tab Advanced pada modul sakelar Anda, Anda dapat menambahkan ID unik dan kelas css. Anda juga dapat menambahkan css khusus ke berbagai pemilih css yang telah ditentukan sebelumnya (dan telah dipilih sebelumnya) dalam modul slider video drop-down css khusus. Terakhir, di daftar drop-down visibilitas, Anda dapat menyesuaikan visibilitas modul Anda di ponsel, tablet, dan desktop.

Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk menggunakan modul Divi Toggle dengan lebih baik.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi lainnya

Posting Komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.