Divi's Theme Builder ile Yazar Sayfası Şablonu Nasıl Oluşturulur

Yazar sayfalarını özelleştirmek eskiden zordu. Divi Theme Builder ile bu artık bir sorun değil. Yalnızca yazar sayfalarını değil, kategori sayfalarını, arama sonuçları sayfalarını ve daha fazlasını da kişiselleştirebilirsiniz. Bu gönderide, Divi's Theme Builder ile dinamik bir yazar sayfası şablonunun nasıl oluşturulacağını göstereceğiz.

Divi Theme Builder içinde bu düzeni yeniden oluşturduğunuzda, dinamik içerik kullanacaksınız, böylece tüm yazar sayfaları aynı anda etkilenecek ve içeriği yazara özgü yerinde tutar. Tek yapmanız gereken, tüm yazarların güncel bilgilere sahip olduğundan emin olmaktır. İyi Gravatar görüntüleri yoksa, daha fazla kontrole sahip olmak için WP Kullanıcı Avatar Eklentisini indirmenizi öneririz. Şablonun JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Tema Oluşturucu içinde yazar sayfası şablonunu yeniden oluşturmaya başlamadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım. Şablonu oluştururken, şablon düzenleyicide tasarım biraz farklı görünecektir. Biri şablon düzenleyiciye, diğeri canlı önizlemeye sahip iki pencere açmanızı öneririz.

masaüstü

Mobil

Karşılama Yazar Sayfasını ÜCRETSİZ İndirin

Ellerinizi ücretsiz yazar sayfası ş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. Kullanıcıyı Güncelle

Yazar Resimlerini Optimize Edin

WP Kullanıcı Avatar Eklentisi Ekle

WordPress'inize bir yazar eklendiğinde, sistem otomatik olarak bir Gravatar görüntüsü çeker. Bazı yazarların Gravatar hesabı yok veya görsel sitenizle eşleşmiyor. WP Kullanıcı Avatar Eklentisini kullanmak size daha fazla kontrol sağlayacaktır.

Yazar Bilgilerini Tamamlayın

Aşağıdaki tüm yazar bilgilerinin dahil edildiğinden emin olun:

• İsim ve soyisim
• Ekran adı
• Yazar Biyografisi
• Yazar Resmi

2. Tema Oluşturucuda Düzeni Yeniden Oluşturun

Tema Oluşturucuyu Aç

Yazar sayfası şablonunu yeniden oluşturmanın ilk adımı Tema Oluşturucu'yu açmak ve yeni bir şablon eklemektir. Arşiv Sayfaları bölümünün altındaki “Tüm Yazar Sayfaları”nı seçin ve mavi “Şablon Oluştur” düğmesine tıklayın.

Özel Gövde Oluştur

Yeni şablon oluşturulduktan sonra, şablon düzenleyiciye girmek için "Özel Gövde Ekle"ye tıklayın.

Bölüm 1 Ayarlar

aralık

Düzeni oluşturma zamanı! Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bölümü açın ve boşluk değerlerini aşağıdaki gibi değiştirin:

• Üst Dolgu
  • Masaüstü: 300 piksel
  • Tablet ve Telefon: 50px
• Alt Dolgu
  • Masaüstü: 0 piksel

Sınır

Bölüme de bir alt kenarlık ekleyin.

• Kenarlık Stilleri: Alt Kenarlık
• Genişlik: 2 piksel
• Renk: Siyah #000000

1. Satır Ekle

Sütun Yapısı

Şimdi aşağıdaki sütun yapısına sahip bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırmayı aşağıdaki gibi değiştirin:

• Genişlik
  • Masaüstü: 1580 piksel
  • Tablet ve Telefon: otomatik
• Maksimum genişlik
  • Masaüstü: %90
  • Tablet ve Telefon: %80

aralık

Sonraki boşluk ayarlarını değiştirin.

• Sol Kenar Boşluğu: otomatik
• Sağ Kenar Boşluğu: 79px
• Sağ Dolgu: 0px

Özel CSS

Son olarak, satırın ana öğesinde iki satır CSS kodu kullanarak tüm sütun içeriğini hizalayın.

• Ana Eleman
  • Masaüstü: ekran: esnek; hizalama öğeleri: merkez;

display: flex;
align-items: center;

• • Tablet ve Telefon: ekran: blok;

display: block;

Metin Modülü 1'i Sütun 1'e ekleyin

İçerik Metni

Sütun 1'deki bir metin modülüyle başlayarak modül ekleme zamanı. Doğru dinamik içeriği bağlayın.

• Gövde: Dinamik İçerik – Yazı Yazarı
• Önce: <h1>
• Sonra: <h1>
• Ad Biçimi: Ad ve Soyadı

Başlık Metni

Ardından, başlık metnini aşağıdaki gibi biçimlendirin:

• Başlık Seviyesi: H1
• Yazı Tipi: Kron Bir
• Ağırlık: Kalın
• stil: TT
• Renk: Siyah #000000
• Boy
  • Masaüstü: 90 piksel
  • Tablet: 60 piksel
  • Telefon: 50 piksel

aralık

Bazı duyarlı boşluk değerleri de ekleyin.

• Alt Kenar Boşluğu
  • Masaüstü: -43 piksel
  • Tablet: -33 piksel
  • Telefon: -27px
• Üst Dolgu: 19px
• Alt Dolgu: 0px

Metin Modülü 2'yi Sütun 1'e ekleyin

İçerik Metni

Başka bir metin modülü olan bir sonraki modüle geçin. Yazarın biyo dinamik içeriğini ekleyin.

• Gövde: Dinamik İçerik – Yazar Biyografisi

Metin

Ardından, tasarım sekmesinde metne stil verin.

• Yazı Tipi: Açık Sans
• Ağırlık: Hafif
• Renk: Siyah#000000
• Boy
  • Masaüstü: 16 piksel
  • tablet: 15 piksel
  • Telefon: 14 piksel
• Harf Aralığı: 1px

aralık

Ve biraz üst kenar boşluğu ekleyerek modül ayarlarını tamamlayın.

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

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

Resim İçeriği

2. sütuna geçin ve bir görüntü modülü ekleyin. Varsayılan yer tutucuyu silin ve yazar profil resmi dinamik içeriğini bağlayın.

• Resim: Dinamik İçerik – Yazar Profil Resmi

boyutlandırma

Ardından, görüntünün boyutlandırma ayarlarını yapın.

• Genişlik
  • Masaüstü: %100
  • Tablet ve Telefon: %50

aralık

Biraz duyarlı alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu
  • Masaüstü ve Tablet: -%20
  • Telefon: -%30

Sınır

Kenarlık ayarlarına bazı yuvarlatılmış köşeler ekleyerek modül ayarlarını tamamlayın. Bu, modülü bir daireye dönüştürmeye yardımcı olacaktır.

• Yuvarlatılmış Köşe: 50vw dört köşe
• Stiller: Dört tarafın tümü
• Genişlik: 2 piksel
• Renk: Siyah #000000

2. Bölüm Ekle

aralık

Şimdi başka bir normal bölüm ekleyin, bölüm ayarlarını açın ve üst ve alt dolgu değerlerini değiştirin.

• Üst ve Alt Dolgu: 300px

2. Satırı Ekle

Sütun Yapısı

Sırada bir sütun bulunan bir satır ekleyin.

boyutlandırma

Satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Genişlik: 1580 piksel
• Maksimum genişlik
  • Masaüstü ve Tablet: %90
  • Telefon: %95
• Satır Hizalama: Merkez

Blog Modülü Ekle

İçerik

Bu bölümde/satırda ihtiyacımız olan tek modül bir Blog Modülüdür. 'Geçerli Sayfa İçin Gönderiler' seçeneğini etkinleştirdiğinizden emin olun. Bu, yalnızca söz konusu yazar tarafından yapılan gönderilerin gösterilmesini sağlayacaktır.

• Mevcut Sayfa İçin Gönderiler: Evet

Elementler

Öğeler bölümünde, tasarımımızda aşağıdaki öğelerin görünmesini sağlıyoruz:

• Özellikli resim
• Yazar
• Kategoriler
• Alıntı
• sayfalandırma

Düzen

Sonraki tasarım sekmesine geçin ve düzeni değiştirin.

• Düzen: Izgara

Başlık Metni

Ardından, başlık metnini buna göre biçimlendirin:

• Başlık Seviyesi: H2
• Yazı Tipi: Kron Bir
• stil: TT
• Renk: Siyah #000000
• Boy
  • Masaüstü: 26 piksel
  • Tablet: 16 piksel
  • Telefon: 18 piksel
• Harf Aralığı: 3px
• Hat Yüksekliği: 1.3m

Gövde metni

Gövde metni ayarlarını da değiştiriyoruz.

• Yazı Tipi: Açık Sans
• Ağırlık: Hafif
• Renk: Siyah #000000
• Boy
  • Masaüstü: 16 piksel
  • tablet: 15 piksel
  • Telefon: 14 piksel
• Harf Aralığı: 1px

Meta Metin

Ardından, meta metin ayarlarında bazı değişiklikler yapacağız.

• Yazı Tipi: Açık Sans
• stil: TT
• Renk: Siyah #000000
• Harf Aralığı: 2px

boyutlandırma

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

• Genişlik
  • masaüstü: otomatik
  • Tablet: %90
  • Telefon: %80

aralık

Ardından, biraz üst dolgu ekleyin.

• Üst Dolgu
  • Masaüstü: 60 piksel
  • Tablet ve Telefon: 70px

Sınır

Modülün kenarlık ayarlarını da değiştiriyoruz.

• Izgara Düzeni Kenarlık Stilleri: Sol Taraf
• Genişlik: 1 piksel
• Renk: Siyah #oooooo

Özel CSS

Ve modülün başlığına ve gövdesine iki satır CSS kodu ile tasarımı tamamlayacağız!

• Başlık: alt dolgu: 50 piksel;

padding-bottom: 50px;

• Gövde: alt dolgu: 50 piksel;

padding-bottom: 50px;

Ö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

Bu bir Sargı!

Bu öğreticide, Divi's Theme Builder ile özel bir yazar sayfası şablonu oluşturduk. Minimal bir yazar sayfası tasarımı oluşturmak için dinamik içeriği Divi'nin yerleşik seçenekleriyle birleştirdik. Tüm yazarların bir ad ve soyadına, yazar biyografisine ve profil fotoğrafına sahip olması gerektiğini unutmayın. JSON dosyasını indirdiyseniz, onu Divi Theme Builder ana alanınıza aktarabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!