Divi'nin Yazı Başlığı Modülüne 4 Çarpıcı Örnek ve Bunlara Nasıl Ulaşılır

İnsanlarla blog gönderilerinizle etkileşim kurmanın yeni yollarını arayan tüm Divi blogcuları için, Divi Gönderi Başlığı Modülü başlamak için harika bir yerdir. Gönderi Başlığı Modülü, sayısız çarpıcı tasarım için gönderi başlığına (ve öne çıkan görsele) çeşitli şekillerde stil vermenizi sağlar. Bu, potansiyel okuyucularınızı ilk bakışta yakalayan bazı güzel makaleler oluşturmanıza olanak tanır. Bugün, okuyucularınızı çekmeye yardımcı olmak için Divi Gönderi Başlık Modülünü şekillendirmenin dört çarpıcı yolunu göstereceğim.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde yer alan başlık modülü tasarımlarına hızlı bir bakış.

#1 Soyut Çerçeveleme

1 Numaralı Binaya Başlayın

#2 Örtüşen Metin ve Öne Çıkan Görsel

2. Binayı Başlat

#3 Okunabilirlik için Benzersiz İçerik Arka Planı

3 No'lu Binaya Başlayın

#4 Çift Öne Çıkan Görüntülerle İstifleme Etkisi

4. Binayı Başlat

Başlarken

Youtube Kanalımıza Abone Olun

Bu eğitim için gerçekten ihtiyacınız olan tek şey Divi. Yeni gönderiler oluşturacağız ve gönderi başlığı tasarımlarını oluşturmak için Divi Builder'ı kullanacağız. Öne çıkan görseller olarak hizmet etmek için birkaç görsele de ihtiyacınız olacak.

Yeni Gönderiler için Kurulum

Bu eğitimde, yeni bir gönderide örnek yazı başlığı tasarımları oluşturmak için Divi Builder'ı kullanacağım. Bu öğreticide derlemeler için kurulum almak için aşağıdakileri yapmanız gerekir:

1. Yeni bir gönderi oluşturun.
2. Gönderinize bir Başlık ekleyin.
3. Gönderinize bir Öne Çıkan Görsel ekleyin.
4. Divi Builder'ı dağıtın.
5. Sıfırdan İnşa Etmeyi Seçin
6. Divi Sayfa Ayarları altında, Kenar Çubuğu Yok sayfa düzenini seçin ve Gönderi başlığını Gizle'yi seçin.
7. Ardından, Ön Uçta Oluştur'a tıklayın veya sayfayı görsel olarak tasarlayabilmeniz için arka uçta Masaüstü görünüm modunu dağıtın.

Her tasarım için yeni bir gönderi oluşturmak veya bir gönderiye birden fazla gönderi başlığı tasarımı eklemek isteyip istemediğiniz size kalmış. Bir gönderiye birden fazla gönderi başlığı eklerseniz, aynı sayfa başlığını ve öne çıkan görseli devralacaklarını unutmayın.

#1 Soyut Çerçeveleme

Bu temiz gönderi başlığı tasarımı, öne çıkan görseliniz ve gönderi başlığınız için iyi çalışacak ince soyut çerçeveleme öğelerine sahiptir. Çerçeveleme efekti, bazı özel kenarlık ve kutu gölgesi stilleri kullanılarak oluşturulur.

İşte nasıl yapılacağı.

Yeni gönderiyi bu makalenin başında açıklandığı gibi ayarladığınızdan emin olun (Başlık Ekle, Öne Çıkan Resim, Kenar çubuğu sayfa düzeni yok, varsayılan gönderi başlığını gizle). Gönderinize tek sütunlu bir satır içeren yeni bir bölüm ekleyin. Ardından yazı başlığı modülünü satıra ekleyin.

Gönderi Başlığı Ayarlarında, Öne Çıkan Resim Yerleşimini aşağıdaki gibi ayarlayın:

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

Ardından, modülün sağ alt köşesine küçük bir soyut tasarım öğesi eklemek için bir arka plan gradyanı ekleyin.

Arka Plan Gradyanı Sol Renk: rgba(0,0,0,0.06)
Arka Plan Gradyanı Sağ Renk: rgba(0,0,0,0)
Gradyan Türü: Radyal
Radyal Yön: Sağ Alt
Başlangıç ​​Konumu: %10
Bitiş Konumu: %0

Tasarımın geri kalanını aşağıdaki gibi güncellemeye devam edin:

Başlık Yazı Tipi: Josefin Sans
Başlık Metni Hizalama: sağ
Başlık Metin Boyutu: 36px
Başlık Satırı Yüksekliği: 1,7em (masaüstü), 1,3em (tablet ve akıllı telefon)
Meta Yazı Tipi: Josefin Sans
Meta Yazı Tipi Stili: TT
Meta Metin Hizalama: sol
Meta Harf Aralığı: 2px
Meta Çizgi Yüksekliği: 2em
Özel Marj: -5vw üst
Özel Dolgu: 5vw üst, 5vw alt, 5vw sol, 5vw sağ
Sağ Kenar Genişliği: 4px

-5vw kenar boşluğu, sağ kenarlığın satıra ekleyeceğimiz sol kenarlığın üzerinde durması için modülü sıranın dışına doğru çeker.

Şimdi kutu gölgesini kullanarak soyut bir tasarım öğesi ekleyelim:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 112px
Kutu Gölge Dikey Konumu: 85px
Kutu Gölge Yayılma Gücü: -80px
Gölge Rengi: rgba(224,43,32,0.3)

Ayarları kaydet.

Şimdi yeniden boyutlandırmak için satır ayarlarını açın ve bir kenarlık ve kutu gölgesi kullanarak çerçeve tasarımının sol tarafını oluşturun.

Özel Genişlik: 700 piksel
Sağ Kenar Genişliği: 4px

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 112px
Kutu Gölge Dikey Konumu: 85px
Kutu Gölge Yayılma Gücü: -80px
Gölge Rengi: rgba(224,43,32,0.3)

Şimdi son tasarımı kontrol edelim.

#2 Örtüşen Metin ve Öne Çıkan Görsel

İki sütunlu bir satırla yeni bir bölüm oluşturun. Ardından sol sütuna bir görüntü modülü ekleyin.

Bu, dinamik içerik kullanarak öne çıkan görselimiz olarak hizmet edecek. Görüntü ayarlarını açın ve sahte görüntüyü silin ve görüntü önizleme kutusunun sağ üst köşesindeki dinamik içerik simgesini tıklayın. Ardından, öne çıkan görseli sayfaya eklemek için listeden Öne Çıkan Görsel'i seçin.

Şimdi sağ sütuna bir yazı başlığı modülü ekleyin. Ayarları açın ve Öne Çıkan Resmi Göster seçeneğini HAYIR olarak ayarlayarak öne çıkan resmi gizleyin.

Ardından, yazı başlığı modülüne bir arka plan gradyanı ekleyin.

Arka Plan Gradyanı Sol Renk: #ffffff
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)

Bu, görüntünün üst üste gelmesi için bir miktar negatif kenar boşluğu eklediğimizde görünür hale gelecektir.

Tasarımın geri kalanını aşağıdaki gibi güncelleyin:

Başlık Fontu: Fira Sans Condensed
Başlık Yazı Tipi Ağırlığı: Ultra Hafif
Başlık Metin Boyutu: 80px (masaüstü), 70px (tablet), 45px (akıllı telefon)
Meta Font: Fira Sans Condensed
Meta Yazı Tipi Stili: TT
Meta Metin Hizalama: sağ
Meta Metin Rengi: #cccccc
Meta Harf Aralığı : 2px
Özel Kenar Boşluğu: -%20 kaldı (masaüstü), %0 (tablet ve akıllı telefon)
Özel Dolgu: 5vw üst, 5vw alt, 30 piksel sol

Şimdi başlık altında bir çizgi oluşturmak için ona bir kutu gölgesi verelim.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 80px
Kutu Gölge Dikey Konumu: 82px
Kutu Gölge Yayılma Gücü: -80px

Ayarı kaydedin ve oluk genişliğini ayarlamak için satır ayarlarını açın.

Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET

Şimdi son tasarımı kontrol edin.

Alternatif Yuvarlak Görüntü Tasarımı

Sadece birkaç küçük ince ayar ile öne çıkan görüntüyü dairesel hale getirebilir ve yazı döşemesini dikey olarak ortalanacak şekilde ayarlayabilirsiniz. Bunu yapmak için görüntü ayarlarını açın ve aşağıdakileri güncelleyin:

Yuvarlatılmış Köşeler: %50

Ardından satır ayarlarını açın ve Ana Öğe altına aşağıdaki özel CSS'yi ekleyin:

align-items: center;

Bu, yalnızca, öğeleri dikey olarak hizalamamıza izin veren esnek özelliğini etkinleştiren Sütun Yüksekliklerini Eşitle seçeneğini EVET olarak ayarladıysanız çalışır.

İşte son tasarım.

#3 Okunabilirlik için Benzersiz İçerik Arka Planı

Bu yazı başlığı tasarımı, başlığı ve meta metni öne çıkan bir görüntü arka planıyla daha okunaklı hale getirmek için arka plan gradyanlarını içerir.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir bölüm oluşturun. Ardından yazı başlığı modülünü satıra ekleyin.

Ardından, öne çıkan resmi gizlemek için başlık modülü ayarlarını güncelleyin.

Başlık Yazı Tipi: Abril Fatface
Başlık Metin Rengi: #121212
Başlık Metin Boyutu: 75px (masaüstü), 50px (tablet), 30px (akıllı telefon)
Başlık Harf Aralığı: 2px
Başlık Satırı Yüksekliği: 1.1em
Meta Yazı Tipi: Roboto Condensed
Meta Metin Rengi: #ffffff
Meta Metin Boyutu: 16px
Meta Harf Aralığı : 2px
Meta Çizgi Yüksekliği: 2em
Genişlik: %60 (masaüstü), %90 (tablet), %100 (akıllı telefon)
Özel Dolgu: 3vw kaldı

Şimdi meta metne arka plan olarak hizmet etmek ve okunabilir hale getirmek için bir kutu gölgesi ekleyelim.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölgesi Dikey Konumu: -32px
Kutu Gölge Rengi: #121212

Şimdi öne çıkan görselimizi dinamik içerik kullanarak bölüm arka planına ekleyeceğiz. Bölüm ayarlarını açın ve arka plan resmi önizleme kutusunun sağ üst köşesindeki dinamik içerik simgesini tıklayın. Ardından, öne çıkan görseli bölüme eklemek için listeden öne çıkan görseli seçin.

Şimdi yazı başlığı metnini daha okunaklı hale getirmek için gradyan arka plan elemanımızı ekleyelim. Degrade sekmesini tıklamanız ve aşağıdakileri güncellemeniz yeterlidir:

Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0.76)
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Türü: Radyal
Radyal Yön: Sol Üst
Başlangıç ​​Konumu: %40
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Şimdi son tasarımı görelim.

#4 Çift Öne Çıkan Görüntülerle İstifleme Etkisi

Bu tasarım, yazı başlığı modülünü ve bölüm arka planını oluşturan öğelerin yığılması efektini vermek için bazı kutu gölgeleri içerir. Ayrıca benzersiz bir tasarım öğesi için öne çıkan görüntünün (dinamik olarak) iki sürümünü kullanır.

İşte nasıl yapılacağı.

Tek sütunlu bir satırla yeni bir bölüm oluşturun. Ardından, posta modülünü satıra ekleyin ve öne çıkan resim yerleşimini Başlık/Meta Arka Plan Resmi olarak güncelleyin.

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Rengi: açık
Metin Arka Plan Rengi: rgba(1,59,104,0.79)
Metin Yönü: orta
Başlık Fontu: Roboto Condensed
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Metin Boyutu 70px (masaüstü), 50px (tablet), 30px (akıllı telefon)
Başlık Satırı Yüksekliği: 1.3em
Meta Yazı Tipi Ağırlığı: Hafif
Meta Yazı Tipi Stili: TT
Meta Metin Rengi: #cccccc
Meta Harf Aralığı: 1px
Özel Dolgu: 10vw üst, 0px alt

Şimdi ilk istifleme katmanımızı oluşturmak için ilk kutu gölgemizi ekleyelim.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölgesi Dikey Konumu: -46px
Gölge Rengi: #ffffff

Bunun aynı zamanda başlığı ve meta metni bölmek için yaratıcı bir yol olarak hizmet ettiğini görebilirsiniz.

Şimdi ayarlarınızı kaydedin ve bölüm ayarlarını açın. Öne çıkan görseli dinamik içerik olarak arka planınıza ekleyin. Ardından aşağıdaki gibi bir degrade ekleyin:

Arka Plan Gradyanı Sol Renk: rgba(1,59,104,0.79)
Arka Plan Gradyanı Sağ renk: rgba(1,59,104,0.79)
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Bu ek özellikli görsel arka plan tasarımı, gönderi başlığınıza her yeni öne çıkan görselle dinamik olarak değişecek benzersiz bir tasarım vermenin benzersiz bir yoludur.

Ardından, bazı özel dolgu ekleyin.

Özel Dolgu (masaüstü): 10vw üst, 0px alt
Özel Dolgu (akıllı telefon): 0vw üst, 0px alt

Ardından, yığın efektine devam etmek için başka bir kutu gölgesi ekleyin.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: -92px
Gölge Rengi: #ffffff

Tasarımı tamamlamak için satır ayarlarını açın ve aşağıdakileri güncelleyin:

Bu Satırı tam genişlikte yapın: EVET
Oluk Genişliği: 1
Özel Dolgu (masaüstü): 0 piksel üst, 0 piksel alt, %6 sol, %6 sağ
Özel Dolgu (akıllı telefon: 0px üst, 0px alt, %0 sol, %0 sağ

Şimdi son tasarımı kontrol edin.

Son düşünceler

Bu yazı başlığı tasarımlarıyla, Divi yazı başlığı modülü ve Divi Builder ile nelerin mümkün olduğuna dair oldukça iyi bir kavrayışa sahip olmalısınız. Öne çıkan görseller için dinamik içeriğin gücüyle birleştirilmiş birkaç tasarım değişikliği ile blog gönderileriniz için sayısız benzersiz gönderi başlığı stili oluşturabilirsiniz. Bir şey olursa, umarım bunlar kendi başınıza bazı çarpıcı yazı başlıkları oluşturmanız için size ilham verir.

Tasarımla ilgili daha fazla ilham almak için güzel ve ilgi çekici dinamik blog yazısı kahraman bölümleri ve Divi'de bozuk ızgara düzenleri tasarlamanın sırrı hakkındaki blog yazımıza göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!