Divi's Theme Builder ile Blog Gönderi Şablonunuzu Ekranı Nasıl Bölebilirsiniz?

Bir web sitesi oluştururken, üzerine bir blog sayfası ve blog yazıları ekleme olasılığınız yüksektir. Elbette, bir blog stratejisinin en önemli kısmı yüksek kaliteli blog yazısı içeriği oluşturmaktır, ancak bunun tasarım kısmı da stratejinizin başarısında büyük rol oynar. Divi ile bir web sitesi oluştururken, dinamik içerikli bir gönderi şablonu oluşturarak blog gönderilerinizin Divi Tema Oluşturucu'da görünme şeklini kolaylaştırabilirsiniz. Blogumuzda, süreci hızlandırmanıza yardımcı olan blog yazısı şablonlarını sürekli olarak paylaşıyoruz, ancak özellikle bölünmüş ekranlı bir blog yazısı oluşturmak istiyorsanız, bu gönderiyi seveceksiniz. Bunu nasıl yapacağınızı size adım adım göstereceğiz ve şablon 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

Bölünmüş Ekran Blog Yazısı Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz bölünmüş ekran blog yazısı şablonuna 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.

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şturucuya Git ve Yeni Gönderi Şablonu Ekle

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

Divi Theme Builder'a giderek başlayın. Bir kez orada, yeni bir şablon ekleyin.

Tüm Gönderilerde Şablon Kullan

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

• Kullanımda: Tüm Gönderiler

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

Ve şablon gövdesini oluşturmaya başlayın.

2. Blog Gönderisi Şablonu Gövdesi Oluşturun

Bölüm Ayarları

aralık

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Ayarlarını açın, tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguları 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:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100
• Min Yükseklik: 100vh (Masaüstü), Otomatik (Tablet ve Telefon)
• Maksimum Yükseklik: 100vh (Masaüstü), Yok (Tablet ve Telefon)

aralık

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

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

taşmalar

Ve satırın taşmalarını gizli olarak ayarlayın.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Sütun 1 Ayarları

Degrade Arka Plan

Ardından, sütun 1 ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #000000
• Gradyan Türü: Doğrusal
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Dinamik özellikli resmi, sonraki sütun için arka plan resmi olarak kullanıyoruz.

• Arka Plan Resmi: Öne Çıkan Resim

Sütun 2 Ayarları

aralık

Ardından, sütun 2 ayarlarını açacağız ve boşluk ayarlarına bazı özel dolgu değerleri ekleyeceğiz.

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

taşmalar

İnsanların gönderi içeriğinin ve yorum kutusunun görüneceği ikinci sütunda gezinmesine izin vermek için görünürlük ayarlarındaki dikey taşmayı değiştireceğiz.

• Dikey Taşma: Kaydır (Masaüstü), Görünür (Tablet ve Telefon)

Sütun 1'e Gönderi Başlığı Modülü Ekle

Elementler

Sütun 1'deki Gönderi Başlığı Modülü ile başlayarak modül ekleme zamanı. Öğe ayarlarında öne çıkan görüntü seçeneğini devre dışı bırakın.

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

Başlık Metni Ayarları

Tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Başlık Düzeyi: H1
• Başlık Yazı Tipi: İş Sans
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 60px (Masaüstü), 45px (Tablet), 35px (Telefon)
• Başlık Harf Aralığı: -1px
• Başlık Satırı Yüksekliği: 1.2em

Meta Metin Ayarları

Sonraki meta metin ayarlarını değiştirin.

• Meta Yazı Tipi: İş Sans
• Meta Yazı Tipi Stili: Büyük Harf
• Meta Metin Rengi: #eaeaea
• Meta Harf Aralığı: 2px

boyutlandırma

Ardından, farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: %81 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Daha sonra bazı duyarlı dolgu değerleri ekleyin.

• Üst Dolgu: %8 (Yalnızca Tablet ve Telefon)
• Alt Dolgu: %8 (Yalnızca Tablet ve Telefon)
• Sol Dolgu: %7 (Tablet), %8 (Telefon)
• Sağ Dolgu: %7 (Tablet), %8 (Telefon)

Konum

Ve konum ayarlarını aşağıdaki gibi değiştirerek modül ayarlarını tamamlayın:

• Konum: Mutlak (Masaüstü), Varsayılan (Tablet ve Telefon)
• Yer: Alt Merkez
• Dikey Ofset: %10

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

Bir sonraki sütuna. Orada, ihtiyacımız olan ilk modül bir İçerik Sonrası Modülü. Bu modül, gönderi içeriğinizi dinamik olarak görüntüler.

Başlık Metni Ayarları

Modülün başlık metni ayarlarında bazı değişiklikler yapın.

• Başlık Yazı Tipi: Work Sans
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Metni Boyutu:
  • H2: 40 piksel
  • H3: 30 piksel
  • H4: 25 piksel
  • H5: 16 piksel
  • H6: 14 piksel
• Başlık Harf Aralığı: -1px (H2, H3 & H4)

CSS Sınıfı

Ve bir CSS Sınıfı ekleyin. Bu öğreticinin sonraki adımında, başlıklar ve paragraflar arasında biraz boşluk oluşturmak için bu CSS sınıfını kullanacağız.

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

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

Paragraflar ve Başlıklar Arasındaki Boşluk için CSS Kodu Ekleyin

İçerik Sonrası Modülünün hemen altına bir Kod Modülü ekleyin ve başlıklar ve paragraflar arasında boşluk oluşturmak için aşağıdaki CSS kod satırlarını ekleyin:

<style>
.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>

Sütun 2'ye Yorum Modülü Ekle

Alan Ayarları

Bu öğreticiyi tamamlamak için sütun 2'de ihtiyacımız olan sonraki ve son modül bir Yorum Modülüdür. Modülün alan ayarlarını uygun şekilde değiştirin:

• Alanlar Arka Plan Rengi: #ffffff
• Alan Metin Rengi: #000000
• Alanlar Üst Dolgusu: 30px
• Alanlar Alt Dolgusu: 30px
• Alanlar Sol Dolgu: 30px
• Alanlar Sağ Doldurma: 30px
• Fields Yazı Tipi: Work Sans

• Alanlar Yazı Tipi Stili: Büyük Harf
• Alanlar Metin Boyutu: 15px
• Alanlar Harf Aralığı: 3px
• Alanlar Yuvarlatılmış Köşeler: 10px (Tüm Köşeler)

• Fields Box Gölge Bulanıklığı Gücü: 30px
• Alan Kutusu Gölge Rengi: rgba(0,0,0,0.06)

Yorum Sayısı Metin Ayarları

Ardından, yorum sayısı metin ayarlarını değiştirin.

• Yorum Sayısı Yazı Tipi: İş Sans
• Yorum Sayısı Yazı Tipi Ağırlığı: Kalın

Form Başlığı Metin Ayarları

Form başlığı metin ayarlarını da değiştirin.

• Form Başlığı Başlık Düzeyi: H3
• Form Başlığı Yazı Tipi: Work Sans
• Form Başlığı Yazı Tipi Ağırlığı: Yarı Kalın

Meta Metin Ayarları

Sırada, meta metin ayarlarında bazı değişiklikler yapacağız.

• Meta Yazı Tipi: İş Sans
• Meta Yazı Tipi Ağırlığı: Yarı Kalın
• Meta Metin Rengi: #000000

Düğme Ayarları

Ardından, düğmeyi buna göre şekillendireceğiz:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel

• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: İş Sans
• Düğme Yazı Tipi Stili: Büyük Harf

• Düğme Üst Dolgusu: %2
• Düğme Alt Dolgusu: %2
• Alt Sol Dolgu: %5
• Düğme Sağ Doldurma: %5

aralık

Biz de biraz üst kenar boşluğu ekleyeceğiz.

• Üst Marj: %15

Gövde CSS'sini Yorumla

Ve gelişmiş sekmesinde modülün yorum gövdesine bir satır CSS kodu ekleyerek modül ayarlarını tamamlayacağız.

margin-top: 50px

3. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Blog gönderisi şablonunu tamamladığımıza göre, geriye kalan tek şey Divi Theme Builder'daki tüm değişiklikleri kaydetmek ve sonucu blog gönderilerimizde görüntülemek!

Ö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 web siteniz için bir blog gönderisi şablonu oluşturma konusunda size farklı bir yaklaşım gösterdik. Daha spesifik olarak, Divi's Theme Builder ve dinamik içeriği kullanarak bölünmüş ekranlı bir blog yazısı şablonu tasarımının nasıl oluşturulacağını gösterdik. Bu süreçte size adım adım rehberlik ettik ve ücretsiz olarak indirebileceğiniz bir JSON dosyası ekledik! 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.