Divi & Slick.js ile Otomatik Döngü Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, size Divi, Slick.js ve Dondurma Dükkanı Düzen Paketi ile nasıl otomatik bir karusel oluşturacağınızı göstereceğiz. Kaygan JS kitaplığını web sitemize ekleyerek başlayacağız ve Divi Builder içinde çalışmasını sağlayarak devam edeceğiz. Bu, sergilemek istediğiniz her tür modül için otomatik bir karusel oluşturmanın harika bir yoludur. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Otomatik Dönen Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz otomatik atlıkarınca düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Slick.js dosyasını head etiketlerinize eklediğinizden emin olun! Onsuz, işe yaramaz. Aşağıdaki ilk adıma bakın.

1. Divi Tema Entegrasyonunuza Slick JS Ekleyin

Divi Tema Seçeneklerine Git

Bu öğreticinin ilk bölümü çok önemli bir bölümdür; web sitenize Slick.js ekleme. Bunu yapmak için Divi Tema Seçeneklerinize gidin.

Başlık Etiketlerine Slick.js Ekle

Entegrasyon sekmesine gidin ve Slick.js dosyasını web sitenizin head etiketlerine ekleyin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Dondurma Dükkanı Menü Düzenini Kullanarak Yeni Sayfa Oluşturun

Yeni Sayfa Ekle

Web sitenize yeni bir sayfa ekleyerek devam edin. Sayfanıza bir başlık verin, sayfayı yayınlayın ve Divi Builder'a geçin.

Dondurma Dükkanı Menü Düzeni Yükle

Bu eğitim için Dondurma Dükkanı Düzen Paketi'nin menü düzenini kullanıyoruz, ancak istediğiniz başka bir sayfayı/düzeni kullanmaktan çekinmeyin.

2. Sayfaya Yeni Bölüm Ekle

Yeni Bölüm Ekle

Otomatik atlıkarınca oluşturmanın bir sonraki adımı, sayfanıza yeni bir bölüm eklemektir.

Arka plan rengi

Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f5f5f5

Alt Bölücü

Bölüme bir alt bölücü de ekleyin.

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ffffff
• Bölücü Ağırlığı: 10vw

aralık

Bazı alt dolgu ile birlikte.

• Alt Dolgu: 10vw

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak ilk satırı ekleyerek devam edin:

Sütuna Başlık Metin Modülü Ekle

H2 İçeriği Ekle

Satırın sütununa bir Metin Modülü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: İstem
• Başlık 2 Yazı Tipi Ağırlığı: Ultra Hafif
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu: 60px (Masaüstü), 40px (Tablet), 25px (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.2em

boyutlandırma

Modülün boyutlandırma ayarlarını da değiştirin.

• Maksimum Genişlik: 800 piksel
• Modül Hizalaması: Merkez

3. Yeni Tek Sütunlu Satırı Otomatik Kaydırıcıya Atayın

Yeni Satır Ekle

Sütun Yapısı

Otomatik atlıkarınca oluşturmak için, atlıkarınca içine yerleştirmek istediğimiz öğelere yeni bir satır ayırmamız gerekecek. Yalnızca bir sütunlu bir satır seçtiğinizden emin olun. Sonraki adımlarda, bu sütunu otomatik bir atlıkarıncaya dönüştüreceğiz.

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarında satırın ekranın tüm genişliğini kaplamasına izin verin.

• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Biraz üst kenar boşluğu ekleyin ve sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Kenar Boşluğu: 50px
• Üst Dolgu: 0px
• Alt Dolgu: 0px

taşmalar

Ayrıca taşmaları gizleyerek hiçbir şeyin satır kapsayıcısını aşmamasını sağlıyoruz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Sütun Ayarları

Sütun ayarlarını açarak devam edin.

CSS Sınıfları

Sütuna iki farklı CSS sınıfı ekleyin. Aralarında boşluk bıraktığınızdan emin olun. Bu öğreticide daha sonra, otomatik atlıkarınca oluşturmak için bu sınıfları kullanacağız.

• CSS Sınıfı: dondurma öğeleri kaydırıcısı

Sütuna İlk Kaydırıcı Öğesi Ekle (Harekete Geçirici Mesaj Modülü)

Varsayılan İçerik

İlk atlıkarınca öğesini eklemeye başlama zamanı! Bir Harekete Geçirici Mesaj Modülü kullanacağız, ancak istediğiniz başka bir modülü kullanmaktan çekinmeyin. Seçtiğiniz bazı içeriği girin.

İçeriğin üzerine gelin

Fareyle üzerine gelindiğinde içeriği kaldırmak için başlığı ve gövde içeriğini boş bir karakterle (bunun gibi: ' ') değiştirin.

Bağlantı

Düğmenin görünmesi için modüle de bir bağlantı eklediğinizden emin olun.

• Düğme Bağlantı URL'si: #

Varsayılan Degrade Arka Planı

Ardından, arka plan ayarlarına gidin ve bir degrade arka planı ekleyin.

• Renk 1: #8300e9
• Renk 2: rgba(41,196.169,0)
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %35
• Bitiş Konumu: %35

Vurgulu Gradyan Arka Planını Kaldır

Fareyle üzerine gelindiğinde degrade arka planını kaldırın.

Arka plan görüntüsü

İlgili bir arka plan resmi de yükleyin.

Başlık Metni Ayarları

Tasarım sekmesine gidin ve başlık metni ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: İstemi
• Başlık Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Başlık Satırı Yüksekliği: 2vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Gövde Hattı Yüksekliği: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

Düğme Ayarları

Ardından, düğme ayarlarına gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 1.5vw (Tablet), 2vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000 (Varsayılan), #ff6f7e (Vurgulu)
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: İstemi
• Düğme Yazı Tipi Ağırlığı: Normal
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Marj: 19vw (Masaüstü), 30vw (Tablet), 45vw (Telefon)
• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)
• Sağ Doldurma: 2vw (Masaüstü), 4vw (Tablet), 5vw (Telefon)

boyutlandırma

Ayrıca modülün genişliğini ve yüksekliğini de değiştiriyoruz.

• Genişlik: 23vw
• Yükseklik: 23vw (Masaüstü), 50vw (Tablet), 80vw (Telefon)

aralık

Son olarak, boşluk ayarlarına gidin ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Sol Kenar Boşluğu: 1vw
• Sağ Marj: 1vw
• Üst Dolgu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

4. Kaydırıcı Öğesini İstediğiniz Kadar Kez Klonlayın

CTA Modülünü Dört Kez Klonla

İlk CTA Modülünü tamamladığınızda, devam edip istediğiniz kadar klonlayabilirsiniz. Bu sütundaki her modül, otomatik karuselin bir parçası olacaktır.

Her Çoğaltmanın İçeriğini, Gradyan Arka Planını ve Arka Plan Resmini Değiştirin

Her bir CTA Modülünü benzersiz kılmak için her kopyanın içeriğini, gradyan arka planını ve arka plan resmini değiştirdiğinizden emin olun.

5. Önceki Satırın Altına Yeni Satır Ekle

Aşağıdaki sütun yapısını kullanarak bölüme sonraki ve son satırı ekleyin:

İlk Kod Modülünü jQuery Koduyla Ekle

Sütuna Yeni Kod Modülü Ekle

Sütuna ilk Kod Modülünü ekleyin.

CSS Kodu Ekle

Ve aşağıdaki CSS Kodu satırlarını ekleyin:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

CSS Kodu ile İkinci Kod Modülü Ekle

Sütuna Yeni Kod Modülü Ekle

Bir öncekinin hemen altına başka bir Kod Modülü ekleyin.

jQuery Kodu Ekle

Ve aşağıdaki jQuery kod satırlarını ekleyin:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

CSS ve jQuery kodunu ekledikten sonra sonucu görüntülemek için Visual Builder'dan çıkabilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide size Divi, slick.js ve Ice Cream Shop Düzen Paketini kullanarak otomatik bir carousel oluşturmayı gösterdik. Bu, web sitenize etkileşim eklemenin harika bir yoludur. Bu tekniği, görüntülemek istediğiniz herhangi bir modül ile çalıştırabilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.