Divi'de 5 Benzersiz Başlık Tasarımı Oluşturmak için Tipografiyi Yığınlama

Yığın tipografi, Divi'de güzel başlık tasarımları oluşturmak için kolay ve etkili bir tekniktir. Tipografi, genellikle, arama motorları tarafından okunan içeriğe gerçekten katkıda bulunmayan şekillerde kesinlikle soyut bir tasarım öğesi olarak kullanılır. Ancak birkaç Divi tekniği ile gerçek başlıkların (h1, h2, vb.) tasarımında da yaratıcı olabilirsiniz.

Bu derste, yığılmış tipte 5 farklı başlık tasarımı oluşturmak için Divi'yi kullanacağım. Umarım, bu tasarımları kendi başlık tasarımlarınız için ilham kaynağı olarak kullanabileceksiniz.

Başlayalım.

Gizlice Bakış

İşte 5 tasarıma bir göz atın.

Tasarım #1

Tasarım #2

Tasarım #3

Tasarım #4

Tasarım #5

Başlarken

Bu tasarımları sıfırdan inşa edeceğiz. Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Visual Builder'ı dağıtın. “Sıfırdan İnşa Et” seçeneğini seçin ve inşa etmeye hazırsınız.

5 tasarımın her birini oluşturma sürecini basitleştirmek için, bir sonraki tasarıma bir adım önde başlamak için bölümleri çoğaltacağım. Bu yüzden bu tasarımları ilkinden başlayarak sırayla oluşturmak en iyisi olacaktır.

Başlık Tasarımı #1

Bu ilk tasarım için, başlık metninizi dikey olarak nasıl yığacağınızı ve satırın ortasına nasıl ortalayacağınızı göstereceğim. Ayrıca, beyaz sayfa arka planlarıyla mükemmel uyum sağlayan dengeli bir yarı saydam beyaz kaplama sağlamak için arka plan görüntüsünün üzerine iki katman gradyan (biri bölümde ve biri satırda) ekleyeceğim. Sonuç ince ama çok benzersiz ve temiz.

Metin modülümüzü eklemeden önce öncelikle bölüm ve satır ayarlarıyla ilgilenelim. Bu, modülün daha sonra ayarlanmasını çok daha kolay hale getirecektir.

Bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

Bir arka plan resmi ekleyin (en az 1920 piksel genişliğinde)
Arka Plan Gradyanı Sol Renk: #ffffff
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından, satır ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: #ffffff
Özel Genişlik: %100
Özel Dolgu: 0px Üst, 0px Alt

Artık metin modülümüzü üç sütunlu satırımızın orta sütununa ekleyebiliriz. Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik kutusundaki sahte içeriği şu şekilde "tasarım" yazan bir h2 üstbilgisiyle değiştirin:

<h2>design</h2>

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

Başlık 2 Yazı Tipi: Kahire
Başlık 2 Yazı Tipi Ağırlığı: Normal
Başlık 2 Yazı Tipi Stili: Büyük Harf (TT)
Başlık 2 Metin Boyutu: 8vw
Genişlik: %58 (masaüstü), %16 (tablet), %18 (akıllı telefon)
Modül Hizalaması: Merkez
Özel Kenar Boşluğu: -10vw Üst, -10vw Alt

8vw başlık metin boyutuyla birleştirilmiş özel genişlik değerleri, bu tasarımın yapılmasının anahtarıdır. Özel genişlik, metni sıkıştırır, böylece her harf birbirinin üzerine yığılır. Metin modülünü tutan sütun boyutu 1/3'ten tam genişliğe gittiği için genişlik yüzdesi değeri tablette büyük ölçüde değişir. Başlık metnini vw (görünüm alanı genişliği) uzunluk birimine ayarlamak, metnin tarayıcı penceresi boyutuyla mükemmel şekilde ölçeklenmesini sağlar.

Son olarak sağ ve sol taraflara bordür koyarak tasarımı bitirelim.

Sağ Kenar Genişliği: 4px
Sol Kenar Genişliği: 4px

İşte nihai sonuç.

Başlık Tasarımı #2

Bir sonraki örnek için, tasarımı biraz ince ayar yapacağım, böylece başlık metni her harfin ayrı ayrı istiflenmesi yerine yarıya bölünecek ve istiflenecek. Ayrıca başka bir bakış için ana başlığın altına bir alt başlık ekleyeceğim.

İçerik kutusuna aşağıdaki h3 başlığını ekleyin:

<h3>our process</h3>

Ardından modüle beyaz bir arka plan ekleyin:

Arka Plan Rengi: #ffffff

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Başlık 2 Metin Boyutu: 10vw
Genişlik: %100 (masaüstü), %32 (tablet), %33 (akıllı telefon)
Başlık 3 Yazı Tipi: Ubuntu Yoğun
Başlık 3 Metin Hizalama: Merkez
Başlık 3 Metin Boyutu: 32px (masaüstü), 20px (tablet), 16px (akıllı telefon)

Ardından, metin modülünü mobilde daha duyarlı hale getirmek için aralığı güncelleyin:

Özel Kenar Boşluğu (tablet): -5vw Üst, -10vw
Özel Kenar Boşluğu (akıllı telefon): -5vw Üst, -12vw

Şimdi bölümdeki ve satırdaki arka plan gradyanını çıkarın.

Ardından, aşağıdaki satır ayarını güncelleyerek satırınıza biraz dolgu ekleyin:

Özel Dolgu (masaüstü): 5vw Üst, 5vw Alt
Özel Dolgu (tablet): 0vw Üst, 0vw Alt

İşte nihai sonuç.

Başlık Tasarımı #3

Bu sefer başlığı sola kaydıracağız ve her harfi dikey olarak istiflemeye geri döneceğiz. Sonra yazı tipini değiştireceğim ve modül sınırlarını tamamlamak için satıra eşleşen bir kenarlık vereceğim.

İkinci tasarım bölümünü çoğaltın ve ardından modül ayarlarını aşağıdaki gibi güncelleyin:

Önce içerik kutusundaki h3 başlığını silin.

Başlık 2 Yazı Tipi: Ubuntu Yoğunlaştırılmış
Başlık 2 Metin Boyutu: 6vw
Genişlik: %54 (masaüstü), %16,4 (tablet), %17,5 (akıllı telefon)
Modül Hizalama: Sol (varsayılan)

Mobil cihazlara göre ayarlamak için aşağıdaki boşluğu güncelleyin:

Özel Kenar Boşluğu (tablet): -15vw Alt
Özel Kenar Boşluğu (akıllı telefon): -17vw Alt

Şimdi satır ayarlarına gidin ve doğru aralığı elde etmek için aşağıdakileri güncelleyin.

Özel Dolgu: 2vw Üst, 2vw Alt, 10vw Sol

Ardından, modülün kenarlığını tamamlamak için satıra bir kenarlık ekleyin.

Üst Kenar Genişliği: 4px
Alt Kenar Genişliği: 4px

Şimdi geriye kalan tek şey modülümüzü satırın sol sütununa sürüklemek.

nihai sonucu kontrol edin.

Başlık Tasarımı #4

Son başlık tasarımı için, yığılmış başlığı tamamen sola hizalı hale getireceğim ve ardından biraz renk ve serin bir kutu gölge efekti ekleyeceğim.

Sol dolgudan kurtulmak için önce satır ayarlarını güncelleyin.

Ardından, aşağıdakileri içerecek şekilde metin modülü ayarlarını güncelleyin:

Arka Plan Rengi: #5b7796
Metin Rengi: Açık
Başlık 2 Yazı Tipi: Kahire
Başlık 2 Yazı Tipi Stili: varsayılan
Başlık 2 Metin Boyutu: 10vw

Metin Metin Boyutu: 5vw
Özel Dolgu: 2vw Üst, 2vw Alt, 4vw sol, 4vw sağ

Kenarlık Stillerini varsayılana geri yükleyin ve ardından yeni kenarlık ayarlarını aşağıdaki gibi güncelleyin:

Kenar Sağ Genişliği: 0.2em
Sağ Kenar Rengi: #ffffff

Alt Kenar Genişliği: 0.2em
Sağ Kenar Rengi: #ffffff

Şimdi fark edebileceğiniz gibi, sınır için 0.2em değeri küçük görünebilir. Bunun nedeni em değerinin gövde font değerini temel almasıdır, bu nedenle özellikle 5vw olarak değiştirmişizdir. Kenar genişliğinin başlığımızın boyutuyla birlikte ayarlanmasını istediğimizden, gövde metnimize tarayıcı boyutuna göre ölçeklenecek bir vw uzunluk birim değeri vermemiz gerekiyor.

Şimdi güzel bir kırık ızgara efekti için ona bir kutu gölgesi verelim.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 20px
Kutu Gölge Dikey Konumu: 20px
Gölge Rengi: #5b7796
Kutu Gölge Konumu: Dış Gölge

Ardından, mobil için modülün boyutunu güncelleyin.

Genişlik: %50 (masaüstü), %13 (tablet), %16 (akıllı telefon)

Son bir adım olarak, sıranızın dolgusunu ve kenarlığını çıkarın.

Ardından nihai sonucu kontrol edin.

Başlık Tasarımı #5

Bu son başlık tasarımı için, metin modülünü genişletmek için boşlukları biraz ayarlayacağız. Bu, başlık tasarımı #2'dekine benzer bir tasarım yaratacaktır.

İlk önce metin modülünü açın ve aşağıdaki metni h2 başlığınızın altına ekleyin:

<h3>our process</h3>

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

Başlık 2 Yazı Tipi Stili: Büyük Harf (TT)
Genişlik: %94 (masaüstü), %29 (tablet), %29 (akıllı telefon)

Ardından aralığı aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: -8vw Üst, -5vw Alt
Özel Dolgu: 4vw Üst, 4vw Alt

İşte nihai sonuç.

Duyarlı

Bu tasarımların mobil cihazlarda iyi görünmesini sağlamanın püf noktası, metin modülünün boyutunu ve kenar boşluklarını küçülen tarayıcı penceresiyle ölçeklenecek şekilde ayarlamaktır. Bu nedenle, bir şey tam olarak ölçeklenmezse, bu özellikleri kendi amaçlarınız için ayarlamanız gerekebilir. İşte tasarımların mobilde nasıl görüneceği.

Son düşünceler

Bu eğitimdeki 5 başlık tasarımının en azından kendi tasarımlarınız için bazı harika başlangıç ​​noktaları sunacağını umuyorum. Tahmin edebileceğiniz gibi, metin dikey olarak istifleneceğinden, tasarım daha kısa (tek kelimelik) başlıklar için en iyi sonucu verir. Ancak bu tasarımları gerçekten benzersiz kılmak için eklenebilecek tonlarca tasarım öğesi var. Kendiniz yapmak için farklı yazı tiplerini, renkleri ve kenarlıkları keşfetmekten çekinmeyin.

Daha fazla ilham almak için bu dikey metin düzenine göz atın. Ayrıca, daha özel bir css yaklaşımıyla yan ve dikey metin oluşturmayı da öğrenmek isteyebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!