Loncat ke Konten Utama

Cara mengkustomisasi grid dari sebuah blog dengan Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.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 untuk menyesuaikan desain keseluruhan jaringan Anda. Anda dapat dengan mudah memastikan bahwa semua kartu Anda memiliki warna latar belakang yang sama, font, margin, dll. Namun, opsi gaya terbatas pada desain grid secara keseluruhan, yang membuatnya sulit penerapan beberapa atau desain berbeda untuk kartu di dalam grid.

Hari ini saya akan menunjukkan cara untuk mengidentifikasi dan menerapkan kartu lebih dari satu gaya yang membentuk grid ke blog Anda menggunakan CSS kustom. Saya akan menunjukkan kepada Anda bagaimana menerapkan gaya yang berbeda untuk setiap peta lainnya, untuk membuat efek dam. Saya juga akan menunjukkan cara untuk gaya masing-masing kartu berbeda oleh garis dan saya akan menunjukkan cara untuk menargetkan kartu individu.

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

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

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

  • Layout: Grid (Grid)
  • Jumlah artikel: 12
  • Tunjukkan gambar di kepala: YA
  • Tombol Read more: ON

Di bawah Custom CSS, masukkan "gridcard" di kotak teks CSS ID. Ini akan menjadi cara bagi kami untuk hanya menyesuaikan modul blog ini.

Simpan perubahan Anda

Cara memahami tata letak "Grid" 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:

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]

Kartu tiket blog dipesan dari atas ke bawah di masing-masing kolom. Jadi, jika Anda ingin memberi mereka angka, Anda harus menghitung 1 ke 4 pada setiap panjang dari atas ke bawah:

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

Desain gerbang Contoh

Contoh # 1: Merancang Kotak Kotak-Kotak

Untuk contoh pertama ini, saya akan menargetkan semua kartu aneh dari modul blog (1 dan kartu 3) di kolom pertama 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

posting: nth-child (odd) = memilih semua item aneh (atau kartu) di kolom

Taruh semuanya bersama-sama, ini memilih kartu bernomor ganjil di kolom pertama dari 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 berlaku untuk semua item teks di kartu modul blog (termasuk judul, meta artikel, menghubungkan meta dari artikel dan isi artikel) dan memberikan warna putih.

Inilah hasilnya:

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

#gridcard .column: artikel terakhir-anak: nth-child (tidak datar) {background: #333; } #gridcard .column: artikel terakhir-anak: n-anak (aneh) .entry-judul, #gridcard .column: artikel terakhir-anak: n-anak (aneh) .post-meta, #gridcard .column: terakhir- artikel anak: n-anak (aneh) .post-meta, #gridcard .column: artikel terakhir-anak: n-anak (aneh) .post-konten p {color: #ffffff; }

Kode ini mengacu pada kolom "terakhir" (dalam hal ini, kolom ketiga adalah kolom terakhir) dengan elemen "terakhir-anak" semu.

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]

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

#gridcard .column: n-anak (2) Item: n-anak (bahkan) {background: #333; } #gridcard .column: n-anak (2) Artikel: n-anak (bahkan) .entry-judul, #gridcard .column: n-anak (2) Artikel: n-anak (bahkan) .post-meta # gridcard .column: n-anak (2) artikel: n-anak (bahkan) .post-meta memiliki #gridcard .column: n-anak (2) artikel: n-anak (bahkan) .post-konten p {color : #fff; }

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

Contoh # 2: Menambahkan Efek Hover dengan Layout Layout

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

Untuk contoh ini, saya akan menggunakan tata letak dam dan kali ini saya akan mengubah gambar ke salah satu kartu abu-abu hitam-putih ketika melayang di atas peta. Dan, saya akan membuat gambar ke salah satu kartu putih yang lebih terang saat melayang di atas peta. Untuk melakukan ini, tambahkan CSS berikut di kotak CSS kustom (pastikan untuk menonaktifkan atau memotong kode lain sehingga tidak kompatibel dengan yang baru):

#gridcard .column: pertama-anak Artikel: n-anak (aneh) #gridcard .column: artikel terakhir-anak: n-anak (aneh) #gridcard .column: n-anak (2) Item: n-anak (bahkan) {background: #333; } #gridcard .column: pertama-anak Artikel: n-anak (aneh) .entry-judul, #gridcard .column: pertama-anak Artikel: n-anak (aneh) .post-meta, #gridcard .column: pertama- artikel anak: n-anak (aneh) .post-meta telah #gridcard .column: artikel pertama-anak: n-anak (aneh) .post-konten p #gridcard .column: artikel terakhir-anak: n-anak (aneh) .entry-judul, #gridcard .column: artikel terakhir-anak: n-anak (aneh) .post-meta, #gridcard .column: artikel terakhir-anak: n-anak (aneh) memiliki .post-meta , #gridcard .column: artikel terakhir-anak: n-anak (aneh) .post-konten p #gridcard .column: n-anak (2) artikel: n-anak (bahkan) .entry-judul, #gridcard. kolom: n-anak (2) Item: n-anak (bahkan) .post-meta, #gridcard .column: n-anak (2) Item: n-anak (bahkan) .post-meta, #gridcard .column : artikel nth-child (2): nth-child (even) .post-content p {color: #fff; } #gridcard .column: n-anak (2) Item: n-anak (bahkan): hover img, #gridcard .column: pertama-anak Artikel: n-anak (aneh): hover img, #gridcard .column: terakhir -barang anak-anak: nth-child (aneh): hover img {-webkit-filter: grayscale (1); filter: grayscale (1); } #gridcard .column: n-anak (2) Item: n-anak (aneh): hover img, #gridcard .column: pertama-anak Artikel: n-anak (bahkan): hover img, #gridcard .column: terakhir -barang anak-anak: nth-child (even): hover img {-webkit-filter: brightness (1.5); filter: kecerahan (1.5); }

Anda juga dapat menambahkan efek pembalikan ke kartu sehingga ketika Anda membawa lebih dari kartu putih, mereka menjadi abu-abu gelap, dan ketika Anda membawa lebih dari kartu yang lebih gelap, mereka menjadi putih.

Tambahkan CSS berikut dan banyak lagi CSS di atas:

#gridcard .column artikel, #gridcard .column artikel img {-webkit-transisi: semua 0.8; -moz-transition: semua 0.8; transisi: semua 0.8; } #gridcard .column: pertama-anak Artikel: n-anak (aneh): hover, #gridcard .column: artikel terakhir-anak: n-anak (aneh): hover, #gridcard .column: n-anak (2) artikel: nth-child (even): hover {background: #fff; } #gridcard .column: pertama-anak Artikel: n-anak (aneh): hover .entry-title, #gridcard .column: pertama-anak Artikel: n-anak (aneh): hover .post-meta, #gridcard. kolom: artikel pertama-anak: n-anak (aneh): hover .post-meta memiliki #gridcard .column: pertama-anak artikel: n-anak (aneh): hover .post-konten p #gridcard .column: artikel terakhir-anak: n-anak (aneh): hover .entry-title, #gridcard .column: artikel terakhir-anak: n-anak (aneh): hover .post-meta, #gridcard .column: item terakhir-anak : n-anak (aneh): hover .post-meta memiliki #gridcard .column: artikel terakhir-anak: n-anak (aneh): hover .post-konten p #gridcard .column: n-anak (2) Pasal: n-anak (bahkan): hover .entry-title, #gridcard .column: n-anak (2) Item: n-anak (bahkan): hover .post-meta, #gridcard .column: n-anak ( 2) artikel: n-anak (bahkan): hover .post-meta memiliki #gridcard .column: n-anak (2) artikel: n-anak (bahkan): hover .post-konten p {color: #333; } #gridcard .column: pertama-anak Artikel: n-anak (bahkan): hover, #gridcard .column: artikel terakhir-anak: n-anak (bahkan): hover, #gridcard .column: n-anak (2) artikel: nth-child (odd): hover {background: #333; } #gridcard .column: pertama-anak Artikel: n-anak (bahkan): hover .entry-title, #gridcard .column: artikel pertama-anak: n-anak (bahkan): hover .post-meta, #gridcard. kolom: pertama-anak artikel: n-anak (bahkan): hover .post-meta memiliki #gridcard .column: artikel pertama-anak: n-anak (bahkan): hover .post-konten p #gridcard .column: artikel terakhir-anak: n-anak (bahkan): hover .entry-title, #gridcard .column: artikel terakhir-anak: n-anak (bahkan): hover .post-meta, #gridcard .column: item terakhir-anak : n-anak (bahkan): hover .post-meta memiliki #gridcard .column: artikel terakhir-anak: n-anak (bahkan): hover .post-konten p #gridcard .column: n-anak (2) Pasal: n-anak (aneh): hover .entry-title, #gridcard .column: n-anak (2) Item: n-anak (aneh): hover .post-meta, #gridcard .column: n-anak ( 2) artikel: n-anak (aneh): hover .post-meta memiliki #gridcard .column: n-anak (2) artikel: n-anak (aneh): hover .post-konten p {color: # fff; }

Sekarang lihat efeknya di blog anda.

Contoh # 3: Sesuaikan peta dengan garis

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

Artikel #gridcard: n-anak (bahkan) {background-color: #333; } Artikel #gridcard: n-anak (bahkan) .entry-judul, artikel #gridcard: n-anak (bahkan) .post-meta, artikel #gridcard: n-anak (bahkan) .post-meta, bagian #gridcard : n-anak (bahkan) .post-konten p {color: # fff; }

Inilah hasilnya:

Contoh # 4: Merancang peta kisi khusus

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

Pergi ke halaman menampilkan modul blog Anda dan klik kanan pada salah satu kartu Anda. Di kotak opsi yang muncul, pilih "Periksa" (beberapa browser mungkin memiliki "Elemen Inspeksi" atau yang serupa) Ini akan menerapkan jendela Alat Pengembang yang menampilkan html dan css dari Anda Halaman web: temukan tag artikel yang membungkus artikel Anda dan catat ID artikel yang ditugaskan kepadanya. Ini adalah pemilih yang perlu Anda gunakan untuk menargetkan kartu individu Anda. klik kanan dan klik diinspeksi untuk menemukan ID pasca-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. [GRATIS]

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, # post-3466 .post-content p {color: #fff; }

Sekarang peta memiliki gaya khusus yang diterapkan padanya.

Itu saja

Pikiran terakhir

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

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

Tutorial Divi lainnya

Artikel ini berisi komentar 16
  1. Hello Thierry
    Tutorial super
    Saya ingin tahu apakah mungkin untuk meningkatkan ukuran gambar menjadi satu
    Saya ingin menerapkan gaya ini ke blog saya
    merci

  2. 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, ini berubah ketika kita pindah ke seluler dan warnanya tidak lagi dikaitkan dengan pos yang bagus ...
    Adakah yang punya ide di sini?

  3. Halo,

    Terima kasih atas artikel ini! Saya juga ingin memodifikasi "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

  4. 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. Saya mengundang Anda untuk memilih bahasa Prancis di widget bahasa yang terletak di topbar blog kami 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:

  5. Halo
    Terima kasih untuk artikelnya Saya memiliki presentasi di grid (Theme Divi) Saya memiliki thumbnail (foto) untuk presentasi artikel, di sisi lain ketika saya mengklik untuk memiliki akses ke artikel tersebut, gambar tersebut muncul dalam jumlah besar di awal Pasal. Apakah ada cara untuk memberikan ukuran yang sama seperti thumbnail atau menghapusnya dalam tampilan artikel?
    merci
    Patrick

  6. Bonjourn, artikel super
    Saya mencoba keberuntungan saya di sini, kadang-kadang, kita membalikkan topik selama berminggu-minggu tanpa menemukan jawabannya sementara subjek yang sama logis bagi orang lain.

    Jadi saya mencari solusi untuk memasang grid pos, hanya terdiri dari visual tapi ketinggian yang berbeda, untuk lebih eksplisit, sehingga visual pada dua memiliki dua tingkat tinggi visual berikutnya.

    Sebuah ide?

    Julian

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

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
23 saham
saham14
menciak2
Register7
Ada apa