Yerleşik Ayarları Kullanarak Elde Edebileceğiniz 5 Yaratıcı Divi Başlık Modülü Stili

Kutudan çıktığı haliyle Divi Başlık Modülü, yalnızca birkaç ayar ile çarpıcı başlık tasarımları oluşturabilir. Bu, Divi'de web siteniz için başlıklar tasarlarken onu son derece popüler bir modül yapar. Ve biraz alışılmışın dışında bir düşünceyle, yalnızca yerleşik ayarları kullanarak (özel CSS olmadan) gerçekten benzersiz tasarımlar oluşturabilirsiniz. Bazı yeni başlık tasarımlarını keşfetmek isteyenler için size ilham verebilecek 5 Divi başlık modülü stilini göstereceğim.

Eğlence!

5 Divi Başlık Modülü Stiline Kısa Bir Bakış

Stil 1: Soyut Gradyan

Stil 1'i Tasarlamaya Başlayın

Stil #2: Üçlü Tehdit

Stil #2'yi Tasarlamaya Başlayın

Stil #3: Yuvarlak Çerçeve

Stil #3'ü Tasarlamaya Başlayın

Stil #4: Karışık Solak

Stil #4'ü Tasarlamaya Başlayın

Stil #5: Büyük Ölçeklendirme Türü

Stil #5 Tasarlamaya Başlayın

Başlamak için gerekenler

Başlamak için Divi Temasına ihtiyacınız olacak. Tasarımları ön uçta oluşturmak için Divi Builder'ı kullanacağım. Ayrıca öğreticiyi tamamlamak için birkaç resme ihtiyacınız olacak. Önceden hazırlanmış bir düzenin görüntülerini her zaman içe aktarabileceğinizi unutmayın. Aslında, bu eğitim için Temizleme Şirketi Düzen Paketi, İşletme Koçu Düzen Paketi ve Web Serbest Çalışan Düzen Paketi'nden resimler kullanacağım.

Başlayalım!

Youtube Kanalımıza Abone Olun

Stil 1: Soyut Gadient

Bu ilk Divi başlık modülü tasarımı, degrade arka planları yaratıcı bir şekilde kullanan basit, çok amaçlı bir tasarımdır.

Başlamak için, tam genişlikte başlık modülüne sahip yeni bir tam genişlik bölümü ekleyin.

Başlık ayarları içeriğini yeni bir başlık ve bir Başlık Resmi ile güncelleyin.

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

Başlık Yazı Tipi: Lato
Başlık Metin Boyutu: 6vw
Düğme Bir Arka Plan Rengi: #0c71c3
Düğme Bir Kenar Genişliği: 0px
Özel Dolgu: 8vw üst, 8vw alt

Bölüm arka planımızı eklemeden önce, ilk olarak başlık modülünün arka planını şeffaf hale getirmeli ve sağ alt köşede daire şeklimizi oluşturmak için ona özel bir degrade vermeliyiz. İçerik sekmesine geri dönün ve arka planı aşağıdaki gibi güncelleyin:

Arka Plan Rengi: rgba(255,255,255,0)
Arka Plan Gradyanı Sol Renk: #0096eb
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Türü: Radyal
Radyal Yön: Sağ Alt
Başlangıç ​​Konumu: %25
Bitiş Konumu: %0

Ayarları kaydet

Daha sonra başlık modülümüzün arkasına oturacak bölüme arka plan tasarımlarımızı eklememiz gerekiyor. Bunu yapmak için bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #0096eb
Arka Plan Gradyanı Sağ Renk: #007ea1
Gradyan Türü: Radyal
Radyal Yön: Sol Üst
Başlangıç ​​Konumu: %43
Bitiş Konumu: %0

Tasarım İpucu: Kendi başlık gradyanlarınız için denemek için bazı renkler arıyorsanız, kullanıyor olabileceğiniz başlık görüntüsünde/grafiğinde kullanılan renkleri çekmenizi öneririm.

Soyut arka planımıza başka bir ince tasarım öğesi eklemek için bir üst ve alt bölüm ayırıcı ekleyebiliriz. Bunu yapmak için tasarım sekmesine gidin ve aşağıdaki bölücüleri ekleyin:

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: rgba(150,210,210,0.2)
Üst Bölücü Yüksekliği: 8vw
Üst Bölücü Yatay Tekrar: 0.7x
Üst Bölücü Çevirme: Dikey

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: rgba(150,210,210,0.2)
Alt Bölücü Yüksekliği: 10vw
Alt Bölücü Yatay Tekrar: 0,5x
Alt Bölücü Çevirme: Dikey

Bu kadar! Son tasarımı inceleyin.

Stil #2: Üçlü Tehdit

Bu sonraki divi başlık modülü stili, iki düğme ve en alta kaydırma simgesi dahil olmak üzere üç harekete geçirici mesaj içerir. Düğme simgelerinin kaydırma simgesiyle eşleştirilmesi, tasarımın simetrik yönüne yardımcı olur. Ve bölüm ayırıcılar, kullanıcıları sayfanın aşağısına yönlendiren güzel bir soyut üçgen tasarım oluşturur.

Tam genişlikte bir başlıkla yeni bir tam genişlikte bölüm oluşturun.

Ardından Başlık, Düğme #1 Bağlantı Metni ve Düğme #2 Bağlantı Metni için metni güncelleyin.

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

Arka Plan Rengi: #1a1844
Metin ve Logo Yönü: Orta
Simge: ekran görüntüsüne bakın
Aşağı Kaydır Simge Boyutu: 20px
Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Ağır
Başlık Metin Boyutu: 5vw (masaüstü), 40px (tablet), 30px (akıllı telefon)
Başlık Satırı Yüksekliği: 1.3em
Düğme İki Arka Plan Rengi: #fe4943
Düğme İki Kenar Genişliği: 0px
Düğme İki Simgesi: sağ ok (ekran görüntüsüne bakın)
Düğme Bir Arka Plan Rengi: #fe4943
Düğme Bir Kenar Genişliği: 0px
Düğme Bir Simge: sol ok (ekran görüntüsüne bakın)
Düğme Bir Simge Yerleşimi: Sol
Özel Dolgu: 10vw üst, 10vw sol

Şimdi tek yapmamız gereken üçgen arka plan tasarımını oluşturmak için bölüm ayırıcılarımızı eklemek. Bölüm ayarlarını açın ve aşağıdaki tasarım ayarlarını güncelleyin:

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: rgba(255,255,255,0.3)
Üst Bölücü Yüksekliği: 45vw

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: rgba(255,255,255,0.1)
Üst Bölücü Yüksekliği: 45vw

Şimdi son tasarımı kontrol edelim:

Bonus Tasarım İpucu: Düğmeler için Mobil Ayarlamalar

Özel CSS olmadığını söylediğimi biliyorum, ancak bu, bazılarınızın hoşuna gideceğini düşündüğüm, zorunlu olmayan ekstra bir gelişme. İki düğmeli başlıklar için ikinci düğmenin akıllı telefonlarda tasarımı bozan bir sol kenar boşluğuna sahip olduğunu fark edebilirsiniz. Akıllı telefonlarda daha temiz bir tasarım için, düğmeleri aynı genişlikte ve ikinci düğme marjı olmadan yapmak için sayfa ayarlarınıza özel CSS snippet'i ekleyebilirsiniz.

Divi Builder'da sayfa ayarlarını açın ve aşağıdaki CSS'yi ekleyin

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Şimdi mobildeki tasarıma bakın.

Stil #3: Yuvarlak Çerçeve

Bu yuvarlak divi başlık modülü tasarımı, harekete geçirici mesajınıza daha fazla odaklanmak için arka plan resminizi ve başlık içeriğinizi çerçevelemenin harika bir yoludur. Tek gereken, başlığınızın kenarlık yarıçapında bazı ayarlamalar, bir kutu gölgesi ve bazı özel boşluklardır.

Başlamak için, tam genişlikte bir başlık içeren yeni bir tam genişlikli bölüm oluşturun.

İlk olarak, Başlık, Düğme #1 Bağlantı metni ve bir Logo görüntüsü ekleyerek başlık için içerik öğelerini güncelleyelim.

Ardından, başlığın yüksekliğini ve genişliğini kaplayacak kadar büyük bir arka plan resmi ekleyin. Bu yuvarlak bir başlık olacağından, aynı yükseklik ve genişliğe sahip bir resim kullanmayı deneyin (1000 piksele 1000 piksel gibi).

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

Ayarları kaydet.

Ardından, arka plan rengini ve aralığını aşağıdaki gibi eklemek için bölüm ayarlarını açın:

Arka Plan Rengi: #000000
Özel Dolgu: 5vw üst, 5vw alt

Şimdi son tasarımı kontrol edin.

harmanlanmış solak

Bu başlık tasarımının birkaç benzersiz tasarım özelliği vardır. Başlık modülü, bölüm arka plan görüntüsünün sağ yarısını ortaya çıkarmak için gerçekte yeniden boyutlandırılır ve sola hizalanır. Ve başlık modülü içeriği, içerik aracılığıyla arka plan görüntüsünü ortaya çıkaran bir harmanlama etkisine sahiptir. Bunu başarmak için, bölümünüz için doğru türde bir arka plan görüntüsüne ihtiyacınız olacak. Genel olarak, harmanlanmış içeriğin daha görünür olması için görüntünün daha koyu öğelere sahip olmasını isteyeceksiniz.

Başlayalım.

İlk olarak, tam genişlikte bir başlık içeren yeni bir tam genişlikli bölüm oluşturun.

Başlık stillerimizi güncellemeye başlamadan önce, önce bölüm ayarlarına geçin ve aşağıdaki arka planı ekleyin:

Resmin odak noktası sağda olacak şekilde bir arka plan resmi ekleyin.

Arka Plan Gradyanı Sol Renk: rgba(0,0,0,0.54)
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Radyal Yön: Sağ Alt
Başlangıç ​​Konumu: %50
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Degradenin amacı görüntünün sol tarafını daha koyu hale getirmektir, böylece başlık modülü içeriğini karıştırdığımızda daha okunabilir olacaktır. Ayrıca, varsayılan başlık arka plan rengi hala etkin olduğundan bölüm arka planını şu anda göremezsiniz. Bunu daha sonra değiştireceğiz.

Başlık ayarlarını açın ve içeriği Başlık, Düğme #1 Bağlantı Metni ve koyu bir logo ile güncelleyin.

Şimdi arka plan rengini beyaz olarak değiştirin.

Ardından aşağıdakileri güncelleyin:

Başlık Yazı Tipi Ağırlığı: Ultra Kalın
Başlık Metin Rengi: #000000
Başlık metni Boyut: 8vw
Başlık Satırı Yüksekliği: 1.1em
Düğme Bir metin Boyut: 2.7vw
Düğme Bir Metin rengi: #000000
Düğme Bir Kenar Genişliği: 0.2em
Düğme Bir Kenar Rengi: #edf000
Yazı Tipi Ağırlığı: Ultra Kalın
Genişlik: %50 (masaüstü, tablet ve akıllı telefon)
Karışım Modu: Ekran

İşte son tasarım.

Stil #5: Büyük Ölçeklendirme Türü

Bu Divi başlık modülü tasarımı, tasarımdan ödün vermeden tarayıcı penceresiyle ölçeklenen büyük metinler oluşturmanın basit ve etkili bir yolunu sunar. Tam genişlikte bir başlık modülü kullandığımız için içerik alanımızı biraz genişletmemiz gerekecek. Ardından metnimizi boyutlandırmak için vw uzunluk birimini kullanmamız gerekiyor. Bu tasarım bölüm başlıkları için harika olurdu.

Başlamak için, tam genişlikte bir başlık içeren yeni bir tam genişlikli bölüm oluşturun.

Tam genişlikli başlık ayarlarında aşağıdakileri güncelleyin:

Başlık: Danışma
Alt Başlık Metni: Hizmetler
Düğme #1 Bağlantı Metni: Şimdi Başlayın

İçerik kutusundaki varsayılan metni silin.

Ardından hafif bir logo resmi ekleyin.

Daha sonra, başlığınız için daha fazla yatay alan yaratmak için başlık kapsayıcımızın varsayılan maksimum genişliğini artıracağız. Bunu yapmak için gelişmiş sekmeye gidin ve aşağıdaki CSS'yi Header Container altına ekleyin:

width: 100% ;
max-width: 100% ;

Şimdi tasarım ayarlarının geri kalanını aşağıdaki gibi güncelleyin:

Bir arka plan resmi ekleyin.
Metin ve Logo Yönü: Orta
Başlık Yazı Tipi: Cuprum
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metin Rengi: #bfbfbf
Başlık metni Boyut: 10vw
Başlık Harf Aralığı: 0.1em
Alt Başlık Yazı Tipi: Cuprum
Alt Başlık Metni Hizalama: Sağ (bu, metnin harf aralığıyla ortalanmasına yardımcı olur)
Alt Başlık Metin Boyutu: 3vw
Alt Başlık Harf Aralığı: 7.8vw
Düğme Bir Kenar Genişliği: 0px
Düğme Bir Yazı Tipi: Cuprum
Düğme Bir Simgesi: ekran görüntüsüne bakın

İşin püf noktası, metin için vw uzunluk birimini kullanmaktır. Ardından, başlık metniyle mümkün olan en iyi şekilde hizalanacak şekilde alt başlık harf aralığını ayarlayın.

Yatay aralığımızı en üst düzeye çıkarmak için başlık içeriğimize aşağıdaki gibi özel bir genişlik eklememiz gerekiyor:

İçerik Genişliği: %80;

Bu, varsayılan %100'den daha az olsa da, ayarın değiştirilmesi varsayılanı geçersiz kılar ve daha önce eklediğimiz özel css ile ayarlanır.

Son olarak, tasarımı tamamlamak için bir kutu gölgesi ekleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 0px
Kutu Gölge Yayılma Gücü: 60px

Şimdi nihai sonucu kontrol edin.

Onları Tam Ekran Başlıklarına Dönüştürün!

Yukarıdaki tasarımlar, bir düğmeye tıklayarak kolayca tam ekran yapılabilir. Bu, tam genişlikli başlık modülünün güçlü bir özelliğidir. Başlık tasarım ayarlarına gidin ve “Tam Ekran Yap” seçeneğini seçin.

Ayrıca, başlığın tarayıcı penceresine tam olarak sığması için bu tasarımlar için özel dolguyu çıkarmanız gerekecektir.

Son düşünceler

Bunlar, Divi Başlık Modülü ile sunulan başlık tasarım olanaklarından sadece birkaçıdır. Ve tüm tasarım ayarlarını denemek çok eğlenceli olabilir. Bir şey olursa, umarım bu örnekler bir sonraki projeniz için küçük bir ilham kaynağı olur.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!