Apakah Anda ingin tahu cara menyesuaikan elemen kisi modul Portofolio Filterable dari Divi Ikuti tutorial ini bersama kami...
Memiliki area khusus di situs web Anda untuk memamerkan karya Anda sangat penting. Jika Anda seorang penata gaya, Anda dapat membuat beberapa proyek di situs web WordPress Anda untuk menampilkan desain Anda. Jika Anda seorang pencipta merek, Anda dapat menggunakan portofolio untuk mempresentasikan karya Anda. Lebih jauh lagi, kita bahkan dapat melangkah lebih jauh dan menambahkan berbagai kategori untuk proyek kita. Di situlah peran pentingnya. Di situlah modul Filterable Portfolio dari Divi berperan. .
Dengan modul ini, kami dapat menampilkan kerja keras kami dengan cara yang sederhana dan terorganisir.
Dalam tutorial hari ini, kita akan menyesuaikan elemen grid individual dari modul Filterable Portfolio. Kita akan menggunakan layout dari paket layout gratis. Konferensi Divi et Instruktur Yoga Divi Online disediakan dengan setiap pembelian Divi .
Seperti halnya semua hal yang berkaitan dengan Divi, kita memiliki opsi untuk menyesuaikan modul ini agar sesuai dengan kebutuhan dan keinginan kita. Namun, sebelum kita membahas gaya desainnya, mari kita pelajari sedikit lebih lanjut tentang modul itu sendiri.
Apa itu modul Portofolio yang Dapat Difilter di Divi?
Proyek adalah jenis posting kustom yang cara kerjanya mirip dengan posting biasa. Anda dapat menemukannya di dasbor WordPress Anda.
Di sinilah Anda akan membuat proyek individual Anda yang akan mengisi modul Portofolio yang Dapat Difilter. Modul ini memberi kita dua cara untuk memamerkan proyek kita: dalam format kisi ou dalam format lebar penuh. Bagi kami, kami akan menggunakan dan menyesuaikan format kisi.
Dengan modul Portofolio Filterable, kami akan dapat mempresentasikan proyek terbaru kami. Pengguna situs kami akan melihat bilah filter di bagian atas kisi portofolio kami. Dari sana, mereka dapat menelusuri berbagai kategori portofolio yang kami izinkan untuk ditampilkan dalam modul.
Berikut adalah contoh konfigurasi grid modul dengan beberapa contoh proyek:
Area yang perlu dipertimbangkan saat membuat portofolio Divi yang dapat difilter
Seperti semua modul Divi, modul Filterable Portfolio hadir dengan sejumlah fitur yang dapat disesuaikan dengan kebutuhan dan preferensi kita. Sebagian besar fitur modul dapat dimodifikasi di tab tersebut. Mendesain dari modal pengaturan modul. Kami dapat mengedit area berikut dan lainnya:
- Judul Proyek
- Kategori proyek
- Skets
- Saring teks
- Thumbnail di hover
- Pemberian nomor pd halaman buku
Ini bukanlah daftar lengkap, dan kita bahkan belum mulai membahas bagaimana CSS telah menambahkan kustomisasi yang lebih mendalam pada modul ini!
Bagaimana kami akan menyesuaikan modul Portofolio Filterable Divi
Seperti yang disebutkan sebelumnya, untuk tutorial ini kita akan menggunakan dua tata letak: Konferensi Divi et Instruktur Yoga Divi Online. Di bawah ini Anda bisa mendapatkan ikhtisar pekerjaan yang akan kita lakukan selama tutorial ini.
Tata letak elemen dalam presentasi "Konferensi Divi"
Tata letak elemen pada halaman "Instruktur Yoga Online Divi"
Anda dapat dengan mudah mengunduh kedua tata letak dari Divi Builder.
Sekarang mari kita mulai!
Lihat juga: Divi: Pilih antara kisi dan tata letak lebar penuh dari modul Portofolio Filterable
Mengkustomisasi modul Portofolio yang Dapat Difilter Divi: "Divi Conference Edition"
Pertama, kita perlu menginstal template halaman acara dari Divi Conference Layout Pack. Setelah membuat halaman baru di WordPress dan mengaktifkan Divi Builder, kita akan masuk ke Divi Library.
Masuk ke Perpustakaan Tata Letak Divi
Klik ikonnya "Muat Dari Perpustakaan"untuk mengakses pustaka tata letak Divi"
Temukan tata letak di Divi Layout Library
Dengan menggunakan fungsi pencarian di pustaka tata letak Divi, mencari ketentuanHalaman Acara Konferensi".
Instal tata letak
Setelah Anda memilih tata letak, klik tombol "Gunakan Tata Letak Ini"untuk memasang tata letak di halaman Anda."
Hapus dan Ganti Modul Gambar
Kita akan menghapus modul Gambar yang ditunjukkan di bawah ini untuk memberi ruang bagi modul Portofolio yang Dapat Difilter, yang akan kita sesuaikan. Klik ikon "Delete"setelah mengarahkan kursor ke gambar untuk menghapus foto."
Masukkan modul Portofolio Filterable Divi
Setelah modul Gambar dihapus, kita sekarang dapat memberi ruang untuk modul Portofolio yang Dapat Difilter. Kita akan mengklik ikon "Tambahkan Modul"(tanda plus abu-abu), lalu pilih modul di kotak modal modul yang muncul.
Pengaturan jumlah posting dan tata letak portofolio
Secara default, modul ini akan mempresentasikan karya Anda dalam satu kolom. Namun, kami akan menggunakan tata letak grid yang datang secara default dengan 4 kolom.
Oleh karena itu, kami sarankan untuk memilih kelipatan 4 (4, 8, 12, 16, dst.) sebagai jumlah postingan untuk portofolio Anda.
Untuk tutorial ini, kami akan menggunakan 12 proyek di grid kami.
Mulai sesuaikan portofolio Divi yang dapat disaring: Judul dan Teks Meta
Sekarang setelah proyek kita ditampilkan dalam bentuk grid, mari kita tautkan beberapa elemen desain dari template yang telah kita pilih. Dalam hal ini, kita akan menggunakan gaya yang disediakan oleh Divi Conference Layout Pack di modul baru kita.
Gaya teks
- Perataan Teks: Terpusat
- Warna Teks: Gelap
Gaya teks judul
- Judul Judul Tingkat: H2
- Font Judul : Krona One
- Warna Teks: #000000
Gaya teks meta
- Font Meta: Bawaan (Buka Sans)
- Warna Teks Meta: #ff6651
Sekarang setelah kita memiliki gaya untuk judul di kisi portofolio, mari buat beberapa perubahan pada bentuk sebenarnya dari thumbnail proyek itu sendiri.
Ubah batas thumbnail proyek dan sudut membulat
Dalam paket Tata Letak Konferensi Divi kami, kami menggunakan kombinasi unik dari sudut membulat untuk memberikan bentuk yang unik pada beberapa bingkai utama dalam paket. Mari terapkan gaya ini ke thumbnail modul kita.
Gambar
- Gambar:
- Sudut Bulat: 50px 50px 50px 0px
- Gaya Perbatasan: semua
- Lebar Perbatasan: 3px
- Warna: #000000
- Gaya Perbatasan: padat
Ini akan memberikan thumbnail kita bentuk yang cocok dengan gambar lainnya dalam paket tata letak.
Menyesuaikan Overlay Hover
Mari kita tingkatkan gaya kita dan modifikasi sedikit pada overlay default yang disediakan oleh modul ini. Kita akan mengubah warna serta ikon yang digunakan secara default.
Superposisi
- Warna Ikon Zoom: #bcf5fd
- Arahkan Overlay Warna: #ff6651
- Arahkan Pemilih Ikon: Zoom
Seperti yang dapat Anda lihat sekarang, kami telah menambahkan warna merek tata letak ini ke overlay, serta mengubah ikon yang disediakan Divi secara default untuk fungsi overlay saat mengarahkan kursor ke modul ini.
Menyesuaikan paginasi
Sekarang kita akan mulai menggunakan cuplikan CSS kecil untuk menambahkan kustomisasi lebih lanjut ke modul Portofolio yang Dapat Difilter. Pertama, kita akan menyesuaikan penomoran halaman modul ini. Kemudian, kita akan menghapus batas yang muncul di bagian atas dengan satu baris CSS.
Teks paginasi
- Penomoran halaman:
- Font: Krona Satu
- Perataan Teks: terpusat
- Warna Teks: #ff6651, #000000 (Arahkan)
Untuk CSS kita, kita akan beralih ke tab Advanced dari modul kita. Kedua, kita akan mengklik tab tersebut. CSS khusus. Selanjutnya, kita akan memasukkan cuplikan kode berikut untuk menghapus batas di atas halaman, sehingga tampilannya lebih bersih.
Penomoran portofolio
border-top: 0px;
Menggunakan Pengaturan Divi dan CSS untuk Menyesuaikan Teks Filter
Untuk teks filter, kita akan meningkatkan kualitasnya. Kita akan menggunakan CSS untuk mengubah latar belakang serta efek saat kursor diarahkan ke atasnya (hover).
Kita ingin menjaga kesinambungan sempurna antara modul yang baru ditambahkan dan gaya paket tata letak. Pertama, mari kita masuk ke pengaturan Divi untuk font.
Saring Teks Kriteria
- Kriteria Filter:
- Font: Krona Satu
- Warna Huruf: #ffffff, #000000 (Arahkan)
Saat ini, filter kita tampaknya telah menghilang. Memang, dalam keadaan default-nya, filter tersebut hanya berupa teks putih di atas latar belakang putih. Namun, kita akan mengubah ini dengan CSS kustom di dua tempat.
Pertama, kita akan menambahkan cuplikan CSS ke pengaturan halaman yang akan menambahkan latar belakang pada teks filter. Kedua, kita akan menyesuaikan filter portofolio aktif menggunakan tab tersebut. Advanced modul du.
Untuk mengakses Untuk mengakses pengaturan halaman, klik tiga titik di tengah layar. layanan, pilih ikon roda gigi yang akan membuka halaman pengaturan. Terus Anda Buka tab CSS Kustom dan masukkan berikut ini untuk menambahkan latar belakang ke teks filter.
CSS khusus
Dalam cuplikan CSS ini, kita menargetkan warna latar belakang filter. Kita juga menargetkan dan menata status hover-nya. Selanjutnya, mari kita tambahkan beberapa CSS lagi ke modul dan sorot tab Filter yang aktif.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Gaya tab aktif filter portofolio
Tab aktif dari ffilter portofolio Filter ini menarik perhatian pengguna ke kategori portofolio yang sedang mereka kunjungi. Saat ini, filter ini memiliki teks berwarna putih dan latar belakang terang.
Kita akan pergi ke tab Advanced dari modul Filterable Portfolio dan tambahkan teks ke status default dan hover dari fitur ini. Berikut adalah properti CSS yang akan kita tambahkan dalam keadaan default:
background: #ff6651;
color: #ffffff !important;
Status di hover
Saat diarahkan kursor ke atasnya, latar belakang akan berubah menjadi hitam.
color: #000000!important;
Tampilan akhir desain portofolio yang dapat difilter Divi dengan "Konferensi Divi"
Inilah tampilan terakhir!
Dan sekarang, inilah tampilannya saat Anda mengarahkan kursor!
Mengkustomisasi modul Portofolio yang Dapat Difilter Divi: "Instruktur Yoga Online Divi"
Sama seperti edisi Divi Conference, temukan layout Anda di paket layout instruktur yoga online di dalam Divi Builder.
Kita akan menggunakan Tata Letak Halaman Landing untuk tutorial ini. Gulir ke bawah ke bagian Kelas Bagian dengan judul Bagian. Semua Kelas Mendatang.
Memasukkan modul Filterable Portofolio
Dari sini, kami akan menghapus baris dengan kelas. Klik ikon ungu dengan tiga titik di atasnya. . Kemudian, pilih tampilan wireframe. Terakhir, Anda akan menghapus dua baris yang berisi tiga kolom.
Selanjutnya, kita akan menggantinya dengan satu kolom tunggal di baris dalamnya. Kemudian, kita akan menambahkan modul Portofolio yang Dapat Difilter.
Seperti pada contoh sebelumnya, kita akan menggunakan tata letak grid untuk modul ini dengan kelipatan 4 untuk jumlah publikasi.
Sekarang mari kita lakukan sesuatu yang sedikit berbeda dengan informasi yang kita sajikan di peta.
Di tab Konten, navigasi ke Elemen dan batalkan pilihan Tampilkan Kategori Ini berarti bahwa modul Portofolio hanya akan menampilkan nama proyek tanpa nama kategori tempat proyek tersebut berada.
Kustomisasi teks kriteria filter, judul proyek, dan teks halaman
Mari tentukan basis gaya untuk bagian teks modul kita. Teks isi tata letak ini adalah Terbuka Sans dan font yang digunakan untuk judul utama adalah Cinzel. Oleh karena itu, kami akan menggunakan kombinasi kedua font ini selama proses penataan.
teks
- Perataan Teks: Terpusat
- Warna Teks: Cahaya
Teks judul
- Font Judul : Cinzel
- Warna Teks Judul: #ffffff
Filter teks kriteria
- Berat Font Kriteria Filter: Tebal
- Filter teks Kriteria Warna: #ffffff
Teks paginasi
- Bobot Font Paginasi: Tebal
Beginilah tampilan modul dompet yang dapat difilter saat ini. Memang belum sempurna, tetapi kami perlahan-lahan menuju ke arah yang lebih baik!
Membuat lapisan transparan saat kursor diarahkan ke atasnya.
Mari kita ambil inspirasi dari berbagai modul dan gradien indah dalam tata letak ini. Untuk melakukan ini, kita akan membuat lapisan transparan saat kursor diarahkan ke elemen (hover overlay) dan menyesuaikan ikon yang juga muncul saat kursor diarahkan ke elemen tersebut.
- Warna Ikon Zoom: #323741
- Arahkan Warna Hamparan: rgba (255 201 165, 0,85)
- Pemilih Ikon Saat Kursor Diarahkan: cari lembar kerja dan lihat ikon di atasnya.
Menambahkan batas pada elemen grid portofolio menggunakan CSS kustom.
Mirip dengan contoh pertama kita, sekarang kita akan menggunakan CSS untuk menambahkan lebih banyak daya tarik pada modul Portofolio yang Dapat Difilter.
Sekarang, kita akan menambahkan batas di sekeliling setiap elemen individual dalam grid portofolio. Gunakan cuplikan CSS di bawah ini di bagian CSS kustom pada pengaturan halaman untuk menambahkan batas kita.
Kita juga akan menggunakan "border" sebagai kelas CSS untuk modul ini.
- Kelas CSS: perbatasan
CSS khusus
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Kini kita memiliki modul Portofolio yang Dapat Difilter dengan batas dan jarak yang bagus di sekitar setiap elemen grid.
Menambahkan CSS ke batas paginasi gaya
Tidak seperti contoh kita sebelumnya, mari kita tambahkan warna pada border pagination kita dengan CSS. Ini juga akan masuk ke area tersebut Setelan > Halaman CSS khusus .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Filter gaya teks kriteria
Mirip dengan gaya modul Portofolio Konferensi Divi kami, kami ingin menambahkan jazz ke filter kategori kami. Sekali lagi, kami ingin menggambar dari gaya yang sudah ada di template yang diberikan kepada kami.
Berikut adalah CSS yang akan kita tambahkan di bagian CSS kustom kita untuk menargetkan latar belakang dan efek hover pada filter bar kita.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}Dengan dua tambahan baru ini pada CSS khusus kami, seperti inilah tampilan modul Portofolio Filterable kami.
Namun, perhatikan bagaimana filter portofolio aktif hilang. Itu selalu memiliki latar belakang terang dengan teks putih di atasnya. Mari kita pergi ke pengaturan modul dan tambahkan beberapa CSS untuk mengubahnya.
CSS khusus
Filter portofolio aktif:
background: #ffffff;
color: #323741 !important;
Hapus animasi modul
Untuk memberikan pengalaman yang lebih bersih, kami akan menghapus animasi default yang disertakan dengan modul Filterable Portfolio. Untuk melakukan ini, pertama-tama kita perlu kembali ke pengaturan halaman dan menambahkan CSS yang menargetkan elemen grid portofolio dan menghapus transisi geser yang terjadi di luar kotak.
CSS khusus
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Baca juga: Divi: Cara mengubah jumlah kolom di Blog
Ubah kisi portofolio dari empat kolom menjadi tiga
Penambahan CSS terbaru kami adalah mengubah modul Filterable Portfolio kami dari empat kolom menjadi tiga. Ini akan memberi kita lebih banyak ruang untuk melihat proyek kita.
Juga, kami akan menambahkan baris tambahan ke modul kami. Anda juga akan menemukan cuplikan CSS terbaru yang dapat Anda gunakan untuk mengonversi kolom Anda.
CSS khusus
Untuk ekstrak terakhir ini, kita akan menambahkan ID CSS. #tiga-kolom-kisi ke modul kami. Kami akan selalu mempertahankan kelas CSS sebelumnya.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Unduh DIVI sekarang!!!
Kesimpulan
Seperti kebanyakan modul Divi, pengaturan yang disediakan oleh Divi dapat dikembangkan lebih lanjut menggunakan CSS. Presentasi karya Anda merupakan elemen penting dalam mengelola bisnis, blog, atau merek online.
Oleh karena itu, sangat penting untuk memiliki cara terorganisir untuk memamerkan karya Anda. Manfaatkan kiat-kiat yang dibagikan hari ini untuk memulai perjalanan desain Anda sendiri dengan modul Portofolio yang Dapat Difilter dari Divi.
Semoga teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan.
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.
...