ne dersinafişer blogunuzun Divi, makaleler arasında kolayca gezinebileceğiniz bir atlıkarınca biçiminde mi?
Birçok web sitesi için blog yazmak, pazarlama stratejilerinin önemli bir parçası haline geldi. SEO.
Ancak, yüksek kaliteli içerik oluşturmanın yanı sıra, ziyaretçileriniz için gönderilere göz atma sürecini basitleştirmek de önemlidir. Bu sayede makaleden makaleye atlayabilir ve web sitenizde, orada yayınladığınız içeriği okuyarak daha fazla zaman geçirebilirler.
Divi'de makalelerinizi dinamik olarak görüntülemek ve kişiselleştirmek 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 makaleyi seveceksiniz.
Divi'nin entegre öğelerini kullanarak Divi'nin entegre Blog modülünü bir atlıkarıncaya nasıl dönüştürebileceğinizi ve ücretsiz js kütüphanesi .
Gidelim.
anket
Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.
Divi Theme Builder ile bir blog sayfası oluşturun
Ü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 'Divi Builder'ı Kullan'.
'İç Tasarım Şirketi' Önceden Tasarlanmış Düzen Blog Sayfasını İndirin
Bu eğitimde, 'İç Tasarım Şirketi' düzeninden Blog Sayfasını kullanacağız, ancak istediğiniz diğer düzeni kullanmakta özgürsünüz.
Divi'nin Özet modülünü kullanarak 'Önceki' ve 'Sonraki' ok şablonları oluşturun
Blog sayfasına girdikten sonra atlıkarınca oluşturmaya başlayabiliriz.
İlk bölüm, ziyaretçilerin makaleler arasında gezinmesine izin vermek için ihtiyaç duyduğumuz okları oluşturmaya ayrılmıştır.
Ayrıca okuyun: DIVI'da yapışkan bir genel başlık nasıl oluşturulur
Okları tasarlamak için Divi'nin Özet modülünü kullanacağız, ancak istediğiniz diğer modülü kullanmakta özgürsünüz.
Bölümün üstüne yeni bir satır ekleyin blogunuzun aşağıdaki sütun yapısını kullanarak:
boyutlandırma
Henüz herhangi bir modül eklemeden hat ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirerek hattın bölümün sol ve sağ taraflarına değmesini sağlayın:
- Maksimum genişlik: %100
- Maksimum genişlik: %100
Özet modülü ekleyin
Bir Özet modülü ekleyin ve bir başlık ekleyin.
Ardından bir simge seçin.
- Simgeleri kullan: EVET
Simge ayarları
Stil sekmesine geçin ve simge ayarlarını aşağıdaki gibi değiştirin:
- Simge Rengi: #000000
- Resim/Simge Yerleşimi: Köşe
- 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 Fontu: Mulish
- Yumuşak Işık Başlık: Yarı Kalın
- Metin hizalama: orta
- Başlık metni rengi: #000000
boyutlandırma
Ardından modül boyutlandırma ayarlarını farklı ekran boyutlarında değiştiriyoruz.
- Maksimum genişlik: %10 (masaüstü), %20 (tablet), %30 (telefon)
- Metin hizalama: sağ
Bir de CSS sınıfı ekleyelim. Bu CSS sınıfı, tıklamada atlıkarınca eylemini tetiklememize yardımcı olacaktır.
- CSS sınıfı: geri düğmesi
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;
Çizgiyi klonlayın ve bölümün altına yerleştirin
İlk oku tamamladıktan sonra, tüm satır kapsayıcısını klonlayabilir ve yinelenen satırı blog bölümünün sonuna yerleştirebilirsiniz.
Yinelenen satırda Özet modülünü açın ve başlığı düzenleyin.
Simgeleri kullanın: EVET.
Ayrıca CSS sınıfını da değiştirin.
- CSS sınıfı: sonraki düğme
Blog modülünü hazırlayın
boyutlandırma
Oklar yerindeyken, yerleştirildiği satırdan başlayarak Blog modülünü değiştirmeye başlamanın zamanı geldi. Hat ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:
- Maksimum genişlik: %100
- Maksimum genişlik: %100
Ardından satır taşmalarını 'gizli' olarak ayarlayın. Bu, atlıkarıncanın sayfamızda 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
Sayfalandırmayı gizle
Satır ayarları yapıldığında Blog modülü ayarlarını açın. Öğe ayarlarında sayfalamanın devre dışı bırakıldığından emin olun.
- Sayfalandırmayı göster: Hayır
Ardından, Stil sekmesine geçin ve düzeni 'Tam Ekran' olarak değiştirin.
- Model: Tam Ekran
Ayrıca bir kaplama ekleyeceğiz.
- Gösterilen bindirme resmi: AKTİF
- Yer paylaşımı simge rengi: #ffffff
- Bindirme arka plan rengi: rgba (1,0,66,0.33)
Ardından, blogumuza, öğreticide daha sonra atlıkarıncayı etkinleştirmemize yardımcı olacak bir CSS sınıfı ekleyeceğiz.
- CSS sınıfı: blog modülü
Ve gelişmiş sekmesindeki Post Metadata CSS öğesine bir alt kenar boşluğu ekleyerek post meta ile alıntı arasında biraz boşluk oluşturacağız.
Ayrıca keşfedin: DIVI'da kayan ve itmeli menü nasıl oluşturulur
margin-bottom: 50px;
Slick JS işlevselliği ekleyin
Tüm Divi ayarları yapıldığında, kaygan js işlevselliği eklemenin zamanı geldi! Blog modülünün hemen altına (veya sayfanın herhangi bir yerine) bir Kod modülü ekleyin.
Ardından kaygan js kitaplığını ekleyin komut dosyası etiketlerinde (aşağıdaki baskı ekranında görebileceğiniz gibi). Bunları ayrıca, ayarlarında web sitenizin başlığına eklemekte özgürsünüz. Divi teması.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
CSS kodunu kullanarak her blog gönderisini bireysel düzeyde biraz değiştireceğiz.
Ayrıca Oku: DIVI'da Blog modülü ile blog sayfası nasıl oluşturulur
Kodu yerleştirdiğinizden emin olun stil etiketleri arasında aşağıdaki ekran görüntüsünde gösterildiği gibi.
.slick-slide {
float: left;
margin: 2vw;
}
Ve son olarak, atlıkarıncanın şekillenmesine izin vermek için bazı JQuery kodları ekleyeceğiz. Aşağıdaki kodda carousel işlevi için tasarladığımız butonları da ekliyoruz.
Kodu yerleştirdiğinizden emin olun komut dosyası etiketlerinde aşağıda görebileceğiniz gibi.
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
}
}]
});
});
Sayfayı kaydedin ve sonucu görüntülemek için Divi's Visual Builder'dan çıkın
Visual Builder'da sonucu görmeyeceksiniz.
Bu nedenle, işiniz biter bitmez sayfanızı kaydedin, Visual Builder'dan çıkın ve sonucu web sitenizde görün!
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Yani ! Bu makale için bu kadar. Blog modülü tasarımınızı nasıl bir sonraki seviyeye taşıyacağınızı gösterdik. Spesifik olarak, ücretsiz bir js kitaplığı kullanarak Divi'nin yerleşik Blog modülünü bir atlıkarıncaya nasıl dönüştüreceğinizi gösterdik.
Divi hakkında daha fazla bilgi edinmek isterseniz, kataloğumuzu ziyaret etmekten çekinmeyin. Div dersleri. Ayrıca danışabilirsiniz Divi Blog modülü ile Blog sayfası nasıl oluşturulur
Ayrıca bakınız kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
