Cara Menata Filter Kategori di Modul Portofolio Filterable Divi

Modul Portofolio Filterable Divi berisi banyak elemen, dan masing-masing dapat ditata secara individual. Filter adalah salah satu elemen yang paling berguna, tetapi terkadang diabaikan. Dalam posting ini, kita akan melihat cara menata filter kategori di Modul Portofolio Filterable Divi. Kita akan melihat apa yang bisa dilakukan dengan pengaturan standar, dan kita akan menggali CSS untuk melihat cara menatanya lebih jauh.

Mari kita mulai!

Pratinjau

Pertama, mari kita lihat apa yang akan kita buat dalam tutorial ini.

Contoh Filter Kategori Desktop Satu

Contoh Filter Kategori Telepon Satu

Contoh Filter Kategori Desktop Dua

Contoh Filter Kategori Telepon Dua

Contoh Filter Kategori Desktop Tiga

Contoh Filter Kategori Telepon Tiga

Memisahkan Proyek ke dalam Kategori

Untuk memanfaatkan filter kategori dengan sebaik-baiknya, Anda harus membagi proyek Anda menjadi beberapa kategori yang paling masuk akal bagi pembaca Anda. Untuk membuat kategori Anda, buka Proyek > Kategori di dasbor WordPress.

Di sini, Anda akan melihat bidang untuk menambahkan nama, siput, kategori induk, dan deskripsi. Anda juga akan melihat daftar kategori dalam daftar tempat Anda dapat mengeditnya.

Setelah Anda membuat kategori, pastikan untuk memilih kategori untuk setiap proyek Anda yang paling masuk akal bagi pembaca. Untuk membuat proyek Anda, buka Proyek dan klik Tambah Baru di menu atau di bagian atas halaman.

Sebagai contoh saya, saya telah membuat proyek untuk perusahaan renovasi rumah. Perusahaan akan fokus pada renovasi rumah, tetapi juga mencakup pekerjaan serupa untuk perusahaan dan mereka dapat membangun dari bawah ke atas. Untuk rumah, saya menggunakan kategori Interior dan Eksterior. Untuk semua pekerjaan lain, saya telah menambahkan Perusahaan dan Konstruksi.

Pengaturan Modul Portofolio yang Dapat Difilter

Dalam contoh kita, saya akan mengganti bagian portofolio halaman Portofolio dari Paket Tata Letak Renovasi gratis dengan Modul Portofolio Filterable. Pertama, mari kita lihat cara menata modul. Kemudian, kita akan menata filter dengan tiga cara berbeda. Inilah halaman sebelum saya melakukan perubahan.

Inilah halaman setelah menambahkan Modul Portofolio Filterable sebagai pengganti gambar.

Pertama, kita akan memberi style pada modul. Kami akan menggunakan pengaturan yang sama untuk ketiga contoh.

Isi

Di tab Konten, atur Jumlah Postingan ke 8 dan pilih Kategori dari daftar Kategori yang Disertakan.

• Jumlah Postingan: 8
• Termasuk Kategori: pilihan Anda

Elemen

Gulir ke bawah ke Elemen dan nonaktifkan Tampilkan Kategori . Kami hanya akan menggunakan judul dan mengizinkan filter untuk menampilkan kategori.

• Tampilkan Kategori: Tidak

Tata Letak

Selanjutnya, buka tab Design dan pilih Grid di bawah Layout . Saya sudah memilihnya untuk gambar sebelumnya, tetapi modul menampilkan lebar penuh secara default.

• Tata Letak: Kotak

Teks

Selanjutnya, gulir ke Teks dan atur Perataan Teks ke Pusat. Ini memusatkan filter dan pagination dengan modul dan judul dengan gambar proyek.

• Perataan Teks: Tengah

Teks Judul

Selanjutnya, gulir ke Teks Judul . Ubah Font menjadi Kanit dan atur Weight menjadi Semi Bold. Atur Warnanya menjadi hitam.

• Font: Kanit
• Berat: Semi Tebal
• Warna: #000000

Ubah Ukuran Font menjadi 20px untuk desktop, 18px untuk tablet, dan 16px untuk ponsel. Atur Line Spacing menjadi 1px dan Line Height menjadi 1.3em.

• Ukuran: desktop 20px, tablet 18px, ponsel 16px
• Spasi Huruf: 1px
• Tinggi Garis: 1.3em

Teks paginasi

Selanjutnya, gulir ke bawah ke Teks Pagination dan ubah Font menjadi Kanit. Ubah Warnanya menjadi hitam.

• Font: Kanit
• Warna: #000000

Ubah Line Spacing menjadi 1px. Simpan pekerjaan Anda. Kita sekarang dapat menata filter kategori untuk contoh kita.

• Spasi Huruf: 1px

Contoh Filter Kategori

Sekarang, kita dapat beralih ke contoh Filter Kategori. Saya menggunakan isyarat desain dari paket tata letak.

Kategori Filter Contoh Satu

Contoh pertama kami adalah yang paling sederhana dari ketiganya. Ini menggunakan pengaturan dasar dan tidak melakukan sesuatu yang mewah. Ini bekerja dengan baik dengan desain tata letak.

Filter Kriteria Teks

Di tab Desain , gulir ke bawah ke Teks Kriteria . Ubah Font menjadi Kanit. Ubah Style menjadi TT dan Color menjadi hitam.

• Font: Kanit
• Gaya: TT
• Warna: #000000

Atur Line Spacing ke 1px dan atur Line Height ke 1.3em. Itu saja untuk yang pertama. Sekarang, simpan pengaturan Anda dan tutup modul.

• Spasi Huruf: 1px
• Tinggi Garis: 1.3em

Contoh Filter Kategori Dua

Contoh kedua kita akan menggunakan beberapa CSS sederhana untuk modul dan halaman untuk membuat sudut membulat dan bayangan kotak. Yang ini terlihat paling berbeda.

Filter Kriteria Teks

Buka tab Desain dan gulir ke bawah ke Filter Kriteria Teks . Ubah Font menjadi Kanit. Atur Color menjadi hitam, Size menjadi 16px, dan Line Height menjadi 1.5em. Ukuran Font berfungsi dengan baik di semua ukuran layar, jadi kita tidak perlu menyesuaikannya untuk tablet atau ponsel.

• Font: Kanit
• Warna: #000000
• Ukuran: 16px
• Tinggi Garis: 1.5em

Modul CSS

Selanjutnya, buka tab Lanjutan . Gulir ke bawah ke Filter Portofolio Aktif dan tambahkan CSS untuk Warna Latar Belakang dan tutup modul. Ini mengubah warna latar belakang filter aktif. Filter apa pun yang diklik pengguna berubah menjadi warna latar belakang ini dan filter sebelumnya kembali ke warna biasa.

• CSS Filter Portofolio Aktif:

  background-color:#ffd000;

CSS Pengaturan Halaman

Selanjutnya, buka Pengaturan Halaman di menu halaman. Di modal Pengaturan Halaman, pilih tab Tingkat Lanjut dan rekatkan CSS Kustom ke dalam bidang. CSS ini menghapus batas dari item filter, membuat radius batas 25px, dan menambahkan margin 5px di antara item. Itu juga menambahkan bayangan kotak kecil di bagian bawah item dan mengubah warna bayangan. Tutup modul dan simpan pengaturan Anda.

• CSS khusus:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Kategori Filter Contoh Tiga

Contoh ketiga kami mengikuti ide desain CSS serupa dari contoh sebelumnya. Itu tidak termasuk sudut membulat, dan itu mengubah font dan warna latar belakang saat melayang. Itu juga menggunakan CSS untuk modul dan halaman.

Filter Kriteria Teks

Buka tab Desain dan gulir ke bawah ke Filter Kriteria Teks . Pilih Kanit untuk Font , atur Style ke TT, dan Color ke putih.

• Font: Kanit
• Gaya: TT
• Warna: #ffffff

Selanjutnya, pilih opsi Arahkan kursor untuk Warna Teks dan ubah Warna menjadi hitam. Ini menangani font di hover. Kami akan menangani latar belakang dengan CSS. Ubah Letter Spacing menjadi 1px dan Line Height menjadi 1.3em.

• Arahkan Warna: #000000
• Spasi Huruf: 1px
• Tinggi Garis: 1.3em

Modul CSS

Selanjutnya, buka tab Advanced dan gulir ke bawah ke Filter Portofolio Aktif . Tambahkan CSS berikut untuk mengubah latar belakang filter aktif. Tutup modul.

• CSS Filter Portofolio Aktif:

  background-color:#ffd000

CSS Pengaturan Halaman

Terakhir, buka Pengaturan Halaman . buka tab Advanced dan masukkan Custom CSS berikut. Tutup modul dan simpan pengaturan Anda. Ini mengubah Background menjadi hitam, menambahkan padding 15px ke atas dan bawah, dan Padding 30px ke Kiri dan Kanan. Ini mengubah ukuran item filter agar sesuai dengan tombol dalam tata letak dan membantu membuat perubahan warna untuk efek melayang. Latar belakang akan berubah menjadi putih saat melayang.

• CSS khusus:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Hasil

Contoh Filter Kategori Desktop Satu

Contoh Filter Kategori Telepon Satu

Contoh Filter Kategori Desktop Dua

Contoh Filter Kategori Telepon Dua

Contoh Filter Kategori Desktop Tiga

Contoh Filter Kategori Telepon Tiga

Mengakhiri Pikiran

Itulah tampilan kami tentang cara menata filter kategori di Modul Portofolio Filterable Divi. Filter kategori menyertakan alat penataan yang sama dengan elemen lainnya, sehingga dapat dengan mudah ditata untuk bekerja dengan tata letak Divi apa pun. Menambahkan CSS ke modul dan halaman, kita dapat menata filter kategori dengan banyak cara unik untuk menonjol dari yang lain.

Kami ingin mendengar dari Anda. Sudahkah Anda menata filter kategori Anda di Modul Portofolio Filterable Divi? Beri tahu kami tentang hal itu di komentar.