Bangun modul Anda sendiri dengan grup modul Divi 5

Apakah Anda ingin membuat modul divi khusus tanpa menyentuh baris kode? Dengan grup modul baru Divi 5, Anda sekarang dapat menggabungkan beberapa elemen menjadi tata letak tunggal yang dapat digunakan kembali - semua dari dalam pembangun visual. Tidak ada javascript. Tidak ada php. Cukup seret, jatuhkan, dan desain.

Dalam panduan cepat ini, kami akan menunjukkan kepada Anda cara membuat modul Anda sendiri menggunakan grup baru Divi. Anda akan melihat secara khusus cara membangun dari awal uraian, tabel harga, testimonial, atau jenis modul lain yang dapat Anda bayangkan.

Catatan: Divi 5 siap digunakan di situs web baru, tetapi kami belum merekomendasikan untuk mengubah situs yang ada ke Divi 5 dulu. Anda akan melihat sesuatu dari kami ketika kami yakin dalam proses pembaruan.

Apa grup modul baru Divi?

Grup, atau grup modul, adalah elemen wadah baru yang memasangkan beberapa modul dan/atau baris menjadi satu unit dalam satu kolom. Ini memiliki keuntungan mengelompokkan beberapa elemen yang lebih kecil dan memungkinkan Anda untuk memindahkan seluruh kelompok ke mana pun Anda membutuhkannya di halaman.

Grup modul dapat dipindahkan di seluruh halaman Anda tanpa masalah dan akan menjadi sangat membantu ketika fitur FlexBox dan Loop Builder dirilis. Setelah pembangun loop dirilis, Anda akan dapat menggunakan grup untuk membuat tata letak blog khusus, menu footer, galeri gambar, dan banyak lagi. Jadi, sekarang berguna, tetapi dalam beberapa bulan, itu akan lebih mengesankan untuk digunakan.

Baris bersarang adalah fitur Divi yang sangat diminta yang kami tambahkan ke Divi 5. Mereka membiarkan Anda memasukkan barisan di dalam barisan sesuai isi hati Anda. Meskipun nama "Grup Modul" mungkin membuatnya tampak bahwa Anda hanya dapat mengelompokkan modul, yang sebaliknya adalah benar. Faktanya, Anda dapat menggunakan barisan bersarang di dalam kelompok, yang membuka kesempatan untuk membangun struktur tata letak bersarang tanpa batas dan menjadikannya bagian dari kelompok yang dapat digunakan kembali.

Cara membuat modul divi Anda sendiri

Grup modul memungkinkan Anda untuk membuat modul sendiri di dalam editor. Anda dapat mengelompokkan modul dan baris bersarang bersama untuk membuat pengaturan kompleks yang menyerupai beberapa modul kami yang lebih besar.

1. Buat modul uraian Anda sendiri

Modul Blurb built-in kami

Modul uraian adalah bahan pokok dalam banyak desain divi. Ini adalah modul masuk, tetapi ketika Anda memecahnya, itu hanya memiliki beberapa hal yang membuatnya klik. Itu adalah:

Gambar/ikon, judul/heading, dan konten tubuh. Kita dapat membuat grup modul dan menempatkan modul -modul ini di dalamnya: gambar atau ikon, heading, dan modul teks. Bersama -sama, ketiga modul tersebut dapat mereproduksi konten yang sama yang dapat digunakan dalam modul Blurb.

Anatomi modul uraian

Membuat grup modul uraian Anda sendiri

Berikut adalah contoh modul uraian dengan ikon di sisi kiri dan replikasi modul blurb yang identik secara visual menggunakan A:

Grup, baris dalam, kolom (1) dengan modul ikon, dan kolom (2) dengan modul heading dan teks.

X-ray dihidupkan untuk melihat kerangka masing-masing untuk melihat kesamaan mereka, meskipun mereka dibangun secara berbeda.

Satu -satunya hal yang istimewa dengan pengaturan ini adalah bahwa kolom pertama diatur ke lebar 18%, dan yang kedua menempati lebar 82% (opsi ukuran kolom adalah baru dengan pembaruan fitur Baris Nested).

Membangun modul Anda seperti ini memiliki manfaat tambahan dari memberi Anda lebih banyak opsi gaya desain untuk setiap elemen individu. Modul uraian membuat penempatan gambar/ikon lebih mudah, tetapi memiliki trade-off. Gunakan pendekatan yang membuat Anda yang paling dekat dengan desain yang Anda inginkan.

2. Buat modul Tabel Harga Anda Sendiri

Modul meja harga bawaan kami

Beberapa modul Divi memiliki lebih banyak hal yang terjadi. Itulah yang terjadi dengan modul tabel harga. Ada beberapa bidang per tabel harga seperti yang Anda lihat di bawah.

Anatomi Modul Tabel Harga

Membuat grup modul tabel harga Anda sendiri

Jika kami menciptakan kembali modul tabel harga menggunakan grup modul dan modul individual, kami akan mendapatkan hasil ini.

Perhatikan tujuh bidang teks/opsi terpisah per tabel. Secara visual, setiap tabel memiliki tiga bagian utama (tajuk, harga, dan detail). Ada beberapa cara untuk melakukan ini di dalam kelompok, tetapi di bawah ini, kami menggunakan tiga baris bersarang untuk masing -masing. Dari sana, kami menggunakan modul heading dan teks di dalam setiap bagian untuk membuat ulang tabel harga.

Hal yang menyenangkan tentang menggunakan modul tabel harga adalah menangani sebagian besar tata letak, dan Anda mendapatkan awal. Tetapi kadang -kadang itu berarti lebih sulit untuk dikerjakan saat Anda ingin hal -hal spesifik dilakukan dengan itu. Melakukan pekerjaan ekstra untuk membuat tata letak tabel harga ini dengan modul yang lebih sederhana memberi kita lebih banyak kontrol desain dan kebebasan.

3. Buat modul testimonial Anda sendiri

Modul testimonial bawaan kami

Modul testimonial Divi adalah yang lain yang memiliki banyak hal terjadi. Ini mencakup hingga empat elemen teks yang berbeda dan sepasang opsi gambar/ikon.

Membuat Grup Modul Testimonial Anda Sendiri

Aspek yang paling memakan waktu dari menciptakan kembali modul testimonial adalah mendapatkan jarak yang tepat (terutama di beberapa breakpoint). Tapi begitu Anda mendapatkannya, semuanya cukup mudah. Sepanjang tata letak grup, kami menggunakan beberapa baris dan ikon, gambar, tajuk, dan modul teks.

Hal yang menyenangkan tentang menciptakan kembali beberapa modul ini adalah Anda membuka lebih banyak kemungkinan. Beberapa modul yang lebih rumit memiliki tata letak yang memiliki pendapat yang hanya dapat dimanipulasi oleh CSS yang luas. Tetapi ketika Anda membangunnya sendiri, Anda memiliki lebih banyak kebebasan untuk bergerak di sekitar banyak sub-elemen itu.

Saat mendesain seperti ini, lebih banyak kemungkinan tata letak terbuka. Misalnya, Anda dapat melakukan apa yang tidak mungkin (setidaknya apa yang tidak mudah) dengan modul testimonial dengan memindahkan elemen ke posisi yang sama sekali berbeda dalam tata letak grup yang lebih besar. Jika desain Anda menuntut fleksibilitas, membangun beberapa sedikit demi sedikit ini dapat membantu Anda mencapai ketepatan yang Anda cari.

Saya juga menyukai gagasan Anda dapat membuat modul testimonial khusus, seperti yang di atas, dan menggunakan Loop Builder yang akan datang untuk menarik kesaksian dari CPT. Ini akan memberi Anda desain kebebasan + kemampuan untuk membangun lebih cepat dengan data dan konten terstruktur.

Simpan modul khusus Anda sebagai elemen global

Ketika modul baru Anda terasa benar, simpan sebagai elemen global untuk digunakan di tempat lain di situs Anda. Buka menu Pengaturan Grup. Klik opsi " Simpan ke Perpustakaan ".

Modal akan muncul di mana Anda dapat memberi nama modul Anda untuk penggunaan yang mudah nanti. Toggle " Save As Global " untuk menyimpannya di Perpustakaan Divi. Setiap perubahan yang Anda lakukan nanti pembaruan setiap salinan di situs Anda.

Elemen global Anda sekarang akan memiliki warna hijau yang berbeda untuk membantu Anda melihatnya global.

Anda dapat mengakses semua elemen global yang Anda simpan dan item perpustakaan lainnya di Dasbor> Divi> Divi Library . Mengedit elemen global di sini akan memperbaruinya di seluruh situs. Anda juga dapat mengedit elemen global secara langsung pada halaman yang digunakannya (dan itu akan memperbarui Sitewide).

Butuh modul di setiap situs yang Anda bangun? Toggle " Simpan ke Divi Cloud ." Modul ini sekarang ada di perpustakaan cloud Anda, siap untuk proyek apa pun di mana saja. Item perpustakaan menyimpan barang -barang di satu situs, sementara divi cloud bepergian dengan Anda dari situs ke situs. Gunakan baik untuk mempercepat build dan mengantar konsistensi yang lebih besar.

Dapatkan Divi Cloud

Bangun sesuatu yang baru hari ini

Grup modul menempatkan kekuatan baru di tangan Anda. Anda dapat membentuk tata letak yang asli dan apa yang Anda butuhkan. Mulailah dengan menciptakan kembali modul uraian dan lihat bagaimana prosesnya cocok. Saat Anda terbiasa menggunakan Divi dengan cara ini, Anda akan melihat diri Anda membuat desain yang lebih rumit karena Anda dapat menggunakan modul standar atau membuat sendiri.

Banyak dari apa yang dibahas di atas dimungkinkan dengan Divi sebelum kelompok turun, tetapi mereka membuat segalanya lebih mudah. Terutama ketika kami meluncurkan Flex dan The Loop Builder, grup akan menjadi pokok desain Anda dengan Divi.

Siap naik level? Ambil situs baru dan uji modul kustom pertama Anda hari ini.