Apakah Anda terbiasa membuat situs web yang menakjubkan menggunakan Divi ? Anda mungkin harus tahu bahwa tata letak kisi adalah fitur inti dari Divi Builder. Biasanya, Anda mulai dengan membuat baris dan memilih untuk membuat beberapa kolom untuk baris tersebut. Dengan kolom di tempat, di situlah Anda akan menambahkan modul. Kita dapat membuat segalanya lebih jauh, dengan menambahkan lebih banyak grid untuk modul-modul itu.
Sepanjang tutorial ini, kita akan mengeksplorasi cara memperluas tata letak kisi Divi dengan membuat tata letak kisi CSS untuk modul Divi dengan satu kolom. Grid CSS (menggunakan CSS Flex ) sangat populer untuk membuat grid responsif untuk konten hanya dengan beberapa baris CSS. Kami kemudian dapat mengatur semua modul kami agar responsif. Pertimbangkan ini sebagai tata letak tambahan untuk modul yang dapat Anda tambahkan ke kolom Divi. Poin bagusnya di sini adalah bahwa semua modul bersarang kita akan memiliki tinggi dan lebar yang sama tanpa perlu menyetel nilai padding dan tinggi.
Pratinjau Hasil Akhir
Sebelum memulai, mari kita lihat apa yang dapat Anda capai di akhir tutorial ini.
Membuat Tata Letak Kotak CSS Kustom Untuk Modul Divi
Bagian 1: Menambahkan Modul ke Kolom Divi
Salah satu hal pertama yang perlu kita lakukan, adalah mengatur modul kita ke dalam tata letak grid. Kami akan menambahkan semua modul yang ingin kami gunakan ke kolom kami. Mari kita mulai dengan membuat baris satu kolom baru ke bagian reguler default.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarang
Membuat Modul
Di dalam kolom, kita akan menambahkan modul teks. Kami kemudian akan mengubah pengaturan konten sebagai berikut:
- Tambahkan judul H2 di atas teks paragraf
- Warna Latar Belakang: #444444
Kami juga akan memperbarui pengaturan desain sebagai berikut:
- Font Teks: Poppins
- Warna Teks: Cahaya
- Pilih tab H2 di bawah Teks Judul
- Judul 2 Gaya Font: TT
- Padding: 10% atas, 10% bawah, 10% kiri 10% kanan
CATATAN : Untuk membuatnya sangat sederhana, kita akan tetap menggunakan beberapa modul teks dengan berbagai warna latar belakang untuk menunjukkan perbedaan antara setiap modul.
Beralih ke tampilan lapisan dan buat modul teks berikutnya sebagai berikut:
- Gandakan modul teks.
- Buka pengaturan teks untuk modul duplikat.
- Perbarui Warna Latar Belakang
- Warna Latar Belakang: #4c6085
Anda dapat mengulangi proses ini untuk membuat modul teks ketiga sebagai berikut:
- Gandakan modul teks sebelumnya.
- Buka pengaturan teks untuk modul duplikat.
- Perbarui Warna Latar Belakang
- Warna Latar Belakang: #39a0ed
Kami akan mengulangi proses sekali lagi untuk membuat modul teks keempat sebagai berikut:
- Gandakan modul teks sebelumnya.
- Buka pengaturan teks untuk modul duplikat.
- 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: Mari membuat Tata Letak Grid CSS Untuk Modul
Sekarang setelah semua modul kita ditambahkan, mari buat grid untuk itu.
Pengaturan Baris
Untuk contoh ini, kami menggunakan tata letak satu kolom sehingga kami dapat menampilkan kisi modul kami dalam tata letak lebar penuh. Sekarang, kita perlu memperbarui pengaturan baris untuk memastikan baris mengambil lebar penuh halaman. Kita juga harus 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 penting 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 menampilkan konten (atau modul) sesuai dengan modul grid CSS .
tampilan: kisi
Pada baris kedua CSS, kita akan mendefinisikan template kolom dari grid. Dalam hal ini, grid kita akan memiliki empat kolom yang memiliki lebar 25%.
kisi-templat-kolom: 25% 25% 25% 25%
Baris ketiga menyebutkan baris yang akan dibuat secara otomatis. Ini berarti ketinggian setiap baris akan ditentukan oleh ketinggian vertikal konten (atau modul) di dalam baris.
grid-auto-baris: otomatis
Sesuaikan Tata Letak Kotak di Seluler
Sekarang, kita juga perlu menyesuaikan tata letak grid pada perangkat seluler sesuai kebutuhan.
Untuk dapat melakukannya, kita hanya perlu menambahkan beberapa CSS ke tablet dan seluler yang mengubah jumlah kolom dan lebar setiap kolom.
Dalam contoh ini, kita akan mengubah tata letak kotak untuk modul pada tablet menjadi dua kolom yang lebarnya masing-masing 50%.
Mari kita buka opsi responsif dan pilih tab tablet di bawah elemen utama dan tempel CSS berikut:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Untuk tampilan ponsel, kami menginginkan tata letak satu kolom. Untuk membuat ini, rekatkan CSS berikut di bawah Elemen Utama tab Telepon:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Bagian 3: Membuat Perubahan pada Modul Grid
Menambahkan Modul Baru ke Grid dan Bagaimana Reaksinya
Sekarang kita memiliki setiap modul ke Grid, jika kita menambahkan lebih banyak modul, yang lain akan didorong ke kanan dan baris baru akan dibuat. 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
Sementara itu, semua modul memiliki jumlah konten yang sama, jadi kita tidak bisa melihat bagaimana grid akan menangani modul yang memiliki ketinggian berbeda. 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. Mulai sekarang tinggi baris juga akan ditentukan oleh modul dengan konten terbanyak (atau tinggi vertikal).
Mengubah Posisi Modul Pada Grid
Item dari grid CSS dapat diposisikan menggunakan sistem penomoran built-in pada 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 kolom kita, nomor baris dimulai dari 1 di sebelah kiri kolom pertama dan berakhir di 5 di sebelah kanan kolom keempat. Dan, karena kita memiliki tiga baris, nomor baris untuk baris dimulai dari 1 di bagian atas baris pertama dan sampai 4 di bagian bawah baris ketiga.
Jika kita ingin mengubah posisi sebuah modul (atau item grid) di CSS Grid, kita dapat mengatur menentukan di mana kita ingin modul tertentu ditempatkan di grid. Melakukan hal ini akan menimpa penempatan default modul di grid.
Untuk contoh ini, kita akan memindahkan modul teks pertama ke posisi yang berbeda. Untuk itu, kita hanya 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 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 akan mengembalikan modul ke lokasi semula. Ini berguna untuk menjaga tajuk utama Anda di bagian atas halaman.
Jadi untuk itu, 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 sekarang akan memposisikan modul teks ketiga (sekarang di kolom kedua dari baris atas) di lokasi yang ditetapkan baru di dalam kisi. 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;
Kita sekarang dapat mengubah posisi untuk seluler dengan menambahkan CSS berikut untuk tablet:
grid-column: auto;grid-row: auto;
Untuk modifikasi terakhir kami, kami akan memposisikan modul ketujuh di lokasi set baru 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 itu, mari kita buka pengaturan untuk modul teks ketujuh dan tempel CSS khusus berikut ke elemen utama:
grid-column: 4/5;grid-row: 2/4;
Sekarang rekatkan CSS berikut untuk tampilan tablet.
grid-column: auto;grid-row: auto;Menyelaraskan Konten Modul (atau Item Kotak) ke Tengah
Anda mungkin bosan dengan instruksi, tetapi jika kita berhenti di sini, kita akan kehilangan cara yang berguna untuk menyelaraskan (atau memusatkan) konten modul kita secara vertikal. Memiliki konten modul yang dipusatkan secara vertikal adalah fitur bagus dari tata letak kotak karena membuat semuanya lebih simetris dan menyenangkan secara estetika.
Jadi untuk itu, kita bisa menambahkan potongan CSS yang menggunakan properti flex CSS untuk menyelaraskan dan menjustifikasi konten ke tengah. Kita perlu menambahkan cuplikan ini ke masing-masing modul. Kita dapat menggunakan multi-select untuk memilih semua modul (atau item grid) yang belum memiliki CSS kustom ke elemen utama (karena kita tidak ingin menimpa modul tersebut dengan posisi kustom). Kemudian buka pengaturan elemen dengan membuka pengaturan untuk salah satu modul yang dipilih. Di bawah tab Advanced, rekatkan CSS berikut pada 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.
Hasil Akhir
Berikut adalah tampilan yang kami lakukan sejauh ini.
Dapatkah Anda memperhatikan bagaimana modul (atau item kisi) menyesuaikan dengan lancar pada lebar browser yang berbeda untuk desain responsif yang bagus.
Contoh Nyata Menggunakan Berbagai Modul dan Desain
Jika Anda ingin melihat contoh nyata menggunakan sistem grid ini, maka Anda dapat menggunakan modul yang berbeda. Inilah yang dapat Anda buat menggunakan teknik itu. Ini tersedia di Paket Tata Letak Fitness Gym.
Di Semua Milikmu Sekarang
Dalam tutorial ini, kami telah bekerja untuk membuat tata letak grid CSS untuk modul Divi. Meskipun prosesnya bergantung pada beberapa CSS khusus, ini tidak terlalu mengejutkan, mengingat hasil luar biasa yang dapat kita peroleh darinya. Sangat menyenangkan untuk dapat mengontrol tata letak semua modul Anda di tingkat kolom bila diperlukan untuk tata letak Divi yang lebih unik. Jika Anda seorang pecandu CSS dan ingin menyelam lebih jauh, Anda harus melihat panduan lengkap ini untuk mempertimbangkan lebih banyak kemungkinan.
Kami akan senang, jadi lihat seberapa sukses Anda di bagian komentar.
