Divi Eklentisi Vurgusu: Divi Filtresi

Divi Filter, Divi web sitenize bazı benzersiz filtreleme seçenekleri ekleyen Divi için üçüncü taraf bir eklentidir. Herhangi bir Divi modülünü filtre olarak kullanmanıza izin verir ve herhangi bir modül filtrelenmiş sonuçlara dahil edilebilir. Eklentinin iki sürümü vardır: ücretsiz ve premium. Premium sürüm en iyi özelliklere sahiptir, ancak ücretsiz sürümle çok şey yapabilirsiniz. Bu Divi eklenti vurgusunda, Divi Filter'ın ücretsiz sürümüne bakacağız ve ihtiyaçlarınız için doğru eklenti olup olmadığına karar vermenize yardımcı olmak için neler yapabileceğini göreceğiz.

Divi Filtresini Yükleme

Eklentiyi normal şekilde yükleyin ve etkinleştirin.

Git:

• WordPress kontrol panelindeki eklentiler
• Eklenti Yükle'yi seçin
• Dosya Seç'e tıklayın ve eklentinize gidin
• Şimdi Yükle'yi seçin

Eklenti etkinleştirildiğinde, güvenlik uyarıları, özellik güncellemeleri hakkında bilgi alma ve hassas olmayan teşhis takibine izin verme seçeneğinin bulunduğu bir açılır pencere göreceksiniz. Açılır pencereyi kapatmak için İzin Ver ve Devam Et veya Atla'yı seçmeniz yeterlidir.

Divi Filtresini Kullanma

Divi Filtresi, Divi öğelerine modül veya özellik eklemez. Filtreler, CSS sınıfları ile manuel olarak eklenir.

Bu ilk başta kafa karıştırıcı olabilir (özellikle de benim gibiyseniz ve sadece içeri girip özellikleri keşfetmeye başlamak istiyorsanız. Önce kafaya dalar ve talimatları daha sonra okurum). Neyse ki, size adım adım ilerleyen iyi yazılmış belgelere sahip. Bir kez geçtikten sonra, bir kez mantıklı ve daha sezgisel hale geliyor.

Divi Filtre, oluşturduğunuz kategorileri filtreleyerek çalışır. Filtre ekleme adımları basittir:

1. Bir CSS sınıfı ekleyerek filtre için bir tetikleyici oluşturun. Tetikleyici düğmeler, resimler vb. olabilir. Sınıfa bir kategori adı ekleyeceksiniz. Kategori adları istediğiniz herhangi bir şey olabilir.
2. Yeni bir bölüm oluşturun ve bir CSS sınıfı ekleyin.
3. Modülleri yeni bölümde filtrelemek istediğiniz sütunlara ekleyin.
4. Filtrelemek istediğiniz kategorileri içeren sütunlara CSS sınıfları ekleyin. Kategoriler tetikleyicilerle eşleşir.

Manuel süreç hakkında düşünceler

Bu manuel bir işlem olmasına rağmen, kullanımı zor değildir. Herhangi bir Divi modülünü kullanabiliriz. Bu birçok olasılık açar. Modülleri herhangi bir kombinasyonda kullanabiliriz. Sütundaki herhangi bir şey filtre sonuçlarına dahil edilecektir.

Bu, haritaları, geçişleri, formları, metin modüllerini, menüleri, fiyatlandırma tablolarını, yorumları, düğmeleri, kodu, sesi vb. filtrelememizi sağlar. Filtrenin kendisi Divi modülleri ile yapıldığından, onları istediğimiz gibi şekillendirebiliriz ve kod, CSS vb. kullanın.

Filtre Oluşturma

İlk örneğim için, Yemek Seti düzenindeki iletişim sayfasını kullanarak bir yardım merkezi için makaleler oluşturdum. Filtre için butonlar ve bilgi için toggle'lar kullanılır. Geçişler, yazılı öğreticiler, videolar vb. gibi her türlü içeriği içerebilir. Düğme sınıfını Gelişmiş sekmesine ekledim. Ayrıca kategoriye sahip bir sınıf ekledim. Bu durumda, kategori Temalar'dır.

Ardından, filtrelemek istediğim geçişleri içeren bölüme CSS sınıfını ekledim.

Son olarak, her sütuna kategori sınıfını ekledim. Geçişlerin her biri, onları yerleştirdiğim sütunun konusuyla eşleşiyor.

Şimdi, düğmelerden birine tıkladığımda o kategori görüntüleniyor ve diğer tüm kategoriler kaldırılıyor. Ayrıca onları geri getirmenin bir yolunu da yaratabilirim. Profesyonel sürüm bunları yeniden istifler, böylece birden çok sütun görürsünüz.

Filtreyi kapatacak ve tüm kategorileri görüntüleyecek yeni bir düğme ekledim. Bunun için CSS Class alanına button sınıfını ekledim ama kategori sınıfı eklemedim. Belirtilen kategori olmadan, düğme tüm kategorileri tetikleyecektir.

Tümü düğmesini göstermek için kategorileri filtrelemek için bir düğmeyi tıkladım. Eklenti filtresini tıkladım, böylece Eklenti kategorisi şimdi görüntüleniyor.

Tümü'nü seçmek her kategoriyi yeniden gösterir. Bu, filtreyi kaldırmanın ve kullanıcının tüm sütunları görmesine izin vermenin kolay bir yoludur.

Başka Bir Divi Filtre Örneği

Bu örnek için sadece metin içeren bir filtre oluşturmak istedim. Filtre, seçenekleri en popüler, en iyi anlaşma ve en son filtre seçeneklerine göre görüntüler. Metin modüllerine CSS sınıflarını ekledim. İlki yalnızca düğme sınıfını içerir, böylece tüm sütunları görüntüler.

Bu resimde, En Popüler metin modülüne düğme sınıfını ve kategori sınıfını ekledim. Sınıfları diğer iki metin modülüne de ekleyeceğim.

Sonra, her sütuna CSS sınıfları ekliyorum. Her sütun bir tanıtım yazısı içerir. Filtre, üç tanıtımdan yalnızca birini görüntüler.

Son olarak, tanıtım yazılarını içeren bölüme df-area CSS sınıfını ekliyorum.

Metin modüllerinden herhangi birine tıklamak, o kategorinin tanıtımını görüntüler. Diğer iki tanıtım yazısı artık gizlenmiştir.

Tümünü Gör'e tıklamak onları geri getirir.

Her sütuna birden fazla kategori denemeye ve eklemeye karar verdim. Bazen bir öğenin birden çok kategori altında listelenmesi gerekir. Bu, filtreniz en son veya en iyi fırsatlar gibi terimler içerdiğinde kesinlikle geçerlidir.

Divi Filtre tam olarak beklendiği gibi çalıştı. Her sütuna iki kategori ekledim ve şimdi filtrelerin her biri bir yerine iki sütun gösteriyor.

Üçüncü Divi Filtre Örneği

Üçüncü Divi Filtre örneğim için önceki örnekteki düşünce trenime devam etmek istedim ama biraz daha karmaşık hale getirmek istedim. Tetikleyiciler olarak metin modülleriyle bir tarif listesi oluşturacağım. Bu, birden fazla kategori içerecek ve bunları çeşitli kombinasyonlarda sütunlara ekliyorum. Bu örnek, Meal Kit Divi düzen paketindeki Tarifler sayfasını kullanır. Metin modüllerine uygun CSS sınıflarını ekledim.

Bölüm, Alan sınıfını içerir. Filtrelenmiş öğeler için resimler kullanıyorum.

Her sütuna birden fazla kategori ekleyeceğim. Tabii ki, gerçek hayatta eşyaların bu kategorilerle eşleşmesi gerekecek. Ekran görüntüsü için rastgele görüntüler seçiyorum.

İşte tüm tarifleri gösteren sayfa. Bu, üç sütuna ayarlanmıştır.

İşte bir filtrenin seçili olduğu sayfa. Bir sütunu filtreler.

Daha fazla kategori kombinasyonuna sahip olmak için daha fazla sütun ekledim.

Sonucum, bir filtrenin seçili olduğu dört sütun gösteriyor. Tabii ki, bu kategorileri seçerken dikkatli olmalıyım, ancak bu konunun anlaşılması için işe yaradığını düşünüyorum. Kaç sütununuz olduğu, içlerinde hangi modüllerin olduğu veya kaç modülünüz olduğu önemli değildir. Filtre ne olursa olsun aynı şekilde çalışır.

Divi Filtresi Nasıl Gidilir?

Divi Filter, Divi Marketplace'te ücretsiz olarak mevcuttur. Ücretsiz sürüm yalnızca sütunları filtreler, ancak bu sürümle çok şey yapabilirsiniz.

Premium sürüm, filtreyi satırlara, filtre animasyonlarına, açılır filtrelere, tüm sayfalarda sınırsız filtrelere ve daha fazlasına ekler. Bu özellikler, filtreleyebileceklerinizi genişletecek ve animasyonlar ona parlak bir görünüm kazandıracaktır.

Profesyonel sürüm 19€'dan başlıyor. Ücretsiz eklenti içinde pro sürüme yükseltebilirsiniz, böylece istediğiniz zaman ücretsiz sürümü deneyebilir ve pro sürüme yükseltebilirsiniz. Başlamanız için profesyonel sürümde birkaç düzen mevcuttur. Bunları ayrı olarak da satın alabilirsiniz.

Divi Filtresi Üzerine Düşünceleri Bitirmek

Divi Filter'a bakışımız bu. Filtreleri manuel olarak oluşturmanız gerekir. Neyse ki, bu zor değil ve bu size çok fazla kontrol sağlıyor. Bir kez adım attıktan sonra, üzerinde çok fazla düşünmeden kullanmak yeterince kolaydır. Çalışma şeklini seviyorum çünkü tetikleyici olarak her şey kullanılabilir ve sütunlara her şey yerleştirilebilir. İçerik farketmez. Bu, onu standart içerik filtresinden ayırır.

Bu örnekler yalnızca ücretsiz sürümde yapılabilecekleri kapsar. Profesyonel sürüm size daha fazla kontrol ve filtreleri uygulayabileceğiniz daha fazla öğe sağlar. İhtiyacınız olanı yapıp yapamayacağını görmek için ücretsiz sürümü denemenizi ve ardından eklentiyi kullanmayı seviyorsanız yükseltme yapmanızı şiddetle tavsiye ederim.

Senden duymak istiyoruz. Divi Filter'ı denediniz mi? Aşağıdaki yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

H12 / Shutterstock.com üzerinden Öne Çıkan Görsel