Divi Eklentisi Vurgusu – Owl Carousel Pro

Divi Builder'ı kullanarak bir atlıkarınca içindeki gönderileri, projeleri, özel gönderi türlerini ve görüntüleri hiç görüntülemek istediniz mi? Gönderiler ve görseller genellikle bir seferde bir gönderi veya görsel görüntüleyen bir kaydırıcı içinde görüntülenir, ancak ya aynı anda birden fazla gönderi görüntüleyen gerçek bir atlıkarınca istiyorsanız? Bunu Owl Carousel Pro adlı bir eklenti ile kolayca yapabilirsiniz.

Owl Carousel Pro, Divi Builder'a iki yeni modül ekleyen üçüncü taraf bir eklentidir. İlki, projeler, gönderiler ve özel gönderi türleri gibi gönderi türlerini görüntüler. İkincisi, istediğiniz herhangi bir içerik türünü eklemek için görsel düzenleyiciyle rekabet eden bir resim karuselidir.

Eklentinin ücretsiz bir sürümü mevcut. Aşağıdakiler de dahil olmak üzere birkaç yeni özellik ekleyen profesyonel sürüme bir göz atıyorum:

• özel gönderi türleri
• özel alanları göster
• özel sorgu
• küçük resim boyutunu değiştir
• gösterilen resim sayısını değiştir
• görüntüyü lightbox'ta aç

Örnekler için resimler Unsplash.com'dan alınmıştır.

Owl Carousel Pro'yu Yükleme

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Ardından Divi Builder'da iki yeni modül göreceksiniz: DP Owl Carousel ve DP Owl Image Carousel. Modüller, birbirinden ayrılmalarına yardımcı olmak için standart Divi modüllerinden farklı renktedir. Bu, üçüncü taraf modüller için tercihim çünkü onları bulmayı kolaylaştırıyor.

DP Baykuş Atlıkarınca

DP Owl Carousel, bir atlıkarınca içindeki gönderileri, projeleri ve özel gönderi türlerini görüntüler. Son 10 gönderinizi veya seçtiğiniz kategorilerden veya etiketlerden görüntüler. İçerik sekmesi, içerik ve öğeler için ayarları içerir. Tasarım sekmesi, metin, başlık metni, meta metin, alıntı metin, özel dosyalanmış metin, boşluk, ok, kontroller ve küçük resimler içerir.

Gelişmiş sekme, beklenen CSS ayarlarını içerir, ancak aynı zamanda tıklama eylemi, animasyon (kaydırma zamanlamasını belirler), arka plan ve görünürlük ekler. Her iki modüldeki arka plan renkleri yalnızca tek renklidir, bu nedenle gradyan veya görüntü mevcut değildir. Normalde CSS kullanmak istemediğim sürece gelişmiş sekmeye bakmazdım, bu yüzden içerik sekmesinde olmasını beklediğim için bu ayarları kaçırmış olurdum.

Özel bir sorgu (web sitesinde verilen örnekler) oluşturabilir veya neyin görüntülendiğini kontrol etmek için modül içindeki ayarları kullanabilirsiniz. Gönderi sayısı, ofset numarası, özel gönderi türü adı, kategoriler, dahil edilecek etiketler ve hariç tutulacak etiketler gibi ekranı kontrol etmek için çeşitli ayarlar içerir. Özel gönderi türlerimi otomatik olarak ekledi.

Alt temanıza PHP kodu içinde özel sorgular eklenir (her zaman ana temada değil, alt temada PHP değişiklikleri yapın, böylece tema güncellendiğinde değişikliklerinizi kaybetmezsiniz). Geliştiricinin web sitesi birkaç örnek içerir.

Not – canlı sitenize eklemeden önce her zaman bir test sitesinde kodu deneyin.

DP Baykuş Atlıkarınca Örnekleri

Bu standart tasarımdır (Öne çıkması için bir arka plan ekledim). Tüm kategorilerdeki son 10 gönderilerimi görüntüler. Divi başlığını ekledim ve sayfa içinde nasıl göründüğünü göstermek için meta yayınladım. Resimlerden herhangi birine tıklamak sizi yazıya götürür.

Bu, başlığı, kategoriyi ve tarihi ekler. Ayarladıysanız, özel alanları da gösterebilirsiniz.

Bu, varsayılan 270 karakteri kullanarak başlığı ve gönderiyi gösterir.

Bu yazıda alıntıyı 70 karaktere ayarladım.

Bunda okları ve kontrolleri devre dışı bıraktım. Animasyon hala çalışıyor ancak kullanıcılar slaytlar arasında geçiş yapamıyor.

Bunda yazı tipi boyutlarını ve renklerini değiştirdim, okları kırmızı yaptım, kontrollerin boyutunu artırdım ve mor yaptım, küçük resimlerin boyutunu artırdım, kenar boşluğunu 0'a düşürdüm ve 3 resim gösterecek şekilde ayarladım. Kontroller için ikinci renk, seçtiğim rengin daha koyu bir versiyonu. İkinci renk eklenti tarafından sağlanır.

Bunda, modülün kendisine bir arka plan ekledim ve arka planın yazılar arasında görünmesi için öğe kenar boşluğunu değiştirdim. Ayrıca yazı tipi renklerini de değiştirdim ve bu sefer satır yüksekliğini ve aralığını ayarladım. Ekran başına 4 gönderi gösteriyor ve küçük resim boyutunu küçülttüm. Okları büyük ve kontrolleri küçük olarak ayarladım.

Küçük resim boyutunu değiştirdiğinizde, yalnızca gösterdiğiniz gönderilerin sayısına uyacak şekilde ayarlanır. Bu nedenle, resimlerin daha büyük olmasını istiyorsanız, görüntülenen gönderilerin sayısını manuel olarak azaltmanız gerekir.

DP Baykuş Resmi Atlıkarınca

DP Owl Image Carousel, görüntüleri bir carousel içinde görüntüler. Görüntüler eklemenize ve okları ve kontrolleri görüntülemenize olanak tanır. Tasarım ayarları metin, resim başlık metni, resim içerik metni, boşluk, ok, kontroller ve küçük resimleri içerir. Gelişmiş sekmesi, DP Owl Carousel modülü ile aynıdır.

İstediğiniz kadar görüntü ekleyebilir, bir ışık kutusunda açmalarını ve görüntünün veya orijinal görüntünün kopyalanmış bir sürümünü kullanmasını sağlayabilirsiniz. Nasıl çalıştığını görmek için bilerek farklı boyutlarda resimler seçtim.

Görüntüler güzel görüntüleniyor. Bir URL'ye bağlanabilmenizi veya bunları bir lightbox'ta açabilmenizi seviyorum. Deneyimi daha da geliştireceği için görüntülere eklenen bindirmeleri görmek istiyorum.

DP Owl Image Carousel Örnekleri

Modülün varsayılan ayarları kullanarak sayfada nasıl göründüğü aşağıda açıklanmıştır. Öne çıkmasına yardımcı olmak için bölüme bir arka plan ekledim.

Bu örnekte resimlere başlık ve metin ekledim. Ayrıca okları ve kontrolleri her biri için büyük ve değiştirilmiş renklere ayarladım.

Bu 4 resim görüntüler. Görüntü boyutunu büyüttüm ve öğe kenar boşluğunu 8'den 4'e düşürdüm. Ardından yazı tiplerinin, okların ve kontrollerin boyutlarını ve renklerini ayarladım. Başlık yazı tiplerinin aralığı artırıldı.

Bu, yazı tipleri, kontroller ve oklar için yeni renklere sahip koyu bir arka plan kullanır.

Bir lightbox'ta açtığınızda görüntülerin nasıl göründüğü aşağıda açıklanmıştır. Kaydırma animasyonu hala arka planda çalışır.

Özel Gönderi Türleri

Owl Carousel Pro modülünde Özel Sorgunun devre dışı bırakıldığından emin olun (bu, yalnızca listeden kategori seçmek yerine kendi özel filtrelerinizi oluşturmak istiyorsanız kullanılır) ve Özel Gönderi Türü Adı altında gönderi türünüzü seçin. WooCommerce'i kurdum ve şimdi otomatik olarak bir seçenek olarak Ürün'e sahibim.

Ürün kategorilerimin her biri otomatik olarak kategori listesine eklenir. Şimdi aşağı kaydırıp atlıkarıncada görüntülemek istediğim ürünleri seçebilirim.

Ürünler görüntülenecek ancak fiyatları göstermek için özel alanı etkinleştirmem, görüntülenecek alanı seçmem ve istediğim para birimi sembolünü gösterecek bir etiket eklemem gerekiyor. Aşağı kaydırın ve Özel Alanları Göster'i etkinleştirin. Özel Alan Adlarına _price ve Özel Alan Etiketlerine $ ekleyin.

Artık seçtiğim WooCommerce kategorilerini gösteren bir ürün karuselim var. 4 gönderi göstermeyi seçtim, resim boyutunu büyüttüm, başlık, meta ve özel alanlar için yazı tipi renklerini değiştirdim ve başlık ve özel alanlar için yazı tipi boyutlarını artırdım. Bu örnekte yalnızca meta için tarihi gösteriyorum, ancak normal gönderiler gibi herhangi bir meta bilgisini ve bir alıntıyı gösterebilirim.

Owl Carousel Pro'yu Extra ve Divi Builder Eklentisi ile Kullanma

Owl Carousel Pro, Extra ile de harika çalışıyor. Bu resim atlıkarınca.

Twenty Seventeen WordPress temasında kurulu Divi Builder eklentisine sahip eklentiye bir göz atın. Bu, WooCommerce ürünlerimi gösteriyor.

Lisans

Eklenti, siz ve müşterileriniz için sınırsız web sitesinde kullanılabilir. 1 yıllık güncelleme ve destek içerir.

Son düşünceler

Owl Carousel Pro, Divi Builder'a gönderileri, projeyi, özel gönderi türlerini ve görüntüleri özelleştirilebilir bir atlıkarınca içinde görüntülemenizi sağlayan iki güzel modül ekler. Beklenen Divi modülü özelleştirmelerinin çoğu ve ekranı kontrol etmek için birkaç yeni özellik dahil edilmiştir.

Hemen hemen her özelliği ve ayarı sezgisel buldum. Ortalama bir kullanıcı için özel filtreleri kafa karıştırıcı buldum. Bu eklentinin engin yeteneklerini göstereceğinden, filtre oluşturmanın birkaç tam örneğini görmek istiyorum. Kodla uğraşmak istemeseniz bile, pro sürüm, onu dikkate almaya değer kılmak için yeterli özellik ekler.

Sizden duymak isteriz. Own Carousel Pro'yu denediniz mi? Yorumlarda deneyiminizi bize bildirin.

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