2 Cara Membuat Tampilan Kustom Lebih Banyak Toggles di Divi

Tampilkan lebih banyak matikan dapat berguna untuk banyak aplikasi berbeda di situs web. Secara tradisional, show more toggles digunakan untuk menampilkan lebih banyak teks saat mengklik tautan show more (seperti read more toggles). Ini berguna untuk menjaga agar desain awal lebih ringkas dan ringkas, menyerahkannya kepada pengunjung untuk mengklik untuk info lebih lanjut jika mereka membutuhkannya.

Dalam tutorial ini, kami akan menunjukkan kepada Anda dua cara untuk membuat Show More Toggles kustom untuk situs Divi Anda. Cara pertama termasuk mengubah modul sakelar Divi menjadi sakelar pertunjukan lebih banyak yang berada di bawah modul, siap untuk menampilkan/menyembunyikan teks tambahan. Metode kedua akan melibatkan pembuatan show more toggle yang dapat menampilkan/menyembunyikan seluruh baris atau modul Divi. Seperti yang dapat Anda bayangkan, ini membuka pintu untuk menampilkan atau menyembunyikan pada dasarnya semua konten yang Anda inginkan!

Mari kita mulai.

Sneak Peek

Berikut ini adalah tampilan cepat pada tampilan lebih banyak matikan yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Cara Pertama: Membuat Toggle Show More menggunakan Modul Toggle Divi

Pertama, tambahkan baris dua kolom ke bagian Anda.

Di kolom kiri, tambahkan modul uraian.

Di bawah modul uraian, tambahkan modul sakelar. Kita akan mengubah modul toggle menjadi show more toggle sehingga akan menampilkan/menyembunyikan lebih banyak teks di bawah modul uraian saat mengklik toggle.

Untuk melakukan ini, buka pengaturan modul sakelar dan perbarui teks judul:

• Judul: Tampilkan Lebih Banyak

Di bawah tab desain, perbarui yang berikut untuk menghapus gaya default:

• Buka Toggle Background Color: rgba(0,0,0,0);
• Warna Latar Toggle Tertutup: rgba(0,0,0,0);

• Padding: 0px atas, 0px bawah, 0px kiri
• Lebar Perbatasan: 0px

Di bawah tab Lanjutan, perbarui CSS Khusus untuk hal berikut:

Untuk Elemen Utama …

display:flex;
flex-direction: column;
align-items: flex-end;

Untuk Judul Beralih …

order:2;
padding-right:25px !important;

Untuk Konten Beralih …

order:1;
padding: 0px;

Judul toggle dan konten toggle ini diurutkan secara berbeda menggunakan properti order dengan display:flex. Sekarang judul yang dapat diklik berada di bawah konten sehingga akan berfungsi seperti pertunjukan lebih toggle.

Sekarang, tambahkan Kelas CSS berikut ke modul sakelar:

• Kelas CSS: et-readmore-toggle

Ini diperlukan untuk menargetkan modul dengan kode JQuery kami yang akan kami tambahkan untuk mengubah teks judul saat mengklik sakelar.

Kami telah membersihkan modul sakelar dan mengeluarkan semua bantalan sehingga sakelar harus berada tepat di bawah modul uraian di atas. Namun, masih ada terlalu banyak margin bawah di uraian atas sehingga teks di dalam sakelar akan terlalu jauh dari paragraf sebelumnya.

Buka pengaturan ke modul uraian di atas sakelar dan perbarui margin:

• Margin bawah: 10px;

Sekarang kami siap untuk menambahkan JQuery yang diperlukan untuk mengubah teks judul sakelar menjadi "Tampilkan Lebih Banyak" atau "Tampilkan Lebih Sedikit" saat diklik.

Untuk menambahkan kode, tambahkan modul kode di bawah modul sakelar.

Kemudian tempel di JQuery berikut memastikan untuk membungkus kode dalam tag skrip yang diperlukan.

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

Inilah hasilnya.

Desain ini jelas dasar. Jangan ragu untuk menambahkan lebih banyak desain ke sakelar menggunakan opsi Divi bawaan agar sesuai dengan kebutuhan Anda.

Cara ke-2: Membuat Pertunjukan Lebih Banyak Toggle to Show/Hide Any Divi Module or Row

Jika tampilan pertama lebih banyak toggle menggunakan modul toggle tampaknya agak terlalu membatasi, metode selanjutnya ini akan menarik minat Anda. Kami akan membuat lebih banyak sakelar pertunjukan khusus yang dapat Anda gunakan untuk menampilkan/menyembunyikan dan modul Divi atau bahkan seluruh baris!

Membangun Show More Toggle untuk Modul Divi

Berikut cara melakukannya.

Pertama, buat baris dua kolom lain seperti yang Anda lakukan pada contoh pertama.

Kemudian tambahkan modul uraian ke kolom 1.

Di bawah modul uraian, kita akan menambahkan modul formulir kontak.

Formulir kontak ini akan menjadi modul yang akan kami tampilkan/sembunyikan saat mengklik tombol tampilkan lebih banyak.

Untuk menargetkan modul ini dalam kode, buka pengaturan untuk formulir kontak dan tambahkan Kelas CSS berikut:

• Kelas CSS: et-tampilkan-lebih-konten

Kita juga perlu menargetkan wadah induk dari modul yang ingin kita tampilkan/sembunyikan. Ini akan memungkinkan kami untuk menambahkan beberapa contoh toggle show lebih banyak di halaman jika diperlukan. Dalam hal ini wadah induk dari modul formulir kontak ini adalah kolom 1. Buka pengaturan untuk kolom 1 dan tambahkan Kelas CSS berikut:

• Kelas CSS: et-show-more-container

Untuk membuat tombol sakelar tampilkan lebih banyak, tambahkan modul tombol di bawah modul formulir kontak.

Anda dapat mendesain tombol sesuka Anda. Setelah selesai, buka pengaturan modul tombol dan tambahkan Kelas CSS berikut:

• Kelas CSS: et-show-more-toggle

Kemudian ubah teks tombol untuk membaca "Show More".

Sekarang kita siap untuk menambahkan kode yang diperlukan untuk membuat acara kita lebih aktif.

Di bawah tombol, tambahkan modul kode sehingga kami dapat memasukkan CSS dan JQuery kami.

Pertama rekatkan CSS berikut di dalam kotak kode, pastikan untuk membungkus kode dalam tag gaya yang diperlukan:

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

Kemudian di bawah CSS, rekatkan JQuery berikut dan pastikan untuk membungkus kode dalam tag skrip :

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

Untuk menyeimbangkan desain kita, duplikat kolom 1 untuk membuat kolom identik lainnya. Pastikan untuk menghapus kolom ketiga yang kosong dan modul kode tambahan yang dibawa bersama duplikat.

Inilah hasilnya.

Membuat Show More Toggle untuk Baris Divi

Sekarang setelah kita memiliki lebih banyak toggle untuk Divi Module, mari kita membangun ini untuk menambahkan show baru lebih banyak toggle untuk mengaktifkan seluruh baris.

Pertama, buat baris satu kolom baru untuk menahan tombol baru kita.

Kemudian salin salah satu modul show more button yang ada dan tempel di dalam baris baru. Kemudian buka pengaturan tombol dan ubah perataan tombol:

• Penjajaran Tombol: Tengah

Karena kami ingin menargetkan baris sebagai konten yang ingin kami tampilkan/sembunyikan, buka pengaturan baris yang berisi tombol show more untuk modul formulir kontak. Kemudian tambahkan Kelas CSS berikut ke baris:

• et-tunjukkan-lebih-konten

Dan kita juga perlu menambahkan Kelas CSS khusus ke wadah induk dari baris (yang merupakan bagian). Buka pengaturan bagian dan tambahkan Kelas CSS berikut:

• et-show-more-container

Inilah hasilnya.

Hasil Akhir

Berikut adalah hasil akhir dari ketiga tampilan toggle lainnya yang kami buat.

Pikiran Akhir

Tujuan dari tutorial ini adalah untuk menunjukkan kepada Anda beberapa metode untuk membuat acara Anda sendiri lebih banyak matikan di Divi. Mudah-mudahan salah satunya akan berguna di kemudian hari sehingga Anda tidak perlu menggunakan plugin. Meskipun kami tidak menambahkan desain spektakuler apa pun ke contoh-contoh ini, bukan berarti itu tidak bisa dilakukan. Dengan fungsi ini di tempat, Anda dapat bersenang-senang merancang acara ini lebih banyak matikan menggunakan pembuat Divi. Atau Anda bahkan dapat menarik beberapa tata letak siap pakai kami untuk bereksperimen juga.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!