Divi Blog Grid Gratis Lihat + Kategori, Tag, Hasil Pencarian

Ini semacam setengah tata letak gratis dan setengah potongan CSS, ini adalah tampilan kisi blog yang saya buat ketika bereksperimen untuk tema anak Divi masa depan. Siapa yang tahu kapan itu akan dilakukan lol, jadi kupikir aku hanya akan berbagi tampilan ini sekarang. Ini sederhana dan bersih, harus cocok dengan banyak situs yang ada setelah warnanya diubah.

Biasanya ketika menata kisi blog Anda berakhir dengan area lain yang tidak cocok dan Anda harus mulai mengotak-atik file tema FTP dan anak, atau menggunakan plugin injektor. Saya telah menambahkan CSS untuk membuat halaman kategori, tag, dan hasil pencarian cocok sehingga Anda tidak perlu mengacaukan semua itu 

Saya menghapus teks kutipan untuk tampilan ini sehingga verbiage tombol "baca lebih lanjut" tidak terlalu masuk akal untuk digunakan, jadi saya juga menunjukkan cara mengubah teks tombol menjadi sesuatu yang lain.

Jika Anda membutuhkan banyak penyesuaian, diperlukan pengetahuan CSS, ini merupakan titik awal yang bagus bagi mereka yang senang bermain dengan kode.

LIHAT DEMOLIHAT DI SCREENFLY

Tidak perlu mengimpor tata letak karena saya hanya menggunakan beberapa pengaturan di beberapa tempat ...

• Tab konten modul blog:
  • gambar unggulan AKTIF
  • baca lebih lanjut tombol ON
  • tanggal AKTIF
  • kategori AKTIF
• Tab desain modul blog:
  • tata letak diatur ke 'kisi'
• Ini hanya modul blog dalam satu kolom, saya belum menyentuh apa pun di bagian atau baris
• Dalam penyesuai semua pengaturan tipografi saya adalah default kecuali font header saya, saya menggunakan  Montserrat
• Dalam opsi tema Divi> tata letak> tata letak pos tunggal dan pengaturan umum, saya hanya menampilkan tanggal dan kategori

KODE CSS

CSS bisa masuk stylesheet anak Anda  ATAU  penampilan> customize> CSS tambahan  OR tema Divi pilihan> kotak kustom CSS.

CSS

234 baris

/ ************************************************* * /

/ **** BLOG STYLE - GAMBAR FITUR PADA BOTTOM THE *** /

/ ************************************************* * /

/ *** HAPUS ANIMASI FADE IN SAAT BLOG GRID LOADS - TOTAL OPSIONAL *** /

.et_pb_blog_grid  .et_pb_salvattore_content [ kolom data ] .column  .et_pb_post  {

    -webkit-animation: tidak ada ;

    -moz-animasi: tidak ada ;

    -o-animasi: tidak ada ;

    animasi : tidak ada ;

}

/ *** SET UNTUK FLEX DAN MENYESUAIKAN LEBIH LANJUT *** /

.et_pb_blog_grid  .column  {

    lebar : 100 % ;

}

.et_pb_salvattore_content  {

    display : flex ;

}

/ *** MEMBUAT BLOG GRID TIGHTER *** /

.et_pb_gutters3  .et_pb_column_4_4  .et_pb_blog_grid  .column.size-1of3  .et_pb_post ,

.et_pb_gutters3.et_pb_row  .et_pb_column_4_4  .et_pb_blog_grid  .column.size-1of3  .et_pb_post  {

    margin-bottom : 20 px ;

}

.et_pb_column  .et_pb_blog_grid  .column.size-1of2  {

    margin-right : 0 ;

    fleksibel : 1 ;

}

.et_pb_column  .et_pb_blog_grid  .column.size-1of2  .et_pb_post  {

    lebar : otomatis ;

    fleksibel : 1 ;

    margin-right : 10 px ;

    margin-kiri : 10 px ;

    margin-bottom : 20 px ;

}

/ *** ITEM TUNGGAL BLOG GRID *** /

.et_pb_blog_grid  .et_pb_post  {

    latar belakang : # f0f0f0 ; / * warna latar belakang item grid * /

    perbatasan : 0 ;

    display : flex ; / * memungkinkan kita untuk memposisikan ulang elemen * /

    arah fleksibel : kolom ;

    margin-bottom : 0 ;

    padding : 20 px  20 px  0 ;

}

.et_pb_blog_grid  .post-content  {

    bantalan : 0  20 px ;

    margin-bottom : -13 px ; / * menempatkan tombol baca lebih lanjut * /

    z-index : 1 ;

}

/ *** BLOG GRID TITLE H2 *** /

.et_pb_blog_grid  h2  {

    warna : # 222 ;

    garis-tinggi : 1,2 em ;

    ukuran font : 2.2 em ;

    font-berat : 900 ;

    padding : 15 px  20 px  0 ;

    pesanan : 0 ;

}

/ *** JUDUL HOVER GAYA UNTUK SEMUA HALAMAN *** /

.search-results  .et_pb_post  h2  a : hover ,

.archive  .et_pb_post  h2  a : hover ,

.et_pb_blog_grid  h2  a : hover  {

    border-bottom : .2 em  solid  # 08DF01 ;

    latar belakang : #fff ;

}

/ *** GAMBAR FITUR GAMBAR BLOG GRID *** /

.et_pb_blog_grid  .et_pb_post  .entry-Featured-image-url ,

.et_pb_blog_grid  .et_pb_image_container  {

    margin-bottom : 0 ;

}

.et_pb_blog_grid  .et_pb_image_container  {

    memesan : 3 ; / * Memindahkan gambar ke bawah * /

    margin-top : 0 ;

}

/ *** BLOG GRID POST META - BEBERAPA PENGARUH INI ARCHIVE, HASIL PENCARIAN, DLL *** /

.et_pb_blog_grid  .post-content  p  {

    display : tidak ada ; / * sembunyikan teks kutipan * /

}

.search-results  .et_pb_post  .post-meta ,

.archive  .et_pb_post  .post-meta ,

.et_pb_blog_grid  .et_pb_post  .post-meta  {  / * meta style * /

    warna : # 444 ;

    ukuran font : 1 em ;

    min-height : 5 em ; / * ini mungkin perlu disesuaikan jika Anda menampilkan lebih banyak informasi meta daripada yang saya lakukan * /

    padding : 10 px  20 px ! penting;

}

.search-results  .et_pb_post  .post-meta  a ,

.archive  .et_pb_post  .post-meta  a ,

.et_pb_blog_grid  .et_pb_post  .post-meta  a  {

    warna : # 000 ! penting; / * meta link color * /

}

.search-results  .et_pb_post  .post-meta  a : hover ,

.archive  .et_pb_post  .post-meta  a : hover ,

.et_pb_blog_grid  .et_pb_post  .post-meta  a : hover  {

    border-bottom : 2 px  solid  # 08DF01 ; / * tautan meta saat mengarahkan kursor * /

}

/ *** GANTI BACA LEBIH BANYAK TEKS DAN GAYA *** /

.et_pb_blog_grid  a .more-link  {

    ukuran font : 0 ; / * menghapus teks tombol default * /

}

.et_pb_blog_grid  a .more-link : sebelum  {

    konten : 'LIHAT' ; / * tambahkan teks tombol baru * /

    posisi : absolut ;

    ukuran font : 16 px ;

    font-style : italic ;

    garis-tinggi : 1,2 em ;

    font-berat : 600 ;

    padding : .5 em  1.1 em ;

    batas-jari-jari : 50 px ; / * membuat tombol membulat * /

    latar belakang : # 08DF01 ; / * tombol warna latar belakang * /

    warna : # 111 ; / * warna teks tombol * /

}

.et_pb_blog_grid  a .more-link : hover: before  {  / * tombol latar belakang dan warna teks saat hover * /

    latar belakang : # 111 ;

    warna : #fff ;

}

/ *** PERTANYAAN MEDIA BLOG GRID *** /

@media hanya layar dan (min-width: 768px) dan (max-width: 980px) {

    .et_pb_blog_grid  h2  {

        ukuran font : 1,8 em ;

   }

}

@media hanya layar dan (min-width: 981px) dan (max-width: 1280px) {

    .et_pb_blog_grid  h2  {

        ukuran font : 1,75 em ;

        padding : 10 px  10 px  0 ;

   }

    .et_pb_blog_grid  .et_pb_post  .post-meta  {

        padding : 10 px ! penting;

   }

    .et_pb_blog_grid  .post-content  {

        padding : 0  10 px ;

   }

}

Layar @media saja dan (min-lebar: 768px) {

    .et_pb_blog_grid  h2  {

        min-height : 6 em ; / * pada dasarnya saya mengatakannya untuk membuat judul setidaknya 4ish baris tinggi (tinggi baris 1.2em x 4 = 4.8em) sehingga posting sama tinggi, Anda mungkin perlu bermain dengan nomor ini tergantung pada posting terpanjang Anda panjang judul dan font * /

   }

}

Layar @media saja dan (min-width: 981px) {

    .et_pb_gutters3  .et_pb_column_4_4  .et_pb_blog_grid  .column.size-1of3 ,

    .et_pb_gutters3.et_pb_row  .et_pb_column_4_4  .et_pb_blog_grid  .column.size-1of3  {

        lebar : otomatis ;

        fleksibel : 1 ;

        margin-right : 20 px ;

   }

}



/ ******************************************* /

/ *** HALAMAN KATEGORI / TAG / PENCARIAN HASIL *** /

/ ******************************************* /

.search-results  .et_pb_post ,

.archive  .et_pb_post  {

    latar belakang : # f0f0f0 ;

    display : flex ;

    arah fleksibel : kolom ;

    padding : 20 px  20 px  0 ;

    ukuran font : 0 ; / * sembunyikan teks kutipan * /

}

.search-results  .et_pb_post  h2 ,

.archive  .et_pb_post  h2  {

    warna : # 222 ;

    garis-tinggi : 1,2 em ;

    font-berat : 900 ;

    padding : 15 px  20 px  0 ;

    pesanan : 0 ;

}

.search-results  .et_pb_post  h2 ,

.archive  .et_pb_post  h2  {

    ukuran font : 32 px ! penting; / * tidak dapat menggunakan mereka dan perlu penting karena ukuran font 0 di atas * /

}

.search-results  .et_pb_post  .entry-Featured-image-url ,

.archive  .et_pb_post  .entry-Featured-image-url  {

    memesan : 1 ;

    margin : -20 px  -20 px  0  -20 px ;

    overflow : disembunyikan ;

}

.search-results  .et_pb_post  a  img ,

.archive  .et_pb_post  a  img  {

    margin-top : -20 px ;

}

/ *** TAMBAHKAN LEBIH BANYAK TOMBOL SEJAK TIDAK ADA SATU *** /

.search-results  .et_pb_post  .entry-Featured-image-url : sebelumnya ,

.archive  .et_pb_post  .entry-Featured-image-url : before  {

    konten : 'LIHAT' ;

    posisi : relatif ;

    ukuran font : 16 px ;

    font-berat : 600 ;

    font-style : italic ;

    latar belakang : # 08DF01 ;

    warna : # 111 ;

    batas-jari-jari : 50 px ;

    padding : .4 em  1.1 em ;

    margin-kiri : 35 px ;

    display : inline-block ;

}

.search-results  .et_pb_post  .entry-Featured-image-url : hover: sebelumnya ,

.archive  .et_pb_post  .entry-Featured-image-url : hover: before  {

    latar belakang : # 111 ;

    warna : #fff ;

}

/ *** PERTANYAAN MEDIA UNTUK POS HALAMAN ARCHIVE *** /

Layar @media saja dan (max-width: 767px) {

    .search-results  .et_pb_post  .entry-Featured-image-url ,

    .archive  .et_pb_post  .entry-Featured-image-url  {

        max-height : 250 px ; / * membuat gambar sama tingginya karena halaman ini tidak secara otomatis mengukur gambar unggulan seperti modul blog, bersama dengan luapan yang disembunyikan di atasnya menyembunyikan apa yang tidak cocok * /

   }

    .search-results  .et_pb_post  h2 ,

    .archive  .et_pb_post  h2  {

        ukuran font : 26 px ! penting;

    }

}

@media hanya layar dan (min-width: 768px) dan (max-width: 1200px) {

    .search-results  .et_pb_post  .entry-Featured-image-url ,

    .archive  .et_pb_post  .entry-Featured-image-url  {

        max-height : 350 px ;

   }

}

Layar @media saja dan (min-lebar: 1201px) {

    .search-results  .et_pb_post  h2 ,

    .archive  .et_pb_post  h2  {

        min-height : 6 em ;

   }

    .search-results  .et_pb_post ,

    .archive  .et_pb_post  {

        lebar maks : 48 % ; / * mengubah posting menjadi item grid seperti kotak blog default * /

        mengapung : kiri ;

        margin-right : 1 % ;

        margin-kiri : 1 % ;

        margin-bottom : 2 % ;

   }

    .search-results  .et_pb_post  .entry-Featured-image-url ,

    .archive  .et_pb_post  .entry-Featured-image-url  {

        max-height : 215 px ;

   }

}

Catatan:

• Saya mencampur unit saya dan menggunakan mereka untuk hal-hal tertentu, px untuk orang lain, dll. Ini mungkin aneh tapi saya punya alasan, ubah ke unit pilihan Anda jika Anda merasa nyaman melakukannya.
• Font yang Anda pilih dan panjang judul posting rata-rata Anda akan sangat mempengaruhi ini.
• Jika Anda ingin ini menjadi gaya batu menghapus semua instance min-height, Anda juga perlu mengubah atau menghapus beberapa CSS arsip saya.
• Saya dapat mengkonsolidasikan lebih banyak tetapi saya membutuhkan potongan kode saya untuk secara visual masuk akal bagi saya. Anda harus mengeditnya sesuai dengan keinginan Anda jika Anda tahu caranya.
• Ini hanya salah satu cara untuk mencapai ini, lebih banyak flexbox bisa digunakan tetapi menggunakan min-height em membuatnya lebih mudah untuk pemula CSS untuk men-tweak (saya pikir pula).
• Masih ada alasan bagus untuk menggunakan file tema anak untuk melakukan ini karena Anda dapat melakukan lebih dari gaya blog menggunakan metode itu. Anda dapat menambahkan tajuk dan lebih banyak konten, apa pun yang Anda inginkan.
• Screenfly hanyalah sebuah emulator online untuk memberikan gambaran seperti apa suatu situs / halaman pada berbagai ukuran browser. Anda masih bertanggung jawab atas pengujian dunia nyata Anda sendiri.

Share This Article :