Divi 5 ile özel bir tam ekran kaydırıcısı nasıl oluşturulur (Ücretsiz İndir)

Divi 5'in son sürümlerinden biri, WordPress siteniz için özel, ilgi çekici kaydırıcılar ve atlıkarıncalar oluşturmak için bir özellik olan Grup Carousel modülünü tanıtıyor. Portföyünüzü, ürünlerinizi, sürükleyici bir kahramanınızı veya tam ekran kaydırıcısınızı kolayca sergileyebilir ve sitenizin tasarımını yeni zirvelere taşıyabilirsiniz.

Bu yazıda, Grup Carousel modülünü kullanarak tam ekran kaydırıcısı oluşturmak için adım adım bir kılavuz sağlayacağız. Hadi dalalım!

Grup Carousel Modülünü Anlamak

Grup Carousel modülü, Divi 5'e çok yönlü bir ektir ve dinamik kaydırıcılar ve atlıkarıncalar oluşturmanızı sağlar.

Geleneksel modüllerden farklı olarak, basit görüntü atlıkarınlarından döngü oluşturucu tarafından desteklenen karmaşık, post tabanlı kaydırıcılara kadar çok çeşitli düzenleri destekler. Bu esneklik, portföy, referans veya ürün galerileri gibi içeriği zorlayıcı bir şekilde sergilemeyi mükemmel hale getirir.

Grup Carousel Modülünün Temel Özellikleri

Grup karusel modülü sağlam özelliklerle parlıyor. Dinamik içerik döngülerini destekler, Döngü Oluşturucu'yu kullanarak direkler, sayfalar veya özel yayın türlerini doğrudan kaydırıcınıza çekmenizi sağlar.

Modül ayrıca, iç içe satırlar ve modül grupları kullanarak güzel, ilgi çekici kaydırıcılar oluşturmak için herhangi bir Divi modülünü kullanmanıza olanak tanır. Sitenize uyacak şekilde konumlarını, renklerini ve diğer stilleri özelleştirerek oklar ve sayfalama noktaları ile gezinmeyi özelleştirebilirsiniz.

Otomatik Oyun Seçenekleri, Ayarlanabilir Hızlar ve Duraklatma Özellikleri, ziyaretçileriniz için sitenizde daha uzun süre kalmalarını sağlayarak göz alıcı bir deneyim sağlar. Ayrıca, modül tamamen özelleştirilebilir, tam ekran ve tam genişlik düzenleri oluşturmanıza olanak tanıyarak web sitenizdeki kahraman, hizmet veya özellik bölümleri için idealdir.

Divi 5'in Grup Carousel Modülü ile Tam Ekranlı Bir Kaydırıcı Nasıl Oluşturulur

Bu öğreticide, yaklaşan Divi 5 web siteleriniz için tam ekran kaydırıcısı oluşturmak için Grup Carousel modülünü nasıl kullanacağınızı göstereceğiz. Sonunda, ziyaretçilerinizi harekete geçirmeye teşvik etmek için büyüleyici kaydırıcılar oluşturma becerisine sahip olacaksınız.

1. Adım: Yeni bir sayfa oluşturma

Yeni bir sayfa oluşturun, bir başlık ekleyin ve başlamak için Divi Builder'ı kullanın .

Görsel oluşturucu açıldığında, sayfa seçeneklerinizi oluşturun altında sıfırdan yapı seçin.

Ayarlar simgesini ortaya çıkarmak için yeni sayfanızdaki bölümün üzerine gelin. Bölümün ayarlarını açıklamak için üzerine tıklayın.

Tasarım sekmesine gidin. Düzen açılır menüsünü tıklayın. İçeriği haklı çıkarın , merkezi seçin. Hizalama Öğeleri alanında Center'ı seçin. Bu, bölümümüzün içeriğinin yatay ve dikey olarak ortalanmasına izin verecektir.

Ardından, bölümün boşluk ayarlarını ayarlayacağız. Aralık açılır menüsünü genişletin. Kenar boşluğunu 0 piksel , üst ve alt haline getirin. Dolgu altında, üst ve altını 0px'e ayarlayın.

Bölümün ayarları yerinde olduğunda, yeni bir satır eklemek için Yeşil + simgesini tıklayın.

Eşit sütunların altındaki tek sütunlu satırı seçin.

Ardından, Grup Carousel modülünü satıra ekleyin.

İçerik eklemeden önce, Flexbox ve Aralık Kontrolleri ile Satır ve Grup Carousel Modülünü kurmalıyız.

2. Adım: Satır ayarlarını yapılandırın

Tam ekran kaydırıcı oluşturmak, satır ve grup atlıkarınca modülünü % 100 genişliğe ayarlamamızı gerektirir. Bölümleri kolayca ayarlamak için katman simgesini tıklayın. Bu, özellikle dolgu ve marj 0 olarak ayarlandığında, tam genişlik bölümleri ve satırlarla çalışırken çok önemlidir. Sayfanızın düzen yapısını görmeyi kolaylaştırır.

Katmanlar görünümünde, Grup Carousel modülünü barındıran tek sütunlu satırı seçmek için tıklayın. Tasarım ayarlarına gidin. Düzen açılır menüsünde yatay boşluğu 0 olarak ayarlayın.

Ayrıca, öğeleri satır için merkeze ayarlayın.

Boyutlandırma sekmesindeki genişliği ve maksimum genişliği%100'e ayarlayın.

Aralık sekmesinde, üst ve alt kenar boşluğunu ve dolguyu 0px'e ayarlayın.

Adım 3: Grup karusel ayarlarını yapılandırın

Ardından, grup atlıkarınca ayarlarını yapılandıracağız. İçerik sekmesindeki Carousel Ayarları açılır menüsünü genişletin. Otomatik dönüşü değiştirebilir, 2000ms varsayılan ayarında otomatik dönüş hızını seçebilir ve Hakkında Duraklatma etkinleştirebilirsiniz.

Elementler sekmesinde , nokta navigasyonunu göster ve gösteri oklarını etkinleştirin. Sol ve sağ oklar için özel bir simge de seçebilirsiniz.

Tasarım sekmesindeki Oklar sekmesini genişletmek için tıklayın. #Ffffff'i ok rengi olarak atayın, ok boyutunu varsayılan 48px'de bırakın ve ok konumunu içeride ayarlayın.

Arka plan sekmesini genişletin ve arka plan rengi olarak #000000 atayın.

4. Adım: İlk Grubu Stille

Bölüm, satır ve grup atlıkarınca ayarları ile ilk slayta içerik ekleyebiliriz. Grup Carousel modülündeki içerik sekmesini tıklayın ve grup için Ayarlar simgesini tıklayın.

Arka plan açılır menüsünü genişletin ve Derneği sekmesini seçin.

Yeni bir renk atamak için birinci gradyan kaydırıcısını tıklayın. Renk alanına #EFB648 girin .

Ardından, 2. gradyan kaydırıcısına tıklayın ve renk olarak #f28f52 atayın.

Gradyan tipi alanında dairesel seçin.

Ardından, Tasarım sekmesine gidin. Aralık sekmesini genişletin ve grubun üstüne ve altına % 5 dolgu atayın.

Adım 5: İlk gruba içerik ekleyin

Artık grubumuzun ayarları yapılandırıldığına göre, gruba içerik eklemeye başlayabiliriz. Bir modül eklemek için Siyah + simgesini tıklayın.

Modül veya satır iletişim kutusu göründüğünde, yeni satır sekmesini tıklayın. Eşit sütunlar bölümünün altında, tek sütun satırını seçin.

Bir Başlık Modülü Ekle

Başlık modülünü seçin ve ekleyin.

Metin açılır menüsünü genişletin ve başlık olarak portakal suyunu girin.

Tasarım sekmesine gidin. Başlık metni açılır menüsünü genişletin. H1'i seçme seviyesi olarak seçin, Bebas Neue'yi başlık yazı tipi olarak kullanın, başlık yazı tipi stilini büyük harfe , başlık metni hizalaması , baş metin rengini #FFFFFF'ye ve başlık metin boyutunu 20EM olarak ayarlayın.

Başlık metin boyutunu tablette 15em ve mobil cihazlarda 8EM olarak ayarlamak için Divi 5'in duyarlı kontrollerini kullanın.

Yeni bir satır ekle

Ardından, başlık modülünü içeren tek sütunlu satırın altına yeni bir satır ekleyeceğiz. Yeni bir modül eklemek için Siyah + simgesini tıklayın.

Yeni Satır sekmesini tıklayın. Ofset sütunlarının altında 1/4 + 1/2 + 1/4 seçeneğini seçin.

Tasarım sekmesinde , boyutlandırma sekmesini genişletin ve genişlik ve maksimum genişlik için % 70 girin. Hizalamayı merkeze ayarlayın.

Bir Başlık Modülü Ekle

Başlık modülünü seçin ve ilk sütuna ekleyin.

Başlığı bir başlık verin ve tasarım sekmesine gidin. Başlık metni açılır menüsünü genişletin. Başlık seviyesi için H2 , başlık yazı tipi olarak Bebas Neue , başlık yazı tipi stili olarak büyük harf , başlık metni olarak #ffffff ve başlık metin boyutu olarak 6em'i seçin.

Başlık metin boyutunu 4EM olarak ayarlamak için Divi'nin duyarlı kontrollerini kullanın.

Bir Metin Modülü Ekle

İlk sütundaki başlığın altına bir metin modülü ekleyin. Bazı vücut metnini girin ve tasarım sekmesine geçin. Metin yazı tipi olarak poppins'i seçin, metin rengini #ffffff ve metin boyutunu 16px olarak ayarlayın.

Bir Düğme Modülü Ekle

İlk sütundaki metin modülünün altına bir düğme modülü ekleyin. İçerik sekmesindeki düğmeye metin atayın ve Tasarım sekmesine geçin. Düğme açılır menüsünü genişletin ve düğme için özel stilleri kullanın . Ardından düğme arka plan menüsünü genişletin. Arka plan renk sekmesinde, düğmenin rengi olarak #528BF2 ekleyin.

Düğme için Hover Renk olarak #6A7C9D'yi atamak için Divi 5'in Hakem Kontrollerini kullanın.

Masaüstü görünümüne geri dönün. Düğme Sınırı Açılır sekmesini genişletin. Düğme sınır yarıçapı altına 100 piksel ekleyin ve düğme sınır genişliğini 0px olarak ayarlayın.

Düğme metni açılır menüsünü genişletin. Düğme yazı tipi olarak poppinler , düğme metni olarak #ffffff ve düğme metni boyutu olarak 16px atayın.

Düğme simgesi ayarlarını genişletin ve düğme simgesi geçişini devre dışı bırakın.

Son olarak, Aralık açılır menüsünü genişletin. Üst ve altta 15 piksel dolgu ve sola ve sağa 35px ekleyin.

Bir Görüntü Modülü Ekle

İkinci sütuna bir görüntü modülü yerleştirin. Ayarlar göründüğünde, ayarları ortaya çıkarmak için görüntü alanının üzerine gelin. Ortam kitaplığını yüklemek ve modüle bir resim yüklemek için Ayarlar simgesini tıklayın.

Ardından, bir fare üzerinden etkisi oluşturmak için görüntüye bir etkileşim ekleyeceğiz. Gelişmiş sekmesine gidin. Ayarlarını ortaya çıkarmak için etkileşimler menüsünü genişletin. +Etkileşim Ekle düğmesini tıklayın.

Seçenekler göründüğünde fare enter'ı seçin.

Yönetici etiket alanına görüntü eğimini girin, fare seçin tetikleme olayı olarak enter, efekt eylemi olarak merin fare hareketini yansıtın, hedef modül olarak görüntüyü seçin, hareket tipi olarak eğin ve hassasiyet için 15. Son olarak, etkileşimi etkinleştirmek için Etkileşim Kaydet düğmesini tıklayın.

Bir çubuk sayaç modülü ekleyin

3. sütunda çubuk sayaç modülünü eklemek için tıklayın. İçerik sekmesinde. Elementler sekmesinde gösteri yüzdesini devre dışı bırakın.

Ardından, arka plan sekmesini genişletin. Arka plan rengi olarak #ffffff ekleyin.

Tasarım sekmesini değiştirin ve çubuk açılır menüsünü genişletin. Çubuk arka plan renk alanında, renk olarak #528bf2 ekleyin.

Başlık metni açılır menüsünü genişletin. Yazı tipi alanında Bebas Neue'yi seçin. Başlık metni olarak #ffffff ve başlık metin boyutu olarak 22px'i seçin.

İçerik sekmesine geri dönün. Bu kez, ilk çubuk sayacı öğesi için Ayarlar simgesini tıklayın.

Başlık alanına metin girin ve yüzde alanını 75 olarak ayarlayın.

Bar sayaç modülü için ana içerik sekmesine geri dönmek için tıklayın.

Tasarım ayarlarımız ayarlandığına göre, ayarları korumak için ilk çubuk sayacı öğesini kolayca kopyalayabilirsiniz.

Çubuk sayacı öğesini çoğaltın ve başlığı ve yüzdeyi istediğiniz ayarlara değiştirin.

Adım 6: Animasyon ekle

Grubu daha sürükleyici hale getirmek için bazı animasyon efektleri ekleyeceğiz. İlk olarak, ana başlığımıza bir yakınlaştırma efekti ekleyeceğiz. Grubun ana başlığını seçmek için tıklayın. Tasarım sekmesine gidin ve Animasyon sekmesini genişletmek için aşağı kaydırın. Animasyon için Zoom'u seçin. Tüm ayarları olduğu gibi bırakın.

Ardından, 2. satırı (üç sütunlu satır) genişletmek için tıklayın. İlk sütunun ayarlarına tıklayın.

Tasarım sekmesini tıklayın ve Animasyon sekmesini ortaya çıkarmak için aşağı kaydırın. Animasyon stili için Slayt'ı ve animasyon yönü için doğru seçin. Diğer tüm ayarları olduğu gibi bırakın.

Satır için Ana İçerik sekmesine geri dönün. Bu kez 3. sütunu seçin. Tasarım sekmesine gidin, Animasyon sekmesini genişletin ve animasyon için Slide> Sol'u seçin. Diğer ayarları varsayılanlarında bırakın.

Adım 7: Üst üste binen sıralar

Düzene biraz ekstra yetenek katmak için, bir örtüşme efekti oluşturmak için 2. satırdaki marjı ayarlayacağız. Bu, satırı yukarı doğru iterek güzel bir etki için ana başlığı üst üste binmesine izin verecektir. Düzendeki 2. satırı seçin ve tasarım sekmesine gidin. Ayarları ortaya çıkarmak için boşluk sekmesini genişletin. Üst kenarda, değeri%-8 olarak ayarlayın.

Ardından, 2. satırı 1'in üzerine yerleştirmek için bir Z dizin değeri uygulayacağız. Gelişmiş sekmesine gidin, konum ayarlarını genişletin ve 999999'u Z dizin alanına uygulayın.

Kaydırıcıyı önizlediğinizde, 2. satırın 1. satırın hafifçe üst üste binmesi için yukarı itildiğini ve güzel bir örtüşme efekti oluşturduğunu göreceksiniz.

Adım 8: Test Duyarlılık

İlk grubu kopyalamadan önce, düzenin yanıt verebilirliğini test etmek iyi bir fikirdir. Herhangi bir ayar yapmak için Divi 5'in özelleştirilebilir duyarlı kesme noktalarını kullanın.

Divi 5'te, Divi 4'ün 3'ü yerine 7 kırılma noktası var. Bu kesme noktalarını, düzeninizin herhangi bir ekran boyutunda inanılmaz görünmesini sağlamak için kullanabilirsiniz. İlk grubu kopyalamadan önce kesme noktalarından geçin ve gerekli ayarlamaları yapın.

Divi 5'in en iyi yeni özelliklerinden biri, mobil cihazlar için sütun sırasını değiştirme yeteneğidir. Bu, tasarımı tüm ekran boyutlarında işlevsel ve etkili tutmanın harika bir yoludur. Mobil görünümdeyken, düzenimizdeki 2. satırın 2. sütunu seçin (3 sütunlu satır).

İçerik sekmesinde Sipariş sekmesini genişletin. Oradan, ekran siparişini -1 olarak ayarlayın. Bu, sütunu görüntüyü üstte yerleştirerek görüntünün masaüstü ve tablet görünümlerinde olduğu gibi başlığı kaplamasına izin verir.

Adım 9: Çoğaltma Grupları

Her şeyi kareye çıkardıktan sonra, ilk grubu kolayca kopyalayabilir ve tüm adımları tekrarlamadan arka plan gradyanını, metnini ve görüntüyü değiştirebiliriz. Ana Carousel Grubu İçerik sekmesinde, ilk grubu çoğaltmak için tıklayın.

Kopyalamadan önce, tanımlamayı kolaylaştırmak için gruba bir yönetici etiketi atayın.

Oradan başlığı değiştirin, görüntüyü değiştirin ve gruba yeni bir arka plan gradyanı atayın. Birinci gradyan kaydırıcısı için #FC6A3C ve ikinci için #C52F00 kullanın.

Ayrıca düğmeyi ve sayacı renkleri #3DFCCA ve #C52F00 olarak çubuk olarak değiştirmek isteyeceksiniz.

Ayrıca 2. grup için animasyon zamanlamasını ayarlamamız gerekecek. Bu, kaydırıcı ilerleyene kadar animasyonların başka slaytlar için yüklenmemesini sağlar. Ana başlık modülünde, Tasarım sekmesine gidin, animasyon menüsünü genişletin ve animasyon gecikmesini 2000ms olarak ayarlayın.

Aynı şeyi 3 sütunlu satır için yapın. Birinci ve üçüncü sütunlarda animasyon gecikmesini 2000ms olarak ayarlayın.

Üçüncü gruba yapılan değişiklikler

3. grup için arka plan gradyanı için #71B953 ve #617A56 kullanın.

Düğme ve çubuk sayaç modülleri için, gelişim rengi için #BA54B3 ve #654F64 kullanın.

Ayrıca, başlık modülündeki animasyon gecikmesini ve 2. satırın birinci ve üçüncü sütunlarını 4000ms'ye değiştirmeniz gerekir.

Dördüncü gruba değişiklikler

Arka plan gradyanı için #AD52B7 ve #AD52B7 kullanın.

Çubuk sayacı ve düğme modülleri için #83B853 ve #83B853 kullanın.

Son olarak, 3 sütunlu satırın birinci ve üçüncü sütunları ile birlikte gruptaki ana başlıktaki animasyon gecikmesini 6000ms'ye ayarlayın.

10. Adım: Önizleme ve kaydırıcıyı kaydedin

Son adım, düzeni kaydetmek ve hiçbir adımın kaçırılmamasını sağlamak için önizlemektir. Visual Builder'da, sağ üst köşedeki kaydet düğmesini tıklayın.

Yeni bir sekmede düzeni açmak için önizleme düğmesini tıklayın.

Tamamlandığında, kaydırıcınız şöyle görünmelidir:

İşte bu! Grup Carousel modülü, Divi 5'e çok yönlü bir ektir. Herhangi bir proje için kaydırıcı ve atlıkarınca oluşturmanıza olanak tanır ve sınırsız özelleştirme seçenekleri sunar.

Tam ekran karousel düzenini indirin

Bu yazıda yeniden oluşturduğumuz düzeni kullanmak istiyorsanız, aşağıdaki formdan erişebilirsiniz. Klasörü indirip açtıktan sonra bir JSON dosyası bulacaksınız. Dosyayı yüklemek için Divi kitaplığınıza gidin, böylece oluşturduğunuz herhangi bir sayfa için erişip kullanabilirsiniz.

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!

Bugün Divi 5'te ilk atlıkarıncanızı oluşturun

Divi 5'in Grup Carousel modülü ile özel bir tam ekran kaydırıcısı oluşturmak, web sitelerinizde ilgi çekici deneyimler yaratmak için bir olasılık dünyası açar. Bu yazıdaki adımları takiben, animasyonlar, duyarlı kesme noktaları ve etkileşimli efektler gibi gelişmiş özelleştirme seçeneklerinden modülün özelliklerinin nasıl kullanılacağını öğrendiniz. Grup Carousel modülünün esnekliği, tüm ekran boyutlarında sorunsuz, profesyonel bir görünüm elde ederken, hayal edebileceğiniz her şey için slaytlar oluşturmanıza olanak tanır.

En son Divi 5 genel alfa indirin, Grup Carousel modülüyle deneyin ve yorumlarda veya sosyal medya kanallarımızda ne düşündüğünüzü bize bildirin.