Blog Modülünüzü Divi & Slick ile Gelişmiş Sürüklenebilir/Kaydırılabilir Karusel'e Dönüştürme

Birçok web sitesi için bloglama, SEO stratejilerinin önemli bir parçası haline geldi. Ancak yüksek kaliteli içerik oluşturmanın yanı sıra, ziyaretçileriniz için gezinme sonrası sürecini basitleştirmek de önemlidir. Bu şekilde, bir gönderiden diğerine atlayabilir ve web sitenizde yayınladığınız içeriği okumak için daha fazla zaman harcayabilirler. Divi'de, blog gönderilerinizi dinamik olarak görüntülemek ve bunlara stil vermek için kullanabileceğiniz bir Blog Modülü vardır. Arama sonrası deneyimini bir sonraki seviyeye taşımanın bir yolunu arıyorsanız, bu gönderiye bayılacaksınız. Yerleşik Divi Blog Modülünü, Divi'nin yerleşik öğeleri ve ücretsiz kaygan js kitaplığı ile gelişmiş bir sürüklenebilir/kaydırılabilir atlıkarıncaya nasıl dönüştüreceğinizi göstereceğiz. 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

Blog Modülü Sürüklenebilir Kaydırma Döner Düzenini ÜCRETSİZ İndirin

Ücretsiz Blog Modülü sürüklenebilir tokatlamak atlıkarınca düzenine el 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!

1. Blog Sayfası Oluşturun

Yeni Sayfa Ekle

Üzerinde çalıştığınız web sitesine yeni bir sayfa ekleyerek başlayın. Sayfanıza bir başlık verin, sayfayı yayınlayın ve Visual Builder'a geçin.

İç Tasarım Şirketi Blog Sayfası Düzeni Yükleyin

Bu kullanım örneği eğitiminde, İç Tasarım Şirketi blog düzenini kullanacağız, ancak istediğiniz başka bir düzeni kullanmakta özgürsünüz.

2. Blurb Modüllerini Kullanarak Önceki ve Sonraki Ok Tasarımlarını Oluşturun

Bölümün Başına Yeni Satır Ekle

Sütun Yapısı

Blog sayfasına girdikten sonra, gelişmiş sürüklenebilir kaydırmalı atlıkarınca oluşturmaya başlayabiliriz. İlk bölüm, ziyaretçilerin gönderiler arasında gidip gelmelerine izin vermek için ihtiyaç duyduğumuz okları tasarlamaya ayrılmıştır. Oklar, ziyaretçilerin atlıkarıncada gezinmesi gereken tek seçenek olmayacak. Atlı karıncayı masaüstünde sürükleyebilecek ve mobilde de kaydırabilecekler. Okları tasarlamak için Divi'nin yerleşik Blurb Modülünü kullanacağız, ancak siz istediğiniz diğer modülü kullanmakta özgürsünüz. Aşağıdaki sütun yapısını kullanarak blog bölümünüzün en üstüne yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirerek satırın bölümün sol ve sağ tarafına dokunmasına izin verin:

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

Bulanıklık Modülü Ekle

Başlık ekle

Ardından, bir Blurb Modülü ekleyin ve bir başlık ekleyin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #000000
• Daire Simgesi: Evet
• Daire Rengi: #f2f2f2
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Merkez

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Muli
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000

boyutlandırma

Bundan sonra modülün boyutlandırma ayarlarını farklı ekran boyutlarında değiştiriyoruz.

• Genişlik: %10 (Masaüstü), %20 (Tablet), %30 (Telefon)
• Modül Hizalaması: Sağ

CSS Sınıfı

Ayrıca bir CSS sınıfı ekleyeceğiz. Bu CSS sınıfı, eğitimde daha sonra tıklandığında atlıkarınca eylemini tetiklememize yardımcı olacaktır.

• CSS Sınıfı: geri düğmesi

Ana Eleman CSS

Son olarak, imleci bir işaretçiye dönüştürmek için modülün ana öğesine bir satır CSS kodu ekleyeceğiz.

cursor: pointer;

Klonlama Satırı ve Bölümün En Altına Yerleştirme

İlk oku tamamladığınızda, tüm satır kapsayıcısını klonlayabilir ve yinelenen satırı blog bölümünün sonuna yerleştirebilirsiniz.

Başlığı değiştir

Yinelenen satırda Blurb Module'ü açın ve başlığı değiştirin.

Simgeyi Değiştir

Simge ile birlikte.

CSS Sınıfını Değiştir

Ve CSS sınıfını da değiştirin.

• CSS Sınıfı: sonraki düğme

3. Blog Modülünü Hazırlayın

Açık Satır İçeren Blog Modülü

boyutlandırma

Oklar yerleştirildikten sonra, yerleştirildiği satırdan başlayarak Blog Modülü üzerinde ince ayar yapmaya başlama zamanıdır. Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

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

görünürlük

Ardından, satırın taşmalarını gizli olarak yerleştirin. Bu, atlıkarıncanın sayfamızda herhangi bir yatay kaydırma çubuğunun görünmesine neden olmamasını sağlamaya yardımcı olacaktır.

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

Blog Modülünü Değiştir

Sayfalandırmayı Gizle

Satır ayarları yapıldıktan sonra Blog Modülü ayarlarını açın. Öğe ayarlarında sayfalandırmanın devre dışı bırakıldığından emin olun.

• Sayfalandırmayı Göster: Hayır

Düzen

Ardından, tasarım sekmesine gidin ve düzeni tam genişliğe değiştirin.

• Düzen: Tam genişlik

Kaplama

Biz de bir bindirme ekliyoruz.

• Öne Çıkan Görüntü Yerleşimi: Açık
• Yer Paylaşımı Simge Rengi: #ffffff
• Bindirme Arka Plan Rengi: rgba(1,0,66,0.33)

CSS Sınıfı

Ardından, blogumuza bir CSS sınıfı ekleyeceğiz ve bu, eğitimde daha sonra atlıkarıncayı etkinleştirmemize yardımcı olacak.

• CSS Sınıfı: blog modülü

Meta CSS Gönder

Ve gelişmiş sekmesindeki post meta CSS öğesine bir miktar alt kenar boşluğu ekleyerek post meta ile alıntı arasında biraz boşluk oluşturacağız.

margin-bottom: 50px;

4. Slick JS İşlevselliği Ekleyin

Blog Modülünün Altına Kod Modülü Ekleyin

Tüm Divi ayarları yapıldığında, kaygan js işlevselliğini eklemenin zamanı geldi! Blog Modülünün hemen altına (veya sayfanın herhangi bir yerine) bir Kod Modülü ekleyin.

Slick JS Komut Dosyası Etiketleri Ekle

Ardından, script etiketlerinin içine slick js kitaplığını ekleyin (aşağıdaki baskı ekranında görebileceğiniz gibi). Bunları Divi tema ayarlarında da web sitenizin başına eklemekte özgürsünüz.

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

Slayt CSS Kodu Ekle

Bazı CSS kodlarını kullanarak her blog gönderisini bireysel düzeyde biraz değiştireceğiz. Kodu, aşağıdaki yazdırma ekranında görüldüğü gibi stil etiketleri arasına yerleştirdiğinizden emin olun.

.slick-slide {
float: left;
margin: 2vw;
}

JQuery Kodu Ekle

Son olarak, gelişmiş sürüklenebilir kaydırmalı karuselin şeklini almasına izin vermek için bazı JQuery kodları ekleyeceğiz. Aşağıdaki kodun içine, tasarladığımız butonları da carousel'in işlevselliğine ekliyoruz. Aşağıdaki yazdırma ekranında görebileceğiniz gibi kodu komut dosyası etiketlerinin içine yerleştirdiğinizden emin olun.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Sonucu Görüntülemek için Sayfayı Kaydet ve Görsel Oluşturucudan Çık

Visual Builder içinde sonucu görmezsiniz. Bu nedenle, işiniz biter bitmez sayfanızı kaydedin, Visual Builder'dan çıkın ve sonucu web sitenizde görüntüleyin!

Ö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, Blog Modülü tasarımınızı bir sonraki seviyeye nasıl taşıyacağınızı gösterdik. Daha spesifik olarak, ücretsiz kaygan js kitaplığını kullanarak Divi'nin yerleşik Blog Modülünü nasıl gelişmiş bir sürüklenebilir kaydırmalı karusele dönüştüreceğinizi gösterdik. JSON dosyasını da ücretsiz olarak sağladık! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

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.