Divi Blog Modülü Carousel Blog Yazılarına Nasıl Dönüştürülür

Yayınlanan: 2022-10-28

Divi'de, blog gönderilerinizi dinamik olarak görüntüleyebilen bir Blog Modülü vardır ve bunları hemen yarasadan iki düzen seçiminde stillendirebilirsiniz, dikey olarak yığılmış gönderileri görüntüleyen Tam Genişlik düzeni, böylece tek bir satırda yalnızca bir gönderi görünür ve Izgara blog gönderilerini birden çok sütuna yerleştiren ve böylece bir ızgara oluşturan düzen. Modülü bir süredir kullanıyorsanız, blog gönderileriniz için Izgara ve Tam Genişlik düzeninin yanı sıra başka bir stile sahip olmak isteyebilirsiniz.

Daha önce, blog yazılarınızı şekillendirmeye çalışabileceğiniz bazı makaleler de yapmıştık. Bunlardan biri, ızgara düzeni blog modülü için blog gönderilerinin içeriğini öne çıkan görselin üzerine taşımakla ilgili, diğeri ise tam genişlik düzenine sahip blog gönderilerinizi Liste Düzenine dönüştürmek içindir.

Ve bu sefer, blog gönderilerinizi şekillendirmek için size bir özelleştirme daha göstermek istiyoruz: blog gönderilerini, aşağıdaki animasyon gibi blog gönderileri arasında gezinmek için PC'de sürüklenebilir ve mobilde kaydırılabilir işlevselliğe sahip bir atlıkarıncaya dönüştürmek.

Divi Blog Modülünü Atlıkarıncaya Dönüştürmek

1. Adım: Bir Sayfa Oluşturun veya Mevcut Bir Sayfayı Düzenleyin

Divi blog modülünüzü bir atlıkarıncaya dönüştürmeye başlamak için web sitesine yeni bir sayfa ekleyin veya mevcut bir sayfayı düzenleyin ve ardından Divi Builder görsel düzenleyicisiyle düzenleyin. Bu eğitim için yeni bir sayfa oluşturacağız ve Charter Boat hazır düzen paketlerinden Blog Düzenini kullanacağız.

2. Adım: Döngü için Önceki ve Sonraki Düğmeleri Oluşturun

Düzeni yükledikten sonra, blog modülü blog yazılarınızı dinamik olarak yükleyecektir. Bir sonraki adım, kullanıcının gönderiler arasında ileri geri gitmesine izin vermek için önceki ve sonraki düğmeleri oluşturmaktır.

Gezinme Düğmeleri için Yeni Bir Satır Ekle

Yeni bir satır ekleyerek başlayın ve onu blog modülü satırının hemen üstüne taşıyın, ardından aşağıdaki sütun yapısını kullanın.

Henüz herhangi bir modül eklemeden, Satır Ayarları'nı açın, ardından Tasarım sekmesi → Boyutlandırma bloğuna giderek ve hem Genişlik hem de Maks Genişliği %100'e ayarlayarak satırın genişliğini bölüm genişliğinin %100'üne ayarlayın.

Düğmeler için Blurb Modüllerini Ekleyin

Satır hazır olduğunda, gönderilerde gezinmek için ilk düğme için bir tanıtım yazısı modülü ekleyin. Buton için tanıtım modülünü seçiyoruz çünkü bu modül, navigasyon sonrası için kullandığımız butonun simgesine stil vermek için birçok seçeneğe sahip.

Modülü ekledikten sonra Blurb Ayarlarını açın, modüle aşağıdaki ayarları uygulayın:

  • Başlığı "Önceki" olarak değiştirin
  • Gövde metnini kaldırın
  • Görüntü ve Simge bloğunu açın, Simge Kullan seçeneğini Evet olarak değiştirin ve sol ok simgesini seçin.
  • Tasarım sekmesine gidin ve ardından simge ayarlarını aşağıdaki gibi değiştirmek için Görüntü ve Simge bloğunu açın:
    • Simge Rengi : #000000
    • Resim/Simge Arka Plan Rengi : #f2f2f2
    • Resim/Simge Yuvarlak Köşe : Tüm köşeler için 50 piksel
  • Başlık metnini aşağıdaki gibi biçimlendirmek için Başlık Metni bloğunu açın:
    • Başlık Yazı Tipi Ağırlığı : Yarı Kalın
    • Başlık Metni Hizalama: Orta
  • Modül boyutlandırma seçeneğini farklı ekran boyutlarında değiştirin ve Boyutlandırma bloğuna giderek hizalamasını sağa ayarlayın, ardından ayarlarını aşağıdaki gibi değiştirin:
    • Genişlik : Masaüstü = %10, Tablet = %20, Telefon = %30
    • Modül Hizalaması : Sağ
  • Döngü eylemini daha sonra Gelişmiş sekmesi → CSS Kimliği ve Sınıfları bloğuna giderek tetiklemek için modüle özel bir CSS Sınıfı ekleyin ve ardından CSS Sınıfı alanına "geri düğmesi" özel CSS sınıfını ekleyin.
  • Özel CSS → Ana Öğeye aşağıdaki CSS parçacığını ekleyerek imleci bir işaretçiye dönüştürün:
    • cursor: pointer;

Düğme Satırını Klonlayın ve Blog Satırının Altına Taşıyın

Önceki düğme ayarlandıktan sonra, satırını ve içerdiği modülü klonlayalım, böylece adımları tekrarlamamıza gerek kalmaz, blog gönderileri satırının altındaki satırı hareket ettirin ve klonlanmış tanıtım modülündeki simge, başlık için bazı ayarları değiştirin, ve sonraki düğme için özel CSS sınıfı. Değiştirilen ayarlar aşağıdaki gibidir:

  • İçerik sekmesinde aşağıdakilerin değerini değiştirin:
    • Başlık: Sonraki
    • Simge: Sağ Ok
  • Ardından, CSS sınıfını değiştirmek için Gelişmiş sekmesine gidin
    • CSS Kimliği ve Sınıfları → CSS Sınıfı : sonraki düğme

3. Adım: Blog Modülünü Hazırlayın

Carousel Blog gönderileri için Satırı hazırlayın

Modüle dokunmadan önce atlıkarınca blog gönderilerine dönüştürmeden önce blog modülünün satırını hazırlayalım. Blog Satırı Ayarlarını açarak başlayın, ardından aşağıdaki gibi ayarlarda değişiklik yapın:

  • Tasarım sekmesi → Boyutlandırma bloğuna gidin ve ardından şunları ayarlayın:
    • Genişlik: %100
    • Maksimum Genişlik: %100
  • Gelişmiş sekmesine gidin → Görünürlük bloğu:
    • Yatay Taşma : Gizli
    • Dikey Taşma: Gizli

Yukarıdaki ayarlar, atlıkarıncanın sayfanızda herhangi bir yatay kaydırma çubuğunun görünmesine neden olmamasını sağlayacaktır.

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

Satırı hazırladıktan sonra, blog modülünü değiştirmeye başlamanın zamanı geldi. Blog Ayarlarını açarak başlayın, ardından aşağıdaki gibi ayarlarda değişiklik yapın:

  • İçerik sekmesinde → Öğeler bloğunda Sayfalandırmayı Göster ayarını Hayır olarak ayarlayın.
  • Blog yazısı düzenini tam genişliğe değiştirmek için Tasarım sekmesi → Düzen bloğuna gidin
    • Düzen: Tam genişlik
  • Ardından, Overlay bloğuna aşağıdaki değerleri ekleyerek bir overlay ekleyin.
    • Öne Çıkan Görüntü Bindirme : Açık
    • Yer Paylaşımı Simge Rengi: #ffffff
    • Bindirme Arka Plan Rengi: rgba(1,0,66,0.33)
  • Yine Tasarım sekmesinde, Görüntü bloğunu açın ve öne çıkan görüntüye bir gölge efekti eklemek ve aşağıdaki rengi kullanmak için Görüntü Kutusu Gölgesi seçeneğinden kutu gölge efektlerinden birini seçin:
    • rgba(1,0,66,0.33)
  • Gelişmiş sekmesine gidin, daha sonra CSS Kimliği ve Sınıfları bloğunu açarak döngüyü etkinleştirmek için blog modülüne özel bir CSS sınıfı ekleyin ve ardından aşağıdaki CSS sınıfını ekleyin:
    • CSS Sınıfı: wpblog modülü
  • Öne çıkan görsel ile başlık arasına biraz boşluk ekleyin ve ayrıca bazı kenar boşlukları ekleyerek post meta ile alıntı arasına biraz boşluk ekleyin, Bunu yapmak için Özel CSS bloğuna aşağıdaki CSS parçacığını ekleyin:
    • Başlık: margin-top: 10px;
    • Meta Gönder : margin-bottom: 30px;

Ve blog modülü ayarları için bu kadar. Sürüklenebilir ve kaydırılabilir bir atlıkarıncaya çevirelim, olur mu?

4. Adım: Blog gönderilerini Sürüklenebilir ve Kaydırılabilir bir Döngüye dönüştürün

Blog modülü ayarları yapıldıktan sonra, blog gönderilerini sürüklenebilir ve kaydırılabilir bir atlıkarıncaya dönüştürmenin zamanı geldi. Bunu yapmak için, bir Slick JS kütüphanesi ve çalışması için bazı özel kodlar eklememiz gerekiyor.

Slick JS İşlevselliği ve Slide CSS Ekleme

Slick JS, tamamen özelleştirilebilir, duyarlı ve mobil uyumlu carouseller oluşturmak için bir jQuery eklentisidir. Slick JS'nin işlevselliğini eklemek için sayfadaki herhangi bir sütuna bir kod modülü ekleyin veya Divi → Divi Tema Seçenekleri → Entegrasyonlar'a giderek aşağıdaki komut dosyasını URL ile web sitenizin başına ekleyebilirsiniz: 

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

Bu eğitim için kod modülünü kullanıyoruz ve yukarıdaki kodu içine yerleştiriyoruz, ardından script etiketinin hemen altına aşağıdaki slayt CSS kodunu ekliyoruz. 

 <Stil>
	.slick-slide {
	yüzer: sol;
	marj: 2vw;
	}
</style>

Döner Döner Formunu Alsın

Sonunda sürüklenebilir ve kaydırılabilir atlıkarıncanın şeklini almasına izin vermek için aşağıdaki JQuery kodunu eklemeniz gerekir. Kodu, önceki slayt CSS kodundan sonra yerleştirebilirsiniz. Daha fazla uzatmadan işte kod: 

 <script>
  jQuery(işlev($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 
 
$('.blog-carousel').slick({
    sonsuz: doğru,
    slaytlarGösterilecek: 3,
    slaytlarToScroll: 1,
    centerMode: doğru,
    merkez Doldurma: '%10',
    tokatlamak: doğru,
    prevArrow: geriDüğme,
    nextArrow: nextDüğme,
   
    duyarlı: [{
    kesme noktası: 1079, ayarlar: {
    slaytlarGöstermek için: 1
    }
    }]
 
});
});
</script>

Yukarıdaki kod ayrıca Önceki ve Sonraki düğmelerinin gezinme düğmeleri gibi düzgün çalışmasını sağlar. Kod modülündeki kod yerleşimimiz için aşağıdaki resme bakabilirsiniz.

Adım 5: Carousel Blog Gönderilerinizi Canlı İzleyin

Artık gerekli tüm kodlar zaten yerinde, ancak blog modülü Divi oluşturucumuzda hala tam genişlikte düzende. Nasıl olur?

Endişelenmeyin, blog gönderilerinizi ön uçtan görmek için sayfayı kaydedin ve görsel oluşturucudan çıkın. Ve işte, blog gönderileriniz, dönen blog gönderilerinde gezinmek için size başka bir yol sağlamak için sonraki ve önceki düğmelerle sürüklenebilir ve kaydırılabilir bir atlıkarınca haline getirilir.

Alt çizgi

Blog modülünü bir süredir kullanıyorsanız, blog gönderileriniz için Izgara ve Tam Genişlik düzeninin yanı sıra, hemen alabileceğiniz varsayılan düzen olan başka bir stile sahip olmak isteyebilirsiniz. Bu eğitici, blog gönderilerinizi, blog sayfası veya ilgili gönderiler gibi web sitesi öğelerinizi biçimlendirmek için size daha fazla seçenek sunan, sürüklenebilir ve kaydırılabilir bir atlıkarıncaya nasıl dönüştüreceğinizi gösterdi.

Divi'yi İndir