Divi'de Metin Soyut Tasarım Öğesi Olarak Nasıl Kullanılır?

Metni soyut bir tasarım öğesi olarak kullanmak, özel grafikler veya resimler oluşturmak zorunda kalmadan sitenize benzersiz bir görünüm kazandırmanın harika bir yolu olabilir. Metni kesinlikle soyut estetik çekicilik için kullanabilir veya izleyicilerinize yaratıcı ve ince bir mesaj olarak hizmet etmelerini sağlayabilirsiniz.

Bugün size, web sitenize soyut bir tasarım öğesi olarak istediğiniz herhangi bir metin içeriğini eklemek için Divi'nin metin modülünü nasıl kullanabileceğinizi göstereceğim. Gelecekteki projeleriniz için bir ilham kaynağı olacağını umduğumuz birkaç örnek ekleyeceğim.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarımlara bir bakış.

Divi'de Metin Soyut Tasarım Öğesi Olarak Nasıl Kullanılır?

Youtube Kanalımıza Abone Olun

Üstbilgi Arka Planı Olarak Büyük Metin Nasıl Kullanılır

Benzersiz bir arka plan oluşturmak için büyük metin kullanmak, düz bir arka plan rengini renklendirmenin ve bir doku öğesi eklemenin harika bir yoludur. İşte nasıl yapılacağı.

İlk olarak, tek sütunlu bir satır içeren normal bir bölüm oluşturun.

Ardından, sayfanızın başlığını içeren ilk metin modülünüzü ekleyin.

Metin modülü ayarlarında, içerik alanına eklemek istediğiniz metni ekleyin. Bu örnek için “yaratıcı” kelimesini kullanacağım. Kelimeyi bölmek istediğim için, içerik alanının metin sekmesini kullanacağım ve break etiketli bazı html ekleyeceğim.

İçerik alanının metin sekmesinin altına aşağıdaki html'yi ekleyin…

<p>cre<br>ati</br>ve</p>

Ardından tasarım sekmesi seçeneklerini güncelleyin…

Yazı Tipi: Oswald
Metin Metin Boyutu: 400px (Masaüstü) ve 200px (tablet)
Metin Metin Rengi: rgba(12,113,195,0.11)
Metin Satır Yüksekliği: 0,5em

Metin satırı yüksekliği aslında metnin örtüşmesini sağladığımız yerdir. Bu örtüşme, metnin yarı saydam rengiyle birleştiğinde harika bir etki katıyor. Ancak metnin üst üste gelmemesini istiyorsanız, satır yüksekliğini artırmanız yeterlidir.

Bölümün herhangi bir yerine yerleştirilebilecek metnin bir kopyasını oluşturmak için metninize bir metin gölgesi de ekleyebilirsiniz. Hatta farklı bir renk de verebilirsiniz.

Metin Gölgesi Yatay Uzunluk: 1.72em
Metin Gölgesi Dikey Uzunluğu: -0.81em
Metin Gölge Rengi: rgba(244,0,204,0,08)

Ayarları kaydet.

İşte şimdiye kadar sahip olduklarımız.

Şimdi asıl başlık metnimizi tutacak metin modülümüzü eklememiz gerekiyor. Arka plan metniniz için kullanılan metin modülünün altına bir metin modülü eklemeniz yeterlidir. Ardından ayarları aşağıdaki gibi güncelleyin:

İçerik:

<h1>Creative Header<br />Design</h1>
Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh.

Metin Yazı Tipi: Sans'ı Aç
Metin Metin Boyutu: 20px

Başlık Yazı Tipi: Oswald
Başlık metni Boyut: 80px (Masaüstü) ve 42px (Tablet)
Başlık metni rengi: #555555

Özel Kenar Boşluğu: -370px Üst (masaüstü) ve -240px (tablet)
Özel Dolgu: %20 Sol (masaüstü) ve %0 (tablet)

Negatif üst kenar boşluğu, başlık metnini arka plan metni üzerinde dikey olarak ortalamak için kullanılır. Ayrıca mobil için kenar boşluğunu ve dolguyu da ayarladım.

Negatif marj değeri marjımızı 370px yukarı çektiğinden, satırımıza alt dolgu ekleyerek biraz boşluk eklememiz gerekiyor. Satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Özel Dolgu (masaüstü): 0 piksel Üst, 300 piksel Alt
Özel Dolgu (tablet): 0 piksel Üst, 150 piksel Alt

0px Üst dolgu, içeriği yukarı çekerek ekranın üst kısmında daha fazla alana sahip olmanızı sağlar. 300 piksel alt dolgu, metin modülünün -370 piksel üst kenar boşluğu için doldurulacak alanı ekler.

Ayarlarınızı kaydedin.

Artık işin bitti. Sonucu kontrol edin.

Kendi özel tasarımınızı oluşturmak için ayarları yapmaktan çekinmeyin. Örneğin, bölüme aşağıdakileri içeren bir arka plan gradyanı ekledim:

Renkler: rgba(244,0,204,0,82) ve rgba(12,113,195,0.86)
Gradyan Yönü: 90deg

Daha sonra başlık metnimi beyaza çevirdim ve arka plan metnine hoş renkli bir doku ekleyerek benzersiz bir tasarım oluşturdum.

Daha da benzersiz arka planlar oluşturmak için metninizi her zaman döndürebilirsiniz. Tek yapmanız gereken kısa bir CSS parçacığı eklemek.

CSS'yi eklemek için metin modülü ayarlarına gidin ve Gelişmiş sekmesi altındaki Ana Öğe kutusuna aşağıdaki Özel CSS kodunu girin.

transform: rotate(90deg)

Bu css, metin modülü içeriğini orijinal konumundan 90 derece döndürecek şekilde ayarlar. Sonuç dikey metindir.

Ancak farklı tasarımlar için dereceyi istediğiniz değere ayarlayabilirsiniz.

İşte sonuç.

Metin Benzersiz Görüntü Bindirmeleri Olarak Nasıl Kullanılır

Metni görüntü yerleşimi olarak kullanmak, resimlerinize biraz ekstra stil eklemenin harika bir yoludur.

Bu tasarımı tamamlamak için hazır düzenlerimizden birini kullanalım. Yeni bir sayfa oluşturun, görsel oluşturucuyu dağıtın ve Moda Açılış Sayfası Düzenini sayfanıza ekleyin.

Ardından ana başlık bölümünün altındaki “Hakkımızda” bölümü hariç tüm bölümleri silin.

Şimdi satırın sağ sütunundaki görüntünün altına bir metin modülü ekleyeceğiz.

İçerik alanına “via” harflerini ekleyin.

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

Metin Yazı Tipi: Source Sans Pro
Metin Yazı Tipi Ağırlığı: Ağır
Metin Metin Boyutu: 320px (masaüstü) ve 290px (tablet)
Metin Rengi: beyaz (#ffffff)
Metin Harf Aralığı: -5px

Metnin resimle örtüşmeyen alt kısmını gizlemek için metin rengi bölüm arka plan rengiyle aynı renkte olmalıdır.

Şimdi metni resmin üzerine yerleştirmek için bazı özel kenar boşlukları eklememiz gerekiyor.

Özel Dolgu: -80px Üst, 80px Alt, -70px Sol

Metin yerleşimi yapılır. Şimdi bölüm içeriğinin geri kalanının tasarımını daha parlak bir görünüm kazandırmak için güncellememiz gerekiyor.

Kutu gölgesinden kurtularak sağ sütundaki görüntü modülünü güncelleyin.

Ardından, sol sütunun üst kısmındaki metin modülü ayarlarını aşağıdakilerle güncelleyin:

İçerik:

<h2>Create your own<br />text style.</h2>

Başlık 2 Yazı Tipi: Source Sans Pro
Başlık 2 Metin Rengi: #4a4d91

Yeni güncellediğiniz metin modülünün hemen altındaki ayırıcı modülü silin.

Ardından, sol sütundaki son metin modülünü tasarıma uygun bir yazı tipiyle güncelleyin.

Metin Yazı Tipi: Source Sans Pro
Metin Metin Rengi: rgba(74,77,145,0.73)

Şimdi sütun 2 gradyan arka planımızın rengini değiştirmemiz gerekiyor. Bunu yapmak için satır ayarlarını düzenleyin ve arka plan gradyan renklerini aşağıdaki gibi değiştirin:

Sütun 2 Arka Plan Gradyanı: #4a4d91 ve #181a3d

Artık metin ve degradenin renkleri eşleşiyor ve metin kaplamamıza hoş bir kontrast sunuyor.

İsterseniz, bölüm içeriğinizin altını kaplayacak ve metnin yüzdüğü izlenimini verecek olan alt kısma bir bölüm ayırıcı ekleyebilirsiniz.

Bölüm ayırıcıyı oluşturmak için tasarım sekmesi altındaki bölüm ayarlarına gidin. Alt ayırıcıyı düzenlemek için öğesini seçin. Ardından aşağıdakileri güncelleyin:

Bölücü stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(74,77,145,0.16)
Bölücü Yüksekliği: 332px
Divder Düzenlemesi: Bölüm İçeriğinin Üstünde

Özel Dolgu: 200px Alt

Buradaki püf noktası, bölücü düzenlemenizi bölüm içeriğinin üstüne yerleştirmektir, böylece görüntünün üstünde oturan metninizi kaplar.

İşte nihai sonuç.

Son düşünceler

Divi'de bulunan yüzlerce yazı tipi ve tasarım kombinasyonu ile web sitenize soyut metin öğeleri eklemek için harika bir tasarım kaynağına sahipsiniz. Ve görüntülerin aksine, bir fotoğraf düzenleyici kullanmak zorunda kalmadan Divi oluşturucu içinden metni ve tasarımı kolayca değiştirebilirsiniz. Ancak, tasarımın duyarlı olduğundan emin olmak için mobil cihazlarınızın metin boyutlarını ve boşluklarını ayarlamanız ve ayarlamanız gerekeceğini unutmayın.

Öyleyse devam edin ve deneyin. Bir sonraki projenize yeni bir soyut metin tasarımı ekleyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!