Modul Blog Divi memiliki opsi tata letak dalam bentuk kotak yang berguna untuk posting blog Anda. Template kotak mengatur posting blog Anda ke dalam kotak atau peta yang menyederhanakan visibilitas item pada layar dibandingkan dengan tampilan standar.

Pengaturan modul Blog memungkinkan Anda menyesuaikan keseluruhan desain jaringan Anda. Anda dapat dengan mudah membuat semua kartu Anda memiliki warna latar belakang, font, margin yang sama, dll. Namun, opsi gaya terbatas pada desain kisi secara keseluruhan, sehingga menyulitkan menerapkan beberapa atau desain yang berbeda ke peta dalam grid.

Hari ini saya akan menunjukkan cara menargetkan dan menerapkan lebih dari satu gaya pada kartu yang membentuk grid. blog Anda menggunakan CSS khusus. Saya akan menunjukkan cara menerapkan gaya berbeda pada setiap kartu, untuk menciptakan efek kotak-kotak. Saya juga akan menunjukkan kepada Anda cara menata setiap kartu secara berbeda per baris dan saya akan menunjukkan kepada Anda cara menargetkan setiap kartu.

Jadi ini adalah 4 contoh cara menyesuaikan blog Anda, termasuk beberapa efek hover yang dapat Anda gunakan. Di akhir tutorial ini, Anda akan dapat membuat desain yang mengagumkan blog Anda.

Tutorial lainnya tentang tema Divi

Mari kita mulai.

Konfigurasi Tata Letak Grid untuk blog Anda

Sebelum memulai dengan desain kartu modul blog, pastikan Anda memiliki setidaknya artikel 12 yang sudah dibuat dengan gambar di dalam kotak.

Setelah pesan Anda dibuat, buat halaman baru. Di halaman baru Anda, sebarkan modul blog pada kolom lebar-penuh di bagian standar:

Konfigurasi tata letak blog divi

Klik untuk mengedit pengaturan modul Blog. Di bawah Pengaturan Umum, ubah pengaturan berikut:

  • Layout: Grid (Grid)
  • Jumlah artikel: 12
  • Tampilkan gambar unggulan: YA
  • Tombol Read more: ON

Konfigurasi grid Divi

Di bawah CSS Khusus, masukkan "kartu kisi" di kotak teks ID CSS. Ini akan menjadi cara bagi kami untuk mempersonalisasi modul blog ini saja.

Divisi css gridcard

Simpan perubahan Anda

Bagaimana memahami tata letak "Kisi" untuk blog

Sekarang bahwa Anda memiliki jaringan blog Anda di tempat, penting untuk memahami struktur tata letak grid sehingga Anda dapat menemukan peta modul blog Anda ingin menyesuaikan.

Kisi blog dikonfigurasi dengan tata letak tiga kolom. Berikut ini adalah ilustrasi dari kisi blog dengan artikel blog 12 dibagi menjadi tiga kolom:

Presentasi tata letak grid divi

Kartu tiket blog dipesan dari atas ke bawah di setiap kolom. Jadi, jika Anda ingin memberi mereka nomor, Anda perlu menghitung 1 hingga 4 pada setiap panjang dari atas ke bawah:

Hitung artikel divi

Karena Anda mengetahui urutan numerik setiap kartu blog di bawah setiap kolom, Anda juga dapat mengidentifikasi setiap kartu sebagai angka ganjil atau genap sebagai berikut:

Angka genap dan ganjil divi

Desain gerbang Contoh

Contoh n ° 1: Desain kisi "Kotak-kotak"

Untuk contoh pertama ini, saya akan menargetkan semua kartu ganjil di modul blog (kartu 1 dan 3) di kolom pertama yang memberi mereka warna latar belakang abu-abu gelap. Untuk melakukan ini, buka "Divi → Opsi tema" dan tambahkan CSS berikut di kotak teks CSS khusus:

#gridcard .column: pertama-anak Artikel: n-anak (aneh) {background: #333; }

Berikut adalah rincian dari apa kode ini tidak:

#gridcard = id seluruh modul blog

.column: first-child = pilih kolom pertama di modul blog

post: nth-child (odd) = memilih semua item ganjil (atau kartu) di kolom

Menyatukan semuanya, ini memilih kartu bernomor ganjil di kolom pertama modul blog dengan ID "gridcard".

Kemudian tambahkan teks putih Anda yang akan pergi pada latar belakang gelap dengan menambahkan CSS berikut:

#gridcard .column: pertama-anak Artikel: n-anak (aneh) .entry-judul, #gridcard .column: pertama-anak Artikel: n-anak (aneh) .post-meta, #gridcard .column: pertama-anak Pasal: n-anak (aneh) .post-meta, #gridcard .column: pertama-anak artikel: n-anak (aneh) .post-konten p {color: #ffffff; }

Kode ini menargetkan semua elemen teks dalam kartu modul blog (termasuk judul, meta postingan, link meta postingan, dan isi artikel) dan memberi mereka warna putih.

Inilah hasilnya:

Kustomisasi grid divi aneh

Langkah selanjutnya dalam membuat tata letak papan catur kami adalah menargetkan kartu bernomor ganjil di kolom ketiga dan menerapkan latar belakang abu-abu tua dan teks putih seperti yang Anda lakukan di kolom pertama. Tambahkan CSS berikut di kotak teks CSS Khusus:

#gridcard .column: artikel anak terakhir: n-anak (ganjil) {background: # 333; } #gridcard .column: artikel anak terakhir: nth-child (odd) .entry-title, #gridcard .column: last-child article: n-child (odd) .post-meta, #gridcard .column: last- artikel anak: n-anak (ganjil) .post-meta a, #gridcard .column: artikel anak terakhir: n-anak (ganjil) .post-konten p {color: #ffffff; }

Kode ini menargetkan kolom "terakhir" (dalam hal ini, kolom ketiga adalah kolom terakhir) dengan elemen nama panggilan "anak terakhir".

Untuk kolom kedua (atau menengah), targetkan kartu genap untuk menyelesaikan efek papan catur. Untuk melakukan ini kita perlu menambahkan CSS berikut:

#gridcard .column: n-child (2) article: n-child (even) {background: # 333; } #gridcard .column: n-child (2) article: n-child (even) .entry-title, #gridcard .column: n-child (2) article: n-child (even) .post-meta, # gridcard .column: n-child (2) article: n-child (even) .post-meta a, #gridcard .column: n-child (2) article: n-child (even) .post-content p {color : #fff; }

Sekarang pergi memeriksa halaman blog untuk melihat tata letak kotak-kotak kartu Blog modul.

Tata letak kotak-kotak divi

Contoh # 2: Menambahkan Efek Hover dengan Tata Letak Kotak-kotak

Setelah Anda mengetahui cara menargetkan kartu modul blog, Anda dapat mengubah salah satu elemen di dalam kartu secara kreatif.

Untuk contoh ini, saya akan menggunakan tata letak papan catur dan kali ini saya akan mengubah gambar unggulan dari peta abu-abu gelap menjadi hitam dan putih saat mengarahkan kursor ke atas peta. Dan, saya akan membuat gambar halaman depan dari kartu putih lebih cerah saat mengarahkan kursor ke kartu. Untuk melakukan ini, tambahkan CSS berikut di area CSS Khusus (pastikan untuk menonaktifkan atau memotong kode lain agar tidak kompatibel dengan yang baru):

#gridcard .column: artikel anak pertama: n-anak (ganjil), #gridcard .column: artikel anak terakhir: n-anak (ganjil), #gridcard .column: n-anak (2) artikel: n-anak (datar) {background: # 333; } #gridcard .column: artikel anak-pertama: n-anak (ganjil) .entry-title, #gridcard .column: artikel anak pertama: n-anak (ganjil) .post-meta, #gridcard .column: first- artikel anak: nth-child (odd) .post-meta a, #gridcard .column: first-child article: n-child (odd) .post-content p, #gridcard .column: last-child article: n-child (ganjil) .entry-title, #gridcard .column: last-child article: n-child (odd) .post-meta, #gridcard .column: last-child article: n-child (odd) .post-meta a , #gridcard .column: artikel-anak terakhir: n-anak (ganjil) .post-konten p, #gridcard .column: n-anak (2) artikel: n-anak (genap) .entry-title, #gridcard. kolom: n-anak (2) artikel: n-anak (genap) .post-meta, #gridcard .column: n-anak (2) artikel: n-anak (genap) .post-meta a, #gridcard .column : n-anak-anak (2) artikel: n-anak (datar) .post-konten p {color: #fff; } #gridcard .column: n-child (2) article: n-child (even): hover img, #gridcard .column: first-child article: n-child (odd): hover img, #gridcard .column: last -artikel anak: n-anak (ganjil): hover img {-webkit-filter: grayscale (1); filter: grayscale (1); } #gridcard .column: n-child (2) article: n-child (odd): hover img, #gridcard .column: first-child article: n-child (even): hover img, #gridcard .column: last -artikel anak: n-anak (datar): hover img {-webkit-filter: brightness (1.5); filter: kecerahan (1.5); }

Anda juga dapat menambahkan efek inversi pada kartu sehingga saat Anda mengarahkan kursor ke kartu putih, warnanya menjadi abu-abu tua, dan saat Anda mengarahkan kursor ke kartu abu-abu tua, kartu menjadi putih.

Tambahkan CSS berikut dan banyak lagi CSS di atas:

Artikel #gridcard .column, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-transisi: semua 0.8s; transisi: semua 0.8s; } #gridcard .column: artikel anak pertama: n-anak (ganjil): hover, #gridcard .column: artikel anak terakhir: n-anak (ganjil): hover, #gridcard .column: n-child (2) artikel: n-anak (datar): hover {background: #fff; } #gridcard .column: artikel anak pertama: n-anak (ganjil): hover .entry-title, #gridcard .column: artikel anak pertama: n-anak (ganjil): hover .post-meta, #gridcard. kolom: artikel anak pertama: n-anak (ganjil): hover .post-meta a, #gridcard .column: artikel anak pertama: n-anak (ganjil): hover .post-content p, #gridcard .column: artikel anak terakhir: nth-child (odd): hover .entry-title, #gridcard .column: last-child article: nth-child (odd): hover .post-meta, #gridcard .column: last-child article : n-anak (ganjil): hover .post-meta a, #gridcard .column: artikel-anak terakhir: n-anak (ganjil): hover .post-content p, #gridcard .column: n-child (2) artikel: n-anak (genap): hover .entry-title, #gridcard .column: n-anak (2) artikel: n-anak (genap): hover .post-meta, #gridcard .column: n-child ( 2) artikel: n-anak (genap): hover .post-meta a, #gridcard .column: n-anak (2) artikel: n-anak (datar): hover .post-content p {color: # 333; } #gridcard .column: artikel anak pertama: n-anak (genap): hover, #gridcard .column: artikel anak-terakhir: n-anak (genap): hover, #gridcard .column: n-child (2) artikel: n-anak (ganjil): hover {background: # 333; } #gridcard .column: artikel anak pertama: n-anak (genap): hover .entry-title, #gridcard .column: artikel anak pertama: n-anak (genap): hover .post-meta, #gridcard. kolom: artikel anak-pertama: n-anak (genap): hover .post-meta a, #gridcard .column: artikel anak-pertama: n-anak (genap): hover .post-content p, #gridcard .column: artikel anak terakhir: nth-child (even): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: artikel last-child : n-anak (genap): hover .post-meta a, #gridcard .column: artikel-anak terakhir: n-anak (genap): hover .post-content p, #gridcard .column: n-child (2) artikel: n-anak (ganjil): hover .entry-title, #gridcard .column: n-anak (2) artikel: n-anak (ganjil): hover .post-meta, #gridcard .column: n-child ( 2) artikel: n-anak (ganjil): hover .post-meta a, #gridcard .column: n-anak (2) artikel: n-anak (ganjil): hover .post-content p {color: #fff; }

Sekarang lihat efeknya pada blog Anda.

Menyesuaikan kisi saat mengarahkan divi

Contoh # 3: Sesuaikan peta dengan garis

Untuk contoh ketiga, saya akan menerapkan latar belakang gelap dan teks putih yang sama ke kartu di setiap baris lainnya (bukan kolom). Untuk melakukan ini, Anda perlu menargetkan semua kartu genap di setiap kolom. Pergi ke "Divi → Options" dari tema dan pastikan untuk menonaktifkan atau menghapus kode CSS sebelumnya yang telah Anda tambahkan sejak awal tutorial ini. Kemudian tambahkan CSS berikut:

#gridcard article: n-child (even) {background-color: # 333; } #gridcard article: n-child (even) .entry-title, #gridcard article: n-child (even) .post-meta, #gridcard article: n-child (even) .post-meta a, #gridcard article : n-anak (genap) .post-konten p {color: #fff; }

Inilah hasilnya:

Hasil konfigurasi dengan garis divi

Contoh # 4: Merancang peta kotak tertentu

Beberapa dari Anda mungkin ingin memilih kartu tertentu. Untuk melakukan ini, Anda perlu menemukan ID item unik yang secara otomatis ditetapkan ke setiap kartu Anda. Untuk contoh ini, saya menggunakan browser Chrome.

Buka halaman yang menampilkan modul blog Anda dan klik kanan pada salah satu kartu Anda. Di kotak opsi yang muncul, pilih "Periksa" (beberapa browser mungkin memiliki "Periksa item" atau yang serupa. Ini akan menerapkan jendela alat pengembang yang menampilkan html dan css untuk Anda halaman web. Temukan tag artikel yang membungkus artikel Anda dan tuliskan ID artikel yang ditetapkan padanya. Ini adalah pemilih yang harus Anda gunakan untuk menargetkan kartu individual Anda. Sebagai contoh, saya punya mengklik kanan dan mengklik diperiksa untuk menemukan id "post-3466".

Seperti di bawah ini:

Modifikasi satu artikel

Untuk menargetkan kartu CSS ini untuk memberinya latar belakang abu-abu dengan font putih, Anda harus menggunakan CSS berikut:

# post-3466 {background: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Sekarang peta memiliki gaya khusus yang diterapkan padanya.

Itu saja!

final pikiran

Ini hanyalah beberapa contoh dari banyak gaya berbeda yang dapat Anda capai menggunakan jenis penargetan CSS kartu modul Blog ini. Anda tidak lagi harus mempertahankan gaya yang sama untuk setiap kartu. Anda dapat mendesainnya sesuka Anda.

Jika Anda memiliki pertanyaan atau saran jangan ragu untuk menawarkan kepada saya.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Tutorial Divi lainnya