Apakah Anda ingin tahu cara menyesuaikan elemen kisi modul Portofolio Filterable dari Divi ? Ikuti kami dalam tutorial ini...
Memiliki zona pada Anda situs jaringan untuk memamerkan karya Anda itu penting. Jika Anda seorang stylist, Anda dapat membuat beberapa proyek sendiri situs jaringan WordPress untuk memamerkan konsep Anda. Jika Anda seorang pembuat merek, Anda dapat menggunakan portofolio untuk memamerkan karya Anda. Selain itu, kami bahkan dapat melangkah lebih jauh dan menambahkan berbagai kategori untuk proyek kami. Itu disini apa yang dilakukan modul Portofolio Filterable Divi? .
Dengan modul ini, kami dapat menampilkan kerja keras kami dengan cara yang mudah dan terorganisir.
Dalam tutorial hari ini, kami akan menyesuaikan elemen kisi individual dari modul Portofolio Filterable. Kami akan menggunakan tata letak dari paket tata letak gratis Konferensi Divi et Instruktur Yoga Divi Online disediakan dengan setiap pembelian Divi .
Seperti segala sesuatu tentang Divi, kami memiliki kemampuan untuk menyesuaikan modul ini agar sesuai dengan kebutuhan dan keinginan kami. Namun, sebelum kita masuk ke penataan gaya, mari pelajari lebih banyak tentang modul.
Apa itu modul Portofolio Filterable Divi?
Proyek adalah bagian dari jenis kiriman khusus yang berfungsi sama seperti kiriman. Anda dapat menemukannya di dasbor WordPress Anda.
Di sinilah Anda akan membuat proyek individual yang akan mengisi modul Portofolio Filterable Anda. Modul ini memberi kita dua cara untuk menunjukkan 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 mod Divi, modul Portofolio Filterable hadir dengan sejumlah fitur yang dapat kita sesuaikan dengan kebutuhan dan keinginan kita. Dengan demikian, sebagian besar fitur yang disertakan dengan modul dapat dimodifikasi di tab 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 bukan daftar lengkap, dan kita bahkan belum mulai berbicara tentang bagaimana CSS menambahkan penyesuaian lebih dalam ke 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.
Susunan elemen tata letak "Konferensi Divi".
Susunan elemen tata letak "Divi Online Yoga Instructor".
Anda dapat dengan mudah mengunduh kedua tata letak dari Divi Pembangun.
Sekarang mari kita mulai!
Lihat juga: Divi: Pilih antara kisi dan tata letak lebar penuh dari modul Portofolio Filterable
Penyesuaian modul Portofolio Tersaring Divi: "Edisi Konferensi Divi"
Pertama, kita perlu menginstal templat halaman acara dari Paket Tata Letak Konferensi Divi. Setelah membuat halaman baru Anda di WordPress dan mengaktifkan Divi Builder, kami akan masuk ke Perpustakaan Divi.
Masuk ke Perpustakaan Tata Letak Divi
Klik pada ikon « Muat Dari Perpustakaan untuk masuk ke Perpustakaan Tata Letak Divi
Temukan tata letak di Divi Layout Library
Menggunakan fungsi pencarian di pustaka tata letak Divi, mencari disposisi " Halaman Acara Konferensi".
Instal tata letak
Setelah Anda memilih tata letak, klik tombol " Gunakan Tata Letak Ini untuk menginstal tata letak ke halaman Anda.
Hapus dan Ganti Modul Gambar
Kami akan menghapus modul Gambar yang ditunjukkan di bawah ini untuk memberi ruang bagi modul Portofolio Filterable yang akan kami sesuaikan. Klik pada " Delete setelah mengarahkan kursor ke gambar untuk menghapus foto.
Masukkan modul Portofolio Filterable Divi
Dengan modul Gambar dihapus, kami sekarang dapat memberikan ruang untuk modul Portofolio Filterable kami. Kami akan mengklik ikon " Tambahkan Modul (tanda tambah 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 proyek kita ditampilkan dalam kisi, mari kita tautkan beberapa elemen desain dari template pilihan kita. Dalam hal ini, kami akan menggunakan gaya yang disediakan dengan Paket Tata Letak Konferensi Divi di modul baru kami.
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 selangkah lebih maju dengan gaya kita dan buat sedikit perubahan pada overlay default yang disertakan dengan modul ini. Kami akan mengubah warna serta ikon yang digunakan langsung dari kotaknya.
Superposisi
- Warna Ikon Zoom: #bcf5fd
- Arahkan Overlay Warna: #ff6651
- Arahkan Pemilih Ikon: Zoom
Seperti yang Anda lihat sekarang, kami telah menambahkan warna merek untuk tata letak ini ke overlay, serta mengubah ikon yang disediakan Divi secara default untuk fitur overlay saat melayang di modul ini.
Menyesuaikan paginasi
Kami sekarang akan mulai menggunakan potongan kecil CSS untuk menambahkan penyesuaian tambahan ke modul Filterable Portfolio kami. Pertama, kami akan menyesuaikan paginasi modul ini. Selanjutnya, kita akan menghapus batas yang muncul di atasnya dengan satu baris CSS
Teks paginasi
- Penomoran halaman:
- Font: Krona Satu
- Perataan Teks: terpusat
- Warna Teks: #ff6651, #000000 (Arahkan)
Untuk CSS kami, kami akan beralih ke tab Advanced dari modul kami. Kedua, kita akan klik pada tab CSS khusus. Selanjutnya, kita akan memasukkan cuplikan kode berikut untuk menghapus batas di atas paginasi kita, memberikan tampilan yang lebih bersih.
Penomoran portofolio
border-top: 0px;
Menggunakan Pengaturan Divi dan CSS untuk Menyesuaikan Teks Filter
Untuk teks filter, kami akan meningkatkannya. Kita akan menggunakan CSS untuk mengubah latar belakang serta efek hover.
Kami ingin memiliki kesinambungan yang sempurna antara modul yang baru ditambahkan dan gaya paket tata letak. Pertama, mari masuk ke pengaturan Divi untuk font.
Saring Teks Kriteria
- Kriteria Filter:
- Font: Krona Satu
- Warna Huruf: #ffffff, #000000 (Arahkan)
Seperti berdiri, filter kami tampaknya hilang. Memang, dalam keadaan default, itu adalah teks putih dengan latar belakang putih. Namun, kami akan mengubahnya dengan CSS khusus di dua tempat.
Pertama, kita akan menambahkan cuplikan CSS di setelan halaman yang akan menambahkan latar belakang ke teks filter. Kedua, kami akan menyesuaikan filter portofolio aktif menggunakan tab Advanced modul du.
Untuk mengakses pengaturan halaman, klik tiga titik di tengah layar. layanan, pilih ikon roda gigi yang akan membuka halaman pengaturan. Terus Anda arahkan ke tab CSS Khusus dan masukkan berikut ini untuk menambahkan latar belakang ke teks filter.
CSS khusus
Dalam cuplikan CSS ini, kami menargetkan warna latar belakang filter. Kami juga menargetkan dan menata status hover-nya. Agenda selanjutnya, mari tambahkan beberapa CSS lagi ke modul dan sorot tab Filter Aktif kita.
/* 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 menarik perhatian pengguna ke kategori portofolio saat ini yang mereka kunjungi. Saat ini filter ini memiliki teks putih dan latar belakang terang.
Kami 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 mengarahkan kursor, kami akan mengubah latar belakang menjadi hitam.
color: #000000!important;
Tampilan akhir desain portofolio Divi yang dapat difilter dengan "Konferensi Divi"
Inilah tampilan terakhir!
Dan sekarang, inilah tampilannya saat Anda mengarahkan kursor!
Penyesuaian modul Portofolio Filterable Divi: "Instruktur Yoga Online Divi"
Seperti Edisi Konferensi Divi, temukan tata letak Anda di Paket Tata Letak Instruktur Yoga Online di dalam Divi Builder.
Kami akan menggunakan Tata Letak Halaman Arahan 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.
Kemudian kita akan menggantinya dengan satu kolom pada baris di dalamnya. Kemudian, kami akan menambahkan modul Portofolio Filterable kami.
Seperti pada contoh sebelumnya, kita akan menggunakan tata letak grid untuk modul ini dengan kelipatan 4 untuk jumlah posting.
Sekarang mari kita lakukan sesuatu yang sedikit berbeda dengan informasi yang kita tampilkan di peta.
Di tab Konten, navigasi ke Elemen dan batalkan pilihan Tampilkan Kategori . Ini berarti modul Portofolio hanya akan menampilkan nama proyek tanpa nama kategorinya.
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
Seperti inilah tampilan modul portofolio kami yang dapat difilter saat ini. Ini tidak banyak, tapi kita sampai di sana perlahan!
Buat overlay hover transparan
Mari dapatkan inspirasi dari berbagai modul dan gradasi indah dalam tata letak ini. Untuk ini, kami akan membuat overlay hover transparan dan menyesuaikan ikon yang juga muncul di hover.
- Warna Ikon Zoom: #323741
- Arahkan Warna Hamparan: rgba (255 201 165, 0,85)
- Arahkan Pemilih Ikon: cari lembar dan lihat ikon di atas
Menambahkan batas ke elemen kisi portofolio dengan CSS khusus
Mirip dengan contoh pertama kami, kami sekarang akan menggunakan CSS untuk menambahkan lebih banyak minat ke modul Portofolio Filterable kami.
Sekarang kita akan menambahkan batas di sekitar masing-masing item di kisi portofolio. Gunakan cuplikan CSS di bawah ini di bagian CSS khusus dari pengaturan halaman untuk menambahkan batas kita.
Kami 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;
}
Di sini kita sekarang memiliki modul Filterable Portfolio dengan border yang bagus – dan padding – di sekitar setiap item 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 kami tambahkan di bagian CSS khusus kami untuk menargetkan latar belakang dan mengarahkan bilah filter kami.
/* 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 Portofolio Filterable. Untuk ini pertama-tama kita harus kembali ke pengaturan halaman kita dan menambahkan beberapa CSS yang akan menargetkan elemen grid portofolio dan menghapusnya 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 cuplikan terakhir ini, kami akan menambahkan ID CSS #tiga-kolom-kisi ke modul kami. Kami masih akan mempertahankan kelas CSS kami dari sebelumnya utuh.
/* 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 disertakan dengan Divi dapat dikembangkan lebih lanjut dengan CSS. Menampilkan karya Anda adalah bagian penting dalam menjalankan bisnis online, blog, atau merek.
Dengan demikian, memiliki cara yang terorganisir untuk menampilkan karya Anda sangat penting. Dapatkan kiat yang dibagikan hari ini untuk ikut serta dalam perjalanan desain Anda sendiri dari modul Portofolio Filterable 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.
...
