Divi Eklentisinin Öne Çıkanları: Divi Ürün Döner Modülü

Divi Ürün Döner Modülü, WooCommerce ürünlerini bir karusel kaydırıcısında görüntüleyen Divi için üçüncü taraf bir eklentidir. Bir ürün karuseli oluşturun ve herhangi bir Divi düzenine yerleştirin. Bunları biçimlendirebilir ve birden çok düzen ve görüntüleme seçeneği belirleyebilirsiniz. Bu yazımızda Divi Ürün Döner Modülünü inceleyeceğiz, özelliklerini inceleyeceğiz ve kullanımının ne kadar kolay olduğunu göreceğiz.

Divi Ürün Döner Modülü, geliştiricinin web sitesinde ve Divi pazaryerlerinde mevcuttur.

Divi Ürün Döner Modülü

Eklentiyi yükleyip etkinleştirdikten sonra, gösterge tablosu menüsünde DiviGear'a gidin ve lisansınızı etkinleştirin. Bu geliştiriciden birden fazla eklentiniz varsa, eklentinin sekmesini seçmeniz gerekir.

Divi Builder'a Product Carousel adlı yeni bir modül eklendi. Kalabalığın arasından sıyrılmak için mor bir simge içerir.

Ayarlar, İçerik, Tasarım ve Gelişmiş sekmelerini içerir. İçerik sekmesinde WooCommerce içeriği için ayarlar bulunur. Açılır kutudan son, öne çıkan, indirimli, en çok satan, en çok oy alan veya ürün kategorisinden ürün türünü seçin. Görüntülemek istediğiniz ürün sayısı için bir sayı girin. Popülerlik, derecelendirme, tarih veya fiyat arasından sıralama düzenini seçin. Sepete ekle düğmesini ve açıklamayı da etkinleştirebilirsiniz. Tam açıklamayı veya bir alıntıyı gösterin.

Döngü Ayarları, kullanılan cihaza göre sütun sayısını seçmenize olanak tanır. Ayrıca çoklu slayt (ekrandaki slaytların sayısına göre kaydırmayı etkinleştirin veya her seferinde bir slayt kaydırmayı devre dışı bırakın), öğe aralığı, geçiş süresi, merkez, döngü, otomatik oynatma, nokta ve ok gezinme, hizalama ve slayt efekti. Diğer ayarlar bağlantı ve arka planı içerir. Nokta ve okları bir arada kullanabilmeniz ilginç. Noktaları slaydın sağına, ortasına veya soluna yerleştirebilirsiniz.

Tasarım sekmesi, yer paylaşımı, başlık, fiyat, açıklama, indirim rozeti, sepete ekle düğmesi, inceleme, ok, noktalar, resim, vurgulu, boşluk, kenarlık ve kutu gölgesi için ayarları içerir. Diğer ayarlar, seçtiğiniz seçimlere göre eklenir. Bu ayarların her biri kapsamlıdır.

Gelişmiş sekmesi, beklenen CSS, görünürlük ve geçiş özelliklerini içerir. Özel CSS, ürün, resim, başlık, fiyat, önceki indirimli rozet oku, sonraki ok ve noktalar için alanları içerir. Bu size CSS ile çok fazla kontrol sağlar.

Divi Ürün Döner Modülü Ayarları

Başlıkları ve fiyatları yukarı veya aşağı taşıyabilirsiniz. Bu örnekte hem en üste taşıdım hem de boyutlarını ve renklerini değiştirdim. Arka plan rengini ve yazı tipi boyutunu değiştirerek indirimli rozeti şekillendirdim. Ayrıca aktif olmayan ve aktif noktaları da şekillendirdim.

İşte ön uçta nasıl göründüğü. Ayrıca bir bindirme ekledim ve fareyle üzerine gelindiğinde Sepete ekle düğmesi görünüyor. Bu düğmeyi hem üst üste bindirme hem de düğme vurgusu için stillendirebilirsiniz.

Bunda 6 sütun seçtim, tüm metni en alta taşıdım, metin renklerini ayarladım ve sepete ekle düğmesine biraz opaklık ekledim. Vurgulu opaklığı varsayılan olarak bıraktım, bu nedenle düğmenin üzerine geldiğinizde düğme sabit kalır.

Bunun için düzeni 4 sütuna ayarladım. Oklar ekledim ve okların ve noktaların renklerini değiştirdim. Ayrıca başlığa, fiyata ve açıklamaya bir arka plan ekledim ve tüm metni beyaz olarak değiştirdim. Metnin kutu içinde iyi hizalanması için biraz içerik dolgusu ekledim. Ayrıca üst kısım için içerik dolgusu da içerir (başlığı veya fiyatı resmin üzerine yerleştirmeniz durumunda).

İşte ön uçta nasıl göründüğü. Sağdaki ok, gösterebileceği ürünlerin sonunda olduğunu belirtmek için daha açıktır. Döngüye ayarlarsam normal renk olur.

Taşma seçiliyken nasıl göründüğü aşağıda açıklanmıştır. Güzel bir 3D kart efekti sağlar. Döndürme miktarını ayarlayabilir ve slayt gölgesini etkinleştirebilirsiniz.

Bu örnekte, kartlara bir kutu gölgesi verdim ve bulanıklığı ayarladım. Ayrıca okları daire şeklinde değiştirdim ve renkleri ayarladım.

Center Slide etkinken ön uçta nasıl göründüğü aşağıda açıklanmıştır. Bu 4 sütunlu düzendir. Orta Slayt'ı seçtiğinizde farklı görüntüleniyor.

Bu, yukarıdaki örnekle aynı ayarları kullanan 5 sütunlu düzendir.

Ürün karuseli Divi düzenlerine çok iyi uyuyor. Bu örnekte, Divi mağaza modülünü Divi Ürün Döner Modülü ile değiştirdim ve yerleşime uyacak şekilde biçimlendirdim.

Bunda başlığı en üste taşıdım, üste ve alta biraz dolgu ekledim ve başlıkları yarı kalın yaptım. Ayrıca sepete ekle düğmesinin rengini de düzene uyacak şekilde değiştirdim.

Bunun için slaytların ve resimlerin kenarlarını yuvarlatılmış köşeler oluşturacak şekilde ayarladım. Devam ettim ve görüntüleri daire haline getirdim. Ayrıca bir kutu gölgesi ekledim.

Düzen içinde mükemmel görünüyor. Yine de, satış rozetinin çoğunu gizler. Muhtemelen CSS ile bunun bir yolu vardır.

Bu, 3 sütunlu düzen ile Taşma kullanır.

Bunun için resim kenarlığını kaldırdım ama slaytlar için kenarlığı tuttum. Bir kutu gölgesi ekledim ve gücünü ve konumunu ayarladım.

Ayrıca, fareyle üzerine gelindiğinde yapılan incelemelerdeki yıldız derecelendirmesini de gösterir. Derecelendirmeyi Sepete ekle düğmesinin yanına yerleştirir. Onları harika bir animasyonla bir araya getiriyor. Bu, varsayılan ayarlardır. Arka planın ve yıldızların renklerini şekillendirebilirsiniz.

Bunda, derecelendirmeleri düzendeki öğelerle eşleşecek şekilde biçimlendirdim.

Bunun için fiyatı en üste ve başlığı en alta taşıdım. Bir açıklama ve bir bindirme ekledim. Nokta navigasyonunu sağa kaydırdım. Kutu gölgesinin yanlarda görünmesi için biraz dolgu eklemek zorunda kaldım. Dolgu olmadan ürünü modül boşluğunun kenarına yerleştirir.

Divi Ürün Döner Modülü Demoları

Şu anda geliştiricinin web sitesinde 13 indirilebilir demo var. Bunlar, Divi Kitaplığına yükleyebileceğiniz ve herhangi bir Divi düzeniyle kullanabileceğiniz düzenlerdir. Hepsi Divi Ürün Döner Modülü için stil içerir ve bazıları diğer tarz modülleri ve arka planları içerir. Bunlar, ürün karusel tasarımlarınızla bir başlangıç ​​noktası almak ve modülle yapılabilecek bazı şeyleri göstermek için iyidir. Bunlardan birkaçına bakalım.

Bu, başlıkları en üste, stilleri üstte ve altta eşleştirmek için yerleştirir, görüntülerin dışına daire içine alınmış oklar ekler ve noktalar içerir. Ayrıca slaytları öne çıkarmak için bir alt kenarlığa sahiptir. Cesur renkleri severim. Üstte ve altta biraz şeffaflık vardır, böylece arka plan desenleri görünür. Bu düzen, başlık için stilize edilmiş bir metin modülü içerir.

Düzenlerin birçoğu, stile sahip diğer modülleri içerir. Bu, metin ve düğme modüllerini kullanarak bir harekete geçirici mesaj eklemek için iki sütunlu bir düzen kullanır.

İşte önden nasıl göründüğü. Bir kenarlık, üstte başlıklar ve Sepete ekle düğmesi için iki renk içerir. Oklar, modülün resimleri içinde gösterilir.

Bu, yeşil bir arka plan ve eşleşecek şekilde tasarlanmış slaytlar içerir. Sepete ekle düğmesi, ürünün üzerine geldiğinizde açık yeşil, ardından düğmenin üzerine geldiğinizde koyu yeşildir. Başlık için stilize edilmiş bir metin modülü içerir.

Bu, satış rozetleri için mavi stil, resimlerin dışındaki yuvarlak okları ve Sepete ekle düğmesini içerir. Slaytlara küçük bir kenarlık ekler. Slaytları Taşma efektiyle görüntüler.

Bu aynı zamanda Taşma efektine sahip ürünleri de gösterir. Ayrıca oklar ve Sepete ekle düğmesi için mavi kullanır. Başlık en üste taşınır. Kaplama, yüksek opaklığa sahip beyazdır ve satış rozeti kırmızıdır.

Bu, stil sahibi bir arka plan içerir ve bir kenarlık, stilli Sepete ekle düğmesi, indirim rozeti ve daire içine alınmış oklar ekler. Kaplama beyazdır. Fiyatı en üste ve diğer tüm verileri en alta yerleştirir.

Divi Ürün Döner Modülü Fiyat ve Dokümantasyon

Divi Ürün Döner Modülü için iki satın alma seçeneği vardır:

• Tek site – 19 $
• Sınırsız site – 39 $

Geliştiricinin web sitesinde ve pazar yerlerinde mevcuttur.

Belgeler, özelliklerde size yol gösteren bir YouTube videosu tarafından sağlanır. Kontrol panelindeki DiviGear menüsünde buna bir bağlantı bulacaksınız. Birden fazla DiviGear ürününüz varsa, ürünün sekmesini seçin ve ardından Belgeler'i seçin.

Biten Düşünceler

Divi Product Carousel'in kullanımı kolaydır ve ürünlerinizi öne çıkarmak için harikadır. Bunları bir kaydırıcı olarak görüntülemek istemeseniz bile, düşünmeye değer kılmak için birçok stil ve ürün sunumu seçeneği vardır. Extra ile pek iyi çalışmadım. Zaten çok sayıda WooCommerce özelliğine sahip olduğundan ve WooCommerce mağazaları oluşturmak için harika bir platform olduğundan, Ekstra'nın desteklendiğini görmek isterim.

İndirilebilir demoları olmasını seviyorum. Modül için arka planları ve stili içerirler. Bunlar, size bir başlangıç ​​noktası vermek veya WooCommerce ürünlerinizi Divi mizanpajlarınızda sunmak için hayal gücünüzü harekete geçirmek için harikadır.

WooCommerce ürünlerinizi bir karuselde sunmakla veya sadece birkaç tasarım seçeneğine sahip olmakla ilgileniyorsanız, Divi Ürün Döner Modülü bir göz atmaya değer. Geliştiricinin web sitesinde ve Divi pazaryerlerinde mevcuttur.

Senden duymak istiyoruz. Divi Ürün Döner Modülünü denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Öne Çıkan Görsel Harfler-Shmetters / Shutterstock.com