Divi Blog Gönderi Şablonunuza Tam Ekran Kahramanı Nasıl Eklenir

Tam ekran kahramanı bölümü herhangi bir web sayfasında harika görünüyor, ancak blog yayınında çok ilginç. Üstün görüntü tam bir ekran olmasına rağmen, başlık ve meta metnini yerleştirmek için birçok tasarım seçeneği vardır. Divi tema oluşturucu ile bunu yapmak kolaydır. Bu makalede, Divi Blog Gönderi şablonunuza tam ekran kahramanları eklemenin birkaç yolunu göreceğiz. Başlayalım. Aşağıdaki önizleme yapacağımız ekrandır. Masaüstü Modül Başlığı Tam Ekran Gönderisi

Telefon Modülü Tam Ekran Post Başlığı

Masaüstü arka planının üzerindeki başlıklı alternatif tam ekran yazı başlık modülü

Arka plan telefonundaki başlık ile alternatif tam ekran yazı başlık modülü

Masaüstü meta verilerle dolu bir ekran kahramanı

Tam Ekran Kahramanı

Tam ekran kahramanınız için blog yazısı şablonu

Baştan Divi Tema İnşaatçısı’nda bir blog yazısı şablonu oluşturabilir veya zarif temalar blogundan bir şablon yükleyebilirsiniz. Bunu bulmak için “Ücretsiz Blog Gönderi Şablonları” için bir blog bulun. Şablonu indirirseniz, çıkardığınızdan emin olun. Örneğin, Divi moda tasarımcısı düzeni paketleri için ücretsiz bir blog yayın şablonu kullanıyorum. Ayrıca eşleşmesi için ücretsiz bir moda tasarımcı düzeni paketi kullanıyorum.
Tam ekran kahramanınız için blog yazınız şablonunuzu yükleyin veya oluşturun

Blog yayın şablonunuzu yükleyebilir veya sıfırdan yapabilirsiniz. Yükleyeceğiz, ancak tam ekran kahramanları yapma süreci aynı. Şablonu yüklemek için WordPress kontrol panelinde Divi> tema üreticisini açın. Taşınabilirliği seçin ve açık sermayede içe aktarın. JSON dosyanıza gidin ve seçin. Divi Tema Şablon Şablonlarını İçe Aktar’ı tıklayın ve yükleme tamamlanana kadar bekleyin. Ayarlarınızı kaydedin. WordPress panosunda divi açın
Tema Makerını Seçin
Taşınabilirliğe tıklayın
İthalat Seçin
JSON dosyanızı seçin
İçe Aktarmak İçin Tıklayın
Ayarlarınızı Kaydet
Yöntem 1: Tam Ekran Post Başlık Modülü
Bu yöntem POST başlık modülünü kullanacaktır. Tüm bilgileri birlikte görüntülemek istiyorsanız bu iyi bir seçimdir. Bir şablonunuz olduktan sonra, açmak için Düzenle simgesini seçin.

Yüklediğim şablonun üstün görüntüleri içeren bir bölümü var. Bunun yerine bu bölümü silip tam genişlik bölümünü ekleyeceğiz.

Fullwidth Modül listesinden FullWidth Post başlıkını seçin.

Tüm öğeler varsayılan olarak seçilir. Etkinleştirilmelerine izin verin. Üstün görüntülerin yerleştirilmesine gidin ve yukarıdaki başlığı seçin.

Üstün Görüntülerin Yerleştirilmesi: Başlığın Üstü
Arka plana doğru kaydırın ve rengi #fff9f2 olarak ayarlayın

Renk: #fff9f2
Başlık metni
Tasarım sekmesini seçin. Başlık metni için H1’i koruyun ve Playfair ekranını seçin. Sol haklı olarak ayarlayın ve renk için #34332E’yi seçin.

Yazı tipi: Playfair ekranı
Tesisat: Sol Sol
Renk: #34332E
Metin boyutu için masaüstünü 65 piksel olarak ayarlayın, 42px’e ve hat yüksekliğini 1.2EM olarak ayarlayın.

Masaüstü Boyutu: 65px
Cep telefonu boyutu: 42px
Hat yüksekliği: 1.2em
Meta metni
Meta’ya gidin. Yazı tipleri için Montserrat’ı seçin ve orta ağırlık, büyük harf, masaüstü için sağ hizalama ve telefon için sol hizalama olarak ayarlayın. Renk için #7B7975’i seçin. Yazı tipi: Montserrat

Ağırlık: Orta
Kuvvet: büyük harf
Masaüstü Aydınlanma: Doğru
Telefon Uygulama: Sol
Renk: #7B7975
Masaüstü yazı tipi boyutunu 14px, mobil boyutu 10 piksel, harf aralığı 1 piksel ve hat yüksekliği 1.6EM olarak ayarlayın. Ayarlarınızı kapatın ve şablonunuzu kaydedin.
Masaüstü Boyutu: 14px

Cep telefonu boyutu: 10 piksel
Mektup alanı: 1 piksel
Hat yüksekliği: 1.6em
Arka plan görüntüsünün üzerindeki başlık
Başlığın üstün görüntünün üzerinde görünmesini isterseniz, aynı tasarım ayarlarını kullanın ve içerik sekmesine dönün. Üstün görüntülerin yerleştirilmesi için meta arka planın başlık/görüntüsünü seçin.
Üstün Görüntülerin Yerleştirilmesi: Arka Plan Görüntü Başlığı/Meta

Arka plana doğru kaydırın ve gradyanı seçin. Sol rengi #fff9f2, sağ renk RGBA’ya (255,255,255.0), 90deg yönünü, başlangıç ​​konumunu%30’a ayarlayın ve arka plan görüntüsünün üzerine eğimi yerleştirmek için Evet’i seçin. Ayarlarınızı kapatın ve kaydedin.
Sol gradyan rengi: #fff9f2

Sağda Gradyan Renk: RGBA (255,255,255.0)
Gradyan yönü: 90 derece
Başlangıç ​​Pozisyonu:% 30
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Yöntem 2: Bir ekran kahramanı meta verilerle doludur
Bu yöntem, bilgileri için dinamik içeriğe sahip bir metin modülü kullanacaktır. Farklı yerlerdeki tüm öğeleri görüntülemek istiyorsanız bu iyi bir seçimdir. İlk olarak, şablonu yükleyin ve ilk kısmı silin. Sol sütundaki modülleri ve ayarları yeniden oluşturacağız, ancak yönetebilmeniz için tartışacağız. Ekran Kahramanı meta veri ayarlarıyla doludur
Ayarları açın ve arka plan rengine doğru kaydırın. Gradyan’ı seçin ve sol rengi #fff9f2, sağ renk RGBA’ya (255,255,255.0), 90deg’e degransa ayarlayın,%30’a başlayın ve arka plan görüntüsünün üzerindeki gradyanı Evet’e yerleştirin. Sol gradyan renk: #fff9f2

Sağda Gradyan Renk: RGBA (255,255,255.0)

Gradyan yönü: 90 derece
Başlangıç ​​Pozisyonu:% 30
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Resmi seçin ve Dinamik İçerik seçeneğini seçin.
Seçenekteki üstün görüntüyü seçin.
Tasarım sekmesini seçin ve ayarlara kaydırın. Yüksekliğe 100vh ekleyin min. Bölümün ayarlarını kapatın.

Yükseklik min: 100vh

Ekran Kahramanı meta veri başlık metniyle doludur

Ardından, bu bölüme bir çift sütun satırı ekleyin.
Metin modülünü sağ sütuna ekleyin.
İçerik için Dinamik İçeriği kullanın.

Seçenek listesinden Post/Arşiv Başlığı’nı seçin.

Dinamik İçerik: Post/Arşiv Başlığı

Tasarım sekmesini seçin. Başlık metni için H1’i koruyun ve Playfair ekranını seçin. Sol haklı olarak ayarlayın ve renk için #34332E’yi seçin.

Yazı tipi: Playfair ekranı
Tesisat: Sol Sol

Renk: #34332E
Metin boyutu için masaüstünü 65 piksel olarak ayarlayın, 42px’e ve hat yüksekliğini 1.2EM olarak ayarlayın.
Masaüstü Boyutu: 65px
Cep telefonu boyutu: 42px

Hat yüksekliği: 1.2em
Alana doğru kaydırın ve üst dolgu için% 50 girin. Ayarları kapatın.
Üst dolgu:% 50
Ekran Kahramanı Meta Veri Kategorisi Bölümü ile doludur

Kahramanın altına yeni bir düzenli bölüm ekleyin.
Ayarları açın ve arka plan rengini #fff9f2 olarak ayarlayın. Ayarları kapatın.
Arka plan rengi: #fff9f2

Ardından, yeni bölüme 4 sütun ekleyin. Ekran Kahramanı meta veri kategorisi metniyle doludur

Metin modülünü sol sütuna ekleyin.
Modül ayarlarını açın ve metin içeriği için dinamik içeriği kullanın. Listeden yayın kategorisini seçin.

Dinamik İçerik: Kategori Gönderme

Tasarım sekmesini seçin ve başlık metnine gidin. H4’i seçin. Yazı tipleri için Playfair ekranını seçin ve orta ağırlık, büyük harf, masaüstü için sağ hizalama ve telefon için sol hizalama olarak ayarlayın. Renk için #7B7975’i seçin.

Başlık Metni: H4

Yazı tipi: Playfair ekranı
Ağırlık: Orta

Kuvvet: büyük harf
Exposs: Merkez
Renk: #7B7975
Masaüstü yazı tipi boyutunu 14px, mobil boyutu 10 piksel, harf aralığı 1 piksel ve hat yüksekliği 1.6EM olarak ayarlayın. Ayarlarınızı kapatın ve şablonunuzu kaydedin.
Masaüstü Boyutu: 14px
Cep telefonu boyutu: 10 piksel
Mektup alanı: 1 piksel

Hat yüksekliği: 1.6em
Alana doğru kaydırın ve alt kenar boşluğuna 0 piksel ekleyin. Ayarları kapatın.
Alt kenar boşluğu: 0px
Ekran Kahramanı meta veri meta metniyle doludur
Ardından, kategori modülünü kopyalayın ve bir sonraki sütuna sürükleyin. Her meta modülü aynı ayarlara sahiptir. İlk modülü nasıl yapacağınızı göstereceğiz ve daha sonra başka bir modül yapmak için iki kez kopyalayacağız. Yazar

Ayarları açın ve dinamik içerik yayınlama kategorilerini silin.
Dinamik İçeriği kullanın ve yazar gönderisini seçin.
Dinamik İçerik: Yazar Post

Tasarım sekmesinde yazı tipi başlığı 4’ü açın ve yazı tipi için Montserrat’ı seçin. Diğer ayarlar önceki modülden kopyalanmıştır. Orta ağırlık, büyük harf, masaüstü bilgisayarlar için sağ seviyesi, cep telefonları için sol seviyelendirme ve renk için #7B7975 içerir.

Yazı tipi: Montserrat

Ağırlık: Orta
Kuvvet: büyük harf

Masaüstü Aydınlanma: Orta
Telefon Uygulama: Sol
Renk: #7B7975
Yazı tipi boyutu ayarları, 14 pikselde masaüstü boyutu, 10 pikselde telefon boyutu, 1px’de harf aralığı ve 1.6em’de hat yüksekliği içerir. Masaüstü Boyutu: 14px
Cep telefonu boyutu: 10 piksel
Mektup alanı: 1 piksel
Hat yüksekliği: 1.6em

Alt marjın 0px olması gerekir.
Alt kenar boşluğu: 0px
Tarih
Yazar ve sürükleme modüllerini bir sonraki sütuna kopyalayın.
Dinamik İçeriği Silin, Dinamik İçeriği Kullanın ve Gönderi Tarihini seçin. Ayarları kapatın.

Dinamik İçerik: Gönderi Gönderme Tarihi
Yorum
Son olarak, yayın tarihi modülünü kopyalayın ve son sütuna sürükleyin.

Diğer modüller gibi dinamik içeriği silin ve dinamik içeriği kullanmayı seçin.

Seçtiğinizden bir yorum gönderisi seçin.
Dinamik İçerik: Yorum sayısını gönderin
Bu kez, sonrası sütuna boşluk ve yorum ekleyin. Küçük sermayeyi örtün ve ardından ayarları kapatın. Çalışmanı kaydet.

Sonra: Yorum

Masaüstü Sonuçlar Modülü Başlık Post Tam Ekran

Telefon Modülü Tam Ekran Post Başlığı
Masaüstü arka planının üzerindeki başlıklı alternatif tam ekran yazı başlık modülü

Arka plan telefonundaki başlık ile alternatif tam ekran yazı başlık modülü
Masaüstü meta verilerle dolu bir ekran kahramanı
Tam Ekran Kahramanı

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir