Apakah Anda ingin menggunakan modul Portofolio Filterable dari Divi dan Anda tidak tahu tata letak mana yang harus dipilih?
Modul « Portofolio yang Dapat Difilter 'dari Divi memberi Anda dua opsi tata letak untuk dipilih. Kedua opsi memiliki kelebihan dan bekerja sangat baik untuk tujuan tertentu.
Dalam artikel ini, kami akan membandingkan tata letak lebar penuh dan kisi-kisi dari modul ini untuk membantu Anda memutuskan apa yang Anda butuhkan untuk situs jaringan.
Kami juga akan menyesuaikan kedua tata letak untuk melihat cara kerjanya dalam satu tata letak Divi.
Mari kita mulai!
penelitian
Pertama, mari kita lihat apa yang akan kita buat dalam tutorial ini.
Versi desktop dari tata letak kisi
Unduh DIVI sekarang!!!
Versi telepon dari tata letak grid
Versi desktop dari tata letak Fullwidth
Baca juga: Divi: Cara menggunakan efek bayangan dan arahkan kursor untuk membuat konten interaktif
Versi telepon dari tata letak Fullwidth
Cara Mengubah Tata Letak Modul Portofolio Filterable
Secara default, modul “Filterable Portfolio” menampilkan tata letak dengan lebar penuh. Anda dapat mengubah tata letak untuk menampilkan item dalam kisi. Pertama, buka parameter modul.
Kemudian pilih tab Desain. Opsi pertama adalah tata ruang. Ini memiliki daftar drop-down dengan beberapa pilihan. Pilih untuk memilih antara Lebar penuh et kisi.
Jika Anda memilih opsi yang saat ini tidak dipilih, modul akan memuat ulang dan menampilkan item portofolio dalam tata letak ini. Contoh di bawah ini menunjukkan tata letak grid.
Perbandingan Tata Letak Modul Portofolio yang Dapat Difilter
Kedua tata letak sangat berbeda, tetapi mereka memiliki beberapa kesamaan. Keduanya menampilkan filter di bagian atas modul, judul dan meta di bawah gambar item, dan pagination di bagian bawah modul.
Berikut adalah melihat bagaimana mereka berbeda.
Tata letak lebar penuh
Lebar penuh menampilkan gambar besar dengan elemen portofolio mengambil lebar penuh area portofolio. Gambar ditampilkan dalam bentuk aslinya dan diperluas agar sesuai dengan lebar yang tersedia.
Itu tidak menambah banyak ruang di antara item dompet. Kami merekomendasikan untuk membatasi jumlah posting menjadi beberapa. Contoh di bawah ini menunjukkan tata letak lebar penuh dengan 2 posting.
Tata letak kisi
Tata letak Grid menampilkan hingga 4 item berturut-turut. Ini menambah lebih banyak ruang antar elemen. Gambar dipotong untuk membuat gambar mini dengan ukuran yang sama terlepas dari ukuran dan bentuk gambar.
Untuk yang satu ini, kami membatasi modul untuk menampilkan empat posting untuk menampilkan pagination.
Kapan harus menggunakan setiap tata letak modul Portofolio Filterable
Kedua pengaturan memiliki kelebihannya masing-masing. Berikut adalah beberapa tip tentang kapan harus menggunakan setiap tata letak.
Tata letak lebar penuh
Gunakan tata letak Lebar Penuh saat Anda hanya memiliki beberapa item untuk ditampilkan atau ingin fokus pada beberapa item.
Juga gunakan tata letak ini saat Anda ingin menyorot atau menarik perhatian ke gambar unggulan.
Tata letak kisi
Gunakan tata letak kisi saat Anda ingin memperlihatkan banyak item atau saat Anda ingin tata letak menampilkan lebih banyak item dalam ruang yang lebih kecil.
Cara Menyesuaikan Tata Letak Modul Portofolio yang Dapat Difilter
Sekarang setelah kita melihat cara memilih tata letak, cara kerjanya, dan kapan menggunakannya, mari kita lihat cara menyesuaikan kedua tata letak ini.
Kami akan menggunakan halaman Portofolio dari Paket Tata Letak Pelukis Gratis tersedia di Divi. Berikut adalah halaman aslinya.
Kami akan mengganti portofolio dengan modul Filterable Portfolio dan menggunakan gambar dan judul yang sama.
Kami akan membuat dua versi: satu dengan tata letak lebar penuh dan satu lagi dengan tata letak kotak.
Cara Menyesuaikan Tata Letak Grid dari Modul Portofolio Filterable
Kita akan mulai dengan tata letak grid. Saya akan menggunakan warna dan font dari tata letak aslinya.
Isi
Buka mereka parameter modul dan masukkan 4 untuk Jumlah Postingan. Pilih Semua Kategori yang ingin Anda tampilkan di modul.
- Jumlah Postingan: 4
- Termasuk Kategori: Pilih Kategori
ketentuan
Kemudian pilih tab Mendesain dan pilih kisi dalam opsi tata letak.
- Tata Letak: Kotak
Gambar
Gulir ke Gambar dan pilih opsi KotakBayangan. Ubahlah warna bayangan dalam rgba(0,0,0,0.05).
- Bayangan Kotak: 4ème Option
- Warna Bayangan: rgba (0,0,0,0.05)
teks
Kemudian gulir ke bawah ke teks dan memodifikasi penjajaran Di tengah. Ini memusatkan filter, judul, meta, dan pagination.
- Perataan Teks: Tengah
Teks judul
Kemudian gulir ke bawah ke Teks Judul dan ubah pengaturan berikut.
- Judul Font : Merriweather
- Warna Teks Judul: #000000
Ubah ukuran polisi pada 26px untuk desktop, 20px untuk tablet, dan 18px untuk ponsel.
- Judul Teks Ukuran: Desktop 26px, tablet 20px, Telepon 18px
Filter kriteria teks
Kemudian gulir ke bawah ke Filter Kriteria Teks dan ubah pengaturan berikut:
- Kriteria Filter:
- Font: Montserrat
- Berat Huruf: Tebal
- Gaya: TT
- Warna Teks: #fd6927
- Ukuran Teks: 12px
teks meta
Kemudian gulir ke bawah ke Teks Meta. Ubahlah polisi di Montserrat dan couleur di #fd6927.
- Ukuran Teks Meta: Montserrat
- Warna Teks Meta: #fd6927
Mengatur ukuran pada 12 piksel,spasi huruf pada 2 piksel dan tinggi garis pada 1,2 em.
- Ukuran Teks: 12px
- Spasi Huruf Meta: 2px
- Tinggi Meta Line: 1,2 em
Teks paginasi
Terakhir, gulir ke bawah ke Teks paginasi dan mengubahnya polisi di Montserrat, dan atur couleur font hitam. Tutup modul dan simpan pengaturan Anda.
- Font Pagination: Montserrat
- Warna Teks Paginasi: #000000
Cara Menyesuaikan Modul Portofolio yang Dapat Difilter dalam Tata Letak Lebar Penuh
Sekarang, mari konfigurasikan modul dalam tata letak lebar penuh.
Kami akan menggunakan isyarat desain yang sama seperti tata letak kisi, tetapi kami akan membuat beberapa perubahan yang berfungsi dengan baik untuk tata letak ini. Kami akan menggunakan beberapa CSS sederhana untuk membuat beberapa penyesuaian kecil.
Isi
Buka mereka parameter modul dan ubah jumlah publikasi ke 2. Ini membuat halaman lebih kecil dan lebih mudah dikelola dengan gambar besar. Pilih Semua Kategori yang ingin Anda tampilkan di modul.
- Jumlah Postingan: 2
- Termasuk Kategori: Pilih Kategori
Elemen
Gulir ke Elemen dan nonaktifkan Tampilkan Kategori. Biarkan yang lain diaktifkan. Kategori masih akan diaktifkan untuk filter, tetapi tidak akan ditampilkan dengan judul.
- Tampilkan Kategori: TIDAK
ketentuan
Pilih tab Desain. Di bawah tata ruang, biarkan Layout diatur ke Lebar penuh, yang merupakan pengaturan default.
- Tata letak: Lebar penuh
Gambar
Kemudian gulir ke bawah ke Gambar . Pilih opsi Bayangan Kotak dan mengubahnya couleur naungan di rgba (0,0,0,0.05).
- Bayangan Kotak: 4ème Option
- Warna Bayangan: rgba (0,0,0,0.05)
teks
Kemudian gulir ke bawah ke Teks. Mengubah penjajaran Di tengah. Filter, judul, dan pagination akan dipusatkan dengan gambar.
- Perataan Teks: Tengah
Teks judul
Kemudian gulir ke bawah ke Teks judul . Ubahlah polisi ke Merriweather dan ubah couleur dalam warna hitam.
- Judul Font : Merriweather
- Warna Teks Judul: #000000
Ubah ukuran polisi pada 40px untuk desktop, 20px untuk tablet, dan 18px untuk ponsel.
- Judul Teks Ukuran: Desktop 40px, tablet 20px, Telepon 18px
Filter kriteria teks
Kemudian gulir ke bawah ke Filter Kriteria Teks dan ubah pengaturan berikut:
- Kriteria Filter:
- Font: Montserrat
- Berat Huruf: Tebal
- Gaya: TT
- Warna Teks: #fd6927
Teks paginasi
Kemudian gulir ke bawah ke Teks paginasi. Ubahlah polisi di Montserrat, ubah berat setengah tebal dan atur warna huruf di #fd6927. Tutup modul dan simpan pengaturan Anda.
- Font Pagination: Montserrat
- Warna: #fd6927
- Berat Huruf: Semi Tebal
Teks Judul CSS
Buka tabnya Advanced dan gulir ke Judul Portofolio. Pilih ikon Desktop. Salin kode di bawah ini untuk ukuran layar yang berbeda. Tutup modul dan simpan pengaturan Anda.
Judul Portofolio:
- Desktop
padding-bottom:40px- Tablet
padding-bottom:30px- Nomor Hp / Telephone
padding-bottom:20px
Résultats
Versi desktop dari tata letak kisi
Versi telepon dari tata letak grid
Unduh DIVI sekarang!!!
Versi desktop dari tata letak lebar penuh
Lihat juga: Divi: Cara mengubah gradien latar belakang saat melayang
Versi telepon dari tata letak lebar penuh
Unduh DIVI sekarang!!!
Kesimpulan
Ini adalah pendapat kami tentang penggunaan tata letak lebar penuh versus kisi dalam modul Portofolio yang Dapat Disaring dari Divi. Memilih di antara dua opsi tata letak itu mudah.
Setiap opsi memiliki kelebihan dan harus dirancang secara berbeda untuk bekerja dengan Anda situs jaringan. Cukup lakukan beberapa penyesuaian untuk memastikan modul Anda berfungsi dengan baik dengan tata letak Divi apa pun.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
