Divi ile Blog Gönderi Şablonunuz için Dinamik Yazar Kutusu Nasıl Tasarlanır
Yayınlanan: 2020-01-13Blog yazılarınızda yazı yazarından bahsetmek çok önemlidir. Artık Divi's Theme Builder ile gönderilerinize site çapında dinamik bir yazar kutusu ekleyebilirsiniz. Divi'nin yerleşik seçeneklerini kullanarak yazar kutusunu da şekillendirebilirsiniz, bu güzel web tasarımına yol açabilir. Bu eğitimde, gönderi şablonunuzun içinde güzel bir dinamik yazar kutusunu nasıl tasarlayacağınızı tam olarak göstereceğiz. Gönderi şablonu 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
ÜCRETSİZ Gönderi Şablonunu İndirin
Ellerinizi ücretsiz gönderi ş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.
Ü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.
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ı
Arka plan rengi
Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.
- Arka Plan Rengi: #270fff
Arka plan görüntüsü
Bu gönderinin başında indirebildiğiniz sıkıştırılmış klasörde bulabileceğiniz arka plan resmini yükleyin.
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:
boyutlandırma
Satır ayarlarını açın ve boyutlandırma ayarlarında maksimum genişliği değiştirin.
- Maksimum Genişlik: 1380 piksel
Sütuna Yazı Başlığı Modülü Ekle
Elementler
Bu satırda ihtiyacımız olan tek modül Post Title Module. Öğe ayarlarında gönderinin öne çıkan resmini devre dışı bırakıyoruz.
- Öne Çıkan Resmi Göster: Hayır
Metin Ayarları
Modülün tasarım sekmesine gidin ve genel metin ayarlarında metin rengini değiştirin.
- Metin Rengi: Açık
Başlık Metni Ayarları
Sonraki başlık metni ayarlarını değiştirin.
- Başlık Yazı Tipi: İş Sans
- Başlık Metin Boyutu: 7rem (Masaüstü), 4rem (Tablet), 2rem (Telefon)
- Başlık Harf Aralığı: -2px
Meta Metin Ayarları
Meta metin ayarlarıyla birlikte.
- Meta Yazı Tipi: İş Sans
- Meta Metin Boyutu: 1rem
Yeni Bölüm Ekle
aralık
Şablon gövdenize yeni bir normal bölüm ekleyin, bölüm ayarlarını açın ve tüm 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 bölüme yeni bir satır ekleyerek devam edin:
boyutlandırma
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
- Maksimum Genişlik: 1380 piksel
aralık
Tüm varsayılan üst dolguyu da kaldırın.
- Üst Dolgu: 0px
Sütun 1 Ayarları
aralık
Ardından, sütun 1 ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 200px (Masaüstü), 50px (Tablet), 20px (Telefon)
- Alt Dolgu: 200px (Masaüstü), 50px (Tablet), 20px (Telefon)
- Sol Dolgu: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
- Sağ Doldurma: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
Kutu Gölge
İlk sütuna da bir kutu gölgesi ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 60px
- Gölge Rengi: rgba(0,0,0,0.09)
Sütun 1'e Gönderi İçeriği Modülü Ekle
Metin Ayarları
Modül eklemeye başlama zamanı! İçerik Sonrası Modülünü 1. sütuna yerleştirin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: İş Sans
- Metin Boyutu: 1rem (Masaüstü), 0.9rem (Tablet ve Telefon)
- Metin Satırı Yüksekliği: 2.3em
Başlık Metni Ayarları
Farklı başlık metni ayarlarını da değiştirin.
- Başlık Yazı Tipi: Work Sans
- Başlık 2 Metin Boyutu: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
- Başlık Çizgisi Yüksekliği: 1.3em
CSS kimliği
Bir CSS kimliği ekleyerek modülün ayarlarını tamamlayın.
- CSS Kimliği: blog sonrası içerik
Sütun 1'e Kod Modülü Ekle
Başlık CSS Kodu Ekle
Farklı gönderi içeriği öğeleri arasına biraz boşluk eklemek için 1. sütuna bir Kod Modülü ekleyeceğiz ve aşağıdaki CSS kodu satırlarını ekleyeceğiz:
<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}
#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
2. Sütun'a Kişi Modülü Ekle
Dinamik İçerik
İkinci sütunda ihtiyacımız olan tek modül bir Kişi Modülüdür. Aşağıdaki dinamik içeriği seçeceğiz:
- İsim: Yazı Yazarı
- Pozisyon: Yazar
- Gövde: Yazar Biyografisi
Görüntü Dinamik İçeriği
Modüle yazarın dinamik profil resmini de ekleyin.
- Resim: Yazar Profil Resmi
Vurgulu Arka Plan Rengi
Ardından, üzerine gelindiğinde beyaz bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffffff
Başlık Metni Ayarları
Modülün tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:
- Başlık Başlık Düzeyi: H3
- Başlık Yazı Tipi: İş Sans
- Başlık Metin Boyutu: 1.1rem
Gövde Metni Ayarları
Gövde metni ayarlarını da değiştirin.
- Gövde Yazı Tipi: İş Sans
- Gövde Metin Boyutu: 0.9rem
- Gövde Çizgisi Yüksekliği: 2em
Konum Metni Ayarları
Ardından, konum yazı tipi metin ayarlarını değiştirin.
- Pozisyon Yazı Tipi: İş Sans
- Konum Metin Boyutu: 0.9rem
Varsayılan Boyutlandırma
Boyutlandırma ayarlarında yüksekliği değiştirin.
- Yükseklik: 160 piksel (Masaüstü), otomatik (Tablet ve Telefon)
Hover Boyutlandırma
Ve fareyle üzerine gelindiğinde yüksekliği otomatik olarak geri getirin.
- Yükseklik: otomatik
aralık
Ardından, özel dolgu kullanarak modülün etrafına biraz boşluk ekliyoruz.
- Üst Dolgu: 50px
- Alt Dolgu: 50px
- Sol Dolgu: 50px
- Sağ Dolgu: 50px
Varsayılan Kenarlık
Ve biz de bir sınır kullanacağız.
- Sol Kenar Genişliği: 0px (Masaüstü), 4px (Tablet ve Telefon)
- Sol Kenar Rengi: #270fff
fareyle üzerine gelin
Fareyle üzerine gelindiğinde kenarlık genişliğini değiştirin.
- Sol Kenar Genişliği: 4px
Varsayılan Kutu Gölgesi
Ardından, bir kutu gölgesi ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 60px
- Gölge Rengi: rgba(0,0,0,0) (Masaüstü), rgba(0,0,0,0.11) (Tablet ve Telefon)
Vurgulu Kutu Gölgesi
Üzerine gelindiğinde gölge rengini değiştirin.
- Gölge Rengi: rgba(0,0,0,0.11)
Varsayılan Filtreler
Devam ederek, opaklığı değiştireceğiz.
- Opaklık: %41 (Masaüstü), %100 (Tablet ve Telefon)
Hover Filtreleri
Üzerine gelindiğinde opaklığı %100'e getirin.
- Opaklık: %100
Ana Eleman CSS
Bu gönderinin önizlemesinde fark edebildiğiniz yapışkan efekti eklemek için modülün ana öğesine birkaç satır özel CSS ekleyeceğiz.
position: sticky; position: -webkit-sticky; top: 50px !important;
Üye Resmi CSS
Modülün üye resmine tek bir CSS kodu satırı ekleyerek yazar profil resminin sola hizalı olduğundan emin oluyoruz.
text-align: left;
Varsayılan Görünürlük
Modülün içeriğini masaüstünde gizlemek için gelişmiş sekmesindeki taşmaları değiştireceğiz.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Fareyle Görünürlük
Taşmaları görünür olarak değiştirerek içeriğin üzerine gelindiğinde görünmesini sağlayacağız.
- Yatay Taşma: Görünür
- Dikey Taşma: Görünür
Yeni Bölüm Ekle
Tasarımınıza başka bir bölüm ekleyin.
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:
boyutlandırma
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: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Maksimum Genişlik: 1380 piksel
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ı aşağıdaki gibi değiştirin:
- Alanlar Arka Plan Rengi: #ffffff
- Alan Üst Dolgusu: 20px
- Alanlar Alt Dolgusu: 20px
- Fields Yazı Tipi: Work Sans
- Alanlar Metin Boyutu: 1rem
Yorum Sayısı Metin Ayarları
Yorum sayısı metin ayarlarını da değiştirin.
- Yorum Sayısı Başlık Seviyesi: H2
- Yorum Sayısı Yazı Tipi: İş Sans
- Yorum Sayısı Metin Boyutu: 1.5rem
Form Başlığı Metin Ayarları
Ardından, form başlığı metin ayarlarını değiştirin.
- Form Başlığı Başlık Düzeyi: H3
- Form Başlığı Yazı Tipi: Work Sans
- Form Başlığı Metin Boyutu: 1.2rem
Meta Metin Ayarları
Meta metin ayarlarını da değiştirin.
- Meta Yazı Tipi: İş Sans
- Meta Metin Boyutu: 1rem
Yorum Metni Ayarları
Yorum metni ayarlarını da değiştiriyoruz.
- Yorum Yazı Tipi: İş Sans
- Yorum Metin Boyutu: 1rem
- Yorum Satırı Yüksekliği: 2.3em
Düğme Ayarları
Düğmeyi şekillendirerek modülün ayarlarını tamamlayın.
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Boyutu: 1rem
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #270fff
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 0px
- Düğme Yazı Tipi: İş Sans
3. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle
Şablonu tamamladıktan sonra tüm değişiklikleri kaydettiğinizden emin olun, Tema Oluşturucu'dan çıkın ve sonuçları gönderilerinizde görüntüleyin!
Ö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'nin yerleşik seçeneklerini, dinamik özelliğini ve Tema Oluşturucu'yu kullanarak güzel bir dinamik yazar kutusunu nasıl tasarlayacağınızı gösterdik. Bu üç şey bir araya geldiğinde, blog gönderisi şablonunuzu özelleştirmek ve gönderi yazarına yaratıcı bir şekilde atıfta bulunmak artık hiç olmadığı kadar kolay. 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.