R25: CARA MEMBUAT TATA LETAK BLOG 2, 3 ATAU 4 KOLOM PERSEGI

oleh Michelle | 15 Nov 2016 | Resep | 92 komentar

Pembaruan: Dengan Divi memperbarui bagian kolom dari kode ini tidak lagi berfungsi dengan benar. Anda masih dapat menggunakan gaya untuk posting Anda tetapi untuk mengubah jumlah kolom saya sangat menyarankan Anda beralih menggunakan CSS Grid. Anda dapat menemukan Resep tentang cara melakukannya di sini.

Resep # 25 menjawab beberapa pertanyaan yang baru saja saya tanyakan. Cara mengubah tata letak kisi blog menjadi empat kolom (saya juga telah melemparkan dua kolom), dan cara membuat thumbnail gambar yang ditampilkan persegi bukannya persegi panjang.

Ada beberapa cara untuk melakukan ini tetapi secara pribadi saya tidak suka bermain-main dengan PHP kecuali saya harus, saya akan meninggalkan itu kepada orang-orang yang jauh lebih pintar daripada saya. Jadi ini adalah solusi yang sepenuhnya CSS dengan beberapa cuplikan kecil yang keren yang juga dapat Anda gunakan di tempat lain.

Tonton videonya, dapatkan kode yang Anda butuhkan di posting blog yang menyertainya, pastikan untuk menggulir ke bawah untuk freebie hebat Anda , dan beri tahu saya apa pendapat Anda di komentar!

Jadi mari kita memasak!

LIHAT DEMO

BAHAN

Tema Divi dari Tema Elegan .

Beberapa posting blog yang ada dengan set gambar unggulan.

WAKTUNYA MEMASAK

Maksimum 10 menit.

PERSIAPAN

Pertama mari kita buat modul bagian dan blog kita. Di halaman Anda, tambahkan bagian standarbaru dengan satu kolom . Di pengaturan baris, buatlah menjadi Fullwidth .

Cara membuat tata letak blog 2, 3 atau 4 kolom di Divi

Saya akan menunjukkan kepada Anda cara membuat tata letak kolom 2, 3 dan 4 tetapi pengaturan modul yang sebenarnya sama untuk setiap versi jadi mari kita atur itu, tambahkan modul blog dan terapkan pengaturan berikut:

Tata Letak:
Nomor Posting Kisi : kelipatan tata letak kolom yang akan Anda gunakan
Sertakan kategori: Yang mana yang ingin Anda tampilkan
Tampilkan gambar yang ditampilkan: Ya
Tombol Baca lebih lanjut: Tidak Aktif
Tampilkan penulis: Tidak
Tampilkan tanggal: Tidak
Tampilkan tanggal: Tidak Tampilkan kategori: Tidak
Tampilkan komentar count: No
Show pagination: Terserah Anda
Overlay gambar unggulan: Off

Biarkan semua pengaturan lainnya sendirian.

Lalu Simpan & Keluar

Itu persiapan kami.

SUKA KONTEN GRATIS KAMI? MAKA ANDA AKAN MENYUKAI KLUB EKSKLUSIF KAMI!

Kevi Academy Membership memberi Anda akses eksklusif ke lebih dari 110 sumber daya, termasuk tema anak, tata letak, lembar contekan, tutorial, pelatihan langsung, dan tunjangan anggota. Dan konten baru ditambahkan SETIAP Senin!

TEMUKAN LEBIH BANYAK LAGI

METODE

Selanjutnya kita akan menambahkan beberapa CSS yang berlaku untuk ketiga versi tata letak ini, jadi apakah Anda memilih untuk membuat tata letak kolom 2, 3 atau 4, Anda perlu menambahkan CSS dari sakelar di bawah ini ke dalam stylesheet tema anak Anda, kustom pilihan Divi, pilihan kustom Kotak CSS atau kotak CSS khusus halaman.

GLOBAL CSS - DIPERLUKAN UNTUK SEMUA 3 LAYOUT

Inilah yang kami lakukan dengan CSS ini:

Bagian pertama ini mengatur lebar gambar kita dan menggunakan properti objek-fit untuk memotong dan skala gambar kita sehingga menjaga rasio aspek ketika kita membuatnya persegi. Objek-fit saat ini tidak mendukung di IE dan Edge jadi jika itu mengganggu Anda atau Anda tidak ingin gambar persegi, Anda bisa membiarkan bagian ini sepenuhnya.

.ds-blog-square a img {
    lebar : 100% ; 
    object-fit : cover ;
}

Selanjutnya kita menyembunyikan kutipan karena ini adalah satu-satunya hal yang tidak bisa kita sembunyikan dalam pengaturan modul, dan kami juga memperbaiki beberapa masalah margin dan padding.

.ds-blog-square .post-content {
    display : tidak ada ;
}
.ds-blog-square .et_pb_image_container {
    margin : - 19px - 19px 0 ; 
}
.ds-blog-square h2 {
    margin : 0 ; 
    bantalan : 0 ; 
}

Bagian ini menghilangkan beberapa lapisan lagi dan batas default dan posisi pos relatif yang akan memungkinkan kita untuk memindahkan judul posting di atas gambar.

.ds-blog-square .et_pb_post {
    posisi : relatif ;
    padding-bottom : 0 ; 
    perbatasan : tidak ada ;
}

Dan akhirnya, bagian yang menyenangkan. Di sini kita benar-benar memposisikan judul posting sehingga berada di atas gambar, lalu kita memberikannya warna latar belakang yang merupakan overlay kita dan menjadikannya seukuran dengan gambar kita. Kami menambahkan garis besar dan membawanya dari tepi sedikit untuk membuat perbatasan dan kemudian menggunakan tampilan: melenturkan ke tengah judul posting kami baik secara horizontal maupun vertikal tidak peduli berapa banyak kata itu.

Setelah itu kami menambahkan sedikit animasi pada hover untuk memindahkan garis besar dan mengubah warna, dan teks.

Saya telah menata ini sangat sederhana hanya dengan menggunakan garis hitam dan putih dan tipis sehingga mudah bagi Anda untuk mengubahnya sesuka Anda.

.ds-blog-square h2 a {
    posisi : absolut ;
    atas : 0 ; 
    kiri : 0 ; 
    tinggi : 100% ; 
    lebar : 100% ; 
    padding : 40px ; 
    margin : 0 ; 
    background : RGBA ( 0 , 0 , 0 , . 3 ) ;   
    warna : #fff ; 
    perataan teks : tengah ;
    garis besar : 2px solid #fff ; 
    outline-offset : - 20px ;
    display : flex! penting ;
    arah fleksibel : kolom ;
    justify-content : center ;
    -moz-transisi : semua 0. 5s mudah ;
    -webkit-transisi : semua 0. 5s mudah ;
    transisi : semua kemudahan 0. 5s ;
}
.ds-blog-square h2 a: hover {
    background : RGBA ( 255 , 255 , 255 , . 5 ) ;   
    warna : # 000 ; 
    garis besar : 2px solid # 000 ; 
    outline-offset : 0 ; 
}

Untuk menerapkan semua CSS ini, kita perlu menambahkan kelas khusus ke modul blog kita, jadi buka pengaturan modul , klik pada tab CSS Kustom dan di bidang Kelas CSS tambahkan kelas ds-blog-square lalu simpan & keluar .

Sekarang untuk pengaturan tata letak individual.

Empat kolom:

Membuka pengaturan baris , klik pada CSS kustom tab dan memberikan Kolom kelas CSS dari ds-blog-empat kolom. Pastikan untuk menambahkan ini ke bidang Kolom CSS Kelas dan BUKAN bidang Kelas CSS . Lalu simpan & keluar .

Next, add the CSS from the toggle below into your child theme stylesheet, Divi options custom CSS box or the page specific CSS box.

4 COLUMNS CSS

Here is what we are doing:

This section changes the layout from the default 3 columns to 4 columns on screen sizes over 980px wide. Below that screen size the layout will move to 2 columns on tablets and then 1 column on mobiles. We are also removing the margin after every 4th post so our layout has the same margin around every post.

@media only screen and ( min-width: 981px ) {
.et_pb_column_4_4 .et_pb_blog_grid .et_pb_salvattore_content[data-columns]::before { content: ‘4 .column.size-1of4’ !important;
}
.et_pb_column_4_4 .column.size-1of4 {
width:22.15% !important;
margin-right:1%;
}
.et_pb_column_4_4 .ds-blog-four-column.et_pb_blog_grid[data-columns]::before {
konten : " 4 . kolom . ukuran- 1 dari 4 " ;
}
.ds-blog-four-column.et_pb_blog_grid .column.size-1of4 {
margin-right : 3. 8% ; 
padding-bottom : 30% ; 
lebar : 22. 15% ; 
}
.et_pb_blog_grid .column.size-1of4: last-child {
margin-right : 0 ; 
}
}

Di sini kita mengatur margin antara setiap baris posting sehingga relatif sama dan kemudian juga mengatur tinggi default untuk gambar posting kita untuk membuatnya persegi daripada persegi panjang. Jika Anda tidak menggunakan properti objek-fit yang tidak didukung di IE dan Edge seperti yang disebutkan sebelumnya, maka Anda dapat meninggalkan bagian kedua dari bagian ini.

.ds-blog-four-kolom .et_pb_post {
    margin-bottom : 25% ; 
}
.ds-blog-four-kolom .ds-blog-square a img {
    tinggi : 33vh ! penting ; 
}

Akhirnya, beberapa media meminta agar gambar kita relatif persegi pada ukuran layar yang lebih kecil. Sekali lagi jika Anda tidak menggunakan objek-fit Anda dapat meninggalkan seluruh bagian ini. Anda juga dapat menambahkan beberapa pertanyaan media di sini jika Anda ingin membahas ukuran layar lain, tetapi ini sudah cukup untuk sebagian besar skenario.

Layar @media saja dan ( max-width : 1440px ) {  
    . ds-blog-empat kolom . ds-blog-square a img {
        tinggi : 28vh ! penting ;  
    }
}
Layar @media saja dan ( max-width : 1280px ) {  
    . ds-blog-empat kolom . ds-blog-square a img {
        tinggi : 25vh ! penting ; 
    }
}
Layar @media saja dan ( max-width : 768px ) {  
    . ds-blog-empat kolom . ds-blog-square a img {
        tinggi : 28vh ! penting ; 
    }
}
Layar hanya @ media dan ( max-width : 480px ) {  
    . ds-blog-empat kolom . ds-blog-square a img {
        tinggi : 40vh ! penting ;  
    }
}

Dan itu saja untuk tata letak empat kolom. Ingin 3 kolom? Baca terus ...

Tiga kolom:

Membuka pengaturan baris , klik pada CSS kustom tab dan memberikan Kolom kelas CSS dari ds-blog-tiga kolom. Pastikan untuk menambahkan ini ke bidang Kolom CSS Kelas dan BUKAN bidang Kelas CSS . Lalu simpan & keluar .

Selanjutnya, tambahkan CSS dari sakelar di bawah ini ke dalam stylesheet tema anak Anda, kotak pilihan CSS Divi pilihan atau kotak CSS halaman spesifik.

3 KOLOM CSS

Inilah yang kami lakukan:

Tata letak kisi blog default adalah 3 kolom sehingga kami tidak perlu melakukan perubahan apa pun di sana.

.ds-blog-three-kolom .et_pb_post {
    margin-bottom : 25% ; 
}
.ds-blog-three-kolom .ds-blog-square a img {
    tinggi : 45vh ! penting ;  
}

Dan di sini kami menambahkan beberapa pertanyaan media untuk menjaga gambar kami relatif persegi pada ukuran layar yang lebih kecil. Sekali lagi jika Anda tidak menggunakan objek-fit Anda dapat meninggalkan seluruh bagian ini. Anda juga dapat menambahkan beberapa pertanyaan media di sini jika Anda ingin membahas ukuran layar lain, tetapi ini sudah cukup untuk sebagian besar skenario.

Layar @media saja dan ( max-width : 1440px ) {  
    . ds-blog-tiga kolom . ds-blog-square a img {
        tinggi : 40vh ! penting ;  
    }
}
Layar @media saja dan ( max-width : 1280px ) {  
    . ds-blog-tiga kolom . ds-blog-square a img {
        tinggi : 35vh ! penting ;  
    }
}
Layar @media saja dan ( max-width : 768px ) {  
    . ds-blog-tiga kolom . ds-blog-square a img {
        tinggi : 28vh ! penting ; 
    }
}
Layar hanya @ media dan ( max-width : 480px ) {  
    . ds-blog-tiga kolom . ds-blog-square a img {
        tinggi : 40vh ! penting ;  
    }
}

Dan itu saja untuk tata letak tiga kolom. Ingin 2 kolom? Baca terus ...

Dua kolom:

Membuka pengaturan baris , klik pada CSS kustom tab dan memberikan Kolom kelas CSS dari ds-blog-dua kolom. Pastikan untuk menambahkan ini ke bidang Kolom CSS Kelas dan BUKAN bidang Kelas CSS . Lalu simpan & keluar .

Ada satu langkah lagi dengan tata letak dua kolom. Buka pengaturan modul , klik pada tab Custom CSSdan tepat setelah kelas yang kami tambahkan sebelumnya, sisakan satu spasi dan tambahkan kelas lain dari ds-blog-square-two lalu simpan & keluar .

Selanjutnya, tambahkan CSS dari sakelar di bawah ini ke dalam stylesheet tema anak Anda, kotak pilihan CSS Divi pilihan atau kotak CSS halaman spesifik.

2 KOLOM CSS

Inilah yang kami lakukan:

Bagian ini mengubah tata letak dari 3 kolom default menjadi 2 kolom. Kami juga menghapus margin setelah setiap pos genap sehingga tata letak kami memiliki margin yang sama di setiap pos.

Layar @media saja dan ( min-width : 981px ) {   
    . ds-blog-dua kolom . et_pb_column_4_4 . et_pb_blog_grid [ Data-kolom ] : : sebelum {
        konten : '2 .column.size-1of2' ! penting ; 
    }
    .ds-blog-square-two.et_pb_blog_grid .column {
        lebar : 47. 25% ! penting ; 
        margin-right : 5. 5% ; 
    }
    .ds-blog-square-two.et_pb_blog_grid .column: nth-child (datar) {
        margin-right : 0 ; 
    }
}

.ds-blog-two-kolom .et_pb_post {
    margin-bottom : 12% ; 
}
.ds-blog-two-kolom .ds-blog-square a img {
    tinggi : 70vh ! penting ;  
}

Terakhir, beberapa media meminta gambar kita relatif persegi pada ukuran layar yang lebih kecil. Sekali lagi jika Anda tidak menggunakan objek-fit Anda dapat meninggalkan seluruh bagian ini. Anda juga dapat menambahkan beberapa pertanyaan media di sini jika Anda ingin membahas ukuran layar lain, tetapi ini sudah cukup untuk sebagian besar skenario.

Layar @media saja dan ( max-width : 1440px ) {  
    . ds-blog-dua kolom . ds-blog-square a img {
        tinggi : 60vh ! penting ; 
    }
}
Layar @media saja dan ( max-width : 1280px ) {  
    . ds-blog-dua kolom . ds-blog-square a img {
        tinggi : 50vh ! penting ; 
    }
}
Layar @media saja dan ( max-width : 768px ) {  
    . ds-blog-dua kolom . ds-blog-square a img {
        tinggi : 28vh ! penting ; 
    }
}
Layar hanya @ media dan ( max-width : 480px ) {  
    . ds-blog-dua kolom . ds-blog-square a img {
        tinggi : 42vh ! penting ; 
    }
}

Untuk setiap versi tata letak ini, Anda mungkin ingin masuk ke tab pengaturan lanjutan dari modul dan menyesuaikan ukuran font header untuk desktop, tablet dan seluler tergantung pada font mana yang Anda gunakan.