Divi: "Filtrelenebilir Portföy" modül ızgarasının bir öğesi nasıl özelleştirilir

Filtrelenebilir Portföy modülünün ızgara öğelerini nasıl özelleştireceğinizi bilmek ister misiniz? Divi ? Bu eğitimde bizi takip edin...

üzerinde bir bölge var Site Web işinizi sergilemek önemlidir. Stilistseniz, kendi sayfanızda birkaç proje oluşturabilirsiniz. Site Web Konseptlerinizi sergilemek için WordPress. Bir marka oluşturucuysanız, çalışmalarınızı sergilemek için bir portföy kullanabilirsiniz. Hatta daha da ileri giderek projelerimize farklı kategoriler ekleyebiliriz. Burada Divi'nin Filtrelenebilir Portföy modülü ne işe yarar? .

Bu modül ile sıkı çalışmamızı kolay ve düzenli bir şekilde sergileyebiliyoruz. 

Bugünün eğitiminde, Filtrelenebilir Portföy modülünün ızgara öğelerini tek tek özelleştireceğiz. Ücretsiz düzen paketlerindeki düzenleri kullanacağız Divi Konferansı et Divi Çevrimiçi Yoga Eğitmeni her satın alma ile sağlanan Divi . 

hakkında her şeyde olduğu gibi Divi, bu modülü ihtiyaçlarımıza ve arzularımıza uyacak şekilde özelleştirme yeteneğine sahibiz. Ancak, stile geçmeden önce, modül hakkında biraz daha bilgi edinelim.

Divi'nin Filtrelenebilir Portföy modülü nedir?

Projeler, gönderilerle aynı şekilde çalışan özel bir gönderi türünün parçasıdır. Bunları WordPress kontrol panelinizde bulabilirsiniz.

Burası, Filtrelenebilir Portföy modülünüzü dolduracak bireysel projelerinizi oluşturacağınız yerdir. Modül, projelerimizi göstermemiz için bize iki yol sunar: ızgara formatında ou tam genişlikte formatta. Bizim için ızgara formatını kullanacağız ve özelleştireceğiz. 

Filtrelenebilir Portföy modülü ile en güncel projelerimizi sunabileceğiz. Sitemizin kullanıcıları, portföy ızgaramızın üstünde bir filtre çubuğu göreceklerdir. Oradan, modülde görüntülenmesine izin verdiğimiz farklı portföy kategorilerine göz atabilirler.

İşte bazı örnek projelerle birlikte modülün örnek ızgara yapılandırması:

Divi'nin filtrelenebilir portföyünü oluştururken dikkate alınması gereken alanlar

Tüm modlar gibi Divi, Filtrelenebilir Portföy modülü, ihtiyaç ve isteklerimize göre özelleştirebileceğimiz bir dizi özellikle birlikte gelir. Böylece, modülle birlikte gelen özelliklerin çoğu sekmede değiştirilebilir. Dizayn modül ayarları modundan. Aşağıdaki alanları ve daha fazlasını düzenleyebiliriz:

• Proje Başlığı
• Proje kategorisi
• Skeç
• Metni filtrele
• Fareyle üzerine gelindiğinde küçük resim
• Sayfalara numara koyma

Bu tam bir liste değildir ve CSS'nin bu modüle nasıl daha derin özelleştirmeler eklediğinden bahsetmeye bile başlamadık!

Divi'nin Filtrelenebilir Portföy modülünü nasıl özelleştireceğiz?

Daha önce de belirtildiği gibi, bu eğitim için iki düzen kullanacağız: Divi Konferansı et Divi Çevrimiçi Yoga Eğitmeni. Aşağıda, bu eğitim sırasında yapacağımız çalışmalara genel bir bakış bulabilirsiniz.

"Divi Konferansı" düzeninin öğelerinin düzenlenmesi

"Divi Online Yoga Eğitmeni" düzeninin öğelerinin düzenlenmesi

Her iki düzeni de adresinden kolayca indirebilirsiniz. Divi Oluşturucu. 

Şimdi başlayalım!

Ayrıca bakınız: Divi: Filtrelenebilir Portföy modülünün ızgara ve tam genişlik düzeni arasında seçim yapın

Divi'nin Filtrelenebilir Portföy modülünün özelleştirilmesi: "Divi Konferans Sürümü"

Öncelikle, Divi Konferans Düzen Paketinden etkinlik sayfası şablonunu yüklememiz gerekecek. WordPress'te yeni sayfanızı oluşturduktan ve Divi Builder'ı etkinleştirdikten sonra Divi Library'ye gireceğiz.

Divi Düzen Kitaplığına girin

Simgesine tıklayın « Kitaplıktan Yükle Divi Düzen Kitaplığı'na girmek için

Divi Düzen Kitaplığı'nda düzeni bulun

Divi'nin düzen kitaplığındaki arama işlevini kullanarak, seyir eğilim " Konferans Etkinlik Sayfası".

Kurulum düzeni

Düzeni seçtikten sonra, " Bu Düzeni Kullan düzeni sayfanıza yüklemek için.

Görüntü Modülünü Çıkarın ve Değiştirin

Özelleştireceğimiz Filtrelenebilir Portföy modülüne yer açmak için aşağıda gösterilen Görüntü modülünü kaldıracağız. Tıkla " Sil fotoğrafı silmek için resmin üzerine geldikten sonra.

Divi'nin Filtrelenebilir Portföy modülünü ekleyin

Image modülünün kaldırılmasıyla artık Filterable Portfolio modülümüze yer açabiliriz. “ simgesine tıklıyoruz. Modül Ekle (gri artı işareti), ardından beliren modül kipli kutusunda modülü seçin.

Gönderi sayısını ve portföy düzenini ayarlama

Varsayılan olarak, bu modül çalışmanızı tek bir sütunda sunacaktır. Ancak, varsayılan olarak 4 sütunla gelen ızgara düzenini kullanacağız. 

Bu nedenle portföyünüz için gönderi sayısı olarak 4'ün katlarını (4, 8, 12, 16 vb.) seçmenizi öneririz. 

Bu eğitim için ızgaramızda 12 proje kullanacağız.

Divi'nin filtrelenebilir portföyünü özelleştirmeye başlayın: Başlık ve Meta Metin

Artık projelerimiz bir ızgarada görüntülendiğine göre, seçtiğimiz şablonun bazı tasarım öğelerini birbirine bağlayalım. Bu durumda yeni modülümüzde Divi Konferans Düzen Paketi ile sağlanan stili kullanacağız.

Yazı stili

• Metin Hizalama: Ortalanmış
• Metin Rengi: Koyu

Başlık metni stili

• Başlık Başlık Düzeyi: H2
• Başlık Fontu : Krona One
• Metin Rengi: #000000

Meta metin stili

• Meta Yazı Tipi: Varsayılan (Açık Sans)
• Meta Metin Rengi: #ff6651

Artık portföy kılavuzundaki başlıklar için stilimizi yerleştirdiğimize göre, proje küçük resimlerinin gerçek şeklinde bazı değişiklikler yapalım.

Proje küçük resim kenarlığını ve yuvarlatılmış köşeleri değiştirin

Divi Konferans Düzeni paketimizde, paketteki bazı anahtar karelere benzersiz bir şekil vermek için yuvarlatılmış köşelerin benzersiz bir kombinasyonunu kullanıyoruz. Bu stili modülümüzün küçük resimlerine uygulayalım.

Resim

• Görüntü:
  • Yuvarlak Köşeler: 50px 50px 50px 0px
  • Kenarlık Stilleri: tümü
  • Sınır Genişliği: 3px
  • Renk: #000000
  • Kenarlık Stili: katı

Bu, küçük resimlerimize düzen paketindeki diğer resimlerin geri kalanıyla eşleşen bir şekil verecektir.

Vurgulu Bindirmeyi Özelleştirme

Stilimizle bir adım daha ileri gidelim ve bu modülle birlikte gelen varsayılan katmanda küçük bir değişiklik yapalım. Kutudan çıkar çıkmaz kullanılan simgenin yanı sıra rengi de değiştireceğiz.

üstüne koyma

• Yakınlaştır Simge Rengi: #bcf5fd
• Vurgulu Bindirme Rengi: #ff6651
• Vurgulu Simge Seçici: Yakınlaştır

Şimdi görebileceğiniz gibi, bu düzen için marka renklerini kaplamaya ekledik ve ayrıca bu modülde üzerine gelindiğinde kaplama özelliği için Divi'nin varsayılan olarak sağladığı simgeyi değiştirdik.

Sayfalandırmayı özelleştirme

Şimdi, Filtrelenebilir Portföy modülümüze ek özelleştirme eklemek için küçük CSS parçacıkları kullanmaya başlayacağız. İlk olarak, bu modülün sayfalandırmasını özelleştireceğiz. Ardından, üzerinde görünen kenarlığı tek bir CSS satırıyla kaldıracağız.

Sayfalandırma metni

• Sayfalandırma:
  • Yazı Tipi: Krona Bir
  • Metin Hizalama: ortalanmış
  • Metin Rengi: #ff6651, #000000 (Vurgulu)

CSS'miz için sekmeye geçeceğiz gelişmiş modülümüzün. İkinci olarak, sekmeye tıklayacağız Özel CSS. Ardından, sayfalandırmamızın üzerindeki sınırı kaldırmak ve ona daha temiz bir görünüm vermek için aşağıdaki kod parçacığını gireceğiz.

portföy sayfalandırma

border-top: 0px;

Filtre Metnini Özelleştirmek için Divi Ayarlarını ve CSS'yi Kullanma

Filtre metni için, bir çentik alacağız. Vurgulu efektlerin yanı sıra arka planı değiştirmek için CSS kullanacağız. 

Yeni eklenen modül ile düzen paketinin stili arasında mükemmel bir devamlılık olmasını istiyoruz. Öncelikle yazı tipi için Divi ayarlarımızı girelim.

Filtre Kriteri Metni

• Filtre Kriterleri:
  • Yazı Tipi: Krona Bir
  • Yazı Tipi Rengi: #ffffff, #000000 (Vurgulu)

Haliyle, filtremiz gitmiş gibi görünüyor. Aslında, varsayılan durumunda beyaz zemin üzerine beyaz metindir. Ancak bunu özel CSS ile iki yerde değiştireceğiz. 

Öncelikle sayfa ayarlarında filtre metnine bir arka plan ekleyecek bir CSS snippet'i ekleyeceğiz. İkinci olarak, sekmeyi kullanarak aktif portföy filtresini özelleştireceğiz. gelişmiş du modülü.

Erişmek için sayfa ayarları, ekranın ortasındaki üç noktayı tıklayın. ebeveyn, dişli simgesini seçin bu sayfa ayarlarını açacaktır. O zaman sen Özel CSS sekmesine gidin ve filtre metnine bir arka plan eklemek için aşağıdakini girin.

Özel CSS

Bu CSS parçacığında, filtrenin arka plan rengini hedefliyoruz. Ayrıca fareyle üzerine gelme durumunu hedefler ve biçimlendiririz. Gündemde, modüle biraz daha CSS ekleyelim ve Aktif Filtre sekmemizi vurgulayalım.

/* 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;
}

Portföy filtresi etkin sekme stili

f'nin etkin sekmesiportföy filtresi kullanıcıların dikkatini ziyaret ettikleri mevcut portföy kategorisine çeker. Şu anda bu filtre beyaz metne ve açık renkli bir arka plana sahiptir. 

sekmesine gideceğiz gelişmiş Filtrelenebilir Portföy modülünü seçin ve bu özelliğin varsayılan ve fareyle üzerine gelme durumlarına metin ekleyin. Varsayılan durumda ekleyeceğimiz CSS özellikleri şunlardır:

background: #ff6651;
color: #ffffff !important;

Fareyle üzerine gelindiğinde durum

Vurguluyken, arka planı siyah olarak değiştireceğiz.

color: #000000!important;

"Divi Konferansı" ile Divi'nin filtrelenebilir portföyünün tasarımına son bakış

İşte son bakış!

Ve şimdi, fareyle üzerine geldiğinizde işte böyle görünüyor!

Divi'nin Filtrelenebilir Portföy modülünün özelleştirilmesi: "Divi Çevrimiçi Yoga Eğitmeni"

Divi Konferans Sürümü'nde olduğu gibi, düzeninizi Divi Builder içindeki Çevrimiçi Yoga Eğitmeni Düzen Paketi'nde bulun. 

Bu eğitim için Açılış Sayfası Düzenini kullanacağız. Bölüm başlıklı Bölüm Sınıfları bölümüne ilerleyin Yaklaşan Tüm Dersler.

Filtrelenebilir Portföy modülünü ekleme

Buradan, sınıflarla olan satırları kaldıracağız. Üzerinde üç nokta bulunan mor simgeye tıklayın . Sonra, tel kafes görünümünü seçin. Son olarak, üç sütun içeren iki satırı sileceksiniz.

Daha sonra bunları iç satırda tek bir sütunla değiştireceğiz. Ardından Filterable Portfolio modülümüzü ekleyeceğiz.

Önceki örnekte olduğu gibi, gönderi sayısı için 4'ün katı olan bu modül için ızgara düzenini kullanacağız. 

Şimdi haritada sunduğumuz bilgilerle biraz farklı bir şey yapalım. 

Sekmede içerik, şu yöne rotayı ayarla Elemanları ve seçimi kaldır Kategorileri Göster . Bu, Portföy modülünün içinde bulunduğu kategorinin adı olmadan yalnızca projenin adını göstereceği anlamına gelir.

Filtre kriterleri metninin, proje başlığının ve sayfalandırma metninin özelleştirilmesi

Modülümüzün metin bölümleri için stil tabanını tanımlayalım. Bu düzenin gövde metni Açık Sans ana başlıklar için kullanılan yazı tipi ise zencefil. Bu nedenle, şekillendirme işlemi boyunca bu iki yazı tipinin bir kombinasyonunu kullanacağız.

Metinleri

• Metin Hizalama: Ortalanmış
• Metin Rengi: Açık

Başlık metni

• Başlık Fontu : Cinzel
• Başlık Metin Rengi: #ffffff

Ölçüt metnini filtrele

• Filtre Kriteri Yazı Tipi Ağırlığı: Kalın
• Filtre Kriter metni Renk: #ffffff

Sayfalandırma metni

• Sayfalandırma Yazı Tipi Ağırlığı: Kalın

Filtrelenebilir portföy modülümüz şu anda böyle görünüyor. Çok değil ama yavaş yavaş oraya gidiyoruz!

Yarı saydam bir fareyle üzerine gelme kaplaması oluşturun

Bu düzendeki farklı modüllerden ve güzel gradyanlardan ilham alalım. Bunun için yarı saydam bir vurgulu yer paylaşımı oluşturacağız ve fareyle üzerine gelindiğinde de görünen simgeyi özelleştireceğiz.

• Yakınlaştırma Simgesi Rengi: #323741
• Vurgulu Bindirme Rengi: rgba (255 201 165, 0,85)
• Vurgulu Simge Seçici: bir sayfa arayın ve yukarıdaki simgeye bakın

Özel CSS ile portföy ızgara öğelerine kenarlık ekleme

İlk örneğimize benzer şekilde, Filtrelenebilir Portföy modülümüze daha fazla ilgi eklemek için şimdi CSS kullanacağız. 

Şimdi portföy ızgarasındaki her bir öğenin çevresine bir kenarlık ekleyeceğiz. Kenarlığımızı eklemek için sayfa ayarlarının özel CSS bölümünde aşağıdaki CSS parçasını kullanın. 

Ayrıca bu modül için CSS sınıfı olarak “border” kullanacağız.

• CSS Sınıfı: sınır

Özel CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Burada artık her ızgara öğesinin etrafında güzel bir kenarlık ve dolgu ile Filtrelenebilir Portföy modülümüz var.

Sayfalandırma sınırına stil vermek için CSS eklendi

Önceki örneğimizden farklı olarak, sayfalandırmamızın kenarlığına CSS ile renk ekleyelim. Bu da bölgeye gidecek Ayarlar > Özel CSS sayfası .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Filtre ölçütü metin stili

Divi Konferans Portföyü modülümüzün stiline benzer şekilde kategori filtrelerimize caz eklemek istiyoruz. Yine, bize sağlanan şablonda zaten mevcut olan stilden çizim yapmak istiyoruz. 

İşte filtre çubuğumuzun arka planını ve fareyle üzerine gelmeyi hedeflemek için özel CSS bölümümüze ekleyeceğimiz CSS.

/* 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;
}

Özel CSS'mize yapılan bu iki yeni eklemeyle, Filtrelenebilir Portföy modülümüz böyle görünecek şekilde şekilleniyor.

Ancak, aktif portföy filtresinin nasıl kaybolduğuna dikkat edin. Her zaman üzerinde beyaz metin bulunan açık renkli bir arka plana sahiptir. Modül ayarlarına gidelim ve bunu değiştirmek için biraz CSS ekleyelim.

Özel CSS

Aktif portföy filtresi:

background: #ffffff;
color: #323741 !important;

Modül animasyonunu kaldır

Daha temiz bir deneyim sağlamak için Filtrelenebilir Portföy modülüyle birlikte gelen varsayılan animasyonu kaldıracağız. Bunun için önce sayfa ayarlarımıza geri dönmemiz ve portföy ızgara öğelerini hedefleyecek ve kaldıracak bazı CSS eklememiz gerekecek. kayan geçiş bu kutunun dışında olur.

Özel CSS

/* 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;
}

Ayrıca Oku: Divi: Bir Blog'daki sütun sayısı nasıl değiştirilir?

Portföy ızgarasını dört sütundan üçe değiştirin

En son CSS eklememiz, Filtrelenebilir Portföy modülümüzü dört sütundan üç sütuna dönüştürmek olacak. Bu bize projelerimizi görmemiz için daha fazla alan sağlayacaktır. 

Ayrıca modülümüze fazladan bir satır ekleyeceğiz. Sütunlarınızı dönüştürmek için kullanabileceğiniz en son CSS snippet'ini de bulacaksınız.

Özel CSS

Bu son snippet için CSS kimliğini ekleyeceğiz #üç sütunlu ızgara modülümüze. CSS sınıfımızı daha önce olduğu gibi tutacağız.

/* 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;
}
}

DIVI'yı şimdi indirin!!!

Sonuç

Çoğu Divi modülünde olduğu gibi, Divi ile gelen ayarlar CSS ile daha da geliştirilebilir. Çalışmanızı sergilemek, çevrimiçi bir iş, blog veya marka yönetmenin önemli bir parçasıdır. 

Bu nedenle, çalışmanızı sergilemek için düzenli bir yola sahip olmak çok önemlidir. Divi'nin Filtrelenebilir Portföy modülünün kendi tasarım yolculuğunuzda yer almak için bugün paylaşılan ipuçlarını kazanın.

Umarım bu teknik, gelecekteki projeler için başka bir yararlı tasarım becerisi katacaktır.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...