Divi ile ÜCRETSİZ İki Taraflı Kenar Çubuğu Blog Gönderisi Şablonu İndirin

Kenar çubukları uzun süredir var olmasına rağmen, web'de hala sıklıkla kullanılmaktadır. Asıl gönderi içeriği olan ana odağı ihmal etmeden, önerilen gönderiler ve e-posta tercih formları gibi gönderiye bağlı farklı öğeleri göstermeye yardımcı olurlar. Şimdi, Divi's Theme Builder ile blog yazısı şablonunuzu oluşturmanın tonlarca yolu var. Bu öğreticide, gönderi şablonunuza iki taraflı bir kenar çubuğunu nasıl ekleyeceğinizi göstereceğiz. 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

Youtube Kanalımıza Abone Olun

ÜCRETSİZ Blog Gönderisi Şablonunu İndirin

Ellerinizi ücretsiz blog yazısı şablonuna koymak için önce aşağıdaki düğmeyi kullanarak 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.

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!

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

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

Divi Tema Oluşturucunuza giderek başlayın. Bir kez orada, yeni bir şablon ekleyin.

Tüm Gönderilerde Şablon Kullan

Bu yeni şablonu tüm gönderilerde kullanıyoruz.

• Kullanımda: Tüm Gönderiler

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

Öyleyse, şablon gövdesini oluşturmaya başlayın.

2. Blog Gönderisi Gövdesini Oluşturmaya Başlayın

Yeni Bölüm Ekle

Arka plan rengi

Divi Theme Builder'ın içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f4f4f4

aralık

Bölümün boşluk değerlerini farklı ekran boyutlarında da değiştirin.

• Üst Dolgu: 50px (Masaüstü), 20px (Tablet), 10px (Telefon)
• Alt Dolgu: 50px (Masaüstü), 20px (Tablet), 10px (Telefon)

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: %100
• Maksimum Genişlik: %95

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

2. sütun

Arka plan rengi

Ardından, sütun 2 ayarlarını açın ve arka plan rengini beyaz olarak değiştirin.

• Arka Plan Rengi: #ffffff

Kutu Gölge

Sütuna bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -21px
• Gölge Rengi: rgba(0,0,0,0.08)

Sütun 2'ye Görüntü Modülü Ekle

Dinamik İçerik

Modül eklemeye başlama zamanı! İkinci sütunda, bir Görüntü Modülü ile başlayarak blog gönderisinin kendisiyle ilgili tüm modülleri yerleştireceğiz. Öne çıkan görsel dinamik içeriğini kullanın.

• Resim: Öne Çıkan Resim

boyutlandırma

Ardından modülün tasarım sekmesine geçin ve Görüntü Modülünü tam genişlikte zorlayın.

• Tam Genişliği Zorla: Evet

Sütun 2'ye Gönderi Başlığı Modülü Ekle

Elementler

Yazı Başlığı Modülü olan ikinci modüle geçiyoruz. Öğe ayarlarında öne çıkan görüntüyü devre dışı bırakın.

• Öne Çıkan Resmi Göster: Hayır

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Oksijen
• Başlık Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Başlık Satırı Yüksekliği: 1.2em

Meta Metin Ayarları

Sonraki meta metin ayarlarında bazı değişiklikler yapın.

• Meta Yazı Tipi: Açık Sans
• Meta Metin Rengi: #ffc023
• Meta Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

aralık

Boşluk değerlerini de değiştirin.

• Üst Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: 4vw
• Sağ Kenar Boşluğu: 4vw

Başlık CSS'si

Ve gelişmiş sekmesinde başlığın CSS öğesine bir miktar alt kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

margin-bottom: 20px;

Sütun 2'ye Gönderi İçeriği Modülü Ekle

Metin Ayarları

Tüm dinamik blog gönderi içeriğinizi içeren İçerik Sonrası Modülü olan bir sonraki modüle geçin. Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.9vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)
• Metin Satırı Yüksekliği: 2.2em

Başlık Metni Ayarları

Ardından, başlık metni ayarlarında da bazı değişiklikler yapın.

• Başlık Yazı Tipi: Oksijen
• H2 Metin Boyutu: 1.5vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• H3, H4, H5 ve H6 Metin Boyutu: 1.3vw (Masaüstü), 2.5vw (Tablet), 3.5vw (Telefon)

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de kullanıyoruz.

• Sol Kenar Boşluğu: 4vw
• Sağ Kenar Boşluğu: 4vw
• Üst Dolgu: 50px
• Alt Dolgu: 100px

CSS Sınıfı

Bir CSS sınıfı ekleyerek modülün ayarlarını tamamlayın. Bu öğreticinin sonraki bölümünde, başlıklara ve paragraflara biraz boşluk eklemek için bu CSS sınıfını kullanacağız.

• içerik sonrası boşluk

2. Sütun'a Kod Modülü Ekle

CSS Kodu Ekle

Bu yazının önceki adımında belirtildiği gibi, başlıklar ve paragraflar arasına boşluk eklemek için bazı özel CSS kullanacağız. Bunun için 2. sütunda bir Kod Modülü kullanacağız. Aşağıdaki CSS kod satırlarını ekleyin:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

E-posta Opt Modülünü Sütun 3'e Ekle

İçerik Ekle

Kenar çubuğu öğelerini eklemeye başlama zamanı! İstediğiniz modülü ekleyebilirsiniz. Sütun 3'te bir E-posta Tercih Modülü ile başlayacağız. Seçtiğiniz bir kopyayı kullanın.

E-posta hesabı

Modüle bir e-posta hesabı bağlayarak devam edin.

Alanlar

Ardından, alan ayarlarında soyadı alanını devre dışı bırakın.

• Soyadı Alanını Göster: Hayır

Arka plan rengi

Arka plan rengini buna göre değiştirin:

• Arka Plan Rengi: #ffc023

Alan Ayarları

Modülün tasarım sekmesine gidin ve alan ayarlarını aşağıdaki gibi değiştirin:

• Fields Yazı Tipi: Açık Sans
• Alanlar Metin Boyutu: 0.8vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)

Başlık Metni Ayarları

Başlık metni ayarlarında da bazı değişiklikler yapın.

• Başlık Yazı Tipi: Oksijen
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Başlık Satırı Yüksekliği: 1.5em

Düğme Ayarları

Düğmeyi şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffc023
• Düğme Arka Plan Rengi: #f4f4f4
• Düğme Kenar Genişliği: 0px

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

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

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek modül ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -21px
• Gölge Rengi: rgba(0,0,0,0.08)

3. Sütun'a Sosyal Medya Takip Modülü Ekleyin

Seçtiğiniz Sosyal Ağları Ekleyin

3. sütunda ihtiyacımız olan bir sonraki modül bir Sosyal Medya Takip Modülü. Seçtiğiniz bazı sosyal ağları ekleyin.

Sosyal Ağ Stillerini Tek Tek Sıfırla

Her sosyal ağ için öğe stillerini ayrı ayrı sıfırlayarak devam edin.

Simge Ayarları

Ardından genel modül ayarlarına geri dönün ve simge rengini değiştirin.

• Simge Rengi: #ffc023

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

Elementler

1. sütunda eklediğimiz tek modül bir Blog Modülü. Öğe ayarlarında yazarı devre dışı bırakın.

• Yazarı Göster: Hayır

Düzen

Ardından modülün tasarım sekmesine gidin ve düzeni değiştirin.

• Düzen: Izgara

Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

• Başlık Yazı Tipi: Oksijen
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Başlık Satırı Yüksekliği: 1.5em

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Boyutu: 0.7vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2.2em

Meta Metin Ayarları

Ardından, meta metin ayarlarını buna göre biçimlendirin:

• Meta Yazı Tipi: Açık Sans
• Meta Metin Rengi: #ffc023
• Meta Metin Boyutu: 0.8vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)

Sınır

Modülün varsayılan kenarlığını da kaldırın.

• Izgara Düzeni Kenarlık Genişliği: 0px

Kutu Gölge

Ve ince bir kutu gölgesi kullanın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -21px
• Gölge Rengi: rgba(0,0,0,0.08)

görünürlük

Şimdi, birisi gönderiyi masaüstünde görüntülediğinde Blog Modülünün 1. sütunda görünmesini istiyoruz. Ancak daha küçük ekran boyutlarında gönderi içeriğinin önce gelmesini istiyoruz. Bu yüzden tüm modülü tablet ve telefonda saklayacağız.

Blog Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir

Ardından Blog Modülünü klonlayacağız ve kopyayı üçüncü sütuna yerleştireceğiz.

Görünürlüğü Değiştir

Bu modülün yalnızca daha küçük cihazlarda sütun 3'te görünmesini istiyoruz, bu yüzden tüm modülü masaüstünde gizleyeceğiz.

3. Tüm Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Blog yazısı şablonunu tamamladığınızda (bir Yorum Modülü de eklediğinizden emin olun!), tüm Tema Oluşturucu değişikliklerini kaydedebilir ve sonucu web sitenizde görüntüleyebilirsiniz!

Ö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 blog gönderi şablonunuza nasıl iki taraflı kenar çubuğu ekleyeceğinizi gösterdik. Dahası, gelecekteki projeler için ihtiyaç duymanız durumunda onu yakınınızda tutabilmeniz için mizanpajın JSON dosyasını ücretsiz olarak paylaştık! Herhangi bir sorunuz 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.