Divi'de Bölüm Ayırıcıları Kullanarak Çarpıcı Metin Tasarımları Nasıl Oluşturulur

Web siteniz için benzersiz metin tasarımları oluşturmak, özellikle çok fazla CSS kullanmak istemiyorsanız veya Photoshop'ta tasarladığınız görüntüler için seo-dostu metin eklemeye başvurmak istemiyorsanız zor olabilir. Divi ile (ve bazı "kullanıma hazır" düşünce), herhangi bir harici css veya özel görüntü olmadan bazı benzersiz metin tasarımları oluşturabilirsiniz. İşin püf noktası, metninizi bir dizi farklı yolla ara ve doku eklemek için Divi'nin bölüm ayırıcılarını kullanmaktır. Bu eğitimde, sayfa başlıklarınızı bir sonraki seviyeye taşıyacak bazı benzersiz metin tasarımları oluşturmak için Divi'nin bölüm ayırıcılarının gücünü keşfedeceğim.

Başlayalım.

Gizlice Bakış

İşte bu tekniği kullanarak mümkün olan metin tasarımlarına sadece birkaç örnek:

Başlarken

Bu tasarım için görsel oluşturucuyu kullanarak yeni bir sayfa oluşturmanız gerekecek. WordPress Kontrol Panelinizden Sayfalar > Yeni Ekle'ye gidin. Ardından sayfanıza bir başlık verin ve görsel oluşturucuyu dağıtın. "Sıfırdan Oluştur" seçeneğini seçin. Artık başlamaya hazırsınız!

Tasarım 1: Degrade Vurgulu Bozuk Metin

Bu ilk metin tasarımında, metni bölmek için bölüm ayırıcılar kullanacağım ve degrade bir arka plan kullanarak benzersiz şekilli bir vurgulama öğesi ekleyeceğim. Tek sütun düzenine sahip yeni bir bölüm ekleyin. Bu noktada bir modül eklemeniz gerekmez. İlk önce bölümü özelleştirmekle başlayacağız.

Bölüm Ayarları

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: rgba(124,218,36,0.66)
Arka Plan Gradyanı Sağ Renk: rgba(0,106,193,0.61)

Genişlik: %80
Bölüm Hizalama: Merkez

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #ffffff
Üst Bölücü Yüksekliği: 1.8vw
Üst Bölücü Yatay Tekrar: 3x
Üst Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #ffffff
Alt Bölücü Yüksekliği: 1.8vw
Alt Bölücü Yatay Tekrar: 3x
Alt Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Özel Kenar Boşluğu: 5vw Üst, 5vw Alt
Özel Dolgu: 0px Üst, 0px Alt

Metninizin tasarımı bölüm ayırıcılar kullanılarak gerçekleştirileceğinden, bölümü herhangi bir dolgu olmadan kompakt tutmak önemlidir, böylece ayırıcılar minimum ayırıcı yüksekliği ile metinle örtüşür. Bir vw uzunluk birimiyle bölücü yüksekliğini ayarlamak, tüm ekran boyutlarında tutarlı bir tasarım için bölücü stilinin güzel bir şekilde ölçeklenmesini sağlayacaktır. Bölüme özel bir kenar boşluğu vermek isteğe bağlıdır, ancak metin modülümüzde onu bölümümüzün üstüne ve altına genişletmek için negatif kenar boşlukları kullanacağımızdan boşluk için de yararlıdır (bu daha sonra daha anlamlı olacaktır).

Satır Ayarları

Sıra için tek yapmamız gereken genişliği ve dolguyu ayarlamak. Aşağıdaki satır ayarlarını güncelleyin:

Özel Genişlik: %100
Özel Dolgu: 0px Üst, 0px Alt

Metnimiz satır sütununa ekleneceği için, bölücülerimizin metnimizin üst ve alt kısmına sarılması için dolgudan kurtulmamız gerekiyor.

Metin Modülü Ayarları

Şimdi nihayet metin modülünü bir sütun satırına ekleyebiliriz. Satırın içine “bizim çalışmamız” içeriğine sahip bir metin modülü ekleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Yazı Tipi: Oswald
Metin Yazı Tipi Stili: TT
Metin Metin Rengi: #0c71c3
Metin Metin Boyutu: 10vw
Metin Satır Yüksekliği: 1em
Metin Yönü: Merkez
Özel Kenar Boşluğu: -5vw Üst, -4vw Alt
Özel Dolgu: 2vw Üst, 2vw Alt

Buradaki anahtar, metni bölümün üstünde ve altında genişletmek için özel negatif kenar boşluğunu kullanmaktır. Bu, bölüm ayırıcıların, bozuk tasarım efekti oluşturmak için metnin iç kısmıyla örtüşmesine olanak tanır. Arka plan gradyanı da güzel bir tasarım dokunuşu vermek için parlıyor. Sonuç, belki de bir ton yaratıcı varyasyonun kapısını açan en sevdiğim metin tasarımlarından biri.

İşte son tasarım.

Metin Tasarımı #2: Dikey Çizgi Dokusu Olan Metin

İkinci metin tasarımı için devam edin ve tek sütunlu yeni bir bölüm oluşturun. Ardından sütuna bir metin modülü ekleyin. Önce bölümü özelleştirmek yerine, tasarım sürecini daha iyi görebilmeniz için metin modülüyle başlamanın en iyisi olduğunu düşündüm.

Metin Ayarları

Tek sütunlu satıra, “bizim çalışmamız” içeriğine sahip bir metin modülü ekleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Poppins
Metin Yazı Tipi Ağırlığı: Ultra Kalın
Metin Yazı Tipi Boyutu: 8vw
Metin Satır Yüksekliği: 1em
Metin Yönü: Merkez
Özel Kenar Boşluğu: 0px Üst, 0px Alt

Satır Ayarları

Satır ayarları ilk tasarım örneğiyle aynı olacaktır, böylece satır stillerini kopyalayıp bu satıra yapıştırabilirsiniz. Veya satır ayarlarını aşağıdaki gibi güncelleyin:

Özel Genişlik: %100
Özel Dolgu: 0px Üst, 0px Alt

Bölüm Ayarları

Bölüm ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: %70

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #ffffff
Üst Bölücü Yüksekliği: 8vw
Üst Bölücü Yatay Tekrar: 150x
Üst Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #ffffff
Alt Bölücü Yüksekliği: 8vw
Alt Bölücü Yatay Tekrar: 150x
Alt Bölücü Çevirme: Dikey
Alt Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Özel Dolgu: 0px Üst, 0px Alt

Bu tasarımın anahtarı Bölücü Yatay Tekrar seçeneğidir. Ayırıcı yatay tekrarı, metnin yüksekliğine eşit bir yükseklikle 150x'e ayarlamak, bölümün üstünden ve altından uzanan bir dizi örtüşen dikey çizgi oluşturur. “Çizgilerin” yukarı doğru uzanması için Alt Bölücüyü dikey olarak çevirmeye ayarlamayı unutmayın.

İşte son tasarım.

Tasarım #3: Üstte ve Altta Kısmi Dokulu Metin

Bu sonraki tasarımın sürecini hızlandırmak için devam edin ve yukarıdaki ikinci tasarım örneğinde az önce oluşturduğunuz bölümü çoğaltın.

Bölüm Ayarlarını Güncelle

Arka Plan Rengi: #e02b20

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #e02b20
Üst Bölücü Yüksekliği: 3vw
Üst Bölücü Yatay Tekrar: 30x

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: #e02b20
Alt Bölücü Yüksekliği: 3vw
Alt Bölücü Yatay Tekrar: 30x

Buradaki anahtar, ayırıcı renginizin bölümün arka plan rengiyle eşleştiğinden emin olmaktır, böylece ayırıcılar yalnızca metnin üst üste geldiği yerde görünür.

Metin Ayarlarını Güncelle

Şimdi geriye kalan tek şey metin metni rengini güncellemek:

Metin Metin Rengi: #ffffff

İşte son tasarım.

Tasarım #3'e Eğlenceli Bir Tasarım Alternatifi

Bu tasarımdan ayrılmadan önce, bu bölümdeki alt bölücünün, metnin bir tarlada oturuyormuş gibi görünmesi için nasıl kolayca çime dönüştürülebileceğini paylaşacağımı düşündüm. Bunu yapmak için ayarları aşağıdaki gibi güncelleyin:

Arka Plan Gradyanı Sol Renk: #68a4d8 (gökyüzü)
Arka Plan Gradyanı Sağ Renk: #1c7503 (çim)
Başlangıç ​​Konumu: %82
Bitiş Konumu: %0
Özel Dolgu: 5vw Üst
Top Bölücü Stili: Bulutlar (veya baloncuklar?)
Alt Bölücü Rengi: #1c7503

Ardından metin rengini #000835 olarak güncelleyin

İşte sonuç.

Peki ya Mobil?

Bu tasarımlarda vw uzunluk birimi kullanıldığından, metin ve ayırıcı stilleri, tablet ve akıllı telefonda ek boyutlar atamaya gerek kalmadan tüm tarayıcılarda güzel bir şekilde ölçeklenir. Ancak, akıllı telefonda metnin çok az küçülmesi sorunuyla karşılaşırsanız, metin boyutu vw uzunluk birim değerini artırmanız gerekebilir.

Son düşünceler

Umarım benzersiz metin tasarımları için bölüm ayırıcılarla denemeler yaparken biraz eğlenmişsinizdir. Divi'de bulunan tüm farklı yazı tipleri, renkler ve ayırıcı stiller ile, bir sonraki projeniz için kendi harika görünümlü metin tasarımlarınızı oluşturmakta zorlanmayacağınızdan eminim.

Bölüm ayırıcıların yaratıcı şekillerde nasıl kullanılacağına dair daha fazla ilham almak için bu arka plan dokularına, gezinme menüsü çerçevelerine ve alt bilgi çubuğu arka planlarına göz atın.

Bir dahaki sefere kadar, yorumlarda sizden haber almayı dört gözle bekliyorum.

Şerefe!