Divi: Bir blog gönderisine Hero bölümü nasıl eklenir?

Blog yazılarınızı geliştirmek ister misiniz? Divi ona bir Kahraman bölümü ekleyerek?

Tam ekran Kahraman bölümleri, herhangi bir web sayfasında harika görünür, ancak özellikle blog gönderilerinde harikadır. 

Öne çıkan görsel tam ekran olmasına rağmen, başlığı ve meta metni yerleştirmek için pek çok tasarım seçeneği vardır. ile yapmak çok kolay Divi Tema Oluşturucu . 

Bu makalede, blog yazısı şablonunuza tam ekran Kahraman bölümü eklemenin birkaç yolunu göreceğiz. Divi.

Başlayalım.

anket

İşte bu eğitimde tasarlayacağımız şeyin bir önizlemesi.

Ayrıca Oku: Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?

Yazı Başlığı Masaüstü sürüm modülüne sahip Kahraman bölümü

Yazı Başlığı mobil sürüm modülüne sahip Kahraman bölümü

Yazı Başlığı masaüstü sürüm modülü ile Alternatif Kahraman bölümü düzeni

DIVI'yı şimdi indirin!!!

Mobil Yazı Başlığı modülüyle Alternatif Kahraman bölümü düzeni

Meta veri Masaüstü sürümüne sahip kahraman bölümü

Meta veri mobil versiyonu ile kahraman bölümü

DIVI'yı şimdi indirin!!!

Tam Ekran Kahraman Bölümünüz için Blog Yazısı Şablonları

Blog gönderileri şablonunu şurada oluşturabilirsiniz: Divi Sıfırdan Tema Oluşturucu veya Elegant Temalar Blogundan bir şablon indirin. Bunları bulmak için blogda arama yapın “ücretsiz blog yazısı şablonu”. Bir şablon indirirseniz, sıkıştırmayı açtığınızdan emin olun.

Örneklerimiz için, kullanacağız  Divi'nin Moda Tasarımcısı Düzen Paketi için ücretsiz Blog Yazısı Şablonu . Ayrıca düzen paketini de kullanıyoruz ücretsiz Üstbilgi ve Altbilgi Moda Tasarımcısı .

Tam ekran Kahraman bölümünüz için blog yazısı şablonunuzu indirin veya oluşturun

Blog yazısı şablonunuzu indirebilir veya sıfırdan bir tane oluşturabilirsiniz. Bir tane yükleyeceğiz, ancak tam ekran Kahraman bölümü oluşturma süreci aynı.

Ayrıca bakınız: Divi: Bir Kahraman Bölümü için Maskeler ve Arka Plan Desenleri Nasıl Kullanılır

Yöntem 1: Tam Ekran Yazı Başlığı modülü

Bu yöntem kullanacak PostTitle modülü . Tüm bilgileri bir arada görüntülemek istiyorsanız iyi bir seçimdir. Şablonunuzu aldıktan sonra, açmak için düzenle simgesini seçin.

Yüklediğimiz şablonda öne çıkan görselin olduğu bir bölüm var. Bu bölümü kaldıracağız ve bir tane ekleyeceğiz. Tam genişlik bölümü burada.

seçmek Tam Genişlikte Gönderi Başlığı tam genişlikli modüller listesinde.

Tüm öğeler varsayılan olarak seçilidir. Onları etkin bırakın. kaydır Öne Çıkan Resim Yerleşimi ve seç Başlığın Üstü.

• Öne Çıkan Resim Yerleşimi: Başlığın Üstü

Kaydırın Arka plan rengi ve rengi #fff9f2 olarak ayarlayın

• Arka plan: #fff9f2

Başlık metni

Sekmeyi seçin Tasarım. Başlık metni için H1'i koruyun ve Playfair Ekranını seçin. Sola Yaslanmış olarak ayarlayın ve renk için #34332e'yi seçin.

• Başlık:
  • Başlık seviyesi: H1
  • Yazı Tipi: Playfair Ekranı
  • Metin Hizalama: sola dayalı
  • Metin Rengi: #34332e

Için yazı Boyutu , masaüstü sürümünü 65 piksele, mobil sürümü 42 piksele ve satır yüksekliğini 1,2em olarak ayarlayın.

• Başlık Metin Boyutu (Masaüstü): 65 piksel (Masaüstü), 42 piksel (Telefon)
• Başlık Satır Yüksekliği: 1,2 em

meta metin

Kaydırın Meta Metin. Yazı tipi için Montserrat'ı seçin ve masaüstü sürümü için orta, büyük harf, sağa hizalama ve mobil sürüm için sola hizalama olarak ayarlayın. Renk için #7b7975'i seçin.

• MetaFont:
  • Yazı Tipi: Montserrat
  • Ağırlık: Orta
  • stil: TT
• Üst Metin:
  • Hizalama: sağ (Masaüstü), sol (Telefon)
  • Renk: #7b7975

Yı kur yazı Boyutu masaüstü versiyon için 14 px, mobil versiyon için 10 px, harf aralığı 1 px ve satır yüksekliği 1,6 cm. Ayarlarınızı kapatın ve şablonunuzu kaydedin.

• Üst Metin:
  • Boyut (Masaüstü): 14 piksel
  • Boyut (Telefon): 10 piksel
• Harf Aralığı: 1px
• Satır Yüksekliği: 1,6 em

Arka plan resmindeki başlık

Başlığın seçilen görselde görünmesini istediğinize karar verirseniz, aynı tasarım ayarlarını kullanın ve sekmeye geri dönün. içerik. 

seçmek Başlık/Meta Arkaplan Resmi için Öne Çıkan Resim Yerleşimi.

• Öne Çıkan Resim Yerleşimi: Başlık/Meta Arkaplan Resmi

Kaydırın Olayın Arka Planı ve seç Arka Plan Gradyanı. Sol rengi #fff9f2'ye, sağ rengi rgba(255,255,255,0), yönü 90 dereceye, başlangıç ​​konumunu %30'a ayarlayın ve degradeyi arka plan görüntüsünün üzerine yerleştirmek için evet'i seçin. Kapatın ve ayarlarınızı kaydedin.

• Gradyan Durakları:
  • %30: #fff9f2
  • %100: rgba(255,255,255,0)
• Gradyan Yönü: 90 derece
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Yöntem 2: Meta Verilerle Tam Ekran Kahraman Bölümü

Bu yöntem, Metin modüllerini kullanır. dinamik içerik bilgi için. Tüm öğeleri farklı yerlerde görüntülemek istiyorsanız bu iyi bir seçenektir. 

İlk önce şablonu indirin ve ilk bölümü silin. Modülleri ve ayarlarını sol sütunda yeniden oluşturacağız, ancak yapılandırabilmeniz için bunların üzerinden geçeceğiz.

Meta Verili Tam Ekran Kahraman Bölüm Ayarları

ayarlarını aç Bölüm ve kaydır Arka plan görüntüsü. Seçiniz Arka Plan Gradyanı ve ayarları aşağıdaki gibi değiştirin:

• Gradyan Durakları:
  • %30: #fff9f2
  • %100: rgba(255,255,255,0)
• Gradyan Yönü: 90 derece
• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

seçmek Arka plan görüntüsü ve seçeneği seçin Dinamik İçerik Kullanın.

Seçmek <span style="color:white">Resim</span> seçeneklerde.

Sekmeyi seçin Dizaynve kaydır Boyutlandırma. Minimum yüksekliğe 100vh ekleyin. Bölüm ayarlarını kapatın.

• Min Yükseklik: 100vh

Meta Verili Tam Ekran Kahraman Bölümü Ayarları

Ardından, bölüme bir çift sütun satırı ekleyin.

Ekle Metin modülü sağ sütunda.

Onun için içindekilerseç Dinamik İçerik Kullanın.

Seçmek Gönderi/Arşiv Başlığı seçenekler listesinde.

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

Sekmeye git Tasarım.

• Başlık:
  • Metin: H1
  • Yazı Tipi: Playfair Ekranı
  • Metin Hizalama: sola dayalı
  • Metin Rengi: #34332e

boyutu için metinler , masaüstü sürümü için 65 piksele, mobil sürüm için 42 piksele ve satır yüksekliğini 1,2em olarak ayarlayın.

• Başlık:
  • Metin Boyutu: 65px(Masaüstü), 42px(Telefon)
  • Satır Yüksekliği: 1,2 em

Kaydırın aralık ve üst dolgu için %50 girin. Ayarları kapatın.

• Dolgu: %50 (Üst)

Bu makaleyi şuradan da okuyabilirsiniz: Divi'nin Tam Genişlik Başlık Modülü ile Bir Kahraman Bölümü Nasıl Oluşturulur

Meta veri kategorisine sahip kahraman bölümü

Yeni bölüm ekle Kahraman bölümü altında normal.

Ayarlarını açın ve renk #fff9f2'deki arka plan. Ayarları kapatın.

• Arka Plan Rengi: #fff9f2

Sonra bir ekleyin hat yeni bölüme 4 sütun.

Meta veri kategori metni ile tam ekran kahraman

Ekle Metin modülü Sol sütunda.

Modül ayarlarını açın ve seçin Dinamik İçerik Kullanın metnin gövdesi için.

seçmek Geçmiş Kategoriler listede.

• Dinamik İçerik: Gönderi Kategorileri

Sekmeyi seçin Dizayn ve Başlık Metni'ne ilerleyin. H4'ü seçin. Yazı tipi için Playfair Display'i seçin ve masaüstü sürümü için orta, büyük harf, sağa hizalama ve telefon sürümü için sola hizalama olarak ayarlayın. Renk için #7b7975'i seçin.

• Başlık:
  • Metin görüntüleme
  • Yazı Tipi: Playfair Ekranı
  • Yazı Tipi Ağırlığı: Orta
  • stil: TT
  • Metin Hizalama: Merkez
  • Metin Rengi: #7b7975

Yazı tipi boyutunu masaüstü sürüm için 14 piksel, mobil sürüm için 10 piksel, harf aralığını 1 piksel ve satır yüksekliğini 1,6 cm olarak ayarlayın. Ayarlarınızı kapatın ve şablonunuzu kaydedin.

• Başlık 4:
  • Boyut (Masaüstü): 14 piksel
  • Boyut (Telefon): 10 piksel
  • Harf Aralığı: 1px
  • Satır Yüksekliği: 1,6 em

Kaydırın aralık ve alt kenar boşluğuna 0px ekleyin. Ayarları kapatın.

• Kenar Boşluğu (Alt): 0px

Meta Metin meta verileriyle Tam Ekran Kahraman bölümü

Ardından, Kategori modülünü kopyalayın ve sonraki sütuna sürükleyin. Meta modüllerinin her biri aynı ayarlara sahiptir. İlk modülün nasıl oluşturulacağını göstereceğiz ve ardından diğer modülleri oluşturmak için onu iki kez kopyalayacağız.

Yazar

Ayarları açın ve silin içindekiler dinamik.

Tıkla Dinamik İçerik Kullanın ve Seç Yazı yazarı.

• Dinamik İçerik: Yayın Yazarı

sekmesinde Dizayn, Aşağıdaki ayarları değiştirin. 

• Başlık 4:
• Yazı Tipi: Montserrat
• Yazı Tipi Ağırlığı: Orta
• stil: TT
• Metin Hizalama (Masaüstü): Merkez
• Metin Hizalama (Telefon): Sol
• Renk: #7b7975

parametreleri yazı Boyutu Dahil etmek:

• Metin Boyutu: 14px (Masaüstü), 10px (Telefon)
• Harf Aralığı: 1px
• Satır Yüksekliği: 1,6 em

La alt kenar boşluğu 0 piksel olmalıdır.

• Kenar Boşluğu (Alt): 0px

Tarih

kopya Yazar modülünü seçin ve sonraki sütuna sürükleyin.

Silin içindekiler dinamik akım, seç Dinamik İçerik Kullanın ve seç Yayın Tarihi Sonrası. Ayarları kapatın.

• Dinamik İçerik: Yayın Tarihi Sonrası

Yorumlar

Son olarak, kopya Yayın Tarihi Sonrası modülünü seçin ve son sütuna sürükleyin.

Diğer modüllerde olduğu gibi, dinamik içeriği kaldırın ve seçin Dinamik İçerik Kullanın .

Seçmek Yorum Sayısı Gönder seçimlerinizden

• Dinamik İçerik: Yorum Gönderme Sayısı

Bu kez alana bir boşluk ve Yorumlar kelimesini ekleyin. Sonra . Küçük modu kapatın ve ardından ayarları kapatın. Çalışmanı kaydet.

• Sonra: Yorumlar

Ayrıca okuyun: Divi: Fullwidth Header modülü tam ekranda nasıl görüntülenir?

sonuçlar

Yazı Başlığı Masaüstü sürüm modülüne sahip Kahraman bölümü

Yazı Başlığı mobil sürüm modülüne sahip Kahraman bölümü

Yazı Başlığı masaüstü sürüm modülü ile Alternatif Kahraman bölümü düzeni

Mobil Yazı Başlığı modülüyle Alternatif Kahraman bölümü düzeni

Meta veri Masaüstü sürümüne sahip kahraman bölümü

Mobil sürüm meta verileri içeren kahraman bölümü

DIVI'yı şimdi indirin!!!

Sonuç

İşte bu kadar! Bu, blog yazısı şablonunuza nasıl tam ekran bir Kahraman bölümü ekleyeceğiniz konusundaki bakışımızdır. Divi. 

Modüller Divi ve Tema Oluşturucu, tam ekran Kahraman bölümleri oluşturmak için çeşitli seçenekler sunar. Tüm yöntemler çok iyi çalışır ve hepsinin kendine göre avantajları vardır. 

Bu yöntemleri kullanarak, herhangi bir Divi blog yazısı şablonuna tam ekran Kahraman bölümü ekleyebilirsiniz.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...