Divi Sayfa Tasarımınızda Blok Öğeleri Oluşturmak için Divi'nin Metin Modülünü Kullanma

Metin Modülleri, Divi ile oluşturduğunuz herhangi bir sayfa tasarımının hayati bir parçasıdır, eminim bu hepimizin hemfikir olabileceği bir şeydir. Normalde, metni basit bir şekilde görüntülemek için kullanılırlar. Ancak, çarpıcı tasarım öğeleri oluşturmak için Metin Modüllerini de kullanabilirsiniz. Önceki blog gönderilerinde, web tasarımınızı yükseltmek için metni nasıl kullanacağınızı zaten göstermiştik.

Bu öğreticide, bir sayfa tasarlarken ve Metin Modüllerini kullanırken aralarından seçim yapabileceğiniz seçenekler eklemeye devam edeceğiz. Bildiğiniz veya bilmediğiniz gibi, aynı metin modülü içinde birleştirebileceğiniz birkaç farklı metin türü vardır. Ek olarak, bir modül birkaç başlık, paragraf, bağlantı ve daha fazlasını içerebilir. Bu yazıda, sayfa tasarımımızda çarpıcı blok öğeleri oluşturmak için tüm bu metin türlerini avantajımız için kullanacağız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

Başlayalım!

Yeni Normal Bölüm Ekle

Arka plan rengi

Şu anda üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın. Ardından, bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #000000

aralık

Sonraki bölümünüzün Aralık ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 280 piksel (Masaüstü), 150 piksel (Tablet ve Telefon)
• Alt Dolgu: 280 piksel (Masaüstü), 150 piksel (Tablet ve Telefon)

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Herhangi bir modül eklemeden, satır ayarlarını açın ve Boyutlandırma ayarlarında satırın ekranın tüm genişliğini kaplamasını sağlayın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Son olarak, Aralık ayarlarına bazı özel dolgular ekleyin.

• Sütun 1 Sol Dolgu: 100 piksel (Masaüstü ve Tablet), 50 piksel (Telefon)
• Sütun 2 Özel Dolgu: 50 piksel
• Sütun 3 Özel Dolgu: 50 piksel

Sütun 1'e Başlık Metin Modülü Ekle

İçerik Kutusu

Farklı modülleri eklemeye başlama zamanı! İlk sütunda ihtiyaç duyacağımız ilk modül bir Metin Modülüdür. İçerik kutusuna biraz H2 İçeriği ekleyin.

H2 Metin Ayarları

Ardından H2 metin ayarlarına gidin 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 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 100px
• Başlık 2 Harf Aralığı: 24px

aralık

Negatif üst kenar boşluğu kullanarak üstteki boşluğu azaltın.

• Üst Kenar Boşluğu: -50px

Sütun 1'e Açıklama Metni Modülü Ekle

Metin Ayarları

İlk sütunda ihtiyaç duyulan ikinci modül, bir açıklama Metin Modülüdür. İçeriğinizi ekledikten sonra metin ayarlarına gidin ve bazı değişiklikler yapın:

• Metin Yazı Tipi: Kaynak Kodu Pro
• Metin Rengi: #ffffff
• Metin Yönü: Yasla

boyutlandırma

Metin Modülünün genişliğini de azaltın.

• Genişlik: %68

aralık

Ve son olarak, Aralık ayarlarında bu Metin Modülü ile önceki modül arasında biraz boşluk oluşturun.

• Üst Kenar Boşluğu: 200px (Masaüstü), 100px (Tablet ve Telefon)
• Alt Kenar Boşluğu: 100 piksel (Tablet ve Telefon)

Sütun 2'ye Blok Metin Modülü Ekle

İçerik Kutusu

İkinci sütuna geçme zamanı! Burada, blok elemanları oluşturmak için Metin Modüllerini kullanacağız. Bu işi yapmanın hayati bir parçası, içerik kutusunu doğru bir şekilde yapılandırmaktır. Aşağıdaki yazdırma ekranında H3 başlık, H4 başlık, paragraf ve bağlantı kullandığımızı görebilirsiniz. H4 başlığı ve paragraf arasında, biraz daha boşluk kaldığından emin oluyoruz.

Arka plan rengi

Metin Modülüne siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Metin Ayarları

Metin türlerinin her birini ayrı ayrı değiştireceğiz. Paragraf ayarlarını değiştirerek başlayın.

• Metin Yazı Tipi: Kaynak Kodu Pro
• Metin Yönü: Sol
• Metin Rengi: Açık

Bağlantı Metni Ayarları

Ardından, bağlantı ayarlarında bazı ek değişiklikler yapın.

• Bağlantı Yazı Tipi Stili: Büyük Harf ve Altı Çizili
• Bağlantı Alt Çizgi Rengi: #ffffff
• Bağlantı Metni Rengi: #edf000
• Bağlantı Metni Boyutu: 16px
• Bağlantı Harfi Aralığı: 3px

Başlık 3 Metin Ayarları

İçerik kutumuzdaki H3 başlığı aşağıdaki ayarlara ihtiyaç duyar:

• 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 edin ve orada da bazı değişiklikler yapın.

• Başlık 4 Metin Rengi: #4f4f4f
• Başlık 4 Metin Boyutu: 19px
• Başlık 4 Harf Aralığı: -1px

boyutlandırma

Tam istediğimiz şekli oluşturmak için, bir sonraki adımda Metin Modülünün genişliğini azaltacağız.

• Genişlik: %88 (Masaüstü), %60 (Tablet), %90 (Telefon)

aralık

Aralık ayarlarını da değiştirmemiz gerekecek.

• Sol Kenar Boşluğu: 200 piksel (Tablet)
• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ardından, Metin Modülüne ince bir kenarlık ekleyin.

• Kenar Genişliği: 2px
• Kenar Rengi: #424242

Kutu Gölge

Ve bitirmek için renkli bir kutu gölgesi ekleyin.

• Kutu Gölgesi Yatay Konum: 19px
• Kutu Gölge Dikey Konumu: 16px
• Kutu Gölge Yayılma Gücü: -4px
• Gölge Rengi: #f2ff00

Klon Blok Metin Modülü İki Kez ve Sütun 3'e Yerleştirin

Zaman kazanmak için, oluşturduğumuz Blok Metin Modülünü iki kez klonlayacağız ve her iki kopyayı da satırın üçüncü sütununa yerleştireceğiz.

Kırmızı Metin Modülü Değişiklikleri

Bağlantı Metni Rengini Değiştir

Üçüncü sütundaki ilk Metin Modülünü açın ve bağlantı rengini değiştirin.

• Bağlantı Metni Rengi: #e02b20

Aralığı Değiştir

Ardından, Aralık ayarlarına gidin ve biraz üst kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: -150px (Masaüstü), -20px (Tablet), 50px (Telefon)

Kutu Gölge Rengini Değiştir

Kutu Gölge Rengini, bağlantı metni için kullanılanla aynı renge değiştirin.

• Gölge Rengi: #e02b20

Mavi Metin Modülü Değişiklikleri

Bağlantı Metni Rengini Değiştir

Üçüncü sütundaki ikinci Metin Modülünün bağlantı rengini de değiştirin.

• Bağlantı Metni Rengi: #0ff3ff

Boyutlandırmayı Değiştir

Sonraki Boyutlandırma ayarlarını değiştirin.

• Boyutlandırma: %67 (Masaüstü), %60 (Tablet), %90 (Telefon)

Aralığı Değiştir

Ve bu modül ile diğer iki Metin Modülü arasında bir miktar örtüşme yaratmak için özel kenar boşluğu değerleriyle oynayın.

• Üst Kenar Boşluğu: -20px (Masaüstü), -30px (Tablet), 50px (Telefon)
• Sol Kenar Boşluğu: -160px (Masaüstü), 200px (Tablet), 0px (Telefon)

Kutu Gölge Rengini Değiştir

Bitirmek için, kutu gölge rengini bağlantı metni için kullanılanla aynı mavi renge değiştirin ve işiniz bitti!

• Gölge Rengi: #0ff3ff

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Divi'nin yerleşik seçenekleriyle birlikte Metin Modüllerini kullanarak kaç benzersiz tasarım elde edebileceğinize şaşıracaksınız. Ekstra CSS kodu gerekmez. Bu gönderide, Divi sayfa tasarımınızda çarpıcı blok öğeleri oluşturmak için farklı metin türlerini nasıl kullanacağınızı gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!