Loncat ke Konten Utama

Cara mempersonalisasi kisi-kisi blog dengan Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 kepada Anda cara menargetkan dan menerapkan lebih dari satu gaya ke kartu yang membentuk kisi blog Anda menggunakan CSS khusus. Saya akan menunjukkan kepada Anda bagaimana menerapkan gaya yang berbeda untuk satu sama lain kartu, untuk membuat efek papan catur. Saya juga akan menunjukkan kepada Anda cara menata setiap kartu secara berbeda per baris dan menunjukkan kepada Anda cara menargetkan setiap kartu.

Jadi ini adalah contoh 4 tentang cara menyesuaikan blog Anda, termasuk beberapa efek hover yang dapat Anda gunakan. Di akhir tutorial ini, Anda akan dapat membuat desain yang luar biasa untuk 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.

Gridcard css divi

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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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 artikel, tautan meta artikel, dan konten artikel) dan memberi mereka warna putih.

Inilah hasilnya:

Kustomisasi grid divi aneh

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

Tutorial Divi lainnya

Artikel ini berisi komentar 20

  1. 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 🙂

  2. Bonsoir,
    blog DIVI, di sebelah nama penulis, menempatkan preposisi "dari" (misalnya dari Stefano). Saya ingin tahu apakah mungkin mengubahnya menjadi "de"

  3. Hello Thierry
    Tutorial super
    Saya ingin tahu apakah mungkin untuk meningkatkan ukuran gambar unggulan
    Saya ingin menerapkan gaya ini ke blog saya
    merci

  4. 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?

  5. 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

  6. 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

    1. 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.

    2. 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:

  7. 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

  8. 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

  9. tutorial besar! Aku akan menguji ca akhir pekan ini untuk situs saya.
    Anda memiliki solusi untuk menghapus ekstrak di grid?
    Merci à vous
    Sofhy

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
16 saham
saham7
menciak2
Register7