Web sitenizde blog gönderilerini görüntülemenin klasik ama yaratıcı bir yolunu mu arıyorsunuz? Eğer öyleyse, bu Divi freebie'sini seveceksiniz. Web sitenizdeki tüm blog gönderilerine otomatik olarak uygulanan klasik daktilodan ilham alan bir blog yazısı şablonu tasarladık! Bu gönderi boyunca, Theme Builder'da tasarımı sıfırdan nasıl yeniden oluşturabileceğinizi adım adım göstereceğiz.

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

Daktilodan İlham Alan Blog Yazısı Şablonunu ÜCRETSİZ İndirin

Daktilodan ilham alan ücretsiz blog yazısı şablonuna el 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 Theme Builder'a giderek başlayın. Bir kez orada, yeni bir şablon ekleyin.

Tüm Gönderilerde Şablon Kullan

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

• Kullanımda: Tüm Gönderiler

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

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

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

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin 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: #fff4d8

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

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

Sınır

Ve kenarlık ekleyerek bölüm ayarlarını tamamlayın.

• Kenar Genişliği: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Kenar Rengi: #ffffff

1. Satır Ekle

Sütun Yapısı

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

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütuna Resim Modülü Ekle

Fotoğraf yükleniyor

Ardından, satırın sütununa bir Görüntü Modülü ekleyin ve seçtiğiniz bir çizimi yükleyin. Bu eğitimde kullandığımız illüstrasyon, bu eğitimin başındaki indirilebilir klasörde bulunabilir.

aralık

Modülün tasarım sekmesine gidin ve boşluk değerlerini aşağıdaki gibi değiştirin:

• Üst Kenar Boşluğu: -150px
• Sol Kenar Boşluğu: -12vw (Masaüstü), 0px (Tablet ve Telefon)

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

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

Dinamik İçerik

Satırın ilk sütununa bir Metin Modülü ekleyin ve aşağıdaki dinamik içeriği kullanın:

• Gövde: Yayınlanma Tarihinden Sonra

• Tarih Formatı: 08/06/1999 m/d/Y

Metin Ayarları

Metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Özel Elit
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 1.4rem

Metin Modülünü Üç Kez Klonla

Metin Modülünün ayarlarını tamamladıktan sonra, tüm modülü üç kez kopyalayabilirsiniz.

Dinamik İçeriği Değiştir

Yinelenen modüllerin dinamik içeriğini aşağıdaki gibi değiştirin:

• 1. Kopya: Gönderi Kategorileri
• 2. Kopya: Yazı Yazarı
• 3 Numaralı Kopya: Gönderi Yorum Sayısı
  • Sonra: Yorumlar
  • Yorum Alanına Bağlantı: Evet

Sütun 2'ye İki Metin Modülü Yerleştirin

Son iki Metin Modülünü satırın ikinci sütununa yerleştirerek devam edin,

Kategori ve Yorum Sayısının Bağlantı Metni Rengini Değiştir

Gerektiğinde bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #000000

Sütun 2'deki Modüllerin Metin Yönlendirmesini Değiştirme

Ve farklı ekran boyutlarında metin hizalamalarını değiştirerek 2. sütundaki Metin Modüllerini tamamlayın.

• Metin Hizalama: Sağ (Masaüstü), Sol (Tablet ve Telefon)

3. Satır Ekle

Sütun Yapısı

Bir sonraki sıraya! Aşağıdaki sütun yapısını kullanın:

Sütuna Metin Modülü Ekle

Dinamik İçerik

Satırın sütununa bir Metin Modülü ekleyin ve aşağıdaki dinamik içeriği kullanın:

• Gövde: Gönderi/Arşiv Başlığı

• Önce:

• Sonrasında:

H1 Metin Ayarları

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

• Başlık Yazı Tipi: Özel Elit
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 3.5rem (Masaüstü), 2.5rem (Tablet), 2rem (Telefon)
• Başlık Çizgisi Yüksekliği: 1.5em

aralık

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

• Üst Kenar Boşluğu: 150 piksel
• Alt Kenar Boşluğu: 150 piksel

Sütuna Gönderi İçeriği Modülü Ekle

Metin Ayarları

İçerik Sonrası Modülü olan bir sonraki modüle geçin. Metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Özel Elit
• Metin Boyutu: 1.2rem
• Metin Satır Yüksekliği: 2.5em

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Özel Elit
• Başlık Metni Rengi: #000000
• Başlık 2 Metin Boyutu: 2rem (H2), 1.9rem (H3), 1.8rem (H4), 1.7rem (H5), 1.6rem (H6)

CSS kimliği

Ve modüle bir CSS kimliği atayın.

• CSS Kimliği: içerik sonrası modülü

Sütuna Kod Modülü Ekle

Başlık CSS Kodu Ekle

Şimdi, farklı başlıklara bazı özel kenar boşlukları eklemek için bir Kod Modülüne aşağıdaki özel CSS'yi ekleyeceğiz:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

2. Bölüm Ekle

Arka plan rengi

Gönderi şablonuna başka bir bölüm ekleyin, bölüm ayarlarını açın ve bölümün arka plan rengini değiştirin.

• Arka Plan Rengi: #fff4d8

Sınır

Kenarlık da ekleyin.

• Kenar Genişliği: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Üst Kenar Genişliği: 0px
• Kenar Rengi: #ffffff

Yeni Satır Ekle

Sütun Yapısı

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

Sütuna Yorum Modülü Ekle

Alan Ayarları

Bu satırda ihtiyacımız olan tek modül bir Yorum Modülü. Alan ayarlarını buna göre değiştirin:

• Alanlar Arka Plan Rengi: rgba(0,0,0,0)
• Alan Metin Rengi: #000000
• Alanlar Alt Dolgusu: 50px
• Alanlar Yazı Tipi: Özel Elit
• Alanlar Metin Boyutu: 1.2rem

• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #000000

Yorum Sayısı Metin Ayarları

Yorum sayısı metin ayarları ile birlikte.

• Yorum Sayısı Başlık Seviyesi: H2
• Yorum Sayısı Yazı Tipi: Özel Elit
• Yorum Sayısı Metin Rengi: #000000
• Yorum Sayısı Metin Boyutu: 2rem

Form Başlığı Metin Ayarları

Form başlığı metin ayarlarında da bazı değişiklikler yapın.

• Form Başlığı Başlık Düzeyi: H3
• Form Başlığı Yazı Tipi: Özel Elit
• Form Başlığı Metin Rengi: #000000
• Form Başlığı Metin Boyutu: 1.5rem

Meta Metin Ayarları

Ardından, meta metin ayarlarını değiştirin.

• Meta Yazı Tipi: Özel Elit
• Meta Metin Rengi: #000000
• Meta Metin Boyutu: 1.5rem

Yorum Metni Ayarları

Yorum metni ayarlarında da bazı değişiklikler yapacağız.

• Yorum Yazı Tipi: Özel Elit
• Yorum Metin Boyutu: 1.2rem
• Yorum Satırı Yüksekliği: 2.5em

Düğme Ayarları

Düğmeyi aşağıdaki gibi şekillendirerek devam edin:

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

• Düğme Yazı Tipi: Özel Elit

Gövde CSS'sini Yorumla

Ve gelişmiş sekmesindeki yorum gövdesine bir miktar üst kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

margin-top: 100px;

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

Şablonunuzun özel blog gönderisi gövdesini oluşturduktan sonra, tüm değişiklikleri kaydedebilir ve sonucu blog gönderilerinizde 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, ücretsiz olarak indirebileceğiniz ve bir sonraki Divi projeniz için kullanabileceğiniz klasik daktilodan ilham alan bir blog yazısı şablonu paylaştık! Gönderi şablonu tasarımını da sıfırdan yeniden oluşturduk. 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.