Divi Eklentisi Vurgusu: Divi FilterGrid

Divi FilterGrid, Divi Builder'a yeni bir filtrelenebilir modül ekleyen üçüncü taraf bir eklentidir. Herhangi bir özel gönderi türünden gönderileri görüntüleyebilir ve seçtiğiniz herhangi bir sınıflandırmaya göre görüntülemek için özel filtreler oluşturabilir. Blog gönderilerini, projeleri, ürünleri görüntüleyin, galeriler oluşturun ve çok daha fazlasını yapın.

Bu eklenti vurgusunda, Divi FilterGrid'e bir göz atacağız, neler yapabileceğini göreceğiz ve kullanımının ne kadar kolay olduğunu göreceğiz. Eklentiyi geliştiricinin web sitesinden satın alabilirsiniz.

Divi FilterGrid Modülü

Divi FilterGrid modülü, Divi Builder'a eklenir. Simge renklidir ve diğerlerinden farklıdır.

Divi FilterGrid İçerik Sekmesi

İçerik sekmesi birçok özellik ekler. Tüm arka plan renklerini ayarlamak için gönderi öğelerini, sorgu seçeneklerini, filtre seçeneklerini, sayfalandırma seçeneklerini ve arka planı içerirler. Ayrıca standart bağlantı ve yönetici etiketi seçeneklerini içerir.

Gönderi Öğeleri

Öğeleri Gönder seçenekleri, öne çıkan resmi göstermenize veya gizlemenize ve ardından küçük resim eylemini belirlemenize olanak tanır. Gönderiye bağlantı verebilir, görüntüyü bir ışık kutusunda, bir ışık kutusu galerisinde gösterebilir, gönderiyi bir açılır pencerede gösterebilir veya özel bir ışık kutusu galerisi açabilirsiniz. Bu örnek için, gönderiyi bir açılır pencerede gösteriyorum.

Bu, görüntüyü bir ışık kutusu galerisinde açar. Okuyucu, tüm gönderilerin öne çıkan resimlerini görmek için okları seçebilir. Gönderi başlığına tıklamak, gönderiyi aynı sekmede açmaya devam eder.

Kaplama rengini, simgeyi ve simge rengini de değiştirebilirsiniz. Bunların her birini yukarıdaki resimde özelleştirdim. Ayrıca başlığı gösterebilir, başlığa bağlantı ekleyebilir, bir alıntı ekleyebilir, alıntı karakter sayısını sınırlayabilir, daha fazla oku düğmesi gösterebilir, özel alanlar ekleyebilir ve daha fazlasını yapabilirsiniz. Bir alıntı ekledim ve yazı metasını devre dışı bıraktım.

Sorgu Seçenekleri

Sorgu Seçenekleri, Temel, Gelişmiş ve Özel arasından sorgu türünü seçmenize olanak tanır. Kategorileri, gönderi numarasını, ofset numarasını ve seçeneklere göre sıralamayı seçin. Bu örnekte bir kategori seçtim.

Gelişmiş seçenekler size birkaç yeni özellik sunar. Belirli gönderi türlerini, sınıflandırmaları, terimleri seçin ve terimleri ve sınıflandırmaları hariç tutun. Ayrıca özel gönderileri ve yapışkan gönderileri de gösterebilirsiniz. Yukarıdaki örnekte bir taksonomi belirliyorum. Kullanmak istediğim belirli kategorileri veya etiketleri seçmeme ve ardından bunların arama terimiyle ilişkisini belirtmeme izin veriyor. Alt terimler aynı şekilde çalışır. Bu, gönderileri yalnızca kategorilere veya etiketlere göre göstermenize değil, ekstra ayrıntılı bilgi edinmenize olanak tanır. Taksonomiler için posta numarası ve sipariş seçeneklerini de ayarlayabilirsiniz.

Özel sorgu türü, özel içerik kullanmanıza olanak tanır. Bunu nasıl kuracağınızı öğrenebileceğiniz belgelere bir bağlantı sağlar. Functions.php dosyasındaki kod ile özel sorgular yapılır. Belgeler, size adım atmak için birkaç örnek içerir.

Filtre Seçenekleri

Filtre Seçenekleri, ızgarayı arama terimlerine göre filtrelemenize olanak tanır. Varsayılan filtreyi seçin ve gönderiler ve projeler için kategoriler ve etiketler seçebileceğiniz bir model göreceksiniz. Ayrıca sırayı ayarlayabilir ve kimliğe, ada veya özel bir sıraya göre filtreleyebilirsiniz. Özel sipariş için değerleri virgülle ayırarak girebileceğiniz bir kutu göreceksiniz.

Sayfalandırma Seçenekleri

Sayfalandırma Seçenekleri, sayfalandırma türünü seçmenize olanak tanır. Disk belleği, daha fazla yükle düğmesi veya kaydırma sırasında daha fazlasını yüklemek için seçim yapın. Disk belleği seçeneği için okları, metni ve bağlantılarda gösterilen sayfa sayısını seçebilirsiniz. Bu örnekte metin ekledim ve okları değiştirdim.

Arka plan

Arka Plan ayarları, ızgara, filtreler, etkin filtre, sayfalandırma ve etkin sayfalandırmanın arka planlarını özelleştirmenize olanak tanır. Ayrıca bir Divi modülünde bekleyeceğiniz standart arka plan seçeneklerini de içerir. Yukarıdaki örnekte, filtre, ızgara ve sayfalama için arka plan renklerini ayarladım.

Divi FilterGrid Tasarım Sekmesi

Tasarım sekmesi, düzen seçenekleri, başlık metni, meta veri metni, içerik metni, filtre metni, sayfalandırma metni, daha fazla oku düğmesi, daha fazla yükle düğmesi ve tüm standart Divi modülü seçenekleri için özelleştirmeler sağlar.

Düzen Seçenekleri

Düzen Seçenekleri, bir düzen, bir dış görünüm seçmenize, öğe genişliğini, sütun ve satır payı boyutunu ve ızgara yazı tipi boyutunu ayarlamanıza olanak tanır. Öğelerin genişliğini azalttım, olukları kaldırdım ve görünüm için Midnight'ı seçtim. Yazı tipi boyutunu da küçülttüm.

Bu Sol Dikey Filtreler. Filtreleri sol tarafta dikey bir yığın halinde yerleştirir. Resimlerin daha büyük olması için öğelerin genişliğini artırdım.

Bu, Yer Paylaşımlı Öğeler. Bu seçenekte gönderiler daha kısadır.

Yakınlaştır Görüntüsü, her görüntüyü bir bindirme ve ortada başlık ile gösterir. Görüntü üzerine gelindiğinde yakınlaştırılır.

Kitaplık, kartları kenarlıklı olarak gösterir ve başlığı resmin üzerine yerleştirir.

Bu, varsayılan dış görünümü kullanan Liste düzenidir.

Bu Tam Genişlik. Başlığı, metayı ve alıntıyı görüntünün altına yerleştirir.

Divi FilterGrid Modülü Gelişmiş Sekmesi

Gelişmiş sekmesi, modül içindeki hemen hemen her öğe için 15 Özel CSS alanı ekler. CSS kullanıcıları, özelleştirmek için belirli öğeleri hedefleme konusunda herhangi bir sorun yaşamazlar.

Divi FilterGrid Modül Şekillendirme

Düzen seçenekleri bazı ilginç tasarımlar yaratabilir. Bu örnekte, genişliği tek bir satırda gösterilecek şekilde azalttım. Ayrıca meta ve alıntıyı da kaldırdım.

Bunun için öğelerin genişliğini artırdım. Bu güzel bir mozaik galeri tasarımı yaratır.

Buna başlığı, tüm metayı, alıntıyı ve daha fazlasını oku düğmesini ekledim. Başlığın rengini değiştirdim, hepsini büyük harf yaptım, boyutu büyüttüm, ortaladım ve karakter aralığını artırdım. Ayrıca daha fazla oku düğmesinin boyutunu küçülttüm ve metnin stilini beyaz yaptım.

Daha fazla oku düğmesi için birçok stil seçeneği vardır. Bunun için varsayılan boyuta geri döndüm, ancak metni hafif yaptım. Kenarları yuvarladım ve ona bir arka plan gradyanı verdim.

Editör modunda görüntülenmez, ancak düğmeye bir resim de ekleyebilirsiniz. Görüntüyü tek başına, düz bir kaplamayla veya degrade kaplamayla ekleyebilirsiniz. Bu örnekte, görüntüyü yeşil gradyanımın arkasına ekledim.

Meta sonrası veri metni, tüm yazı metalarını birlikte ayarlar. Renk ve satır aralığını değiştirdim.

Filtreler metni, filtrenin yazı tipine stil vermenizi sağlar. Yazı tipinin boyutunu büyüttüm, rengini değiştirdim ve bir gölge efekti ekledim. Varsayılan filtre stili, seçilen filtre için farklı bir renge sahiptir. Bunu, İçerik sekmesindeki arka plan seçeneğinde ayrıca ayarlayabilirsiniz.

Bu örnekte, sayfalandırma metnini ayarlıyorum. Rengi değiştirdim, boyutu artırdım, biraz karakter aralığı ekledim ve bir gölge ekledim. Ayrıca bulanıklık gücünü de ayarladım.

Daha fazla yükle düğmesi, temel stil seçeneklerini de içerir. Varsayılan metni kullanıyorum (içerik sekmesinde değiştirilebilir). Ayrıca metni beyaza ayarladım (varsayılan olarak yeşildir).

Yazı tipi boyutunu büyüttüm, karakter aralığı ekledim, kenarlığı ayarladım, degrade ekledim ve yalnızca fareyle üzerine gelindiğinde simgeyi göstermeyi devre dışı bıraktım.

Divi FilterGrid ve Özel Yazı Tipleri

Özel gönderi türleriyle kullanımı kolay buldum. Sorgu seçeneklerinde, Gönderi Türlerini Seç'e tıklayın ve ardından moddan gönderi türünü seçin.

Hala orijinal filtreyi gösterir, ancak kendinizinkini oluşturabilir veya devre dışı bırakabilirsiniz. Filtre seçeneklerinde, filtre taksonomilerini tıklayın ve listeden taksonomilerinizi seçin. Değerleri Ayarla'yı tıklayın.

Artık WooCommerce ürünlerim için özel bir filtrem var.

Artık kalbimin içeriğine göre şekillendirebileceğim bir WooCommerce ürün modülüm var.

Divi FilterGrid Blog Örneği

Bu örnek için, Dog Walker düzeni blog sayfasındaki blog modülünü değiştirdim. Yazıların renkleri, yazı tipi stilleri ve yuvarlatılmış köşeleri ile eşleşecek şekilde şekillendirdim. Daha sonra blog listesinde görünmesi için WooCommerce ürünlerini ekledim. Bu, blog akışınıza çeşitli içerik türleri eklemenin harika bir yoludur.

Sonuç harika görünüyor. Filtrelenebilir bir blog oluşturur veya filtreyi devre dışı bırakıp içeriği gösterebilirsiniz.

Divi FilterGrid Modülü Belgeleri ve fiyatı

Belgeler geliştiricinin web sitesinde mevcuttur. Gelişmiş özellikler hakkında belirli bilgileri görmek için düğmeleri tıklayın. SSS sayfasını ziyaret edebilir veya buradan bir destek bileti gönderebilirsiniz. Nasıl kullanılacağına dair bir açıklama görmek için modüldeki her özellik için soru işaretine de tıklayabilirsiniz.

Divi FilterGrid satın almak için dört seçenek vardır:

• Tek Site – 19 $
• 5 site – 39 $
• Sınırsız Site – 59 $
• Ömür Boyu Sınırsız Site – 129$

Eklentiyi geliştiricinin web sitesinden satın alabilirsiniz.

Biten Düşünceler

Divi FilterGrid ilginç bir eklentidir. Farklı içerik türlerini görüntülemek için mükemmel bir modüldür. Pratik olarak herhangi bir gönderi türünü görüntüleyebilir ve birden fazla gönderi türünü birlikte görüntüleyebilirsiniz. Filtreleme seçenekleri, olmasını istediğiniz kadar karmaşık olabilir.

Arka planlar için renk ayarlama seçeneklerine sahip olmayı seviyorum. İçerik sekmesinde renk seçeneklerine sahip olmak, renk seçeneklerinin iki farklı konumda olduğu anlamına gelir. Bu renk ayarlamalarının Tasarım sekmesine taşınmasının daha sezgisel olacağını düşünüyorum. Yine de renkleri bağımsız olarak özelleştirebilmek güzel.

Son derece sezgisel buldum. Tüm seçenekleri görmek için araştırmanızı tavsiye ederim. Gönderi türlerinizi görüntülemek için güçlü bir filtrelenmiş ızgara eklemekle ilgileniyorsanız, Divi FilterGrid önerilmesi kolay bir eklentidir.

Senden duymak istiyoruz. Divi FilterGrid'i denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

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