Divi sayfa tasarımınızda bir blok öğesi oluşturmak için divi metin modülünü kullanın
Metin modülü, Divi ile yaptığınız her sayfa tasarımının önemli bir parçasıdır, eminim ki hepimizin üzerinde anlaşabileceğimiz bir şeydir. Genellikle, metni doğrudan görüntülemek için kullanılırlar. Ancak inanılmaz tasarım öğeleri oluşturmak için metin modülünü de kullanabilirsiniz. Önceki blog yazısında, web tasarımınızı geliştirmek için metin nasıl kullanacağınızı gösterdik. Bu öğreticide, bir sayfa tasarlarken ve bir metin modülü kullanırken seçmeniz için bir seçenek eklemeye devam edeceğiz. Bilmeyebileceğiniz gibi, aynı metin modülünde birleştirebileceğiniz birkaç farklı metin türü vardır. Buna ek olarak, bir modül birkaç başlık, paragraf, bağlantılar ve diğerleri içerebilir. Bu yazıda, sayfa tasarımımızda şaşırtıcı blok öğeler oluşturmak için bu metnin her türünü avantajımız için kullanacağız.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, sonucu farklı bir ekran boyutuna bakalım.
Arka plan rengi: #000000 Bir sonraki bölümünüzdeki boşluk ayarlarının aralığı açın ve bazı özel dolgu değerleri ekleyin.
Üst Pilding: 280px (masaüstü), 150 piksel (tablet ve cep telefonu)
Pilding Alt: 280px (masaüstü), 150 piksel (tablet ve cep telefonu) Ayarları değiştirmeyi bitirdikten sonra sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve çizginin boyut ayarlarında tüm ekran genişliğini karşılamasını sağlayın. Bu satırı tam genişlik yapın: Evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Son mesafe, boşluk ayarlarına bazı özel rulmanlar ekleyin. Sütun 1 Solda Sol: 100px (Masaüstü ve Tablet), 50px (Telefon)
Sütun 2 Dolgu Özel: 50px
Sütun 3 Dolgu Özel: 50px
Başlık metin modülünü içerik kutusunun 1 sütununa ekleyin. Farklı bir modül eklemeye başlama süresi! İlk sütunda ihtiyacımız olan ilk modül metin modülüdür. İçerik kutusuna biraz H2 içeriği ekleyin. H2 Metin Ayarları Ardından, H2 metin ayarlarını açın ve bazı değişiklikler yapın: Başlık 2 Yazı Tipi: Kaynak Kodu Pro
Başlık 2 yazı tipi stili: büyük harf
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 100px
Başlık alanı 2 harf: 24 piksel
Birkaç negatif üst kenar boşluğu kullanarak üstteki alanı azaltın. Üst kenar boşluğu: -50px
Açıklama metin modülünü Sütun 1’e ekleyin İlk sütunda gereken ikinci modül metin ayarları açıklama metin modülüdür. İçeriğinizi ekledikten sonra metin ayarlarını açın ve bazı değişiklikler yapın: Metin Yazı Tipi: Pro Kaynak Kodu
Metin rengi: #ffffff
Metin Oryantasyonu: haklı çıkar
Yapıştırıcı metin modülünün genişliğini de azaltır. Genişlik:% 68
Mesafe ve daha az önemli değil, bu metin modülü arasında ve daha önce boşluk ayarlarında biraz yer açın. Üst kenar: 200px (masaüstü), 100 piksel (tablet ve cep telefonu)
Alt kenar boşluğu: 100 piksel (tablet ve cep telefonu)
İkinci sütuna geçmek için Block Metin Modülünü sütun 2 kutu içerik süresine ekleyin! Burada, bir blok öğesi oluşturmak için metin modülünü kullanacağız. Bu işi yapmanın önemli kısmı, içerik kutusunun doğru şekilde düzenlenmesidir. Aşağıdaki baskı ekranında, H3, H4 başlığı, paragraf ve bağlantı başlığını kullandığımızı görebilirsiniz. H4 başlıkları ve paragraflar arasında, bazı ek alan kaldığından emin oluruz. Arka plan rengi Siyah arka plan rengini metin modülüne ekleyin. Arka plan rengi: #000000 Metin ayarlarımız her bir metin türünü tek tek değiştirir. Paragraf ayarlarını değiştirerek başlayın.
Metin Yazı Tipi: Pro Kaynak Kodu Metin Oryantasyonu: Sol
Metin Rengi: Işık
Bağlantının metnini daha sonra ayarlayın, bağlantı ayarlarında bazı ek değişiklikler yapın.
Bağlantı yazı tipi stili: büyük harf ve alt hat
Bağlantı metninin rengi: #EDF000
Bağlantı Metin Boyutu: 16px
Bağlantı mesafesi: 3px
Başlık 3 Metin Ayarları H3 İçerik kutumuzdaki başlık aşağıdaki ayarları gerektirir:
Başlık 3 yazı tipi stili: büyük harf Başlık 3 Metin Boyutu: 33px
Başlık 4 Metin Ayarları, H4 metin ayarlarını açarak devam eder ve orada da bazı değişiklikler yapar.
Başlık 4 Renk Metni: #4F4F4F Başlık 4 Metin Boyutu: 19px
Başlık Aralığı 4 Harf: -1px
İstediğimiz şekli yapmak için yapıştırıcı, o zaman metin modülünün genişliğini azaltacağız.
Genişlik:% 88 (masaüstü),% 60 (tablet),% 90 (cep telefonu) Mesafemizin de alan ayarlarını değiştirmesi gerekiyor.
Sol kenar boşluğu: 200px (tablet) Üst dolgu: 50 piksel
Dolgu Alt: 50 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Daha sonra sınır, metin modülüne düzgün bir sınır ekleyin.
Sınır Genişliği: 2 piksel Sınır rengi: #424242 kutusu ve bitirmek için kutunun renkli bir gölgesi ekleyin.
Yatay Konum Gölge Kutusu: 19px
Dikey Konum Gölge Kutusu: 16px Kutunun gölgesinin dağılımının gücü: -4px
Gölge Renk: #F2FF00
Klon Blok Metin Modülü İki kez ve Sütun 3’teki Yerler Zamandan tasarruf etmek için, iki kez yaptığımız metin modülünün metnini klonlayacağız ve iki kopyayı satırın üçüncü sütununa yerleştireceğiz.
Kırmızı metin modülünün değiştirilmesi Bağlantı metninin rengini değiştirin üçüncü sütunda ilk metin modülünü açın ve bağlantının rengini değiştirin.
Bağlantı metninin rengi: #e02b20 Olan boşluğu değiştirin, boşluk ayarlarını açın ve bazı üst kenar boşlukları ekleyin. Üst kenar: -150px (masaüstü), -20px (tablet), 50px (telefon)
Kutunun gölge rengini değiştirin Kutunun gölgesinin rengini, bağlantının metni için kullanılanla aynı renge değiştirin. Gölge Renk: #E02B20
Mavi Metin Modülünün Değiştirilmesi Renk Metin Bağlantılarını Değiştirme Renk Bağlantısı Modülünü Değiştirme Üçüncü sütundaki ikinci metin modülünü de değiştirin. Renkli metin bağlantısı: #0ff3ff
Boyutunu Değiştirin Bir sonraki boyut ayarlarını değiştirin. Boyut:% 67 (masaüstü),% 60 (tablet),% 90 (cep telefonu)
Alanı değiştirin ve özel marj değerleriyle oynayan bu modül ile diğer iki metin modülü arasında bir miktar örtüşme yapmak için. Üst kenar: -20px (masaüstü), -30px (tablet), 50px (telefon)
Sol kenar boşluğu: -160px (masaüstü), 200px (tablet), 0px (telefon) Kutunun gölgesinin rengini tamamlamak için değiştirin, kutunun gölgesinin rengini bağlantı metni için kullanılan ve bitmiş aynı mavi renge değiştirin!
Gölge Renk: #0ff3ff
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
