Divi'nin Gönderi Kaydırıcı Modülü ile Blog Gönderi Ticker Nasıl Oluşturulur

Blog gönderisi kaydı, web sitenizdeki blog gönderilerini (son, ilgili vb.) dinamik olarak sergilemek için kullanışlı bir araçtır. Bunu WordPress blog gönderileri için bir haber kaydı olarak düşünebilirsiniz.

Bugün size Divi'nin gönderi kaydırıcı modülü ile nasıl bir blog gönderisi ticker oluşturacağınızı göstereceğiz. Bir haber şeridine benzer şekilde, oluşturacağımız blog gönderisi şeridi, Divi'nin gönderi kaydırma modülünün basitleştirilmiş ve kompakt bir versiyonu olacaktır. Ayrıca gönderi kaydırma modülü, gönderileri çeşitli şekillerde sergilemek için yerleşik özelliklere sahip olduğundan, onu istediğiniz her yerde kullanabilirsiniz. Son gönderileri göstermek için ana sayfada bir gönderi kaydı olarak kullanabilir veya mevcut kategoriye göre ilgili gönderileri göstermek için bir blog gönderisi şablonunun başlığında kullanabilirsiniz.

Divi'de blog gönderisi kaydının nasıl oluşturulacağını gösterdikten sonra, Divi Builder'da bir blog gönderisi şablonunun başlığına ekleyebilmeniz için onu Divi Kitaplığınıza nasıl kaydedeceğinizi de göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız blog gönderisi ticker'ına hızlı bir bakış.

Gönderi kaydının telefon ekranında nasıl güzel bir şekilde istiflendiği aşağıda açıklanmıştır.

İlgili gönderileri bir blog gönderisi şablonunun başlığında da göstermek için gönderi kaydının nasıl ekleneceğini göstereceğiz.

Düzeni ve Şablonu ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

Düzeni Divi Kitaplığına Aktarın

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. “blog post ticker layout (Divi Library)” adlı klasörün içindeki JSON dosyası olacaktır.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Başlık Şablonunu Divi Tema Oluşturucusuna Aktarın

Blog gönderisi şablonunu başlığa eklenen gönderi kaydıyla içe aktarmak istiyorsanız Divi > Tema Oluşturucu'da gezinmeniz gerekir.

Ardından, JSON dosyasını içe aktarmak için sayfanın sağ üst köşesindeki taşınabilirlik simgesini kullanın. Bu, “post ticker (Tema Oluşturucu) ile blog yazısı başlık şablonu” adlı klasörün içindeki dosya olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Blog Gönderisi İşareti Oluşturma

Satırı Oluşturmak

Başlamak için, bölümün içinde tek sütunlu bir satır oluşturalım.

Satır Ayarları

Ardından, satır tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1
• Dolgu: 0 piksel üst, 0 piksel alt

Bir Metin Modülü ile Gönderi Ticker Başlığı Oluşturma

Artık satır yerinde olduğuna göre, yazı satırı başlığını oluşturmak için satıra bir metin modülü ekleyin.

Başlık Metni ve Arka Plan

Gövde metnini “Son Gönderiler:” okuyacak şekilde güncelleyin.

Ardından arka plan rengini güncelleyin:

• Arka Plan Rengi: #333333

Tasarım Ayarları

Tasarım sekmesi altında, metin stillerini aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: rgba(255,255,255,0.7)
• Metin Harf Aralığı: 1px
• Metin Satır Yüksekliği: 40px
• Metin Hizalama: Merkez

• Genişlik: %100
• Maksimum Genişlik: 175 piksel (masaüstü ve tablet), %100 (telefon)

Bu, gönderi başlığımızın başlığıyla ilgilenir. Şimdi gönderi kaydı oluşturmaya başlayalım.

Blog Gönderisi Kaydırıcı Modülü ile Blog Gönderisi Kayanağı Oluşturma

Blog gönderisi ticker'ını oluşturmak için bir post kaydırıcı modülü kullanacağız ve ardından tasarımı gerçekten kompakt hale getirmek için basitleştireceğiz.

Metin modülünün altına bir gönderi kaydırıcı modülü ekleyin.

Kaydırıcı İçeriği Gönder

İçerik sekmesi altında gönderi sayısını, dahil edilen kategorileri ve bunların nasıl sıralanacağını seçebilirsiniz. Bu örnek için varsayılanı koruyacağız ve kaydırıcının en son gönderileri göstermesini sağlayacağız.

Gönderi alıntısını gizlemek için aşağıdakileri güncellediğinizden emin olun:

• Gönderilerden Alıntıları Kullan: HAYIR
• Alıntı Uzunluğu: 0

Kaydırıcı Öğeleri ve Arka Plan Gönderi

Gerçekten, kaydırıcıda görüntülemek istediğimiz tek şey yazı başlığı ve slayt oklarıdır. Öğeler seçenek grubu altında, oklar dışındaki her şeyi gizleyin.

• Kontrolleri Göster: HAYIR
• Devamını Oku Düğmesini Göster: HAYIR
• Gönderi Metasını Göster: HAYIR

Öne çıkan resmi her slaydın arka planı olarak gösterme seçeneğini koruyacağız. Ancak bir yedekleme için aşağıdaki arka plan rengini eklediğinizden emin olun:

• Arka Plan Rengi: #eeeeee

Kaydırıcı Tasarım Ayarları Sonrası

Bindirme ve Ok Stilleri

Tasarım sekmesi altında, arka plan kaplamasını ve ok rengini aşağıdaki gibi güncelleyin:

• Arka Plan Yerleşimini Kullan: EVET
• Arka Plan Yerleşimi Rengi: rgba(248,248,248,0.9)
• Ok Rengi: #ffffff (masaüstü), #ef51f7 (fareyle üzerine gelin)

Başlık Metni

Ardından başlık metni stillerini aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Orta
• Başlık Metni Hizalama: Sol
• Başlık Metin Rengi: #333333
• Başlık Metin Rengi (fareyle üzerine gelin): #ef51f7
• Başlık Metin Boyutu: 16px (masaüstü), 14px (telefon)
• Başlık Satır Yüksekliği: 40px
• Başlık Metin Gölgesi: ekran görüntüsüne bakın
• Başlık Metni Gölge Rengi: şeffaf

aralık

Gönderi kaydırıcımızı sağ tarafına yerleştirebilmemiz için gönderi başlığı metin modülüne yer açmamız gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin:

• Kenar boşluğu: 175 piksel sol (masaüstü ve tablet), 0 piksel sol (telefon)
• Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ

Otomatik Animasyon

Gönderi kaydırıcısı, otomatik animasyon eklemek için yerleşik bir seçeneğe sahiptir. Bu bize, slayt oklarına tıklamak zorunda kalmadan gönderileri görmemiz için gereken ticker işlevini verecektir.

Otomatik animasyonu aşağıdaki gibi ekleyin:

• Otomatik Animasyon: AÇIK
• Otomatik Animasyon Hızı: 3500

En iyi olduğunu düşündüğünüz şey için hızı artırmaktan veya azaltmaktan çekinmeyin.

Gelişmiş Şekillendirme

CSS Sınıfı ve Özel CSS

Bu noktada, gönderi kaydırıcısı, çoğunlukla, çalışan bir gönderi kaydıdır. Ancak tasarımı temizlemek için ekleyebileceğimiz birkaç gelişmiş ayar var.

İlk olarak, aşağıdaki gibi özel bir CSS Sınıfı ekleyin:

• CSS Sınıfı: et-post-ticker

Gönderi başlığının kaydırıcı/satır içinde bir satırda kaldığından ve taşmayı bir üç nokta ile gizlediğinden emin olmak için Slayt Başlığına aşağıdaki CSS'yi ekleyin:

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Slayt oklarına daha fazla düğme hissi vermek için Slayt Oklarına aşağıdaki CSS'yi ekleyin:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

Slayt Oklarını Konumlandırmak için Kod Modüllü Ek CSS

Bu noktada, slayt oklarının varsayılan işlevi yalnızca üzerine gelindiğinde gösterilecektir ve okların yerleşimi slaydın sağ ve sol taraflarındadır. Kullanıcı deneyimini geliştirmek ve daha çok bir gönderi kaydı gibi yapmak için okların her zaman gösterilmesini sağlayabilir ve bunları kaydırıcının sağına konumlandırabiliriz.

Bunu yapmak için gönderi kaydırıcısının altına yeni bir kod modülü ekleyin.

Ardından, gerekli stil etiketleriyle sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırın.

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

Son sonuç

İşte canlı bir sayfada nihai sonuç.

Gönderi ticker'ın başlık metninin taşmasını nasıl ele aldığına dikkat edin.

Ve işte, gönderi kaydının telefon ekranında nasıl güzel bir şekilde istiflendiği.

Bir Blog Gönderisi Şablonunun Başlığına Gönderi İşareti Ekleme

Bu gönderi kaydı için bariz bir kullanım durumu, son gönderileri bir blog gönderisi şablonunun gerçek başlığında görüntülemesini sağlamaktır. İşte bunu nasıl yapabilirsiniz.

Satırı Divi Kitaplığına Kaydetme

İlk olarak, gönderi kaydımızı oluşturan öğeleri içeren satırı Divi Library'ye kaydedin. Bunu, satırdaki üç nokta simgesine tıklayarak ve “Kütüphaneye Kaydet” seçeneğini seçerek yapabilirsiniz. Ardından düzene bir ad verin ve “Kütüphaneye Kaydet” düğmesini tıklayın.

Başlık şablonuna Post Ticker Row'u ekleme

Özel Başlığı Düzenleyin

Satır kitaplığa kaydedildikten sonra, onu özel bir başlığa eklemeye hazırız. Bu örnek için şablonun "Tüm Gönderiler"e atandığından emin olun. Ardından, o şablon için özel başlığı düzenlemek için tıklayın.

Kitaplıktan Satır Ekle (Mesaj İşareti)

Başlık düzeni düzenleyicisinde, gönderi kaydının görüntülenmesini istediğiniz yere yeni bir satır eklemek için tıklayın.

Satır Ekle modunda, Kitaplıktan Ekle sekmesini seçin. Daha önce kitaplığa kaydettiğiniz blog gönderisi ticker satırını bulun ve seçin.

Şimdi gönderi kaydı başlıkta gösterilecektir.

Güncel Kategori için Vitrin İlgili Yazıları

Bu gönderi kaydı yalnızca blog gönderilerinde görüntüleneceğinden, yalnızca mevcut kategoriyle ilgili gönderileri görüntülemeyi seçebiliriz.

Öncelikle metin modülümüzdeki başlık metnini “İlgili Yazılar:” olarak güncellememiz gerekiyor.

Ardından, gönderi kaydırıcı ayarlarını açın. Dahil Edilen Kategoriler altında, Geçerli Kategori seçeneğini belirleyin.

Artık her blog gönderisinin başlığında, mevcut kategoriye göre ilgili gönderileri görüntüleyen bir gönderi kaydı olacak.

Blog Gönderisi Şablonunda Sonuç

İşte otomatik animasyon iş başında.

Sonraki ve önceki gönderilere atlamak için gezinme oklarını nasıl tıklayabileceğiniz aşağıda açıklanmıştır. Ve gönderi başlığına tıklamak sizi o gönderiye götürür.

Ve işte tablet ve telefonda nasıl göründüğü.

Son düşünceler

Öğrendiğimiz gibi, Divi'nin kaydırıcı modül tasarımını basitleştirerek ve gezinme oklarında birkaç özel ayar yaparak kolayca bir blog gönderisi satırı oluşturabiliriz. Ve gönderi kaydırıcısında yerleşik tüm seçenekleri kullanarak stil ayarlamalarını her zaman kolayca yapabileceğinizi unutmayın. Umarım bu, tüm blog yazarları ve web geliştiricileri için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!