Tipografi Divi’de 5 benzersiz başlık tasarımı yapmayı ayarlayın
Tipografi düzenleme, Divi’de güzel bir başlık tasarımı oluşturmak için kolay ve etkili bir tekniktir. Tipografi genellikle arama motorları tarafından okunan içeriğe gerçekten katkıda bulunmayacak şekilde soyut bir tasarım öğesi olarak sıkıca kullanılır. Ancak, birkaç divi tekniği ile gerçek başlık tasarımı (H1, H2, vb.) İle yaratıcı olabilirsiniz. Bu öğreticide, yığılmış tiplerle 5 farklı başlık tasarımı yapmak için divi kullanacağım. Umarım bu tasarımlar kendi başlık tasarımınız için ilham verebilirsiniz. Başlayalım. Aşağıdaki gizlice göz atma 5 tasarım.
Tasarım #1
Metin modülümüzü eklemeden önce, önce parçaların ve satırların ayarlarına dikkat edelim. Bu, modül ayarını daha sonra çok daha kolay hale getirecektir. Aşağıdaki bölüm ayarlarını açın ve güncelleme: Bir arka plan görüntüsü ekleyin (en az 1920px genişliğinde) Sol renk gradyan arka plan: #ffffff sağ renk gradyan arka plan: RGBA (255,255,255,0) Gradyanı arka plan görüntüsünün üzerine yerleştirin: sonraki, ayarlar ayarlarını güncelleyin Aşağıdaki gibi: Arka plan gradyanının sol rengi: RGBA (255,255,255.0) Sağ renk arka plan gradyanı: #fffff özel genişlik:% 100 Özel Dolgu: 0px üst, 0px aşağıda Şimdi metin modülümüzü üç sütunumuzun orta sütununa ekleyebiliriz. Ardından metin modülünün ayarlarını aşağıdaki gibi güncelleyin: İçerik kutusundaki yapay içeriği, “Tasarım” ı okuyan H2 başlığı ile değiştirin:
Tasarım
Sonra kalan ayarları aşağıdaki gibi güncelleyin: Başlık 2 Font : Kahire Başlık 2 Ağırlık Yazı Tipi: Normal Başlık 2 Yazı Tipi Stil: Sermaye Harfleri (TT) Başlık 2 Metin Boyutu: 8VW Genişlik:% 58 (Masaüstü),% 16 (Tablet),% 18 (Akıllı Telefon) Modül Hizalama: Özel Merkez Marj: Yukarıdaki -10VW, 8VW başlık metni boyutu ile birlikte özel genişlik değeri altında -10VW bu tasarımı yapmanın anahtarıdır. Özel genişlik metni sıktı, böylece her mektup birbirine yığıldı. Genişlik yüzdesi değeri tablet üzerinde büyük ölçüde değişir, çünkü metin modülünü tutan sütunun boyutu 1/3’ten tam genişliğe değişir. Başlığın başlığını VW uzun birimine (ViewPort Genişliği) ayarlamak, metnin tarayıcı penceresinin boyutu ile mükemmel bir şekilde tartışılmasını sağlar.
Son olarak, tasarımı sağ ve soldaki sınırla tamamlayalım. Sağ Sınır Genişliği: 4px Sol Sınır Genişliği: 4px Burada sonuç.Başlık Tasarımı #Aşağıdaki örnek için, tasarımı biraz değiştireceğim, böylece başlığın başlığı ikiye ayrılır ve her harf tek tek istiflenmiş yerine istiflenir. Ayrıca başka bir görünüm için ana başlığın altına altyazılar ekleyeceğim. İçerik kutusuna aşağıdaki H3 başlığını ekleyin:
İşlemimiz
Sonra modüle beyaz bir arka plan ekleyin: arka plan rengi: #ffffff
Tasarım sekmesinin 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 Condred Başlık 3 Metin Seviyesi: Orta Başlık 3 Metin Boyutu: 32px (masaüstü), 20px (Tablet ), 16px (akıllı telefon) Ardından, metin modülünün hücresel olarak daha duyarlı olması için boşluğu güncelleyin: özel kenar boşluğu (tablet): -5vw yukarıdaki, -10vw özel marj (akıllı telefon): -5vw yukarıdaki, -12vw şimdi bölümde ve arka plan gradyanını yayınlayın. sıra. Ardından aşağıdaki satır ayarlarını güncelleyerek satırınıza biraz dolgu ekleyin: Özel Dolgu (Masaüstü): 5VW üst, 5VW daha düşük özel dolgu (tablet): 0VW üst, 0VW daha düşük 0VWSonuçlar aşağıdadır. Başlık Tasarımı #3 Bu sefer sola gitmeyi telafi edeceğiz ve her harfi dikey olarak biriktireceğiz. Sonra yazı tipini değiştireceğim ve modül sınırını tamamlamak için uygun bir çizgi sağlayacağım. İkinci tasarım bölümünü iki katına çıkarın ve modül ayarlarını aşağıdaki gibi güncelleyin: Öncelikle İç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 hizalaması: Sol (varsayılan)
Mobil cihazı ayarlamak için aşağıdaki alanları güncelleyin: Özel kenar (tablet): -15vw daha düşük özel kenar boşluğu (akıllı telefon): -17vw daha düşük
Şimdi satır ayarlarını açın ve doğru mesafeyi elde etmek için aşağıdakileri güncelleyin. Pilding Custom: Top 2VW, Alt 2VW, Sol 10VW
Ardından modül sınırını tamamlamak için satıra sınır ekleyin. Üst sınır genişliği: 4px Alt Sınır Genişliği: 4pxŞimdi geriye kalan şey, modülümüzü satırın sol sütununa sürüklemektir. Sonuç’a bakın. Başlık Tasarımı #4 Son başlık tasarımı için, başlığı yığılmış olarak tamamen sola çıkaracağım ve daha sonra birkaç renk ve serin kutu gölgesinin etkisi ekleyeceğim. Önce sol dolguları kaldırmak için satır ayarlarını güncelleyin. Ardından metin modülü ayarlarını aşağıdakileri içerecek şekilde güncelleyin: Arka Plan Rengi: #5B7796 Metin Renk: Işık Başlık 2 Yazı Tipi: Kahire Başlık 2 Yazı Tipi Stil: Varsayılan Başlık 2 Metin Boyutu: 10VW Metin Boyutu Metin: 5VW Özel Dolgu: Yukarı 2VW, Alt 2VW, Sol 4VW, Sağ 4VW Sınır stillerini varsayılan olarak döndürür ve ardından yeni kenarlık ayarlarını aşağıdaki gibi güncelleyin: Sağ Sınır Sınır: 0.2EM sağ kenar renk: #fffff alt sınır genişliği: 0.2 EM sağ kenar rengi: #fffffff Şimdi fark edebileceğiniz gibi, sınır için 0.2EM değeri küçük görünebilir. Bunun nedeni, EM değerinin bu nedenle 5VW olarak değiştirdiğimiz gövde yazı tipi değerine dayanmasıdır. Sınırın genişliğinin başlığımızın büyüklüğüne uyum sağlamasını istediğimiz için, vücudumuzun metnine tarayıcının boyutu ile boşaltılacak VW uzunluğunun birim değerini vermeliyiz. Şimdi iyi bir kırık ızgara efekti için bir kutu gölgesi verelim. Gölge Kutusu: Yatay ekrana bakın Gölge Kutusu: 20px Dikey Konum Gölge Kutusu: 20px Gölge Renk: #5B7796 Kutu Tonlarının Konumu: Dışarı Genişlik:% 50 (masaüstü),% 13 (tablet),% 16 (akıllı telefon) Son adım için dolgunuzu ve sınırınızı çıkarın. Sonra sonucu görün.
TASARIM #5 Bu son başlık tasarımı için, metin modülünü genişletmek için yalnızca biraz mesafeyi değiştireceğiz. Bu, 2. Başlık Tasarımında benzer bir tasarım yapacaktır. İlk olarak, metin modülünü açın ve H2 başlığınızın altındaki aşağıdaki metni ekleyin:
İşlemimiz
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Başlık 2 Yazı Tipi Style: COPER (TT) Genişlik:% 94 (Desktop), % 29 (tablet), % 29 (akıllı telefon) Ardından aralığı aşağıdaki gibi güncelleyin: Özel marj: -8vw üst, -5vw Özel dolgunun altında: üst 4VW, 4VW’nin altında
Sonuçlar aşağıdadır. Bu tasarımın bir cep telefonunda iyi görünmesini sağlamak için duyarlı hileler, metin modülünün boyutunu ve kenar boşluğunu daralan tarayıcı penceresine uyacak şekilde ayarlamaktır. Dolayısıyla, ölçeğe uymayan bir şey varsa, bu mülkü kendi amacınız için ayarlamanız gerekebilir. İşte bir cep telefonunda bir tasarım ekranı.