Divi'nin Yeni Yazı Tipi Seçeneklerinin Gücünü Gösteren 5 Harika Tasarım Örneği

Web sitenizdeki yazılı içeriği temsil etme şekliniz, mesajın ziyaretçileriniz tarafından nasıl alınacağının büyük bir parçasıdır. Ona özel bir ilgi göstermek ve benzersiz bir şey bulmaya çalışmak, akılda kalıcı bir şekilde iletişim kurmanıza yardımcı olabilecek şeylerden biridir. Bu nedenle, ne tür bir web sitesi oluşturuyor olursanız olun, Divi'nin yeni yazı tipi seçenekleriyle oluşturabileceğiniz harika sonuçlardan bazılarını size göstereceğiz. Elbette, bu yeni tasarım ayarlarıyla bu gönderide göstereceğimizden çok daha fazlası mümkün, ancak kendi keşif ve tasarım sürecinizi başlatmak için gücü gösteren beş harika tasarım örneğini bir araya getirdik. Divi'nin yeni yazı tipi seçenekleri. Eğlence!

Sonuç

Öğreticiye dalmadan önce, adım adım nasıl yeniden oluşturacağınızı göstereceğimiz örneklere bir göz atalım. Bu örneklerin her biri, web sitenizde istediğiniz yere yerleştirebileceğiniz yalnızca bir Metin Modülü (doğru ayarlarla) kullanılarak yapılmıştır.

Örnek 1

Örnek #2

Örnek 3

Örnek 4

Örnek #5

Divi'nin Yeni Yazı Tipi Seçeneklerinin 5 Harika Kombinasyonu

Youtube Kanalımıza Abone Olun

Örnek 1'i Yeniden Oluştur

İlk örnek için, Metin Modülü içinde kullandığımız metne bir kenarlık verecek bir degrade arka plan, ters çevrilmiş bir yazı tipi ailesi ve bir metin gölgesinin bir kombinasyonunu kullanıyoruz.

Degrade Arka Plan

Bir Metin Modülü ekledikten sonra ilk yapmanız gereken degrade bir arka plan eklemektir. Hangi degrade arka planının görünmesini istediğinizi seçebilseniz de, bu örnek için aşağıdaki ayarları kullandık:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: #eeef8b
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %0

Metin Ayarları

Ardından Tasarım sekmesine gidin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Metin Yazı Tipi: Zilla Slab Vurgusu
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 100px (Masaüstü), 62px (Tablet), 38px (Telefon)
• Metin Rengi: #FFFFFF
• Metin Satır Yüksekliği: 1em

Metin alt kategorisine aşağıdaki Metin Gölgesini de ekleyin:

• Metin Gölgesi Yatay Uzunluğu: 0em
• Metin Gölgesi Dikey Uzunluğu: 0em
• Metin Gölge Bulanıklığı Gücü: 0.06em
• Metin Gölge Rengi: #000000
• Metin Yönü: Merkez

Örnek 2'yi Yeniden Oluştur

Bu ikinci örnekle ilgili en özel şey, metinde çift dalgalı bir alt çizgi varmış gibi görünmesini sağlayacak bir metin gölgesiyle birlikte dalgalı alt çizginin kullanılmasıdır. Bunun da ötesinde, Metin Modülünün sol ve sağ tarafı için çift kenarlık kullanıyoruz.

Metin Ayarları

Bir Metin Modülü ekledikten sonra, Tasarım sekmesindeki Metin alt kategorisinde aşağıdaki değişiklikleri yaparak başlayabilirsiniz:

• Metin Yazı Tipi: Sofya
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Yazı Tipi Stili: Altı Çizili
• Metin Alt Çizgi Rengi: rgba(131,0,233,0.15)
• Metin Alt Çizgi Stili: Dalgalı
• Metin Boyutu: 78px (Masaüstü), 36px (Tablet), 25px (Telefon)
• Metin Rengi: #606060
• Metin Aralığı: 12px
• Metin Satır Yüksekliği: 1em

Aşağıdaki Metin Gölgesini Metin alt kategorisine de ekleyin:

• Metin Gölgesi Yatay Uzunluğu: 0em
• Metin Gölgesi Dikey Uzunluğu: 0.17em
• Metin Gölge Bulanıklığı Gücü: 0.05em
• Metin Gölge Rengi: rgba(162.181,0,0.13)
• Metin Yönü: Merkez

Sınır

Kenarlık alt kategorisini açarak devam edin ve sol ve sağ Kenarlık Stilleri için aşağıdaki ayarları kullanın:

• Kenar Genişliği: 11px
• Kenar Rengi: rgba(162.181.0.0.18)
• Bordür Stili: Çift

Örnek 3'ü Yeniden Oluştur

Üçüncü örnek için, yazı tipimizin rengini bölüm arka plan rengiyle eşleştiriyoruz. Başka bir arka plan rengi kullanıyorsanız, metin rengini de değiştirdiğinizden emin olun. Ayrıca metnin kenarlıklarını oluşturmak için bir metin gölgesi ekleyeceğiz. Bunun da ötesinde, onu vurgulamak için metnin altını da kullanıyoruz.

Metin Ayarları

Bu örnekte, Metin Modülünün Metin alt kategorisi için aşağıdaki ayarlara ihtiyacınız olacak:

• Metin Yazı Tipi: Bungee Satır İçi
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Yazı Tipi Stili: Altı Çizili
• Metin Alt Çizgi Rengi: #FFFFFF
• Metin Altı Çizili Stili: Düz
• Metin Boyutu: 69px (Masaüstü), 45px (Tablet), 29px (Telefon)
• Metin Rengi: #eded
• Metin Satır Yüksekliği: 1em

Son olarak, aşağıdaki Metin Gölgesini de kullanın:

• Metin Gölgesi Yatay Uzunluğu: 0em
• Metin Gölgesi Dikey Uzunluğu: 0em
• Metin Gölge Bulanıklığı Gücü: 0.05em
• Metin Gölge Rengi: #000000
• Metin Yönü: Merkez

Örnek 4'ü Yeniden Oluştur

Aşağıdaki örnek için, bir arka plan rengini yuvarlatılmış köşelerle ve bir kenarlık stiliyle birleştiriyoruz. Kenarlık stili için kullandığımız renk, üstü çizili yazı tipi stili için kullandığımız renkle aynı. Metnimizin hala okunabilir olduğundan emin olmak için biraz şeffaf bir renk kullanıyoruz.

Arka plan rengi

Metin Modülünüzün arka plan rengi olarak '#f2f2f2' ekleyerek başlayın.

Metin Ayarları

Ardından Tasarım alt kategorisine geçin ve Metin alt kategorisinde aşağıdaki değişiklikleri yapın:

• Yazı Tipi: Ribeye İliği
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Yazı Tipi Stili: Üstü çizili
• Metin Üstü Çizili Renk: rgba(224,43,32,0.18)
• Metin Üstü çizili Stil: Çift
• Metin Boyutu: 78px (Masaüstü), 46px (Tablet), 31px (Telefon)
• Metin Rengi: #000000
• Metin Satır Yüksekliği: 1.1em
• Metin Yönü: Merkez

aralık

Ardından, Aralık alt kategorisine aşağıdaki Özel Dolguyu uygulayın:

• Üst: 15 piksel
• Alt: 15 piksel

Sınır

Son olarak, Border alt kategorisinde aşağıdaki değişiklikleri yapın:

• Yuvarlatılmış Köşeler (Tümü): 100 piksel
• Kenar Stili: Tüm Taraflar
• Kenar Genişliği: 4px
• Kenar Rengi: rgba(224,43,32,0.18)
• Bordür Stili: Çift

Örnek 5'i Yeniden Oluştur

Son örnekte, Metin Modülümüze son dokunuşu eklemek için degrade bir arka planı yuvarlatılmış köşeler, bir üst kenarlık stili ve bir kutu gölgesi ile birleştiriyoruz.

Degrade Arka Plan

Metin Modülünüze degrade bir arka plan ekleyerek başlayın:

• İlk Renk: rgba(155,175,193,0.2)
• İkinci Renk: rgba(244,244,244,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %48
• Bitiş Konumu: %0

Metin Ayarları

Ardından Tasarım sekmesine geçin ve Metin alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Metin Yazı Tipi: Codystar
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 60px (Masaüstü), 35px (Tablet), 22px (Telefon)
• Metin Rengi: #494949
• Metin Satır Yüksekliği: 1.1em
• Metin Yönü: Merkez

boyutlandırma

Ardından, Boyutlandırma alt kategorisine gidin ve bu kategoride aşağıdaki değişiklikleri yapın:

• Genişlik: %78 (Masaüstü), %76 (Tablet), %86 (Telefon)
• Modül Hizalaması: Merkez

aralık

Ayrıca Aralık alt kategorisine aşağıdaki dolguyu eklememiz gerekecek:

• Üst: 15 piksel
• Alt: 15 piksel

Sınır

Ardından, Kenarlık alt kategorisini açın ve ona aşağıdaki değişiklikleri uygulayın:

• Sol Üst ve Sağ Alt Köşeler: 500px
• Sol Alt ve Sağ Üst Köşeler: 20px
• Üst Kenar Genişliği: 2px
• Üst Kenar Rengi: rgba(0,0,0,0.44)
• Üst Kenarlık Stili: Çift

Kutu Gölge

Son olarak, Metin Modülümüze ince bir Kutu Gölgesi de ekleyeceğiz:

• Kutu Gölgesi Yatay Konumu: 5px
• Kutu Gölgesi Dikey Konumu: -10px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 2px
• Gölge Rengi: rgba(155,175,193,0.66)
• Kutu Gölge Konumu: Dış Gölge

Son düşünceler

Bu gönderide, size web sitenizdeki Metin Modüllerini şekillendirmenin bazı harika yollarını gösterdik. Tabii ki, orada çok daha fazla olasılık var ama bu örneklerle, bir başlangıç ​​​​yapıyorsunuz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Öne Çıkan Görsel vladwel / Shutterstock.com