Divi Eklentisi Vurgusu: Divi Döner Modülü

DIVI Carousel Module, Divi Builder'a gelişmiş bir carousel kaydırıcı ekleyen Divi ve Extra için üçüncü taraf bir eklentidir. Divi veya Extra web siteniz için ihtiyacınız olan hemen hemen her tür atlıkarınca oluşturmak için modüldeki hemen hemen her şeyin kontrolü sizdedir. Bu yazımızda Divi Carousel Modülünü inceleyeceğiz ve neler yapabileceğini ve kullanımının ne kadar kolay olduğunu göreceğiz.

Divi Carousel Modülü Kurulumu ve Aktivasyonu

Eklentiyi normal şekilde yükleyin ve etkinleştirin. Panoya DiviGear adlı yeni bir menü öğesi eklenir. Bu menüye gidin ve lisans anahtarınızı ekleyin.

Divi Builder'da Divi Dönen Modülü

Divi Carousel adlı Divi Builder'a yeni bir modül eklendi.

Modül, yeni öğeler eklemek için bir alan içerir. İçerik sekmesinde, kullanıcının kullandığı cihaza bağlı olarak gösterilecek slayt sayısını seçmenize, çoklu slaydı etkinleştirmenize, geçiş süresini ayarlamanıza vb. olanak tanıyan kaydırıcı ayarları bulunur. Ortadan kaydırmayı, döngüyü, otomatik oynatmayı, okla gezinmeyi ve nokta gezinmeyi etkinleştirin . Öğe aralığını ayarlayın, eşit yükseklik ve dikey hizalamayı etkinleştirin. Gelişmiş ayarlar, kaydırıcı efektini seçmenize izin verir.

Tasarım sekmesi kaplama, görüntü (genişlik), görüntü kenarlığı, başlık ve gövde metni, renk, boşluk ve kenarlık ayarlarını içerir. Bu, hem ok hem de nokta gezinme için renk özelleştirmelerini içerir.

Gelişmiş sekmesinde, beklediğiniz tüm CSS alanlarının yanı sıra görünürlük ve geçiş ayarları bulunur. Başlık, içerik, resim ve düğme için CSS alanları ekler.

Dönen Öğe Ayarları ayrıca üç sekme içerir. Bu ayarlar, ana modül ayarlarında yapılan her şeyi geçersiz kılar. İçerik sekmesinde ana içerik, başlık ve resim bağlantısı, düğme ayarları, resim ayarları ve arka plan için bir alan bulunur.

Tasarım sekmesi, başlık metni, içerik stili (gövde metni), düğme, boşluk ve kutu gölgesi için ayarları içerir. Bunlar, çoğu Divi modülünde göreceğiniz standart tasarım ayarlarıdır. Gelişmiş sekmesi, çoğu modülde bulunan temel ayarlardır.

Görüntü ayarları için görüntüleri veya simgeleri kullanabilirsiniz.

İstediğiniz kadar slayt ekleyin. Slaytlar, görüntülemek üzere ayarladığınız sayıya göre yan yana gösterilir. Bu, dört gösterecek şekilde ayarlanmıştır. Tabii ki, istediğiniz sırayla sürükleyip bırakabilirsiniz.

Bunda madde aralığını 100'e ayarladım. Örneğimde görünen temel fark metindir. Artık satır başına daha az kelime görüntüleniyor.

Bu, ok navigasyonunu kullanır. Slaytın dışında gösterecek şekilde ayarladım. Öğe aralığını 1 olarak ayarladım. Arka plan renkleri kullanırsanız daha belirgindir.

Bunu iki slayt gösterecek şekilde ayarladım. Nokta navigasyonu gösteriyor.

İşte gelişmiş ayarlara bir bakış. Kaydırıcı efektini Coverflow olarak ayarladım. Bu, bir döndürme ve gölge seçeneği açar. Bu özellik, modülü gerçekten standart bir kaydırıcıdan ayıran şeyi gösterir. Bu, varsayılan ayarlardır.

Şimdi döndürmeyi 100'e ayarladım. Slaytlar, ekrandan uzağa, sol tarafa doğru 3D daha da eğiliyor.

İşte aynı döndürme ancak Coverflow gölgesi olmadan.

Divi Dönen Modül Örnekleri

Bir atlıkarınca için en sevdiğim kullanımlardan biri, müşterilerin veya ürünlerin logolarını göstermektir. Bu örnek için, Modülü Uygulama Geliştirici Açılış Sayfasının portföy sayfasına ekledim. 3 şirket logosunu gösterecek, kaydırmayı döngüye alacak ve ziyaretçinin bunlar arasında gezinmesine gerek kalmaması için otomatik oynatacak şekilde ayarladım.

Ayrıca üzerinde çalıştığınız projeleri göstermek için de çalışır. Bunun için, ziyaretçinin projeyi görebilmesi için düğmeli birkaç proje ekledim. Düğmenin metin rengini beyaz olarak değiştirdim ve düğmeye bir kutu gölgesi ekledim. Okları beyaz yaptım ve arka planlarının opaklığını neredeyse saydam olarak ayarladım.

Burada slayda bir arka plan ekledim, yarı saydam yaptım ve kutu gölgesi ekledim. Boşluk, düğmeyi, resmi ve içerik dolgusunu içerir. Düğmeye ve resme boşluk ekledim.

Bu, Taşma kaydırıcı efektini kullanır. Bu, varsayılan ayarlardır.

Bunun için, slaydı ortalayacak şekilde ayarladım. Taşma ayarlarıyla birlikte kullanıldığında, orta sürgüyü ortalar ve her iki taraftaki sürgüleri birbirine bakacak şekilde açar. Dört slayt gösterecek şekilde ayarlanmıştır.

Bu, 3 slayt gösterecek şekilde ayarlanmıştır. Döndürmeyi 80'e ayarladım.

Bu, 6 slayt gösterecek şekilde ayarlanmıştır. Döndür varsayılan olarak ayarlanmıştır (50).

Bu, Merkez Slayt veya Taşma etkin olmayan 6 slayt gösterir.

Bu, Orta Kaydırmalı 6'yı gösterir.

Bu örnek için, modülü yemek menüsü kaydırıcısı olarak kullanıyorum. Bir resim, metin ve bir düğme ekleyerek aslında bir tanıtım yazısı kaydırıcısı oluşturur. Görüntüler 100 genişliğe ayarlanmıştır. Bir katman, her bir öğeyi satın almak için bir düğme (düğme sizi öğenin ürün sayfasına götürür) ve nokta navigasyonu ekledim. Hem aktif hem de aktif olmayan slaytlar için bindirme ve bindirme simgesinin yanı sıra noktaları da biçimlendirdim. Kahve düzenine mükemmel uyum sağlar.

Bunun için ok navigasyonu ekledim ve düğmelere uyacak şekilde biçimlendirdim. Fareyle üzerine gelindiğinde okları göstermek için elimde var. Okları kaydırıcının içine veya dışına ayarlayabilir ve renklerini değiştirebilirsiniz. Modül ayarlarından bunların boyutunu değiştiremezsiniz.

Bu, Coverflow efektini kullanır. Yer paylaşımını ve okları göstermek için fareyle sol slaydın üzerine geliyorum.

Bunun için slaytlardan sadece birine arka plan ve kutu gölgesi ekledim. Bu, neyin indirimde olduğunu göstermek veya en iyi teklifi vurgulamak için kullanılabilir.

Bunun için sadece simgeler kullanıyorum. Modülü bir dizi tanıtım modülünün yanına yerleştirdim ve 6 sosyal medya bağlantısı kurdum. Tanıtım yazılarına uyacak şekilde biçimlendirilmişler. Simgeye tıklamak sosyal ağı açar. Her saniye otomatik olarak kayması için ayarladım.

Birden çok slaytın gösterilmesi, bir simgenin bir kısmını keser ve bu, kaydırıcı canlandırırken iyi bir görsel sağlar.

Bu örnek için basit bir fiyatlandırma tablosu kaydırıcısı oluşturmak istedim. Fiyatları Golf Sahası yerleşim paketinden basitleştirdim.

Şimdi kutu gölgesi ekledim. İlk başta dikey gölgenin slaydın altına inmesini sağlayamadım. Sonra slaytların modülün kabının kenarlarına değdiğini fark ettim. Modül dolgusu ekledim ve ardından slaytların her tarafına kutu gölgeleri ekleyebilirim.

Ayrıca her slayt için düğme, görüntü ve içerik dolgusunu ayrı ayrı ayarlayabilirsiniz. Bu örnekte, soldaki slayt için dolguyu ayarlıyorum.

Oklar ekledim ve düzendeki öğelerle eşleşecek şekilde biçimlendirdim.

Bu örnek için resimler ekledim, kutu gölgesini değiştirdim ve kutu gölgesinin tam olarak görünmesi için biraz daha içerik dolgusu ekledim. Okları da slaytların dışına taşıdım.

Şimdi bir düğme ekledim. Renkler, kenarlık yarıçapı, metin boyutu gibi düğme stillerini ayarladım ve slaytlarla eşleşen bir kutu gölgesi ekledim.

Elbette modül içerik alanı içerdiğinden medya dahil istediğiniz her türlü içeriği ekleyebilirsiniz. Düzene uygun görseller ekledim. Tüm içerik başlığın altına yerleştirilmiştir. Görüntüler bu konumda harika görünüyor.

Modülün Golf Sahası düzeninde nasıl göründüğü aşağıda açıklanmıştır. Orijinal düzende birçok fiyatlandırma özelliği vardı. Divi Carousel Modülünü kullanarak, fiyatlandırmanın tamamı hala oradadır ancak slaytlarda gösterilmektedir. Bu düzene ait gibi görünüyor.

Ekstra ile de harika çalışıyor. Bu örnekte, sayfayı kenar çubuğu göstermeyecek şekilde ayarladım.

Kenar çubuğuyla nasıl göründüğü aşağıda açıklanmıştır (kenar çubuğu için herhangi bir widget eklememiş olsam da, boyut aynıdır). Burada modülün duyarlı olduğunu görebilirsiniz.

Divi Carousel Modülü Fiyatı

Divi Carousel Modülü, geliştiricinin web sitesinde mevcuttur. İki seçenek mevcuttur:

• Tek site – 15$
• Sınırsız site – 29 $

Divi Carousel Modülü Belgeleri ve Desteği

Belgeler DiviGear kontrol paneli menüsünde mevcuttur. Belgeler sekmesini seçin. Bu, DiviGear YouTube kanalında izlenecek 4 dakikalık bir videoya bağlantılar sağlar. Bilet desteği Freshdesk aracılığıyla sağlanır.

Biten Düşünceler

Divi Döner Modülü, Divi Builder'a dönen bir kaydırıcı eklemenin kolay bir yoludur. Sezgisel ve aslında beklediğimden daha fazla özelleştirmeye sahip. Bir slaydı doğru şekilde klonlayamadığım birkaç kez oldu, ancak bu benim açımdan bir sorun olabilirdi. Her slayda bir yönetici etiketi vermeyi unutmayın, yoksa modül içindeki öğenin adını gösterirler, bu da onları ayırt etmeyi zorlaştırır.

Görüntülerin, içeriğin ve düğmelerin ayrı ayrı olmasını seviyorum. Bu, kartlar, tanıtım yazıları, resimler, metin, gösteri simgeleri veya bir kaydırıcıda göstermeniz gereken herhangi bir şey oluşturmanıza olanak tanır. Kaydırıcının üstüne bir resim ekleyebilir ve yine de içerik alanına daha fazlasını ekleyebilirsiniz.

Divi Carousel Module, mükemmel bir atlıkarınca kaydırıcısıdır. Geliştiricinin web sitesinde ve Divi pazaryerlerinde mevcuttur.

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

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