Bir Sonraki Divi Projeniz İçin Canlı Bölüm Başlıkları Nasıl Oluşturulur

Çoğunuzun, oluşturduğunuz web sitelerini benzersiz kılmak için her zaman yeni yollar aradığınızı biliyoruz. Divi ile web sitenizi diğerlerinden farklı kılmanın birçok yolu vardır. Bugün size yalnızca Divi'nin yerleşik seçeneklerini kullanarak nasıl çarpıcı bölüm başlıkları oluşturabileceğinizi göstereceğiz. Çarpıcı bir tasarım oluşturmak, genel sayfa yapısını korumak ve gezinmeyi sorunsuz tutmak istiyorsanız bu yaklaşım harikadır.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarında elde etmeyi hedeflediğimiz sonuca bir göz atalım:

Hadi Yaratmaya Başlayalım!

Yeni Normal Bölüm Ekle

aralık

Yeni bir sayfa açarak, Visual Builder'a geçerek ve ilk bölümünüzü ekleyerek başlayın. Henüz herhangi bir satır veya modül eklemeden bölüm ayarlarını açın ve biraz dolgu ekleyin:

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bir satır ekleyerek devam edin:

Arka plan rengi

Sonraki satır ayarlarını açın ve tüm satırınıza bir arka plan rengi ekleyin:

• Arka Plan Rengi: #f9f9f9

Sütun 1 Gradyan Arka Planı

Ardından, ilk sütununuza ince bir gradyan arka planı ekleyin. Bu, sütunlar arasında bölüm başlıklarının çakışmasına yardımcı olacaktır.

• Renk 1: #0031c4
• Renk 2: #00aeff
• Sütun 1 Gradyan Yönü: 125deg

boyutlandırma

Ekranın tüm genişliğini kapladığından emin olmak için satır aralığınızı da değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Son olarak, farklı ekran boyutlarına göre Aralık ayarlarını değiştirin:

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 2 Üst Dolgu: 200 piksel
• Sütun 2 Alt Dolgu: 200 piksel
• Sütun 2 Sol Dolgu: 350 piksel (Masaüstü), 50 piksel (Tablet ve Telefon)
• Sütun 2 Sağ Dolgu: 50 piksel

Sütun 1'e Bölüm Başlığı Metin Modülü Ekle

H2 Metin Ayarları

Artık tüm satır ayarları yerinde olduğuna göre modülleri eklemeye başlayabiliriz. İlk sütunla başlayacağız. Burada ihtiyacımız olan tek modül bir Metin Modülü. H2 içeriğini İçerik kutusuna ekledikten sonra devam edin ve H2 metin ayarlarını değiştirin:

• Başlık 2 Yazı Ağırlığı: Ultra Kalın
• Başlık 2 Yazı Tipi Stili: Büyük Harf
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu: 150px
• Başlık 2 Çizgi Yüksekliği: 1.25em
• Başlık 2 Metin Gölgesi Dikey Uzunluğu: -0.55em
• Başlık 2 Metin Gölge Rengi: rgba(0,255,255,0.25)

aralık

Sütunlar arasındaki örtüşme masaüstü, tablet ve telefonda farklıdır. Örtüşmeyi oluşturmak için Metin Modülümüzün Aralık ayarlarında bazı değişiklikler yapacağız:

• Üst Kenar Boşluğu: 325 piksel (Masaüstü), 150 piksel (Tablet ve Telefon)
• Alt Kenar Boşluğu: 325px, -120px (Tablet), -110px (Telefon)
• Sağ Kenar Boşluğu: -%100 (Masaüstü), 0px (Tablet ve Telefon)

Filtre

Son olarak, görünen metin için renk farkını yaratmak için bir karışım modu kullanacağız.

• Karışım Modu: Yer Paylaşımı

Sütun 2'ye Başlık Metin Modülü Ekle

H3 Metin Ayarları

İkinci sütuna geçelim. Orada, ihtiyacımız olan ilk modül bir Metin Modülü başlığıdır. H3 içeriğinizi ekledikten sonra H3 metin ayarlarını değiştirin:

• Başlık 3 Yazı Ağırlığı: Yarı Kalın
• Başlık 3 Metin Rengi: #00aeff
• Başlık 3 Metin Boyutu: 60px
• Başlık 3 Harf Aralığı: -3px

aralık

Ardından alt kenar boşluğunu ekleyerek biraz boşluk yaratın:

• Alt Kenar Boşluğu: 50px

Sütun 2'ye Bölücü Modülü Ekle

Bölücü Renk

İhtiyacımız olan ikinci modül bir Bölücü Modül. Renk ayarlarını açın ve rengi tasarımın renk paletiyle eşleşecek şekilde değiştirin:

• Bölücü Rengi: #00ffff

boyutlandırma

Ardından, Boyutlandırma ayarlarını değiştirin:

• Yükseklik: 56 piksel
• Genişlik: %75

Sütun 2'ye Açıklama Metni Modülü Ekle

Metin Ayarları

Aşağıdaki metin ayarlarını kullanarak bir açıklama Metin Modülü ekleyerek devam edin:

• Metin Boyutu: 17px
• Metin Satırı Yüksekliği: 1.3em
• Metin Yönü: Yasla

boyutlandırma

Daha sonra Boyutlandırma ayarlarını değiştirin:

• Boyutlandırma: %70 (Masaüstü), %100 (Tablet ve Telefon)

aralık

Alt kenar boşluğunu da kullanarak bu modülün altına biraz boşluk ekleyin:

• Alt Kenar Boşluğu: 50px

Sütun 2'ye Düğme Modülü Ekle

Düğme Ayarları

Bu sütunda ihtiyaç duyacağımız son modül bir Düğme Modülüdür. CTA'yı ekledikten sonra düğme ayarlarını değiştirin:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #00aeff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Harf Aralığı: -1px
• Yazı Tipi Ağırlığı: Ultra Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Düğmeye daha temiz bir görünüm ve his vermek için biraz dolgu da ekleyeceğiz:

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Kutu Gölge

Son olarak, bölümümüze biraz derinlik katmak için ince bir kutu gölgesi kullanacağız:

• Kutu Gölge Bulanıklığı Gücü: 54px
• Kutu Gölge Yayılma Gücü: -8px
• Gölge Rengi: rgba(0,0,0,0.3)

Klon Bölümü

Tüm Kopyayı Değiştir

İkinci bölümü oluşturmak için, daha önce oluşturduğumuz bölümü klonlayacağız ve ardından tüm kopyayı değiştireceğiz.

Satır Arka Plan Rengini Değiştir

Bu yeni bölüm için başka bir renk paleti kullanacağız. Satırınızın arka plan rengini değiştirerek başlayın.

• Arka Plan Rengi: #efefef

Sütun 1 Gradyan Arka Planını Değiştir

Ardından, başka bir degrade arka planı da seçin.

• Renk 1: #5f00a8
• Renk 2: #9000ff

Bölüm Başlığı Gölge Rengini Değiştir

Metin Gölge Rengini de yeni renk paletimizle eşleştiriyoruz:

• Başlık 2 Metin Gölge Rengi: rgba(255,0,255,0.24)

Bölüm Başlığı Aralığı Ayarlarını Değiştir

Kullandığınız kopyanın uzunluğuna bağlı olarak, negatif sağ kenar boşluğuyla oynamanız gerekir.

• Sağ Kenar Boşluğu: -%110 (Masaüstü)

Başlık Metin Modülü Metin Rengini Değiştir

Ardından, 2. sütundaki Metin Modülü başlığının Metin Rengini değiştirin.

• Başlık 3 Metin Rengi: #9000ff

Bölücü Rengini Değiştir

Aynı şekilde, ayırıcı renginin tasarımla eşleşmesini sağlayın.

• Renk: #ff00ff

Düğme Arka Plan Rengini Değiştir

Bitirmek için Düğme Modülünün arka plan rengini değiştirmeniz gerekir.

• Düğme Arka Plan Rengi: #9000ff

Ön izleme

Tüm adımları tamamladığımıza göre, farklı ekran boyutlarındaki sonuca son olarak bir göz atalım:

Son düşünceler

Web tasarımınızı diğer web sitelerinden farklı kılmanın birçok yolu vardır. Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak çarpıcı bölüm başlıklarını ve genel olarak bölümleri nasıl oluşturacağınızı gösterdik. Çarpıcı bir sonuç elde etmek için sütun gradyan arka planlarını Metin Modülü örtüşmeleri, metin gölgeleri ve karışım modlarıyla birleştirdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!