Divi ile Dinamik Olarak Basit Bir UX Dostu Blog Gönderisi Şablonu Nasıl Oluşturulur

Web sitenizde yeni blog gönderileri paylaşırken, ziyaretçileriniz için okuma deneyimini olabildiğince kolay hale getirmek önemlidir. Bu, web sitenizdeki markayla eşleşmeye devam ederken mümkün olduğunca çok dikkat dağıtıcı şeyden kurtulmak anlamına gelir. Ziyaretçilerin metin boyutunu tarayıcıları aracılığıyla kontrol etmelerine izin vermek de önemlidir, işte bu noktada ilgili rem yazı tipi birimi kullanışlı olur. İnsanların tarayıcılarında görüntülenen yazı tipinin boyutunu ayarlamasına olanak tanır. Bu eğitimde, kullanıcı deneyimini büyük ölçüde hesaba katan güzel ve basit bir blog yazısı şablonu oluşturacağız. 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

Basit Kullanıcı Deneyimi Dostu Blog Yazısı Şablonunu ÜCRETSİZ İndirin

Ücretsiz, basit UX dostu 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!

Youtube Kanalımıza Abone Olun

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

Divi Theme Builder'a gidin

Divi Theme Builder'a giderek başlayın.

Yeni Şablon Oluştur

Yeni bir şablon oluşturun ve tüm gönderilerinizde kullanın.

• Kullanımda: Tüm Gönderiler

2. Blog Yazısı Gövdesi Oluşturmaya Başlayın

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

1. Satırı Mevcut Bölüme Ekle

Sütun Yapısı

Şablon düzenleyicinin içinde, aşağıdaki sütun yapısını kullanarak zaten orada olan bölüme yeni bir satır ekleyin:

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 1 ve 2 Kenarlığı

Sonraki birinci ve ikinci sütuna bir sağ kenarlık ekleyin.

• Sağ Kenar Genişliği: 1px (Masaüstü), 0px (Tablet & Telefon)
• Sağ Kenar Rengi: #333333

Her Sütuna Metin Modülü Ekleyin

Dinamik İçerik

Her sütuna bir Metin Modülü ekleyerek devam edin ve her modül için ayrı ayrı dinamik içerik seçin.

• 1. Sütundaki Metin Modülü: Yazı Kategorileri

• 2. Sütundaki Metin Modülü: Yayınlama Sonrası Tarihi

• 3. Sütundaki Metin Modülü: Yorum Gönderi Sayısı
• Sonra: Yorumlar

Metin Ayarları

Her 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 Harf Aralığı: 1px
• Metin Satır Yüksekliği: 2em

2. 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 Metin Modülü #1 Ekle

Dinamik İçerik

Bir Metin Modülü ekleyin ve gönderi başlığı dinamik içeriğini seçin.

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

• Önce: <H1>
• Sonra: </H1>

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: Playfair Ekranı
• Başlık Metni Hizalama: Orta
• Başlık Metni Boyutu: 6.2rem (Masaüstü), 3.2rem (Tablet), 2.3rem (Telefon)

aralık

Daha sonra bazı özel üst ve alt kenar boşlukları ekleyin.

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

Sütuna Metin Modülü #2 Ekle

Dinamik İçerik

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve alıntı sonrası dinamik içeriği seçin.

• Dinamik İçerik: Alıntı Gönder

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Lato
• Metin Boyutu: 1.1rem
• Metin Harf Aralığı: 1px
• Metin Satır Yüksekliği: 2em
• Metin Hizalama: Merkez

3. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

Görüntülemek

Satırın ana öğesine bir satır CSS kodu ekleyerek sütunların yan yana kaldığından emin olun.

display: flex;

Sütun 1'e Görüntü Modülü Ekle

Dinamik İçerik

Sütun 1'e bir Görüntü Modülü ekleyerek devam edin ve yazar profil resmi dinamik içeriğini seçin.

• Dinamik İçerik: Yazar Profil Resmi

hizalama

Modülün tasarım sekmesine gidin ve görüntü hizalamasını değiştirin.

• Görüntü Hizalama: Sağ

boyutlandırma

Sonraki genişliği değiştirin.

• Genişlik: 50 piksel

aralık

Tablet ve telefonda biraz sağ kenar boşluğu ekleyin.

• Sağ Kenar Boşluğu: 20px (Tablet ve Telefon)

Sınır

Ve sınır ayarlarına bir miktar sınır yarıçapı ekleyerek modülün ayarlarını tamamlayın.

• Tüm Köşeler: 100 piksel

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

Dinamik İçerik

İkinci sütunda bir Metin Modülüne ihtiyacımız olacak. Gönderi yazarı dinamik içeriğini seçin.

• Dinamik İçerik: Yazı Yazarı

Metin Ayarları

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

• Metin Yazı Tipi: Lato
• Metin Boyutu: 1.1rem
• Metin Harf Aralığı: 1px

aralık

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

• Üst Kenar Boşluğu: 15px
• Sol Kenar Boşluğu: 20px (Tablet ve Telefon)

4. Satırı Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

Sütuna Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Sütuna bir Metin Modülü ekleyin ve içerik kutusunu boş bıraktığınızdan emin olun.

Dinamik Arka Plan Resmi

Öne çıkan görüntü dinamik içeriğini, daha sonra modülün arka plan görüntüsüne ekleyin.

• Dinamik İçerik: Öne Çıkan Resim

boyutlandırma

Modülün boyutlandırma ayarlarını farklı ekran boyutlarında değiştirerek devam edin.

• Genişlik: 800 piksel (Masaüstü), 500 piksel (Tablet), 300 piksel (Telefon)
• Modül Hizalaması: Merkez

aralık

Farklı ekran boyutlarına da bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 400 piksel (Masaüstü), 250 piksel (Tablet), 150 piksel (Telefon)
• Alt Dolgu: 400 piksel (Masaüstü), 250 piksel (Tablet), 150 piksel (Telefon)

Sınır

Modülü bir daireye dönüştürmek için sınır ayarlarına biraz sınır yarıçapı ekleyin.

• Tüm Köşeler: 500px

Yeni Bölüm Ekle

Bir sonraki normal bölüme.

1. Satır Ekle

Sütun Yapısı

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

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

Metin Ayarları

İçerik Sonrası Modülünü sütuna ekleyin, modülün tasarım sekmesine geçin ve metin ayarlarını buna göre değiştirin:

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

Başlık Metni Ayarları

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

• Başlık Yazı Tipi: Playfair Ekranı
• H2 Metin Boyutu: 3.5rem (Masaüstü), 2rem (Tablet ve Telefon)
• H3 Metin Boyutu: 2.5rem (Masaüstü), 1.5rem (Tablet ve Telefon)
• H4 Metin Boyutu: 2.3rem (Masaüstü), 1.3rem (Tablet ve Telefon)
• H5 ve H6 Metin Boyutu: 2rem (Masaüstü), 1rem (Tablet ve Telefon)

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

aralık

Satıra bazı özel üst kenar boşluğu ekleyin.

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

Sütuna Yorum Modülü Ekle

Alan Ayarları

Bu satırda ihtiyacımız olan tek modül Yorum Modülü. Alan ayarlarını aşağıdaki gibi değiştirin:

• Alanlar Arka Plan Rengi: #ffffff
• Alan Yazı Tipi: Lato
• Alanlar Metin Boyutu: 1.1rem

• Tüm Köşeler: 0px
• Alanlar Kenarlık Genişliği: 1px
• Alan Kenarlık Rengi: #000000

Görüntü Ayarları

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

• Tüm Köşeler: 100 piksel

Başlık Metni Ayarları

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

• Başlık Başlık Düzeyi: H2
• Başlık Yazı Tipi: Playfair Gösterimi
• Başlık Metin Boyutu: 3rem (Masaüstü), 2rem (Tablet ve Telefon)
• Başlık Satırı Yüksekliği: 1.4em

Meta Metin Ayarları

Meta metni de stillendirin.

• Meta Yazı Tipi: Playfair Ekranı
• Meta Metin Boyutu: 1.4rem

Yorum Metni Ayarları

Yorum metni ayarları için aşağıdaki ayarları kullanıyoruz:

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

Düğme Metin Ayarları

Düğmeyi aşağıdaki gibi şekillendirerek modülün ayarlarını tamamlayın:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.1rem
• 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ı: 0px
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Lato

• Üst Dolgu: 20px
• Alt Dolgu: 20px

3. Şablonu ve Tema Oluşturucu Değişikliklerini Kaydet

Şablon tasarımını tamamladıktan sonra, tüm Divi Tema Oluşturucu değişikliklerini kaydedin ve sonucu gönderilerinizde önizleyin!

Ö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, ziyaretçilerinizin okurken yaşadığı kullanıcı deneyimine odaklanan güzel ve basit bir blog yazısı şablonunu nasıl oluşturacağınızı gösterdik. Bu gönderi şablonunu, Divi'nin yerleşik seçeneklerini kullanarak web sitenizin markasıyla eşleştirmek için değiştirin. Ş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.