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
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana menambahkan teks pada Divi produk WooCommerce
- Cara mengganti warna menu antar halaman di Divi
- Fitur yang tidak Anda ketahui tentang Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna di 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:
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
Di bawah CSS Khusus, masukkan "kartu kisi" di kotak teks ID CSS. Ini akan menjadi cara bagi kami untuk mempersonalisasi modul blog ini saja.
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:
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:
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:
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:
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.
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.
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:
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:
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
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana cara menambahkan teks pada produk Divi WooCommerce
- Cara mengubah warna menu antara halaman Divi
- Cara mempersonalisasi kisi-kisi blog dengan Divi
- Cara menggunakan peran Divi editor pada WordPress
- Cara membuat slider Divi layar penuh
- Cara mengubah warna menu antara halaman Divi
- Fitur yang Anda mungkin tidak tahu tentang Divi
- Cara menggunakan Divi Builder di WordPress
- Cara menggunakan modul gulir video Divi
- Cara menggunakan modul Flip Divi Builder
- Bagaimana cara menambahkan modul testimonial pada Divi Builder
- Cara menggunakan modul teks Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna Divi
- Cara menggunakan modul Divi Social Media
- Cara menggunakan modul shop pada tema WordPress Divi
- Cara menggunakan modul sidebar Divi
- Cara menggunakan Modul Tabel Divi Price
- Cara menggunakan modul judul publikasi Divi
- Bagaimana cara menambahkan modul video Divi
- Cara menggunakan modul navigasi artikel
- Cara menggunakan modul pencarian Divi
- Cara menggunakan modul dompet Divi
- Cara menggunakan modul orang di Divi Builder
- Cara menggunakan modul dompet dengan filter Divi
- Cara menggunakan modul slider lebar penuh
- Cara menggunakan Modul Gambar Divi Builder
- Cara menggunakan modul navigasi penuh lebar dari Divi Builder
- Cara menggunakan modul galeri gambar
- Cara menggunakan Modul Full-Width Divi Builder Card
- Cara menggunakan Modul Portofolio Full Full Divi
- Cara menggunakan modul header penuh lebar Divi
- Cara menggunakan Modul Divi Counter
- Cara menggunakan slider artikel di Divi Builder
- Cara menggunakan modul Divi Email Optin
Selamat pagi ! Tahukah Anda jika mungkin untuk mengubah jumlah kolom objek Blog ini?
Saya ingin setiap kartu ditampilkan dengan lebar penuh. TERIMA KASIH !
Halo,
Saya mencoba menampilkan posting blog dalam "grid" dengan id "gridcard" tetapi tidak berhasil. Bisakah kamu membantuku ?
Bonsoir,
Maaf untuk jawaban terlambat.
Bisakah Anda mengubah permintaan Anda?
Halo,
Saya benar-benar seorang pemula tetapi, berkat tutorial online, saya berhasil membangun blog yang bagus.
Sungguh, terima kasih untuk yang satu ini karena saya baru saja menyalin kodenya dan semuanya berjalan lancar, saya senang dengan hasilnya.
Terima kasih sekali lagi, semoga harimu menyenangkan 🙂
Aku mohon padamu. Terima kasih sudah membaca kami.
Bonsoir,
blog DIVI, di sebelah nama penulis, menempatkan preposisi "dari" (misalnya dari Stefano). Saya ingin tahu apakah mungkin mengubahnya menjadi "de"
Halo,
Ya, dimungkinkan untuk mengubah elemen ini dengan Divi.
Hello Thierry
Tutorial super
Saya ingin tahu apakah mungkin untuk meningkatkan ukuran gambar unggulan
Saya ingin menerapkan gaya ini ke blog saya
merci
Halo,
Iya itu mungkin.
Halo,
Bagaimana cara mengoptimalkan tata letak ini untuk seluler (tablet)? Saya tidak memiliki Schabrettmuster tetapi warna berbeda untuk setiap posting blog, dalam urutan tertentu. Tentu saja, itu berubah ketika Anda beralih ke seluler dan warnanya tidak lagi terkait dengan posting yang tepat ...
Apakah ada yang punya ide di sini?
Halo,
Sayangnya tidak.
Halo,
Terima kasih untuk artikel ini! Saya juga ingin mengubah "baca lebih lanjut" di bagian bawah artikel.
Bisakah Anda memberi kami contoh kode CSS untuk mengubah teks dan memasukkannya ke dalam tombol terpusat yang bagus misalnya?
En vous remerciant.
Sophie
Hai 🙂 Untuk mengubah tulisan tombol “read more”, caranya di Blog Setting > Style > Read more Text. Anda dapat memodifikasi tipografi dan teks "read more". Namun, saya tidak tahu cara membuat tombol darinya. Pengaturan yang bagus!
Cuándo lo pones di CSS personalizado, por ejemplo:
#gridcard .Kolom: kesenian anak pertama: nth-child (impar) {background: #333; }
da kesalahan como el seigue: Diharapkan FUNCTION atau IDENT setelah titik dua pada garis 1, col 18
salam
Bonsoir,
Blog kami diterjemahkan secara otomatis dari bahasa Prancis. Oleh karena itu saya mengundang Anda untuk memilih bahasa Prancis di widget bahasa yang terletak di bilah atas blog kita dan kode CSS yang benar akan ditampilkan.
usted escribió artículo evil escrito, debería ser: artículo del primer hijo: tidak ada arte del primer hijo:
Anda salah mengeja artikel, itu seharusnya: artikel anak pertama: bukan seni anak pertama:
Hai,
70 bahasa lain.
Halo
Terima kasih untuk artikelnya. Saya memiliki presentasi grid (Tema Divi) Saya memiliki thumbnail (foto) untuk presentasi artikel, sebaliknya ketika saya mengklik untuk mengakses artikel, gambar ditampilkan secara besar-besaran di awal artikel. 'artikel. Apakah ada cara untuk membuatnya seukuran dengan thumbnail atau menghapusnya dari tampilan posting.
merci
Patrick
Bonsoir,
Maaf, tapi dukungan divi kami terbatas pada tutorial kami. Silahkan hubungi Eleganthemes SVP.
Bonjourn, artikel super
Saya mencoba keberuntungan saya di sini, terkadang kami membahas suatu topik selama berminggu-minggu tanpa menemukan jawaban ketika subjek yang sama masuk akal bagi orang lain.
Oleh karena itu saya mencari solusi untuk menyiapkan kisi pos, hanya terdiri dari visual tetapi dengan ketinggian yang berbeda, untuk lebih eksplisit, bahwa satu dari dua visual memiliki tinggi dua kali lipat dari visual di sebelahnya.
Sebuah ide?
Julian
Halo Julian,
Saya menyarankan Anda menghubungi tim DIVI. Lebih nyaman dalam kasus ini.
tutorial besar! Aku akan menguji ca akhir pekan ini untuk situs saya.
Anda memiliki solusi untuk menghapus ekstrak di grid?
Merci à vous
Sofhy