Divi 5'in Grup Carousel Modülü hakkında bilmeniz gereken her şey

Divi 5'in en son modüllerinden biri olan Grup Carousel, Divi web siteniz için görsel olarak çarpıcı atlıkarınca ve animasyonlar oluşturmanızı kolaylaştırmak için burada. Bu güçlü ekleme, web tasarımcılarının üçüncü taraf eklentilerine veya özel CSS'ye ihtiyaç duymadan ilgi çekici web sitesi atlıkarınları oluşturmalarını sağlar. İster şık bir portföy, ister bir e-ticaret mağazası veya bir blog inşa edin, grup atlıkarınca modülü yeni yaratıcılığın kilidini açar.

Bu yazıda, örneklerle ve nasıl kullanılacağına dair adım adım bir kılavuzla tamamlanan grup atlıkarınca modülü hakkında bilmeniz gereken her şeyi ele alacağız. Hadi dalalım!

Grup Carousel Modülü nedir?

Divi 5'teki grup atlıkarınca modülü, web sitenize biraz hareket ve etkileşim katabilen dinamik, göz alıcı atlıkarıncalar ve kaydırıcılar oluşturmanıza olanak tanır. İster portföy parçaları, ekip üyeleri veya ürünler sergiliyor olun, bu çok yönlü modül, içeriği dinamik olarak çeken post tabanlı olanlar da dahil olmak üzere neredeyse her türlü atlıkarınca oluşturmanıza olanak tanır.

Her slayt boş bir tuvaldir ve herhangi bir divi modülü eklemenize izin verir, bu da onu yaratıcı ve işlevsel tasarımlar için harika bir araç haline getirir.

Anahtar Özellikler

Grup Carousel modülü, Divi 5'in optimize edilmiş temeli üzerine inşa edilmiştir, hızlı yük süreleri ve pürüzsüz geçişler sağlar. Divi 5'in sürükle ve bırak arayüzü, hızlı performansı korurken masaüstü, tablet ve mobil için ince ayar düzenleri için duyarlı kontroller ile kaydırıcılara kolayca modül eklemenizi sağlar.

Özelleştirilebilir slaytlar

Grup Carousel modülü, kaydırıcıların sayısı, içeriği ve animasyon ayarları üzerinde tam kontrol sunar. Vizyonunuzla eşleşen kesintisiz bir kullanıcı deneyimi oluşturmak için slayt geçişlerini, zamanlamayı ve gezinme seçeneklerini ayarlayabilirsiniz.

Döngü oluşturucu ile dinamik içerik

Divi 5'in Loop Builder ile entegre olan modül, direklere, terimlere veya kullanıcı verilerine göre dinamik atlıkarınca destekler. Örneğin, manuel güncellemelere ihtiyaç duymadan istemci incelemelerini veya vaka çalışmalarını otomatik olarak çekerek özel posta türleri ve gelişmiş özel alanlar (ACF) kullanarak bir referans atlıkarıncası oluşturabilirsiniz.

Tasarım esnekliği

Benzersiz atlıkarınca stilleri oluşturmak için Divi 5'in tasarım ayarlarından yararlanabilirsiniz. Slaytlara dönüşümler, filtreler, kutu gölgeleri veya devirme efektleri uygulayın ve ziyaretçilerinizi meşgul eden görsel olarak çekici slaytlar oluşturmak için grup içindeki tek tek modülleri özelleştirin.

Grup Carousel Modülü Nasıl Kullanılır

Divi 5'te bir grup atlıkarıncası kurmak sezgisel ve esnektir. Sayfaya tek sütunlu bir satır ekleyerek başlayın. Ardından, Visual Builder'daki Grup Carousel modülünü seçin ve sayfanıza ekleyin.

İçerik sekmesinde, Carousel Ayarları açılır menüsünü genişletmek için tıklayın.

Otomatik dönüşü , merkez modunu etkinleştirin ve slaytları 3 olarak gösterecek şekilde ayarlayın.

Elementler açılır menüsünde nokta navigasyonunu göster . Gösteri oklarını etkinleştirebilir veya devre dışı bırakabilirsiniz.

İlk gruba stil atama

Atlıkarınca ayarlarımızda ilk grubumuzu ekleyebiliriz. Ayarları getirmek için grup ayarları simgesine tıklayın.

İçerik sekmesinde , arka plan açılır menüsünü genişletin. Arka plan görüntüsü sekmesini tıklayın ve ardından gruba bir resim eklemek için Arka Plan Görüntü Ekle'yi tıklayın.

Ardından, Tasarım sekmesine gidin. Düzen açılır menüsünü genişletin ve içeriği haklı çıkarın .

Ardından, Aralık açılır menüsünü genişletin ve grubumuzun soluna ve sağına% 5 marj ekleyin. Bu, atlıkarındaki gruplar arasında biraz nefes odası ekleyecektir.

Üst dolguyu%100'e ayarlayın. Sol ve sağa 25 piksel dolgu uygulayın.

İlk gruba içerik ekleyin

Dikkatimizi grubumuza içerik eklemeye çevirebiliriz. Siyah + simgesini tıklayın ve bir bölücü modülü ekleyin.

Tasarım sekmesine gidin. Hat açılır menüsünü genişletin ve rengi #ffffff olarak değiştirin.

Ardından, Boyutlandırma sekmesini genişletin. Bölme ağırlığını 4px ve genişliği % 15'e ayarlayın.

Ardından, gruba bir başlık modülü ekleyin. Başlığa bir başlık verin.

Tasarım sekmesine geçin. Başlık metninin altında, başlık seviyesini H2'ye (veya istediğiniz diğer başlıklara) ayarlayın, başlık yazı tipi için inter'i seçin, yazı tipi ağırlığı için ışık , başlık metni için #FFFFFF ve başlık metin boyutu için 2EM'i seçin.

Grubumuzu çoğaltmadan önce, Tasarım sekmesine dönelim ve dikey boşluğu 10 piksel olarak ayarlayalım. Bu, modüller arasındaki gereksiz dikey boşluğu ortadan kaldıracaktır.

Ek Gruplar Ekleme

Artık ilk grubumuz tasarlandığına göre, stil grubunu kopyalayabilir ve Carousel için içeriğimizi (arka plan görüntüsü ve başlık) değiştirebiliriz. Grubu sekiz kez çoğaltın ve toplamda dokuz slaytımız olacak.

Grubu çoğalttıktan sonra, grup atlıkarıncınız böyle görünmelidir.

Biz buradayken, her gruba benzersiz bir isim vermek iyi bir fikirdir, böylece tanımlanması daha kolaydır. İlk Grubun Ayarlar simgesini tıklayın ve Yönetici Etiketine aşağı kaydırın. Yunanistan grubunu adlandırın.

Atlıkarındaki 2. gruba tıklayın. Arka plan sekmesini genişletin ve görüntüyü yenisiyle değiştirin.

İçerik sekmesindeyken , yönetici etiket alanına bir ad eklemeyi unutmayın. Ardından, Başlık Modülünün başlığını Maine olarak değiştirin.

Adımları tüm ek gruplarla tekrarlayın. İşiniz bittiğinde, atlıkarıncınız böyle görünmelidir. Visual Builder'dayken, herhangi bir adımı kaçırmadığınızdan emin olmak için atlıkarınca ilerlemek için navigasyon noktalarını kullanabilirsiniz.

Gördüğünüz gibi, bazı slaytlarımızdaki metnin okunması biraz zor. Bunu, her grup öğesini ayrı ayrı düzenlemek zorunda kalmadan atlıkarınca seviyedeki tasarım sekmesinde düzeltebiliriz.

Grupları ve aktif grupları özelleştirme

Grup Carousel modülünde, aktif ve aktif olmayan grupları şekillendirebilirsiniz. Anahtar, grup atlıkarınca modülünün kendisinin boş bir tuval olarak hizmet etmesi ve içindeki modül gruplarına stil uygulamanızdır. Bu, benzersiz düzenler ve efektler oluşturmanıza izin veren yüksek düzeyde özelleştirme sağlar.

Artık bir grup atlıkarınca oluşturduğumuza göre, ana atlıkarın ayarlarında tasarım sekmesine gidin.

Gruplar açılır menüsünü genişletin. Bu sekme, grup atlıkarıncası içinde bulunan modül gruplarının tasarım ayarlarını kontrol eder. Burada uyguladığınız herhangi bir ayar inaktif grup modüllerine uygulanacaktır.

Arka plan sekmesini genişletin. Metnin okunaklı olduğundan emin olmak için aktif olmayan sekmelere bir ışık gradyanı uygulayacağız. İlk gradyan durağını % 0 opaklık ile #000000 olarak ayarlayın. Kaydırıcıyı sağa hafifçe ayarlayın. Arka plan görüntüleme geçişinin üzerindeki ordüzeni etkinleştirin.

2. gradyan durağını % 40 opaklık ile #000000 olarak ayarlayın.

Arka plan görüntüleme geçişinin üzerindeki ordüzeni etkinleştirin.

Ardından, Filtreler sekmesini bulun. Arka plan görüntülerine siyah beyaz bir etki sağlamak için aktif olmayan gruplardaki doygunluğu azaltacağız. Doygun kaydırıcıyı bulun ve 0 olarak ayarlayın.

Ardından, Etkin Gruplar açılır menüsünü genişletin ve arka plan sekmesini tıklayın. Yukarıdaki ile aynı gradyan ayarlarını uygulayın.

Arka plan görüntüsü geçişinin üzerindeki yer gradyanını etkinleştirdiğinizden emin olun.

Filtreler açılır menüsünü etkin gruplar altında genişletin ve doygunluk kaydırıcısını % 75 olarak ayarlayın. Bu, yalnızca aktif atlıkarınca öğeyi renklendirir ve kullanıcıların atlıkarındaki aktif slaydı tanımlamasına izin verir.

Duyarlı düzeni özelleştirin

Artık grup atlıkarınca masaüstü bilgisayarlar için hazır olduğuna göre, atlıkarıncamızın mobil versiyonunu şekillendirmek için Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanacağız. Varsayılan olarak, Divi 5 üç kesme noktasını etkinleştirir. Çeşitli cihaz boyutları üzerinde daha fazla kontrol istiyorsanız, mevcut yedi kesme noktasının tümünü kullanabilirsiniz. Visual Builder'daki üst çubuğun ortasındaki Elipsis menüsünü tıklayın.

İstediğiniz kesme noktalarını etkinleştirin ve devam etmek için Kaydet'i tıklayın.

Düzenin tablet cihazlarda nasıl görüneceğini görmek için tablet kesme noktasına tıklayın. Carousel ayarlarına gidin ve slaytları 1 olarak gösterecek şekilde ayarlayın. Bu, telefon çapında ve telefon gibi daha küçük kesme noktaları için de geçerlidir.

Son olarak, grup atlıkarıncanızı yeni bir sekmede görüntülemek için ekranın sol üst kısmındaki önizleme düğmesini tıklayın.

Bittikten sonra, grup atlıkarıncanız aşağıdaki videoya benzemelidir.

İşte bu! Divi 5'te bir grup atlıkarınca inşa etmek basittir ve inanılmaz sonuçlar sunar.

Divi 5'in Loop Builder ile entegrasyon

Divi 5'in Loop Builder, grup modülünü dinamik bir içerik ekrana dönüştürebilen güçlü bir özelliktir. Bu özellik, tasarımcıların içeriği doğrudan WordPress'ten çeken, statik içeriği ürün ekranlarına, kategori arşivlerine veya birkaç tıklamayla ekip üyesi karusellere dönüştüren dinamik, otomatik atlıkarınlar oluşturmalarını sağlar.

Döngü oluşturucuyu grup atlıkarınca entegre ederek, Divi 5, kullanıcılara minimum manuel çalışma ile sofistike, içerik odaklı atlıkarınca üretmeye güç verir ve bu da onu dinamik web tasarımı için göze çarpan bir özellik haline getirir.

Loop Builder, grup atlıkarıncının, sitenizin en son içeriğini otomatik olarak yansıtan atlıkarınlar oluşturarak yayınlar, terimler veya kullanıcı verileri aracılığıyla dinamik olarak döngü yapmasını sağlar. Döngü oluşturucu verileri doğrudan WordPress veritabanınızdan çektiğinden, blog yayınlarını, ürün kategorilerini veya kullanıcı profillerini kolayca sergileyebilirsiniz.

Örneğin, WooCommerce terimlerini kullanarak bir posta türü veya ürün kategorisi kaydırıcısı kullanarak bir blog yazısı atlıkarıncası oluşturabilir ve modülü dinamik içerik ihtiyaçları için inanılmaz derecede çok yönlü hale getirebilirsiniz.

Grup Carousel Modülünün Gerçek Dünya Örnekleri

Grup karusel modülünün esnekliği, çeşitli kullanım durumları için uygun hale getirir. İşte neyin mümkün olduğunu göstermek için birkaç gerçek dünya örneği.

Özel tam genişlik / tam ekran kaydırıcısı

Bu örnekte, bir dondurma dükkanı için sarsıntılar sunmak için tam genişlikte/tam ekran bir kaydırıcı oluşturduk. Atlıkarınca, her biri bir arka plan görüntüsü, iki başlık ve harekete geçirici bir düğme içeren bir seferde bir slayt görüntüleyecek şekilde ayarladık. Ayrıca 3 saniyelik bir gecikmeden sonra animasyonu bir sonraki slayta ilerleyecek şekilde ayarladık. Bu görünümü grup atlıkarınca ve bölümünü 100vh olarak ayarlayarak başarabilirsiniz.

Takım Üyesi Vitrini

Web sitenizdeki ekip üyelerini öne çıkarmak istediğinizde, Grup Carousel modülünü kullanmak bunu yapmanın harika bir yoludur. Bu örnekte, atlıkarıncamıza 3 sütunlu bir düzen yapılandırdık. Her slayt, Divi'nin sosyal takip modülünü kullanarak bir kafa vuruşu, ad, rol ve sosyal medya bağlantıları içerir. Atlıkarınca, temiz, profesyonel bir görünüm için bir seferde bir slayt kaydıracak.

Kategori sergileri

Divi 5'in grup atlıkarınca modülü, döngü oluşturucu ile kusursuz çalışır. Bu, web sitenizin ürün kategorilerini içeren ilgi çekici kaydırıcılar oluşturmanıza olanak tanır. Her slayt dinamik olarak kategori adını ve öne çıkan görüntüyü çeker ve ürünlerinizi sergilemenin harika bir yolunu haline getirir. Bu örnekte, filtre efektleri kullanıyoruz.

Referans

Grup karusel modülü, referans kaydırıcısı oluşturmak için de mükemmeldir. En iyi müşteri incelemelerinizi, müşteri referanslarınızı ve daha fazlasını kolayca sergileyebilirsiniz. Grup Carousel modülü sayesinde artık statik sütunlar veya harici eklentilerle sınırlı değilsiniz.

Dosyaları İndirin

Ücretsiz indir

Divi bültenine katılın, size Ultimate Divi açılış sayfası düzen paketinin bir kopyasının yanı sıra tonlarca şaşırtıcı ve ücretsiz divi kaynakları, ipuçları ve püf noktalarının bir kopyasını e -postayla göndereceğiz. Takip et ve hiçbir zaman bir divi ustası olacaksınız. Zaten abone olduysanız, aşağıdaki e -posta adresinizi yazın ve Düzen Paketine erişmek için İndir'i tıklayın.

İNDİRMEK

Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ Haftalık Divi Düzen Paketlerine erişin!

Divi 5'in Carousel Modülü ile yaratıcı olanakların kilidini açın

Divi 5'in Grup Carousel modülü, dinamik Divi web siteleri oluşturmak için yeni olanakların kilidini açan güçlü bir ektir. İlgi çekici ürün kaydırıcıları oluşturmaktan referanslara kadar, bu modül divi sitelerinize etkileşimli içerik eklemeyi kolaylaştırır.

Artık Divi 5'in yenilenmiş vakfı daha fazla özelliğin yolunu açtı, dalış yapmak için mükemmel bir zaman! Henüz grup atlıkarınca modülünü denediniz mi? Aşağıdaki yorumlarda bize bildirin.