Loncat ke Konten Utama

Cara menggunakan modul Flip Divi Builder

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Sebelum Anda dapat menambahkan modul Toggle ke halaman Anda, Anda harus terlebih dahulu masuk ke Divi Builder. Setelah tema Divi diinstal di situs web Anda, Anda akan melihat tombol Gunakan Divi Builder di atas penerbit 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 tombolnya Aktifkan Visual Builder saat Anda menjelajahi situs web di latar depan jika Anda terhubung 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, pastikan untuk pertama menambahkan baris ke halaman Anda.

flip flop divi module.png

Temukan modul rocker 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 mencari dan secara otomatis menambahkan tombol modul! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Contoh Use Case: Halaman FAQ

Halaman FAQ adalah salah satu tempat terbaik untuk mengkonsolidasikan informasi menggunakan modul Toggle. Ini memungkinkan pengguna untuk dengan cepat mengidentifikasi pertanyaan yang dia 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 (kolom 1). Kemudian tambahkan modul Divider ke saluran. Pada tab Divider Module Settings Contents, pilih opsi "Show Divider".

contoh tombol divi.png di balik tombol

Pada tab Desain, masukkan opsi berikut:

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

opsi konfigurasi toggle divi.png

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Kemudian tambahkan modul rocker di bawah pembatas yang baru saja saya buat di baris yang sama. Dalam pengaturan Toggle module, perbarui item berikut:

Tab konten

Judul: [masukkan judul Anda]
Konten: [masukkan konten Anda]
Negara: Tutup
Buka Warna Latar: #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, Bawah 2px

konten baru dengan rocker divi.png

Setelah menyimpan pengaturan Anda untuk modul beralih, duplikat modul pembagi yang Anda buat dan letakkan di bawah modul beralih. Ini akan membingkai Flip dengan garis pemisah atas dan bawah. Setelah itu, gandakan modul beralih Anda dan tempatkan setelah garis pemisah bawah. Karena ini adalah modul Duplicate Toggle, semua parameter desain telah ditransfer ke Toggle baru dan yang perlu Anda lakukan hanyalah memperbarui konten dari modul Toggle baru. Kemudian lanjutkan proses duplikasi modul terpisah dan sandal jepit dan perbarui isi sandal jepit Anda sampai Anda menyelesaikan seluruh bagian FAQ.

Hanya itu saja. Anda sekarang memiliki bagian FAQ modern menggunakan modul Toggle untuk mengkonsolidasikan pertanyaan dan jawaban Anda.

modul beralih divi.gif

Sekarang setelah Anda melihat modul rocker beraksi, selami SEMUA pengaturannya di bagian bawah. Kami telah memberikan gambaran rinci tentang apa yang akan Anda temukan di setiap tab parameter modul dan penjelasan tentang apa yang dilakukan masing-masing.

Parameter konten dari modul Toggle

parameter flip-flops divi.png

Tab konten dari modul beralih diatur dalam kelompok parameter berikut (yang juga bergantian!).

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

teks

Di sinilah Anda dapat menambahkan judul dan isi toggle.

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 ketika flip-flop 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 mengunduh gambar latar belakang.

Label Admin

Secara default, modul toggle Anda akan muncul dengan tag yang bertuliskan 'Toggle' di generator. Tab Admin memungkinkan Anda mengubah tag ini untuk memudahkan identifikasi.

Parameter desain modul rocker

pilihan desain toggle wordpress.png

Parameter desain modul beralih telah dikelompokkan ke dalam drop-down berikut pada tab Desain.

icon

Di sinilah Anda dapat mengubah warna ikon beralih.

teks

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

Teks judul

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

Tubuh teks

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

perbatasan

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

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

jarak

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

Pengaturan lanjutan dari sakelar modul

parameter flip-flop divi.png

Pada tab Advanced modul flip Anda, Anda dapat menambahkan ID dan kelas css unik. Anda juga dapat menambahkan css kustom ke berbagai pemilih css yang telah ditentukan sebelumnya (dan dipilih sebelumnya) di modul kursor video dari daftar css css kustom. Akhirnya, dalam daftar drop-down visibilitas, Anda dapat menyesuaikan visibilitas modul Anda pada ponsel, tablet, dan desktop.

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

Tutorial Divi lainnya

Tinggalkan 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.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
18 saham
saham8
menciak3
Register7
Ada apa