Cara Membuat Tata Letak Grid CSS untuk Modul Divi

Bagi mereka yang sudah terbiasa membangun situs web di Divi, membuat tata letak kisi khusus adalah aspek inti dari Divi Builder. Cukup buat baris dan pilih dari beberapa tata letak kolom bawaan untuk baris itu. Setelah tata letak kolom terpasang, kita cukup menambahkan konten/modul yang kita inginkan di dalam setiap kolom. Namun, bagaimana jika kita menginginkan tata letak grid tambahan untuk modul tersebut?

Dalam tutorial ini, kita akan mengeksplorasi bagaimana memperluas tata letak grid Divi dengan membuat tata letak grid CSS untuk modul Divi dalam satu kolom. Properti CSS Grid (bersama dengan CSS Flex) adalah cara populer untuk membuat tata letak grid yang dapat diprediksi dan responsif untuk konten hanya dengan beberapa baris CSS. Dengannya, kita dapat mengatur semua modul dalam sebuah kolom ke dalam grid yang sepenuhnya responsif. Anggap saja sebagai tata letak kisi tambahan untuk modul yang dapat Anda tambahkan ke kolom Divi mana pun. Tetapi salah satu hal terbaik tentang teknik ini adalah bahwa setiap modul yang berdekatan akan memiliki tinggi dan lebar yang sama tanpa harus repot mencoba melakukan ini dengan menggunakan padding khusus atau nilai tinggi pada setiap modul.

Mungkin yang terbaik adalah kami langsung masuk dan menunjukkan cara kerjanya.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Dan berikut adalah intip teknik yang sama dengan menggunakan modul dan desain yang berbeda dari Fitness Gym Layout Pack.

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.

Membuat Tata Letak Kotak CSS Kustom Untuk Modul Divi

Bagian 1: Menambahkan Modul ke Kolom Divi

Sebelum kita mengatur modul kita ke dalam tata letak grid, pertama-tama mari kita tambahkan semua modul yang ingin kita gunakan ke kolom kita.

Untuk memulai, buat baris satu kolom baru ke bagian reguler default di Divi Builder.

Membuat Modul

Di dalam kolom baris, tambahkan modul teks baru. Kemudian perbarui pengaturan konten modul sebagai berikut:

1. Tambahkan judul H2 di atas teks paragraf dari konten isi default
2. Warna Latar Belakang: #333333

Kemudian perbarui pengaturan desain sebagai berikut:

1. Font Teks: Poppins
2. Warna Teks: Cahaya
3. Pilih tab H2 di bawah Teks Judul
4. Judul 2 Gaya Font: TT
5. Padding: 10% atas, 10% bawah, 10% kiri 10% kanan

CATATAN : Untuk mempermudah, kita akan tetap menggunakan beberapa modul teks dengan berbagai warna latar belakang untuk menunjukkan perbedaan antara setiap modul. Namun, seperti yang akan saya jelaskan nanti, Anda dapat menggunakan kombinasi modul apa pun yang Anda inginkan (modul blurb, modul ajakan bertindak, modul formulir kontak, dll.).

Buka tampilan layer (opsional) dan buat modul teks berikutnya sebagai berikut:

1. Gandakan modul teks.
2. Buka pengaturan teks untuk modul duplikat.
3. Perbarui Warna Latar Belakang
   • Warna Latar Belakang: #4c6085

Ulangi proses ini untuk membuat modul teks ketiga sebagai berikut:

1. Gandakan modul teks sebelumnya.
2. Buka pengaturan teks untuk modul duplikat.
3. Perbarui Warna Latar Belakang
   • Warna Latar Belakang: #39a0ed

Ulangi proses ini sekali lagi untuk membuat modul teks keempat sebagai berikut:

1. Gandakan modul teks sebelumnya.
2. Buka pengaturan teks untuk modul duplikat.
3. Perbarui Warna Latar Belakang
   • Warna Latar Belakang: #13c4a3

Untuk membuat empat modul berikutnya, gunakan fitur multiselect untuk memilih keempat modul. Kemudian salin dan tempel modul di kolom yang sama untuk membuat total delapan modul teks.

Bagian 2: Membuat Tata Letak Grid CSS untuk Modul

Sekarang modul kita sudah siap, kita siap untuk membuat Grid CSS kita untuk modul tersebut.

Pengaturan Baris

Untuk contoh ini, kami menggunakan tata letak satu kolom sehingga kami dapat menampilkan kisi modul kami dalam tata letak lebar penuh. Jadi, kita perlu memperbarui pengaturan baris untuk memastikan bahwa baris mencakup lebar penuh halaman. Kita juga perlu menghilangkan lebar talang default sehingga tidak ada margin tambahan yang ditambahkan ke modul kita.

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar: 100%
• Lebar maks: 100%

Menambahkan Grid CSS ke Kolom untuk Membangun Tata Letak Grid untuk Modul

Ini adalah langkah kunci dalam tutorial yang membuat tata letak untuk modul menggunakan properti CSS Grid.

Untuk melakukan ini, kita akan menambahkan tiga baris CSS ke Kolom yang akan menentukan tata letak modul kita.

Buka pengaturan kolom dan, di bawah tab lanjutan, tempel CSS berikut di dalam Elemen Utama:

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

Baris pertama CSS menjabarkan konten (atau modul) sesuai dengan modul grid CSS.

tampilan: kisi

Baris kedua CSS mendefinisikan template kolom dari grid. Dalam hal ini, kisi akan memiliki empat kolom yang masing-masing lebarnya 25% (lihat tangkapan layar di atas).

grid-templat-kolom: 25% 25% 25% 25%

Baris ketiga CSS menentukan bahwa baris akan dibuat secara otomatis sesuai kebutuhan dengan ukuran (atau tinggi) yang disetel ke otomatis. Ini berarti ketinggian setiap baris akan ditentukan oleh ketinggian vertikal konten (atau modul) di dalam baris (lihat tangkapan layar di atas).

grid-auto-baris: otomatis

Sesuaikan Tata Letak Kotak di Seluler

Kita juga perlu menyesuaikan tata letak grid pada perangkat seluler sesuai kebutuhan.

Untuk melakukan ini, kita hanya perlu menambahkan CSS tambahan ke setiap tablet ponsel yang mengubah jumlah kolom dan lebar setiap kolom.

Dalam contoh ini, kita akan mengubah tata letak kotak untuk modul di tablet menjadi dua kolom yang masing-masing lebarnya 50%.

Buka opsi responsif dan pilih tab tablet di bawah elemen utama dan rekatkan CSS berikut:

 display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto; 

Untuk tampilan ponsel, kami menginginkan tata letak satu kolom. Untuk membuatnya, rekatkan CSS berikut di bawah Elemen Utama tab Telepon:

 display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto; 

Bagian 3: Membuat Perubahan pada Item Grid (atau Modul)

Menambahkan Modul Baru ke Grid dan Bagaimana Reaksinya

Sekarang setiap modul berada di dalam kisi CSS, menambahkan modul baru akan mendorong modul lain ke kanan dan membuat baris baru secara otomatis sesuai kebutuhan.

Karena kita tetap membutuhkan satu modul lagi untuk tata letak ini, duplikat modul teks pertama untuk melihat bagaimana modul lain menyesuaikan di dalam kisi.

Bagaimana Grid Menanggapi Modul dengan Jumlah Konten yang Berbeda

Saat ini, semua modul teks memiliki jumlah konten yang sama sehingga sulit untuk melihat bagaimana tata letak grid menangani modul dengan jumlah konten yang bervariasi. Untuk melihat cara kerjanya, ubah jumlah teks paragraf dalam setiap modul. Perhatikan bahwa modul akan tetap sama tingginya dengan modul dengan sebagian besar konten di baris yang sama. Dan tinggi baris juga akan ditentukan oleh modul dengan konten terbanyak (atau tinggi vertikal).

Mengubah Posisi Modul (atau item kisi)

Item Grid CSS dapat diposisikan menggunakan sistem penomoran baris bawaan dari modul grid. Setiap baris pada grid mewakili sebuah angka. Untuk kolom, nomor baris dimulai dari 1 dan berlanjut secara horizontal. Setiap nomor baris berada di awal dan akhir setiap kolom. Jadi, untuk struktur empat kolom kami, nomor baris dimulai dari 1 di sebelah kiri kolom pertama dan berakhir di 5 di sisi kanan kolom keempat. Dan, karena kita memiliki tiga baris, nomor baris untuk baris dimulai dari 1 di bagian atas baris pertama dan berlanjut ke 4 di bagian bawah baris ketiga.

Untuk mengubah posisi modul (atau item grid) di CSS Grid, kita dapat mengatur menentukan di mana kita ingin modul tertentu ditempatkan di grid. Ini akan menimpa penempatan default modul di grid.

Untuk contoh ini, kita akan memindahkan modul teks pertama ke posisi yang berbeda. Untuk melakukan ini, kita perlu menambahkan dua baris CSS ke modul.

Buka pengaturan untuk modul teks pertama dan tempel CSS khusus berikut ke elemen utama:

grid-column: 2/4;
grid-row: 2/3;

Baris pertama CSS mendefinisikan posisi modul (atau item kisi) secara horizontal dengan memberi tahu modul untuk memulai pada baris kolom 2 dan berakhir pada baris kolom 4.

kisi-kolom: 2/4

Baris kedua CSS mendefinisikan posisi modul (atau item kisi) secara vertikal dengan memberi tahu modul untuk memulai pada baris 2 dan berakhir pada baris 3.

grid-baris: 2/3

Untuk tampilan tablet dan ponsel, kami ingin mengembalikan modul ke lokasi semula. Ini berguna untuk menjaga tajuk utama Anda di bagian atas halaman.

Untuk melakukan ini, pilih tab tablet di bawah opsi responsif untuk elemen utama dan rekatkan CSS berikut:

grid-column: auto;
grid-row: auto;

Sekarang posisi modul akan kembali ke aliran (otomatis) asli dari item grid.

Mari kita lanjutkan dan posisikan beberapa modul lagi (atau item kisi) menggunakan metode ini.

Kami akan memposisikan modul teks ketiga (sekarang di kolom kedua dari baris atas) di lokasi yang baru di dalam grid. Posisi baru ini akan dimulai pada baris kolom 1 dan berakhir pada baris kolom 2 dan juga dimulai pada baris baris 2 dan berakhir pada baris baris 4.

Untuk melakukan ini, buka pengaturan untuk modul teks ketiga dan tempel CSS khusus berikut ke elemen utama:

grid-column: 1/2;
grid-row: 2/4;

Sekarang kita bisa mengubah, posisinya kembali ke on mobile dengan menambahkan CSS berikut untuk tablet:

grid-column: auto;
grid-row: auto;

Untuk penempatan grid modul kustom terakhir kami, kami akan memposisikan modul teks ketujuh (sekarang di kolom terakhir dari baris kedua) di lokasi baru yang ditetapkan di dalam grid. Posisi baru ini akan dimulai pada baris kolom 4 dan berakhir pada baris kolom 5 dan juga dimulai pada baris baris 2 dan berakhir pada baris baris 4.

Untuk melakukan ini, buka pengaturan untuk modul teks ketujuh dan tempel CSS khusus berikut ke elemen utama:

grid-column: 4/5;
grid-row: 2/4;

Kemudian rekatkan CSS berikut untuk tampilan tablet seperti yang kita lakukan untuk modul sebelumnya.

grid-column: auto;
grid-row: auto;

Menyelaraskan Konten Modul (atau Item Kotak) ke Tengah

Kita bisa berhenti di situ, tetapi kita akan kehilangan cara yang bermanfaat untuk menyelaraskan (atau memusatkan) konten modul kita secara vertikal. Memiliki modul (atau item kisi) konten yang dipusatkan secara vertikal adalah fitur yang nyaman dari tata letak kisi karena membuat semuanya lebih simetris dan menyenangkan secara estetika.

Untuk melakukan ini, kita dapat menambahkan potongan CSS yang menggunakan properti CSS flex untuk menyelaraskan dan menjustifikasi konten ke tengah. Kita perlu menambahkan cuplikan ini ke masing-masing modul. Untuk melakukan ini, kita dapat menggunakan multiselect untuk memilih semua modul (atau item kisi) yang belum memiliki CSS khusus ke elemen utama (kita tidak ingin menimpa modul tersebut dengan posisi khusus). Kemudian buka pengaturan elemen dengan membuka pengaturan untuk salah satu modul yang dipilih. Di bawah tab Advanced, rekatkan CSS berikut ke Elemen Utama:

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

Sekarang kita dapat kembali ke tiga modul lainnya (modul #1, #3, dan #7) satu per satu dan menambahkan potongan CSS yang sama selain CSS yang digunakan untuk memberi modul posisi khusus di grid. Pastikan untuk menambahkan cuplikan CSS di bawah CSS yang ada untuk desktop dan tablet.

Tambahkan CSS ke Modul Teks Pertama

Tambahkan CSS ke Modul Teks Ketiga

Tambahkan CSS ke Modul Teks Ketujuh

Hasil Akhir

Berikut adalah hasil akhir dari tata letak kotak CSS kustom kami untuk modul teks kami.

Perhatikan bagaimana modul (atau item kisi) menyesuaikan dengan lancar pada lebar browser yang berbeda untuk desain responsif yang bagus.

Contoh Menggunakan Modul dan Desain Berbeda

Sulit untuk melihat potensi penuh menggunakan grid CSS untuk membuat tata letak modul hanya menggunakan modul teks. Jadi saya pikir saya akan menunjukkan desain yang saya buat dengan menerapkan langkah yang sama dalam tutorial ini menggunakan modul dan elemen desain yang berbeda dari Paket Tata Letak Fitness Gym kami.

Ini dia…

Saya juga menyertakan tata letak ini bersama dengan tata letak modul teks dengan unduhan gratis yang ditampilkan di awal posting ini.

Jangan ragu untuk mengambilnya untuk berputar!

Pikiran Akhir

Dalam tutorial ini, kami menunjukkan cara membuat tata letak grid CSS untuk modul Divi. Meskipun prosesnya bergantung pada beberapa CSS khusus, itu tidak terlalu mengejutkan, mengingat hasil yang kuat yang dapat diperolehnya. Sangat menyenangkan untuk dapat mengontrol tata letak semua modul Anda di tingkat kolom bila diperlukan untuk tata letak Divi yang lebih unik. Untuk info lebih lanjut tentang kisi CSS, Anda harus melihat panduan lengkap ini untuk mempertimbangkan lebih banyak kemungkinan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!