Divi’de metin soyut bir tasarım öğesi olarak nasıl kullanılır
Metni soyut bir tasarım öğesi olarak kullanmak, bir grafik veya özel resim yapmak zorunda kalmadan sitenize benzersiz bir görünüm vermenin iyi bir yolu olabilir. Çok soyut bir estetik cazibe için metni kullanabilirsiniz veya izleyicilerinize yaratıcı ve sorunsuz bir mesaj yapabilirsiniz. Bugün, web sitenizde soyut bir tasarım öğesi olarak istediğiniz metin içeriğini eklemek için Divi metin modülünü nasıl kullanabileceğinizi göstereceğim. Umarım gelecekteki projeleriniz için bir ilham kaynağı olacak birkaç örnek ekleyeceğim.
Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir gözüdür.
İçerik sekmesi metninin altına aşağıdaki html ekleyin …
cre
ati Ve
Ardından tasarım sekmesi seçeneğini güncelleyin … Metin Yazı Tipi: Oswald Metin Boyutu Metin: 400 piksel (masaüstü) ve 200px (tablet) Metin Renk Metni: RGBA (12.113.195.0.11) Yükseklik üst üste binen metin. Bu örtüşme, serin bir efekt ekleyerek yarı saydam metnin rengi ile birleştirilir. Ancak metnin üst üste gelmemesini tercih ederseniz, yüksek bir çizgi ekleyin. Ayrıca, o bölümde herhangi bir yere yerleştirilebilen yinelenen metin oluşturmak için metninize metin gölgeleri de ekleyebilirsiniz. Hatta farklı bir renk bile verebilirsiniz. Gölge metninin yatay uzunluğu: 1,72EM dikey uzunluk Gölge Metin: -0.81EM Renk Gölge Metin: RGBA (244,0,204,08) Ayarları Kaydet.
İşte şimdiye kadar sahip olduğumuz şey. Şimdi gerçek başlık metnimizi barındıracak metin modülümüzü eklememiz gerekiyor. Metin modülünü arka plan metniniz için kullanılan metin modülünün altına ekleyin. Ardından ayarları aşağıdaki gibi güncelleyin: İçindekiler:
Yaratıcı Başlık
Tasarım
Nulla Quis Lorem UT Libero Telasaada Feugiat. Sed Porttitor Lectus Nibh.Metin Yazı Tipi: SANS Metin Boyutu’nu açın: 20px
Yazı Tip Başlığı: Oswald Metin Başlığı Boyut: 80px (masaüstü) ve 42px (tablet) Metin Renk Başlığı: #555555 Özel Marj: -370px üst (masaüstü) ve -240px (tablet) dolgu özel:% 20 sol (masaüstü) ve% 0 (Tablet) Negatif üst kenar, başlık metnini arka plan metninin üzerine dikey olarak odaklamak için kullanılır. Ayrıca hücresel için marj ve dolguyu da ayarlıyorum.
Negatif marj değeri marjımızı 370px’in tepesine çektiğinden, satırımıza dolgu ekleyerek biraz boşluk eklememiz gerekir. Aşağıdaki satır ve güncelleme ayarlarını açın: Özel dolgu (masaüstü): 0px üst, 300 piksel alt özel dolgu (tablet): 0px üst, 150px botompadding 0px üst içerik çeker, böylece üst yarıda daha fazla alana sahip olursunuz. 300 piksel altındaki dolgu, üst kenar -370px metin modülünü doldurmak için alan ekler. Ayarlarınızı kaydedin. Şimdi bittin. Sonuçlara bakın.
Kendi özel tasarımınızı oluşturmak için ayarları ayarlamaktan çekinmeyin. Örneğin, aşağıdaki bölüme bir arka plan gradyanı ekliyorum: Renk: RGBA (244,0,204,0.82) ve RGBA (12.113.195.0.86) gradyan yönü: 90 derece sonra başlık metnimi beyaza değiştiriyorum ve benzersiz bir tasarım yapıyorum Arka planla metin iyi bir renkli doku ekler. Daha benzersiz bir arka plan yapmak için her zaman metninizi oynayabilirsiniz. Tek yapmanız gereken kısa bir CSS görüntüsü eklemek. CSS eklemek için metin modülü ayarlarını açın ve Gelişmiş sekmesinin altındaki ana öğe kutusuna aşağıdaki özel CSS kodunu girin. Dönüşüm: Döndür (90deg) Bu CSS, metin modülünün içeriğini orijinal konumundan 90 derece döndürmek için düzenler. Sonuç dikey bir metindir. Ancak dereceyi farklı tasarımlar için istediğiniz değere göre ayarlayabilirsiniz. Sonuç bu. Metin görüntüsünü kullanarak metin kullanarak benzersiz bir görüntü olarak nasıl kullanılır görüntü, görüntünüze biraz ekstra stil eklemenin iyi bir yoludur.
Bu tasarımı tamamlamak için, daha önce yapılmış düzenlerden birini kullanalım. Yeni bir sayfa oluşturun, bir görsel üreticiyi uygulayın ve moda yönü sayfasının 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 parçaları silin.
Şimdi, satırın sağ sütunundaki görüntünün altına bir metin modülü ekleyeceğiz.İçerik alanına “üzerinden” mektubu ekleyin. Ardından tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: SANS Pro Yazı Tipi Ağırlık Metin Yazı Tipi: Metin Boyutu Ağırlık: 320px (Masaüstü) ve 290px (Tablet) Metin Rengi: Beyaz (#FFFFFF) Metin mektubu aralığı: -5px Metnin rengi, görüntüyle örtüşmeyecek şekilde metnin altını gizlemek için parçanın arka plan rengi ile aynı olmalıdır. Şimdi metni resmin üzerine konumlandırmak için bazı özel marjlar eklememiz gerekiyor. Özel dolgu: -80px üst, 80px alt, -70px kaldı Metnin genişliği tamamlandı. Şimdi daha yumuşak bir görünüm sağlamak için kalan bölüm içeriğinin tasarımını güncellememiz gerekiyor. Kutunun gölgesini kaldırarak sağ sütundaki görüntü modülünü güncelleyin.
Ardından, sol sütunun üst kısmındaki metin modülünün ayarlarını aşağıdakilerle güncelleyin: İçindekiler:
Kendi
metin stilinizi oluşturun.
Başlık 2 Yazı Tipi: Sumber Sans Pro Başlık 2 Renk Metin: #4A4D91
Az önce güncellediğiniz metin modülünün altındaki bölücü modülünü silin. Ardından, sol sütundaki son metin modülünü tasarıma uyacak şekilde yazı tipleriyle güncelleyin. Metin Yazı Tipi: Sour Sans Pro Renk Metin Metin: RGBA (74,77,145.0.73)
Şimdi 2 sütun gradyanımızın arka plan rengini değiştirmemiz gerekiyor. Bunu yapmak için çizgi ayarlarını düzenleyin ve arka plan gradyanının rengini aşağıdakilere değiştirin: Sütun 2 gradyan arka plan: #4A4d91 ve #181A3D Şimdi metnin rengi ve gradyan eşleşmeleri ve metnimiz için iyi kontrast sunuyor. İsterseniz, içeriğinizin alt kısmını kaplayacak ve metnin yüzer olduğu izlenimini verecek bir bölme parçası ekleyebilirsiniz.Bir bölücü bölümü yapmak için tasarım sekmesinin altındaki ayarları açın. Alt bölücüyü düzenlemek için seçin. Ardından aşağıdakileri güncelleyin: Bölme Stili: Bölücü Rengi’nin Ekran Görüntüsüne bakın: RGBA (74,77,145.0.16) Yüksek Bölücü: 332px Bölme Ayarları: Özel Dolgu Bölümü İçeriğinin Üstünde: 200px’in Altında Hile Bölme Ayarlarınızı Ayarlamaktır Bölümün içeriği için metninizi resmin üstünde kapsayacak şekilde. Sonuçlar aşağıdadır. Yüzlerce yazı tipi ve Divi’de bulunan bir tasarım kombinasyonu ile son zihin, web sitenize soyut metin öğeleri eklemek için iyi bir tasarım kaynağınız var. Ve görüntülerden farklı olarak, bir fotoğraf editörü kullanmak zorunda kalmadan metin ve tasarımı Divi Builder’ın içinden kolayca değiştirebilirsiniz. Ancak, tasarımın duyarlı olduğundan emin olmak için mobil cihazınız için emin olmanız ve metnin boyutunu ve alanını ayarlamanız gerektiğini unutmayın. Öyleyse ileri git ve deneyin. Bir sonraki projenize yeni bir soyut metin tasarımı ekleyin. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
