Divi'nin Filtrelenebilir Portföy Modülünde Kategori Filtresi Nasıl Stillendirilir

Divi'nin Filtrelenebilir Portföy Modülü birçok öğe içerir ve her biri ayrı ayrı şekillendirilebilir. Filtre, en kullanışlı öğelerden biridir, ancak bazen gözden kaçar. Bu yazıda, Divi'nin Filtrelenebilir Portföy Modülünde kategori filtresinin nasıl stillendirileceğini göreceğiz. Standart ayarlarla neler yapılabileceğini göreceğiz ve nasıl daha fazla stil verileceğini görmek için CSS'yi inceleyeceğiz.

Başlayalım!

Ön izleme

İlk olarak, bu eğitimde ne inşa edeceğimize bakalım.

Masaüstü Kategori Filtresi Örnek Bir

Telefon Kategori Filtresi Örnek Bir

Masaüstü Kategori Filtresi Örneği İki

Telefon Kategori Filtresi Örnek İki

Masaüstü Kategori Filtresi Örneği Üç

Telefon Kategorisi Filtresi Örneği Üç

Projeleri Kategorilere Ayırmak

Kategori filtresinden en iyi şekilde yararlanmak için projelerinizi okuyucularınız için en anlamlı olan kategorilere ayırmanız gerekir. Kategorilerinizi oluşturmak için WordPress panosunda Projeler > Kategoriler'e gidin.

Burada ad, bilgi, üst kategori ve açıklama eklemek için alanlar göreceksiniz. Ayrıca kategori listenizi, onları düzenleyebileceğiniz bir listede göreceksiniz.

Kategorilerinizi oluşturduktan sonra, her projeniz için okuyucu için en anlamlı olanları seçtiğinizden emin olun. Projelerinizi oluşturmak için Projeler'e gidin ve menüden veya sayfanın üst kısmındaki Yeni Ekle'ye tıklayın.

Örneklerim için bir ev yenileme şirketi için projeler oluşturdum. Şirket, ev tadilatlarına odaklanacak, ancak kurumsal için benzer çalışmaları da içerecek ve sıfırdan inşa edebileceklerdi. Evler için İç ve Dış kategorilerini kullanıyorum. Diğer tüm işler için Kurumsal ve İnşaat'ı ekledim.

Filtrelenebilir Portföy Modülü Ayarları

Örneğimizde, Portföy sayfasının portföy bölümünü ücretsiz Renovasyon Düzen Paketinden Filtrelenebilir Portföy Modülü ile değiştireceğim. İlk olarak, modülün nasıl stillendirileceğini görelim. Ardından filtreyi üç farklı şekilde şekillendireceğiz. İşte değişiklikleri yapmadan önceki sayfa.

Görsellerin yerine Filtrelenebilir Portföy Modülünü ekledikten sonraki sayfa.

İlk önce modülü şekillendireceğiz. Bu üç örnek için de aynı ayarları kullanacağız.

İçerik

İçerik sekmesinde, Gönderi Sayısını 8 olarak ayarlayın ve Dahil Edilen Kategoriler listesinden Kategorileri seçin.

• Mesaj Sayısı: 8
• Dahil Edilen Kategoriler: seçiminiz

Elementler

Öğeler'e ilerleyin ve Kategorileri Göster'i devre dışı bırakın. Sadece başlıkları kullanacağız ve filtrenin kategorileri göstermesine izin vereceğiz.

• Kategorileri Göster: Hayır

Düzen

Ardından, Tasarım sekmesine gidin ve Düzen altında Izgara'yı seçin. Önceki görüntüler için zaten seçmiştim, ancak modül varsayılan olarak tam genişlikte görüntüleniyor.

• Düzen: Izgara

Metin

Ardından, Metin'e gidin ve Metin Hizalamasını Ortaya ayarlayın. Bu, filtreyi ve sayfalandırmayı modülle ve başlıkları proje görüntüleri ile ortalar.

• Metin Hizalama: Merkez

Başlık Metni

Ardından, Başlık Metni'ne gidin . Yazı Tipini Kanit olarak değiştirin ve Ağırlığı Yarı Kalın olarak ayarlayın. Rengi siyah olarak ayarlayın.

• Yazı Tipi: Kanit
• Ağırlık: Yarı Kalın
• Renk: #000000

Yazı Tipi Boyutunu masaüstü bilgisayarlar için 20 piksel, tabletler için 18 piksel ve telefonlar için 16 piksel olarak değiştirin. Satır Aralığını 1 piksele ve Satır Yüksekliğini 1,3em olarak ayarlayın.

• Boyut: 20px masaüstü, 18px tablet, 16px telefon
• Harf Aralığı: 1px
• Çizgi Yüksekliği: 1.3em

Sayfalandırma Metni

Ardından, Sayfalandırma Metni'ne gidin ve Yazı Tipi'ni Kanit olarak değiştirin. Rengi siyah olarak değiştirin.

• Yazı Tipi: Kanit
• Renk: #000000

Satır Aralığını 1 piksel olarak değiştirin. Çalışmanı kaydet. Artık örneklerimiz için kategori filtresini şekillendirebiliriz.

• Harf Aralığı: 1px

Kategori Filtre Örnekleri

Şimdi Kategori Filtresi örneklerimize geçebiliriz. Düzen paketinden tasarım ipuçlarını kullanıyorum.

Kategori Filtresi Örnek Bir

İlk örneğimiz üçünün en basitidir. Temel ayarları kullanır ve süslü bir şey yapmaz. Düzen tasarımı ile iyi çalışır.

Filtre Ölçütü Metni

Tasarım sekmesinde, Ölçüt Metni'ne gidin. Yazı Tipini Kanit olarak değiştirin. Stili TT ve Rengi siyah olarak değiştirin.

• Yazı Tipi: Kanit
• stil: TT
• Renk: #000000

Satır Aralığını 1 piksele ve Satır Yüksekliğini 1,3em olarak ayarlayın. İlki için bu kadar. Şimdi ayarlarınızı kaydedin ve modülü kapatın.

• Harf Aralığı: 1px
• Çizgi Yüksekliği: 1.3em

Kategori Filtresi Örneği İki

İkinci örneğimiz, modül ve sayfa için yuvarlatılmış köşeler ve bir kutu gölgesi oluşturmak için bazı basit CSS kullanacaktır. Bu en farklı görünüyor.

Filtre Ölçütü Metni

Tasarım sekmesine gidin ve Filter Criteria Text 'e gidin. Yazı Tipini Kanit olarak değiştirin. Rengi siyaha, Boyutu 16 piksele ve Çizgi Yüksekliğini 1.5em olarak ayarlayın. Yazı Tipi Boyutu tüm ekran boyutlarında iyi çalışır, bu nedenle tabletler veya telefonlar için ayarlamamız gerekmez.

• Yazı Tipi: Kanit
• Renk: #000000
• Boyut: 16 piksel
• Satır Yüksekliği: 1.5em

Modül CSS'si

Ardından, Gelişmiş sekmesine gidin. Aktif Portföy Filtresine ilerleyin ve Arka Plan Rengi için CSS ekleyin ve modülü kapatın. Bu, aktif filtrenin arka plan rengini değiştirir. Kullanıcının tıkladığı herhangi bir filtre bu arka plan rengini değiştirir ve önceki filtre normal renge döner.

• Aktif Portföy Filtresi CSS:

  background-color:#ffd000;

Sayfa Ayarları CSS'si

Ardından, sayfa menüsünde Sayfa Ayarları'nı açın. Sayfa Ayarları modunda, Gelişmiş sekmesini seçin ve Özel CSS'yi alana yapıştırın. Bu CSS, filtre öğelerinden kenarlığı kaldırır, 25 piksellik bir kenarlık yarıçapı oluşturur ve öğeler arasına 5 piksel kenar boşluğu ekler. Ayrıca öğelerin altına küçük bir kutu gölgesi ekler ve gölgenin rengini değiştirir. Modülü kapatın ve ayarlarınızı kaydedin.

• Özel CSS:

  .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 Filtre Örneği Üç

Üçüncü örneğimiz, önceki örnekteki benzer CSS tasarım fikirlerini takip ediyor. Yuvarlatılmış köşeler içermez ve fareyle üzerine gelindiğinde yazı tipini ve arka plan renklerini değiştirir. Ayrıca hem modül hem de sayfa için CSS kullanır.

Filtre Ölçütü Metni

Tasarım sekmesine gidin ve Filter Criteria Text 'e gidin. Yazı Tipi için Kanit'i seçin, Stili TT ve Rengi beyaz olarak ayarlayın.

• Yazı Tipi: Kanit
• stil: TT
• Renk: #ffffff

Ardından, Metin Rengi için Hover seçeneğini seçin ve Rengi siyah olarak değiştirin. Bu, fareyle üzerine gelindiğinde yazı tipleriyle ilgilenir. Arka planları CSS ile halledeceğiz. Harf Aralığını 1 piksel ve Satır Yüksekliğini 1.3em olarak değiştirin.

• Vurgulu Renk: #000000
• Harf Aralığı: 1px
• Çizgi Yüksekliği: 1.3em

Modül CSS'si

Ardından, Gelişmiş sekmesine gidin ve Aktif Portföy Filtresi'ne gidin. Etkin filtrenin arka planını değiştirmek için aşağıdaki CSS'yi ekleyin. Modülü kapatın.

• Aktif Portföy Filtresi CSS:

  background-color:#ffd000

Sayfa Ayarları CSS'si

Son olarak, Sayfa Ayarları'nı açın. Gelişmiş sekmesine gidin ve aşağıdaki Özel CSS'yi girin. Modülü kapatın ve ayarlarınızı kaydedin. Bu, Arka Planı siyah olarak değiştirir, üste ve alta 15 piksel dolgu ve Sol ve Sağa 30 piksel Doldurma ekler. Bu, filtre öğelerini düzen içindeki düğmelerle yakından eşleşecek şekilde yeniden boyutlandırır ve fareyle üzerine gelme efekti için renk değişikliğinin oluşturulmasına yardımcı olur. Fareyle üzerine gelindiğinde arka plan beyaza dönecektir.

• Özel CSS:

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

Sonuçlar

Masaüstü Kategori Filtresi Örnek Bir

Telefon Kategori Filtresi Örnek Bir

Masaüstü Kategori Filtresi Örneği İki

Telefon Kategori Filtresi Örnek İki

Masaüstü Kategori Filtresi Örneği Üç

Telefon Kategorisi Filtresi Örneği Üç

Biten Düşünceler

Divi'nin Filtrelenebilir Portföy Modülünde kategori filtresini nasıl şekillendireceğimize bakışımız budur. Kategori filtresi, diğer öğelerle aynı stil araçlarını içerir, böylece herhangi bir Divi düzeniyle çalışmak üzere kolayca biçimlendirilebilir. Hem modüle hem de sayfaya CSS ekleyerek, kalabalığın arasından sıyrılmak için kategori filtresini birçok benzersiz yolla biçimlendirebiliriz.

Senden duymak istiyoruz. Kategori filtrenizi Divi'nin Filtrelenebilir Portföy Modülünde şekillendirdiniz mi? Yorumlarda bize bildirin.