Divi Blog Gönderi Şablonunuz için Dinamik Gönderi Bilgi Çubuğu Nasıl Oluşturulur

Blog gönderi şablonunuza dinamik içerik eklemek, gönderi başlığı, meta veriler, öne çıkan resim vb. gibi şeyler sağlamak için gereklidir. Normalde, bu dinamik öğeler, mizanpaj tasarımında normal statik öğeler olarak yerleştirilir. Ancak bu dinamik unsurların bazılarını okuyucularınız için ön planda tutmanız faydalı olabilir. Dinamik bir gönderi bilgi çubuğunun kullanışlı olduğu yer burasıdır. Dinamik bir gönderi bilgi çubuğu, tarayıcının üst kısmında sabit kalır (sabit bir başlık gibi) ve faydalı dinamik içerik parçalarını ve diğer CTA'ları içerir. Örneğin, bu çubuğu okuyuculara şu anda okudukları gönderiyi, yorum bırakmak için bir bağlantıyı veya ilgili bir kategoriye bağlantıyı hatırlatmak için kullanabilirsiniz.

Bu eğitimde, size dinamik bir gönderi bilgi çubuğunun nasıl oluşturulacağını ve bunu Divi Tema Oluşturucu'yu kullanarak blog gönderi şablonunuza nasıl ekleyeceğinizi göstereceğiz. Tamamlandığında, bu çubuk site genelindeki tüm blog gönderileri için sorunsuz bir şekilde çalışacaktır.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış. Bağlantı bağlantılarının (“Yorum bırakın” ve “Abone olun”) kullanıcıları gönderideki ilgili alana nasıl gönderdiğine dikkat edin.

Düzeni Ü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!

Bölüm düzenini Divi Tema Oluşturucunuza aktarmak için Divi Tema Oluşturucu'ya gidin.

Taşınabilirlik simgesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

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

Tamamlandığında, bölüm şablonu Divi Tema Oluşturucu'da görünecektir.

Hadi öğreticiye geçelim, olur mu?

Bölüm 1: Hazır Şablonları İçe Aktarma

Bu eğitim için altıncı tema oluşturucu paketimizden birkaç hazır şablon kullanacağız. Bize çalışan bir global başlık verecek olan varsayılan web sitesi şablonunu içe aktaracağız ve burada yazı bilgisi çubuğunu ekleyeceğiz. Ve sonuçlarımızı canlı bir gönderide test etmek için blog gönderisi şablonunu içe aktaracağız.

ÖNEMLİ: Canlı bir siteyi karıştırmamak için bu şablonları bir test sitesine aktarmak en iyisidir.

Varsayılan Web Sitesi Şablonunu İçe Aktarın

Öncelikle Divi için Altıncı ÜCRETSİZ Tema Oluşturucu Paketini indirmeniz gerekecek. Ardından dosyayı açın.

WordPress Kontrol Panelinden Divi > Tema Oluşturucu'ya gidin. Ardından sağ üstteki taşınabilirlik simgesine tıklayın. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin. Ardından, indirilen klasörden varsayılan web sitesi şablonu json dosyasını seçin ve içe aktar düğmesine tıklayın. Bu, genel bir üstbilgi ve altbilgi içeren yeni bir varsayılan web sitesi şablonunu içe aktaracaktır.

Gönderi Şablonunu İçe Aktar

Gönderi şablonunu aynı indirilen klasörden içe aktarmak için bu işlemi tekrarlayın. Taşınabilirlik açılır penceresini açın, gönderi şablonu json dosyasını seçin ve içe aktar düğmesini tıklayın. Bu size sitenizdeki tüm gönderilere atanmış bir gönderi şablonu ve varsayılan üstbilgi bir altbilgi verecektir.

Gönderi Şablonu Başlığında Global'i Devre Dışı Bırak

Dinamik gönderi bilgi çubuğumuzu gönderi şablonunun başlığına ekleyeceğiz. Ancak, gönderi bilgisi çubuğunun yalnızca gönderi şablonunda olmasını istediğimizden, çubuğumuzun site genelindeki tüm üstbilgilere eklenmemesi için üstbilgide global'i devre dışı bırakmamız gerekir. Global başlıkta globali devre dışı bırakmak için global başlıktaki ayar menüsünü açın ve "Global'i Devre Dışı Bırak"ı seçin.

Şimdi başlık, “Custom Header” etiketli gri olmalıdır. Hazır olduğunda, başlık düzeni şablonunu düzenlemek için düzenle simgesini tıklayın.

Dinamik Gönderi Bilgi Çubuğunu Oluşturma

Bölüm ve Satır Ekleme

Başlık düzeni düzenleyicisinin içinde, başlığı tutan geçerli bölümün altında yeni bir normal bölüm oluşturun.

Ardından bölüme bir buçuk dörtte bir dörtte bir sütun satırı ekleyin.

Bölüm Ayarları

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #eceffe
• Dolgu: 10 piksel üst, 10 piksel alt

Satır Ayarları

Bölüm ayarları eklendikten sonra, satır için ayarları açın ve aşağıdakileri güncelleyin:

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

Gelişmiş sekmesi altında, Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex !important;
flex-wrap: nowrap;
align-items: center;

Bu, sütunların mobil cihazlarda yığıldığından emin olacaktır.

Gönderi Başlığı Dinamik İçerik Ekle

Çubuğa ekleyeceğimiz ilk dinamik içerik parçası yazı başlığıdır. Bu, okuyucuya şu anda hangi yazı başlığını okudukları konusunda yararlı bir hatırlatma görevi görecektir.

Metin Modülü Ekle

Gönderi başlığını dinamik içerik olarak oluşturmak için en soldaki sütunda yeni bir metin modülü oluşturun.

Gönderi/Arşiv Başlığını Dinamik İçerik Olarak Ekle

Ardından, metin ayarlarının gövde alanının üzerine gelirken “Dinamik İçeriği Kullan” simgesini tıklayın. Listeden “Yazı/Arşiv Başlığı”nı seçin.

Gönderi/arşiv başlığı için dinamik içerik ayarlarını açın ve önceki giriş kutusuna aşağıdakini ekleyin:

You're Reading: 

Ardından değişiklikleri kaydedin.

Tasarım Ayarları

Tasarım sekmesi altında, dinamik başlığın stilini aşağıdaki gibi özelleştirin:

• Metin Yazı Tipi: Ubuntu
• Metin Yazı Tipi Ağırlığı: Orta
• Metin Metin Rengi: #121212
• Metin Metin Boyutu: 14px (masaüstü), 12px (tablet), 11px (telefon)

Dinamik Gönderi Kategorileri Bilgisi Ekle

Gönderi kategorileri bilgisini oluşturmak için gönderi başlığını tutan metin modülünü çoğaltın.

Ardından yinelenen metin modülünün ayarlarını açın ve gönderi kategorilerini gövdeye dinamik içerik olarak ekleyin.

Gönderi Kategorileri Dinamik İçerik Ayarlarını açın ve aşağıdakileri güncelleyin:

• Önce: İçinde
• Kategori Ayırıcı: &

Bağlantı rengini güncelle

Tasarım sekmesi altında bağlantı rengini aşağıdaki gibi güncelleyin:

• Bağlantı Metni Rengi: #4160fd

Dinamik Yorum Sayısı Bilgisini Ekleme

Gönderi bilgi çubuğuna ekleyeceğimiz bir başka yararlı bilgi parçası, kullanıcıya isterlerse kendi yorumlarıyla ilgilenmesini hatırlatan yorum sayısıdır. Yorum sayısı, gönderinin yorumlarına da bir bağlantı içerecektir.

Dinamik yorum sayısı bilgisi oluşturmak için metin modülünü kategorilerle çoğaltın ve orta sütuna sürükleyin.

Ardından, yorum sonrası sayısını dinamik içerik olarak metin gövdesine ekleyin.

Yorum Gönderi Sayısı Ayarlarını açın ve aşağıdakileri ekleyin:

• sonra: yorum(lar)

“Yorum Bırakın” Harekete Geçirici Mesajın Eklenmesi

Yorum sayısına ek olarak, yorum bırakmak için basit bir harekete geçirici mesaj ekleyeceğiz. Bağlantı, gönderinin altındaki yorum bölümüne kaydıran bir bağlantı bağlantısı olacaktır.

CTA'yı oluşturmak için, yorum sayısını tutarak 2. sütundaki Metin modülünü çoğaltın.

Ardından, kopya için metin ayarlarını açın ve gövdeye aşağıdaki html bağlantısını ekleyin:

<a href="#respond">Leave a Comment</a>

Abone Ol Düğmesini Ekleme

Gönderi bilgi çubuğuna ekleyeceğimiz son şey bir abone ol düğmesidir. Bu aynı zamanda kullanıcıyı gönderi şablonunun bir e-posta katılım formu içeren bölümüne getiren bir bağlantı bağlantısı olacaktır.

Bunu yapmak için en sağdaki sütuna bir düğme modülü ekleyin.

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

• Düğme Metin Boyutu: 14px (masaüstü), 12px (tablet), 11px (telefon)
• Düğme Metin rengi: #ffffff
• Düğme Arka Plan Gradyanı Sol Renk: #7e5ce6
• Düğme Arka Plan Gradyanı Sağ Renk: #25b8ee
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Buton Harf Aralığı : 2px
• Düğme Yazı Tipi: Ubuntu
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: TT
• Dolgu (masaüstü): 10 piksel üst, 10 piksel alt, 20 piksel sol, 20 piksel sağ
• Dolgu (tablet): 6 piksel üst, 6 piksel alt, 14 piksel sol, 14 piksel sağ

Düğmeye bağlantı bağlantısını eklemek için içerik sekmesine gidin ve aşağıdaki Düğme Bağlantı URL'sini ekleyin:

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

Bu bağlantı, gönderi şablonunun gövdesindeki e-posta katılım formunun bulunduğu bölüme ilgili bir CSS kimliği ekleyene kadar çalışmayacaktır.

Mobil Cihazda Sütun 1'i Devre Dışı Bırak

Sabit bir bar için mobil cihazlarda yalnızca bu kadar yer var. Bu nedenle, hangi bilgilerin dahil edileceğine karar vermemiz gerekecek. Bu örnek için, mobil cihazlarda CTA'ları olan iki sütunu bırakacağız ve yazı başlığı ve kategorileri içeren sütunu devre dışı bırakacağız.

Bunu yapmak için, 1. sütunun ayarlarını açın. Gelişmiş sekmesi altında, telefon ve tablette görünürlüğü devre dışı bırakın.

Bölüme Sabit Bir Konum ve Yüksek Z Endeksi Verme

Tasarım bittiğinde artık kesite sabit bir pozisyon verebiliriz. Buradaki fikir, başlangıçta başlığı olan bölümün arkasındaki çubuğu gizlemektir. Ardından, kullanıcı kaydırdıkça sabit gönderi bilgisi çubuğu başlığın altından görüntülenecektir.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Pozisyon: Sabit
• Z İndeksi: 998

Sabit çubuğun gönderideki içeriğin geri kalanının üzerine oturmasını istediğim için z indeksinin 998 olduğuna dikkat edin.

Bölüm Başlığı Z Dizini Güncelle

Gönderi bilgisi çubuğu bölümü daha yüksek bir z indeksine sahip olduğundan, başlığın bulunduğu bölümün üstünde görünecektir. Bunu düzeltmek için, başlık içeren bölümün bölüm ayarlarını açın ve aşağıdakileri ekleyin:

• Z İndeksi: 999 (çubuklu bölümden bir fazla)

Düzen düzenleyicideki değişiklikleri kaydedin.

Gövde Şablonundaki E-posta Etkinleştirme Satırına CSS Kimliği Ekle

Çubuğa eklediğimiz abone ol düğmesi CTA'sı, gönderi şablonunda hala bir bağlantıya veya "atlamak" için bir yere ihtiyaç duyar. CTA "abone olmak" olduğundan, e-posta opi-in formuna atlamamız gerekiyor.

Bunu yapmak için, tema oluşturucuda gönderi şablonunun "özel gövde" alanını açın.

Düzenin alt kısmında e-posta katılım formunun bulunduğu satırı bulun ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: abone ol

Bu, abone ol düğmesi bağlantı bağlantısının şablonun bu belirli alanına kaydırmasını sağlar.

Bittiğinde, değişiklikleri düzene ve tema oluşturucuya kaydedin.

Son sonuç

Nihai sonucu görmek için siteyi açıp canlı bir gönderiyi görüntülemeniz yeterlidir. Bağlantı bağlantılarının (“Yorum bırakın” ve “Abone olun”) kullanıcıları gönderideki ilgili alana nasıl gönderdiğine dikkat edin.

Son düşünceler

Umarım, bu dinamik gönderi bilgi çubuğu, Divi blog gönderilerinizin UX'ini artırmak için kullanışlı olacaktır. Diğer bilgi parçalarını da denemekten çekinmeyin. Eminim orada ilgili bir gönderiyi bir blog modülü ile öne çıkarmanın bir yolu vardır.

Yorumlarda sizden haber bekliyorum.

Şerefe!