Cara Memasukkan Modul atau Baris Divi ke dalam Modul Divi Lainnya (tanpa Plugin)
Diterbitkan: 2020-12-31Jika Anda telah menjadi pengguna Divi untuk sementara waktu, pikiran untuk memasukkan Modul Divi (atau Baris) ke dalam Modul lain mungkin pernah terlintas di benak Anda. Dalam kebanyakan kasus, jika Anda tahu cara menggunakan Divi dengan mahir, hal semacam ini tidak terlalu diperlukan. Modul Divi sudah menjadi elemen kuat yang dikemas dengan fitur dan pengaturan desain bawaan. Namun, terkadang akan lebih baik untuk meningkatkan fitur ini dengan merancang dua modul menggunakan Divi dan kemudian memasukkan satu ke modul lainnya. Salah satu contoh yang baik adalah memasukkan modul (seperti formulir kontak) ke dalam modul sakelar sehingga formulir akan ditampilkan saat mengeklik sakelar.
Dalam tutorial ini, kami akan membagikan cara menyisipkan Modul atau Baris Divi ke Modul Divi lain. Untuk melakukan ini, Anda perlu menambahkan beberapa potongan kecil JQuery. Setelah kode terpasang, kita dapat menggunakan Divi Builder untuk menambahkan kelas CSS yang sesuai untuk menargetkan elemen yang ingin kita sisipkan/pindahkan dan modul tempat kita ingin meletakkannya.
Mari kita mulai!
Sneak Peek
Berikut adalah sekilas contoh yang akan kita buat dalam tutorial ini.
Formulir Kontak Di Dalam Modul Toggle
Modul Toggle dan Modul Tombol Di dalam Modul Blurb (kolom kanan)
Baris Divi Di Dalam Modul Toggle
Unduh Tata Letaknya GRATIS
Untuk mengetahui tata letak 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 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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Berlangganan Saluran Youtube Kami
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:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Hal-hal yang Perlu Diingat
Untuk tutorial ini, proses styling semua modul yang ingin Anda gunakan dalam proses ini masih dapat dilakukan secara visual menggunakan pengaturan bawaan Divi Builder, jadi kami akan menyerahkan bagian itu kepada Anda. Kami akan lebih fokus pada bagaimana menerapkan Kelas CSS dan HTML yang tepat untuk setiap elemen Divi untuk memasukkan modul/baris ke dalam modul lain.
Perlu diingat bahwa kita hanya akan dapat melihat hasil akhirnya di halaman langsung, bukan saat mengedit dari Visual Divi Builder. Dengan kata lain, kami dapat mendesain modul dengan Divi tetapi modul tersebut akan tetap terpisah di pembuatnya hingga Anda melihat versi langsung halaman tersebut.
Anda hanya dapat menyisipkan modul atau baris di dalam modul yang memiliki kemampuan untuk menambahkan teks/html.
Juga, seperti yang akan kami jelaskan nanti, ada batasan tertentu untuk jumlah instance (modul atau baris yang dimasukkan ke modul lain) yang dapat Anda miliki dalam kolom atau bagian. Saat memasukkan modul ke modul lain, Anda dibatasi pada satu modul "tujuan" (modul yang akan menampung modul yang ingin Anda masukkan) per kolom. Dan, saat memasukkan baris ke modul lain, Anda dibatasi pada satu modul "tujuan" per bagian. Meskipun ini adalah batasan di satu sisi, ini memberi Anda pilihan untuk memiliki beberapa instance di halaman Anda saat dibutuhkan.
Bagian 1: Cara Memasukkan Modul Divi ke Modul Lain
Untuk bagian pertama dari tutorial ini, kami akan menunjukkan cara memasukkan Modul Divi ke modul lain. Pertama, kami akan menunjukkan cara menambahkan Modul Kontak di dalam Modul Toggle. Kemudian, kami akan menunjukkan cara menambahkan Modul Toggle dan Modul Tombol di dalam Modul Blurb.
Contoh 1: Memasukkan Modul Formulir Kontak Di Dalam Modul Toggle
Tambahkan Baris Baru
Untuk memulai, tambahkan baris satu kolom baru ke bagian.
Tambahkan Modul Toggle (Modul Tujuan)
Di dalam kolom, tambahkan modul sakelar.
Untuk contoh ini, kami ingin menyisipkan modul di dalam Modul Toggle ini yang dapat kami rujuk sebagai modul tujuan kami. Secara teknis, tujuan sebenarnya akan berada di dalam konten isi Modul Toggle (di mana Anda dapat menambahkan teks/HTML). Untuk menentukan lokasi tujuan, kita perlu memasukkan div baru dengan kelas CSS yang diperlukan yang akan berfungsi sebagai lokasi target untuk modul portabel kita (modul yang ingin kita sisipkan).
Di bawah tab konten pengaturan sakelar, tambahkan HTML berikut ke badan. Pastikan untuk mengklik tab Teks sebelum memasukkan HTML.
<div class="divi-module-destination"></div>
Tambahkan Modul Formulir Kontak (Modul Portabel)
Selanjutnya, kita perlu menambahkan modul yang ingin kita masukkan ke dalam Modul Toggle. Dalam contoh ini, kita akan memasukkan Modul Formulir Kontrak ke dalam badan Modul Toggle. Penting untuk menambahkan modul "portabel" baru di dalam kolom yang sama dengan modul tujuan.
Untuk melakukan ini, tambahkan modul formulir kontak baru langsung di bawah modul sakelar.
Klik tab Lanjutan di bawah pengaturan Formulir Kontak (dari modul apa pun yang ingin Anda sisipkan) dan tambahkan Kelas CSS berikut:
- Kelas CSS: modul divi-portabel
Tambahkan Kelas Kolom
Selanjutnya kita perlu menambahkan kelas khusus ke kolom yang menampung kedua modul. Buka pengaturan kolom dan tambahkan Kelas CSS berikut:
- Kelas CSS: kolom induk
Tambahkan Kode
Kode yang diperlukan untuk membuat pekerjaan ini cukup singkat dan sederhana. Pada dasarnya, kami ingin menggunakan JQuery untuk menemukan setiap modul dengan kelas "divi-portable-module" dengan kolom induk (yang memiliki kelas "induk-kolom") dan menambahkan masing-masing modul tersebut di dalam div dengan kelas " divi-modul-tujuan”.
Kode juga menyertakan cuplikan untuk menyisipkan modul tombol ke modul lain dan cuplikan untuk menyisipkan baris Divi ke dalam modul.
Untuk menambahkan kode, tambahkan modul kode baru di bawah modul formulir kontak.
Sebelum Anda menempelkan kode yang diperlukan, tambahkan tag skrip yang diperlukan untuk menyematkan JS ke dalam HTML di dalam kotak Kode:
Kemudian rekatkan kode berikut di antara tag skrip :
(function ($) {
$(document).ready(function () {
// Option #1: Move Divi Module(s) into a Module
// Limit: One Instance per Column
// Use following code if you want to move
// a module inside another module. Each column with the
// class 'parent-column' will append any module(s)
// with the class 'divi-portable-module' to the div
// with the class 'divi-module-destination'.
// Only one instance of 'divi-module-destination' should
// be added per column.
$('.divi-portable-module').each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Buttons: Insert Button Module(s) into a Module
// Adding a custom CSS class to a button module
// is applied to the 'a' tag which is a child element
// of the module wrapper. This code makes sure to append
// the entire button module wrapper (the parent element)
// as well. This functionality is the same as option #3 above.
// Siimply use the class 'divi-portable-button' on a button module
// instead of 'divi-portable-module'.
$('.divi-portable-button').parent().each(function () {
$(this).closest('.parent-column').find('.divi-module-destination').append($(this));
});
// Option #2: Move Divi Row(s) into a Module
// Limit: One Instance per Section
// Use the following code if you want to move
// a row inside a module on more than one section
// of a page. Each section with the
// class 'parent-section' will append any row(s)
// with the class 'divi-portable-row' to the div
// with the class 'divi-row-destination'.
// Only one instance of 'divi-row-destination' should
// be added per section.
$('.divi-portable-row').each(function () {
$(this).closest('.parent-section').find('.divi-row-destination').append($(this));
});
});
})(jQuery);
Memahami Fungsionalitas
Di dalam Divi Builder di backend, modul akan tetap terpisah. Namun, jika Anda melihat hasilnya di halaman langsung di frontend, Anda akan melihat bahwa formulir kontak telah dimasukkan ke dalam modul Toggle.
Jika Anda memeriksa kode pada halaman langsung, Anda dapat melihat bahwa Modul Formulir Kontak telah berhasil dimasukkan ke dalam div dengan kelas "divi-module-destination".
Menata Modul
Seperti yang kami sebutkan sebelumnya, modul akan tetap terpisah di backend Divi Builder. Namun, gaya yang Anda tambahkan ke masing-masing akan tetap berlaku. Jadi jangan ragu untuk menambahkan pembaruan gaya modul tujuan dan modul portabel menggunakan Divi Builder.
CATATAN: Dalam beberapa kasus, gaya modul tujuan (sekarang modul induk) dapat diterapkan ke modul yang dimasukkan. Jika demikian, Anda seharusnya dapat mengganti gaya tersebut dengan memperbarui pengaturan modul yang dimasukkan.
Hasil
Berikut adalah hasil akhir saat melihat halaman langsung.
Contoh 2: Memasukkan Modul Toggle Di Dalam Modul Blurb
Untuk contoh berikutnya, kita akan memasukkan Modul Toggle di dalam Modul Blurb. Prosesnya sama seperti sebelumnya. Cuplikan kode membatasi penggunaan satu modul tujuan per kolom. Dengan kata lain, Anda dapat memiliki beberapa modul portabel dengan kelas "divi-portable-module" yang dapat ditambahkan ke modul tujuan, tetapi Anda hanya dapat memiliki satu instance div dengan kelas "divi-module-destination" per kolom.
Untuk mendemonstrasikan ini, mari ulangi proses yang sama dengan grup modul lain di kolom lain dari baris yang sama.
Tambahkan Kolom Baru ke Baris
Pertama, tambahkan kolom baru ke baris yang ada.
Tambahkan Kelas Kolom
Beri kolom baru CSS Class berikut seperti yang kita lakukan di kolom pertama:
- Kelas CSS: kolom induk
Tambahkan Modul Blurb (Modul Tujuan)
Di dalam kolom baru, tambahkan modul uraian yang akan berfungsi sebagai modul tujuan kita.
Di dalam isi uraian, tempelkan HTML berikut yang menyertakan div yang sama dengan kelas “divi-module-destination” tempat Anda ingin memasukkan modul portabel (dalam hal ini di bawah teks isi tiruan):
<div class="divi-module-destination"></div>
Tambahkan Modul Toggle (Modul Portabel)
Karena kita ingin menambahkan modul sakelar ke uraian, buat modul sakelar baru di dalam kolom yang sama dengan uraian.
Kemudian tambahkan Kelas CSS berikut ke modul Toggle untuk menetapkannya sebagai modul yang ingin kita pindahkan/masukkan ke dalam uraian:
- Kelas CSS: modul divi-portabel
Hasil
Sekarang periksa halaman langsung untuk melihat hasilnya. Toggle sekarang akan berada di dalam modul uraian.
Contoh 3: Memasukkan Modul Tombol Di Dalam Modul Blurb
Untuk contoh berikut ini, kita akan memasukkan modul tombol ke modul uraian yang sama dari contoh sebelumnya. Biasanya, untuk modul lain, kami akan mengulangi proses yang sama untuk menambahkan modul portabel baru ke uraian. Namun, karena modul tombol dibuat sedikit berbeda di bagian belakang, kita perlu menambahkan kelas yang berbeda ke modul tombol.
Tambahkan Modul Tombol (Modul Portabel #2)
Untuk melakukan ini, tambahkan modul tombol baru di bawah modul sakelar yang sudah dimasukkan ke dalam uraian.
Kemudian, tambahkan Kelas CSS berikut ke modul tombol:
- Kelas CSS: divi-portable-button
Hasil
Sekarang lihat hasilnya di halaman langsung. Modul Blurb sekarang berisi modul sakelar dan modul tombol.
Dan berikut adalah potongan kode yang sesuai yang digunakan untuk memasukkan modul tombol di dalam modul dengan div "tujuan". Perbedaan utama dengan cuplikan kode ini adalah bahwa kami menargetkan elemen induk ( div pembungkus tombol di belakang layar) dari kelas tombol “divi-portable-button”.
Bagian 2: Cara Menyisipkan Baris Divi ke dalam Modul
Jika Anda ingin menyisipkan seluruh baris (atau baris) di dalam modul, prosesnya sangat mirip dengan memasukkan modul ke modul lain. Kita perlu menambahkan kelas "bagian induk" ke bagian yang berisi modul tujuan dan baris portabel yang ingin kita sisipkan. Kita perlu menambahkan div dengan kelas "divi-row-destination" ke modul tujuan. Dan kita perlu menambahkan kelas "divi-portable-row" ke baris yang ingin kita masukkan ke dalam modul tujuan.
Berikut cara melakukannya.
Tambahkan Bagian
Pertama, tambahkan bagian reguler baru ke halaman.
Di bawah tab lanjutan dari pengaturan bagian, tambahkan Kelas CSS berikut:
- Kelas CSS: bagian induk
Tambahkan Baris untuk Modul Tujuan
Tambahkan baris satu kolom baru untuk menampung modul tujuan.
Tambahkan Modul Toggle (Modul Tujuan Baris)
Untuk contoh ini, kita akan menyisipkan baris di dalam modul Toggle. Oleh karena itu, tambahkan Modul Toggle baru ke baris.
Karena Modul Toggle adalah modul tujuan kami, buka pengaturan untuk toggle, dan tambahkan HTML berikut ke konten isi:
<div class="divi-row-destination"></div>
Buat Baris Portabel
Sekarang modul tujuan sudah terpasang, tambahkan baris baru di bawah baris sebelumnya. Ini akan berfungsi sebagai baris portabel yang akan kita masukkan ke dalam Modul Toggle.
Isi Baris dengan Konten
Pada titik ini, Anda dapat mengisi baris dengan konten/modul apa pun yang Anda inginkan menggunakan Divi Builder. Ingatlah bahwa semua yang ada di dalam baris pada akhirnya akan dimasukkan ke dalam modul sakelar karena berada di dalam baris.
Tambahkan Kelas ke Baris
Kemudian buka pengaturan baris dan tetapkan sebagai baris yang ingin Anda masukkan ke dalam Modul Toggle dengan memberikan Kelas CSS berikut:
- Kelas CSS: divi-portable-row
Bagaimana itu bekerja
Sebagai pengingat, baris akan tetap terpisah dari modul saat mengedit tata letak menggunakan Divi Builder di backend. Tetapi fungsinya ada untuk menyisipkan baris di dalam Modul Toggle.
Hasil
Untuk melihat hasilnya, periksa halaman langsung dan buka modul sakelar. Sekarang berisi seluruh baris.
Dan inilah cuplikan kode yang sesuai yang memungkinkan hal ini. Perhatikan kelas terkait yang digunakan.
Memasukkan Beberapa Baris di dalam Modul
Selama Anda menyimpan satu instance dari modul tujuan (yaitu div dengan kelas "divi-row-destination") per bagian, Anda dapat menyisipkan beberapa baris ke tujuan itu hanya dengan memberikan kelas yang sama "divi-portable-row ”.
Misalnya, Anda dapat menambahkan baris lain dengan modul galeri di atas baris dengan item menu yang telah dibuat sebelumnya. Kemudian berikan baris kelas yang sama "divi-portable-row"
Kedua baris dengan kelas "divi-portable-row" akan dimasukkan ke dalam Modul Toggle.
Menggunakan Plugin/Kode Pendek
Jika Anda mencari plugin yang melakukan hal serupa dan memberikan lebih banyak fleksibilitas atau opsi, Anda dapat melihat plugin Kode Pendek untuk Divi dari pasar kami yang memungkinkan Anda untuk menyematkan tata letak Divi apa pun ke halaman Anda menggunakan kode pendek. Setelah diinstal, plugin akan menghasilkan kode pendek yang dapat disematkan untuk setiap tata letak yang telah Anda simpan ke Perpustakaan Divi Anda.
Pikiran Akhir
Dalam kebanyakan kasus, seharusnya tidak perlu menyisipkan modul atau baris ke modul lain kecuali ada kebutuhan khusus. Biasanya, Anda bisa mendapatkan layout/desain yang Anda butuhkan tanpa harus melakukan hal semacam ini. Namun, bagi Anda yang mencari cara sederhana untuk melakukan ini tanpa harus menggunakan plugin, semoga solusi ini berguna.
Plus, pikirkan semua kemungkinan aplikasi!
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!