Divi ile Blog Yazısı Şablonunuz için Yapışkan Kenar Çubuğu Nasıl Oluşturulur

Herhangi bir web sitesi oluştururken, şansınız yüksektir, ara sıra o web sitesinde de blog yazmak isteyeceksiniz. Tüm blog yazılarınızı bir liste biçiminde içeren bir blog sayfasına ihtiyaç duymanın yanı sıra, oluşturduğunuz yeni blog yazılarına otomatik olarak atayabileceğiniz bir blog yazısı şablonuna sahip olmak isteyeceksiniz. Divi's Theme Builder ile bir blog yazısı şablonu tasarlamak inanılmaz derecede kolaydır. Ve şimdi, Divi'nin yeni yapışkan seçenekleriyle, kenar çubuğunuzu hemen anında yapışkan hale getirebilirsiniz! Bugünün eğitiminde, size bunu tam olarak nasıl yapacağınızı göstereceğiz ve blog yazısı şablonunun 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

Yapışkan Kenar Çubuğu Blog Gönderisi Şablonlarını ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan kenar çubuğu blog yazısı şablonlarına koymak için önce aşağıdaki düğmeyi kullanarak bunları 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.

https://youtu.be/8hTA3ogf3ZQ

Youtube Kanalımıza Abone Olun

1. Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Ekle

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Divi Tema Oluşturucu'ya giderek ve yeni bir şablon ekleyerek başlayın.

Tüm Gönderilerde Şablon Kullan

Tüm gönderilerde bu yeni şablonu kullanın.

• Kullanımda: Tüm Gönderiler

Şablon Gövdesi Oluşturmaya Başlayın

Ardından, gönderi şablonunuzun özel gövdesini oluşturmaya başlayın.

2. Blog Gönderisi Gövdesini Oluşturmaya Başlayın (Sağ Kenar Çubuğu)

Bölüm #1 Ayarlar

Degrade Arka Plan

Şablon düzenleyiciye girdikten sonra tasarımı oluşturmaya başlayabilirsiniz. Şablonun üst kısmında görebileceğiniz bölümü açın ve degrade bir arka plan uygulayın.

• Renk 1: #8995ff
• Renk 2: #6163b5
• Gradyan Yönü: 150deg

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #8995ff

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Sonra biraz sol ve sağ dolgu ekleyin.

• Sol Dolgu: %3
• Sağ Dolgu: %3

Sınır

Ardından, kenarlık ayarlarına bazı yuvarlatılmış köşeler ekleyin.

• Tüm Köşeler: 20px

Kutu Gölge

Bir kutu gölgesi de uygulayın.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

Dönüştür Çeviri

Ve dönüştürme çevirme ayarlarını uygun şekilde değiştirerek satır ayarlarını tamamlayın:

• Sağ: 50 piksel

Sütun 1'e Metin Modülü Ekle

Dinamik İçerik

Sütun 1'e ilk Metin Modülünü ekleyin ve aşağıdaki dinamik içeriği seçin:

• Dinamik İçerik: Gönderi Kategorileri

Metin Ayarları

Modülün tasarım sekmesine gidin ve metni buna göre biçimlendirin:

• Yazı Tipi: Alata
• Metin Rengi: #ffffff
• Metin Boyutu: 1rem
• Metin Harf Aralığı: 1px
• Metin Satır Yüksekliği: 2em

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #ffffff

Metin Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

İlk Metin Modülünü tamamladıktan sonra, tüm modülü iki kez klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

Dinamik İçeriği Değiştir

Yinelenenlerin her biri için dinamik içeriği değiştirin.

• İlk Kopya: Yayınlama Tarihinden Sonra

• İkinci Kopya: Gönderi Yorum Sayısı
• Sonra: Yorumlar
• Yorum Alanına Bağlantı: Evet

2. Bölüm Ekle

aralık

Bir öncekinin hemen altına başka bir bölüm ekleyin. Bölüm ayarlarını açın ve aşağıdaki üst ve alt dolgu değerlerini uygulayın:

• Üst Dolgu: 0px
• Alt Dolgu: 150 piksel

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 2580 piksel

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu:
  • Masaüstü: 100 piksel
  • Tablet ve Telefon: 50px

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve biraz sol ve sağ dolgu uygulayın.

• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 2 Ayarları

Arka plan rengi

Sütun 2 ayarlarına geçin ve beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #ffffff

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Ardından, kenarlık ayarlarına gidin ve aşağıdaki ayarları uygulayın:

• Tüm Köşeler: 20px
• Üst Kenarlık:
  • Üst Kenar Genişliği:
    • Masaüstü: 0 piksel
    • Tablet ve Telefon: 5px
  • Üst Kenar Rengi: #8995ff
• Sol Kenarlık:
  • Sol Kenar Genişliği:
    • Masaüstü: 5 piksel
    • Tablet ve Telefon: 0px
  • Sol Kenar Rengi: #8995ff

Kutu Gölge

Aşağıdaki kutu gölgesini uygulayarak sütun ayarlarını tamamlayın:

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

Metin Modülü #1'i Sütun 1'e ekleyin

H1 Dinamik İçerik

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. Aşağıdaki dinamik içeriği seçin:

• Dinamik İçerik: Gönderi/Arşiv Başlığı
• Önce: <H1>
• Sonra: </H1>

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Alata
• Başlık Metni Boyutu:
  • Masaüstü: 4.8rem
  • Tablet: 3.2 rem
  • Telefon: 2.3rem
• Başlık Harf Aralığı: -2px

aralık

Bazı özel üst ve alt kenar boşlukları da ekleyin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 100 piksel

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Kutusunu Boş Bırak

Sütun 1'e başka bir Metin Modülü ekleyin ve içerik kutusunu boş bırakın.

Dinamik Arka Plan Resmi

Bunun yerine, gönderinin öne çıkan dinamik görüntüsünü arka plan görüntüsü olarak sergilemek için Metin Modülünü kullanıyoruz.

• Dinamik Arka Plan Resmi: Öne Çıkan Resim
• Arka Plan Resmi Boyutu: Kapak

aralık

Modülün tasarım sekmesine gidin ve aşağıdaki dolgu değerlerini uygulayın:

• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

Sınır

Ardından, kenarlık ayarlarına gidin ve bazı yuvarlatılmış köşeler ekleyin.

• Tüm Köşeler: 20px

Kutu Gölge

Aşağıdaki kutu gölge ayarlarını uygulayarak modül ayarlarını tamamlayın:

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

Sütun 1'e Gönderi İçeriği Modülü Ekle

Gövde Metni Ayarları

Gönderi şablonumuzda ihtiyacımız olan bir sonraki modül, İçerik Sonrası Modülüdür. Bu modül, dinamik blog yazısı içeriğinizi temsil eder. Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Lato
• Metin Boyutu: 1.1rem
• Metin Satırı Yüksekliği: 2.3em

Başlık Metni Ayarları

Başlık yazı tipini de değiştirin.

• Başlık Yazı Tipi: Alata

aralık

Ve varsayılan alt kenar boşluğunu kaldırın.

• Alt Kenar Boşluğu: 0px

CSS Sınıfı

Son olarak, gelişmiş sekmeye gidin ve aşağıdaki CSS sınıfını uygulayın:

• CSS Sınıfı: blog sonrası içerik

Sütun 1'e Kod Modülü Ekle

Başlıklar ve Paragraf İçeriği Arasındaki Boşluk için CSS Kodu Ekleyin

Başlıklar ve paragraflar arasında biraz boşluk eklemek için İçerik Sonrası Modülüne atadığımız CSS sınıfını kullanıyoruz. İçerik Sonrası Modülünün hemen altına bir Kod Modülü ekleyin ve aşağıdaki CSS kodunu modülün içine yerleştirin:

<style>
.blog-post-content p,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

2. Sütun'a Kenar Çubuğu Modülü Ekle

Düzen

Bir sonraki sütuna. Orada bir Kenar Çubuğu Modülü ekleyeceğiz. Modülün tasarım sekmesine gidin ve kenarlık ayırıcıyı gizleyin.

• Kenarlık Ayırıcısını Göster: Hayır

Başlık Metni Ayarları

Sonraki başlık yazı tipini değiştirin.

• Başlık Fontu: Alata

Gövde Metni Ayarları

Gövde yazı tipi ile birlikte.

• Gövde Yazı Tipi: Lato

Sütun 2'ye E-posta Opt Modülü Ekle

İçerik Ekle

Kenar Çubuğu Modülünün hemen altına bir E-posta Tercih Modülü ekleyeceğiz. Seçtiğiniz bir kopyayı ekleyin.

Hesap eklemek

Daha sonra e-posta hesabınızı bağlayın.

Arka Plan Rengini Kaldır

Ardından, arka plan rengini kaldırın.

Alan Ayarları

Modülün tasarım sekmesine gidin ve alan ayarlarını buna göre değiştirin:

• Alan Yazı Tipi: Lato

• Kutu Gölgesi: İlk Seçenek
• Gölge Rengi: rgba(0,0,0,0.06)

Metin Ayarları

Metin ayarlarından da metin rengini değiştiriyoruz.

• Metin Rengi: Koyu

Başlık Metni Ayarları

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

• Başlık Başlık Düzeyi: H3
• Başlık Fontu: Alata
• Başlık Metin Boyutu: 1.5rem

Düğme Ayarları

Ardından, düğmeyi şekillendireceğiz.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #ffffff
• Gradyan Rengi 1: #8995ff
• Gradyan Rengi 2: #6163b5
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 5px
• Düğme Yazı Tipi: Lato

aralık

Ve boşluk ayarlarındaki varsayılan dolgu değerlerini kaldırarak modül ayarlarını tamamlayacağız.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 0px
• Sağ Dolgu: 0px

3. Bölüm Ekle

Degrade Arka Plan

Bir sonraki ve son bölüme geçiyoruz. Aşağıdaki degrade arka planını ekleyin:

• Renk 1: #8995ff
• Renk 2: #6163b5
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 150deg

aralık

Bölümün tasarım sekmesine gidin ve varsayılan üst dolguyu kaldırın.

• Üst Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: #8995ff

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 2580 piksel

aralık

Dolgu değerlerini buna göre değiştirin:

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Ardından, bazı yuvarlak köşeler ekleyin.

• Tüm Köşeler: 20px

Kutu Gölge

Bir kutu gölgesi de ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.08)

Dönüştür Çeviri

Ve aşağıdaki transform translate değerlerini uygulayarak satır ayarlarını tamamlayacağız:

• Sağ: -100 piksel

Sütuna Yorum Modülü Ekle

Alan Ayarları

Sırada ihtiyacımız olan tek modül bir Yorum Modülü. Modülün tasarım sekmesine gidin ve alanları biçimlendirin:

• Alanlar Arka Plan Rengi: rgba(255,255,255,0.09)
• Alan Metin Rengi: #ffffff
• Alan Yazı Tipi: Lato

• Alanlar Yuvarlatılmış Köşeler: 10px (Tüm Köşeler)
• Alanlar Alt Kenar Genişliği: 5px
• Alanlar Alt Kenarlık Rengi: #ffffff

• Alanlar Kutusu Gölgesi: İlk Seçenek
• Gölge Rengi: rgba(0,0,0,0.06)

Görüntü Ayarları

Görüntü ayarlarını da değiştirin.

• Görüntü Yuvarlatılmış Köşeler: 100 piksel (Tüm Köşeler)

Metin Ayarları

Ardından, metin ayarlarında metin rengini değiştirin.

• Metin Rengi: Açık

Yorum Sayısı Metin Ayarları

Yorum sayısı metin ayarlarını da değiştiriyoruz.

• Yorum Sayısı Başlık Seviyesi: H2
• Yorum Sayısı Yazı Tipi: Alata
• Yorum Sayısı Metin Boyutu: 2rem
• Yorum Sayısı Satır Yüksekliği: 1.4em

Form Başlığı Metin Ayarları

Form başlığı metin ayarlarıyla birlikte.

• Form Başlığı Başlık Düzeyi: H3
• Form Başlığı Yazı Tipi: Alata

Meta Metin Ayarları

Ardından, meta metin ayarları.

• Meta Yazı Tipi: Alata
• Meta Metin Boyutu: 1.2rem

Yorum Metni Ayarları

Yorum metni ayarlarını da değiştireceğiz.

• Yorum Yazı Tipi: Lato
• Yorum Metin Boyutu: 1.1rem
• Yorum Satır Yüksekliği: 2em

Düğme Ayarları

Ve düğmeyi buna göre şekillendireceğiz:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.1rem
• Düğme Metin Rengi: #8995ff
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 5px

• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Lato

• Düğme Üst Dolgusu: 20px
• Düğme Alt Dolgusu: 20px

Gövde CSS'sini Yorumla

Son olarak, gelişmiş sekmesindeki yorum gövdesine aşağıdaki CSS kodu satırını uygulayarak modül ayarlarını tamamlayacağız:

margin-top: 50px;

3. Kenar Çubuğu Sütununa Yapışkan Efekt Uygulayın

Kenar Çubuğu Sütununu Aç

Blog yazısı şablonumuzun tasarımı tamamlandığına göre, Divi'nin yapışkan seçeneklerini kullanarak kenar çubuğu sütununu yapışkan hale getireceğiz. Sütun 2 ayarlarını açın.

Yapışkan Efekt Uygula

Sütunun gelişmiş sekmesine gidin ve aşağıdaki sabit ayarları uygulayın:

• Yapışkan Konum:
  • Masaüstü: En Üstte Kal
  • Tablet ve Telefon: Yapışkanlık Yapmayın
• Alt Yapışkan Limit: Satır
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

4. Kenar Çubuğunu Sol Tarafa Yerleştirin

Kenar Çubuğu Sütununu Sütun 1'in Üstüne Sürükleyin

Bunun yerine kenar çubuğunu şablonunuzun sol tarafına yerleştirmek istiyorsanız, satır ayarlarını açın ve ikinci sütunu en üste sürükleyin.

Kenar Çubuğu Sütun Kenarlığını Değiştir

Kenar çubuğunu içeren sütunu açın ve kenarlık ayarlarını buna göre değiştirin:

• Sağ Kenar Genişliği:
  • Masaüstü: 5 piksel
  • Tablet ve Telefon: 0px
• Sağ Kenar Rengi: #8995ff
• Sol Kenar Genişliği: Yok

İstenirse Sütun Tersini Uygulayın

Blog yazısı şablonunuzun sol tarafında yapışkan bir kenar çubuğu kullanmaya karar verirseniz, kenar çubuğunu daha küçük ekran boyutlarında yazı içeriğinin altına yerleştirmek isteyebilirsiniz. Bunu başarmak için, Divi'nin sütun yığınlama sırasını nasıl tersine çevireceğinize ilişkin bu Divi öğreticisindeki ikinci yaklaşımı kullanabilirsiniz.

Ö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, Divi's Theme Builder'ı kullanarak oluşturduğunuz blog yazısı şablon tasarımınızdan en iyi şekilde nasıl yararlanabileceğinizi gösterdik. Daha spesifik olarak, Divi'nin yapışkan seçenekleriyle mümkün olan yapışkan bir kenar çubuğunun nasıl ekleneceğini adım adım gösterdik. Yapışkan kenar çubuğu, ziyaretçilerinizi gönderi içeriğini okurken takip eder ve bu da onların ilgili gönderileri, e-posta seçeneğinizi veya yapışkan kenar çubuğunuza yerleştirmeye karar verdiğiniz herhangi bir şeyi görmelerini sağlar. Şablon JSON dosyasını da ücretsiz olarak indirebildiniz! 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.