Divi Eklentisi Vurgusu: DTS Filtrelenebilir Portfolio Grid Pro

Divi'nin filtrelenebilir portföy modülü, tam ekran veya ızgara şeklinde bir portföy oluşturmanıza olanak tanır. Izgara içinde 3 veya 4 sütun için bir düğme ve seçenekler ekleyen farklı bir görünüm istiyorsanız ne olur? DTS Filterable Portfolio Grid Pro adlı üçüncü taraf eklentinin yaptığı tam olarak budur.

DTS Filterable Portfolio Grid Pro, Divi Builder'a yeni bir modül ekler. Eklenti, portföyünüze yeni bir görünüm kazandırır ve bir ızgarada 3 veya 4 sütun için seçenekler sunar. Proje gönderi türlerini görüntüler. Özel düğme metni ve özel gelişmiş seçenekler içerir.

Eklenti, geliştiricinin web sitesinden edinilebilir.

Bu eklenti vurgusunda, DTS Filterable Portfolio Grid Pro'ya bir göz atacağız ve neler yapabileceğini göreceğiz. Resimler Unsplash.com'dan alınmıştır.

DTS Filtrelenebilir Portfolio Grid Pro'yu Yükleme

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Eklentiyi etkinleştirdikten sonra, kontrol panelindeki Ayarlar'a gidin ve DTS Filtrelenebilir Portföy Grid Pro Aktivasyonu öğesini seçin. API Anahtarınızı ve e-postanızı girin ve değişiklikleri kaydedin.

Modül Ayarları

Eklenti, Divi Builder'a yeni bir modül ekler. Mavi, bu yüzden gözden kaçırmak zor.

İçerik ayarları, gönderi sayısını, kategori seçimini, başlığı, kategorileri, sayfa numaralarını, arka planı ve özel düğme metnini gösterir.

Tasarım sekmesi, düzen, renkler, yazı tipleri, simgeler, kaplamalar, kenarlıklar ve animasyon için ayarları içerir.

Örnekler – Izgara

Varsayılan ayarlar 3 sütunlu bir ızgara kullanır. Ortadaki döşemede fareyle üzerine gelme animasyonunu görebilirsiniz. Döşemeler, başlık bölümü olan görüntüyü ve merkeze yerleştirilmiş bir düğmeyi içerir. Alt kategoriyi gösterir. Döşemeler, üzerine gelindiğinde uzaklaşan bir gölge görüntüler. Tahmin edebileceğiniz gibi, bu öğelerin her biri özelleştirilebilir.

Bu örnekte ızgarayı 4 sütun olarak değiştirdim ve düğme arka plan rengini, düğme arka plan vurgu rengini ve düğme yazı tipi vurgulu rengini ayarladım. Dört sütun düzeni, görüntü boyutlarını eşleşecek şekilde değiştirir.

Bunda, düğme yarıçapını küçülttüm, düğmelerin yazı tipi boyutunu artırdım, vurgulu simgesini ve rengini değiştirdim ve vurgulu kaplama rengini değiştirdim. Tüm bu ayarlamalar basit ve sezgiseldir.

Bu örnekte, düğme için kare köşeler oluşturmak için kenarlık yarıçapını 0'a aldım. Düğme metni, başlık metni için yazı tipi boyutlarını artırdım ve yazı tipi stillerini değiştirdim. Ayrıca, görüntünün görünmesi için vurgulu kaplamayı siyah yaptım ve vurgulu simgesini değiştirdim.

Bu, başlık için satır yüksekliğini azaltır. Ayrıca yazı tipinin rengini koyulaştırdım ve harf aralığını artırdım. Kategori yazı tipini varsayılana döndürdüm ve italik olarak ayarladım. Düğme yarıçapı 100'e ayarlandı ve kendi düğme metnimi ekledim. Ayrıca kaplama rengini değiştirdim ve farklı bir simge seçtim ve rengini beyaz olarak değiştirdim. Bu örnek ayrıca kırmızıya ve 2 piksel genişliğe ayarlanmış bir kenarlık kullanır. Kenarlık seçenekleri arasında renk, genişlik ve stil bulunur.

Modül, başlığın arkasında koyu bir arka plan kullanıyorsanız, açık ve koyu için bir metin rengi seçeneğine sahiptir, ancak şu anda başlığın arkasındaki arka planı değiştirme seçeneği yoktur. Bunun yaklaşan bir özellik olduğundan şüpheleniyorum.

Arka plan ayarları (standart renk, gradyan, görüntü ve video) modülün arkasına uygulanır. Kartlar arka plan renginin kenarına dokunur ve modül içinde herhangi bir dolgu ayarı yoktur.

Bu, arka planın garip görünmesine neden olur, ancak birkaç kolay çözüm var. Bu makaledeki tüm resimlerde yaptığım gibi bölüme veya satıra padding ekleyebilir veya modüle padding eklemek için CSS kullanabilirsiniz.

İşte modülün Ana Öğe bölümündeki Gelişmiş sekmesine eklediğim CSS. Divi'ye 4 konumun tümüne dolgu eklemesini söyler. Değerler, satırların ve modüllerin doldurma alanları ile aynı sırada uygulanır: üst, sağ, alt, sol. Bu, üst dolguya 40, sağ dolguya 30, alt dolguya 20 ve sol dolguya 30 değeri verdiğim anlamına gelir.

Sonuç tam olarak istediğim şey – dört tarafta da farklı dolgu seviyeleri. Bu, arka plan özelliğini daha kullanışlı hale getirir ve uygulaması kolaydır.

Örnekler – Filtre

Bu filtrelenebilir bir portföy olduğundan, filtrenin de özelleştirilebilir olması mantıklıdır. Beklendiği gibi, yazı tipi stili, boyutu, hizalaması, rengi, aralığı ve yüksekliği için ayarlamalar var. Bu noktaya kadar filtreyi varsayılan ayarlarıyla gördük.

Bu örnek, kırmızı Amatic SC yazı tipini kullanır. Yazı tipi boyutunu büyüttüm ancak boşluk ve yüksekliği varsayılan değerlerinde bıraktım.

Bu, Bevan adında bir yazı tipi kullanıyor. Ben daha koyu kırmızı kullanıyorum. Yazı tipi boyutu önceki yazı tipiyle aynıdır.

Bu Arvo kullanıyor. Yazı tipi boyutunu küçülttüm ve koyu gri bir renk seçtim.

Animasyonlar

Divi'nin animasyonları da modülün ayarlarında mevcuttur. Hiçbirini seçin, soldurun, kaydırın, zıplayın, yakınlaştırın, çevirin, katlayın ve yuvarlayın. Ayrıca animasyonu yalnızca bir kez tekrarlanacak veya döngü yapacak şekilde ayarlayabilir, yön, süre, gecikme, yoğunluk, başlangıç ​​opaklığı ve hız eğrisini seçebilirsiniz.

Bu örnek Rulo kullanır. Diğer her şeyi varsayılan olarak bıraktım.

Bir Düzen İçinde Portföy Izgarasını Kullanma

DTS Filtrelenebilir Portföy Grid Pro, bir düzen içinde harika görünüyor. İşte blog, portföy ve iletişim formu ile örnek bir fotoğraf düzeni. Portföy ızgarası için varsayılan ayarları kullanıyorum ve güzel bir şekilde karışıyor.

Portföy Izgarasını Ekstra İle Kullanma

DTS Filterable Portfolio Grid Pro, Extra ile de uyumludur. İşte yukarıdaki Divi düzenine benzer bir düzene bir bakış. Bu ayrıca varsayılan ayarları kullanır. Uyumsuz görüntü boyutlarına sahip 3 sütunlu bir ızgara kullanıyorum. Bu kolay bir düzeltmedir – aynı boyuttaki resimleri kullanmanız yeterlidir.

Lisans

Seçilebilecek iki lisans seçeneği vardır: tek site ve genişletilmiş. Her ikisi de ömür boyu güncellemeler ve 6 aylık destek içerir.

Son düşünceler

DTS Filtrelenebilir Portföy Grid Pro'nun kullanımı kolaydır ve portföyünüzü öne çıkarmak için çok sayıda zarif stil sunar. Başlık ve meta arka plan renkleri gibi eklenmesini istediğim birkaç özellik var, ancak yine de önerilmesi kolay olan yeterli özellikleri sağlıyor. Standart Divi modülünün ötesinde bir stile sahip filtrelenebilir bir arka plan ızgara modülüyle ilgileniyorsanız, DTS Filtrelenebilir Portföy Grid Pro bir göz atmaya değer.

Senden duymak istiyoruz! DTS Filterable Portfolio Grid Pro'yu denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

AF studio / Shutterstock.com aracılığıyla Öne Çıkan Görüntü