Divi ile Kahraman Bölümünüze Mutlak Konumlu Alt Çubuk Nasıl Eklenir

Kahraman bölümünüzün içindeki öğeleri yapılandırma şekliniz bazen zor olabilir. Paylaşmak istediğiniz içerik miktarını büyük ölçüde azaltmak zorunda kalmadan iyi bir dengeye sahip olmak istersiniz. Neyse ki, bazı modern yaklaşımlar değerlerini web'de kanıtladı. Bu yaklaşımlardan biri, kahraman bölümünüze mutlak konumlandırılmış bir alt çubuk eklemektir. Sadece tasarım açısından iyi görünmekle kalmaz, aynı zamanda tasarımın dengesini bozmadan birden fazla harekete geçirici mesaj eklemenize de yardımcı olur.

Bu öğreticide, Divi'deki kahraman bölümünüze mutlak konumlu bir alt çubuğu nasıl ekleyeceğinizi göstereceğiz. Ekleyeceğimiz alt çubuk dört bölümden oluşacak; üç düğme ve bir iletişim formu. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Mutlak Konumlu Alt Çubuk Kahraman Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman bölümü düzenine sokmak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Degrade Arka Plan

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve bir degrade arka planı uygulayın.

• Renk 1: rgba(0,0,0,0.62)
• Renk 2: rgba(0,0,0,0.97)
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Daha sonra seçtiğiniz bir arka plan resmini yükleyin.

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

taşmalar

Bölümün taşmalarını da gizliyoruz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve biraz üst ve alt kenar boşluğu uygulayın.

• Üst Marj: %20
• Alt Marj: %20

Sütuna Metin Modülü #1 Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğini içeren ilk Metin Modülü ile başlayarak modül ekleme zamanı.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metnini aşağıdaki gibi biçimlendirin:

• Başlık Yazı Tipi: Work Sans
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu:
  • Masaüstü: 80 piksel
  • tablet: 50 piksel
  • Telefon: 40 piksel
• Başlık Harf Aralığı:
  • Masaüstü: -4px
  • Tablet ve Telefon: -2px

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #a0a0a0

boyutlandırma

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

• Genişlik:
  • Masaüstü: %68
  • Tablet ve Telefon: %100

Sütuna Düğme Modülü Ekle

Kopya Ekle

Bu satırda ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Link ekle

Bir düğme bağlantısı ekleyin.

• Düğme Bağlantı URL'si: #

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: İş Sans
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol

2. Satır Ekle

Sütun Yapısı

Alt kahraman bölüm çubuğumuzu oluşturma zamanı! Bunu yapmak için aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyeceğiz:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik:
  • Masaüstü: %100
  • Tablet & Telefon: %80
• Maksimum Genişlik: 2560 piksel

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Kutu Gölge

Bir kutu gölgesi de ekleyin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: 50px
• Gölge Rengi: rgba(135,135,135,0.08)

Konum

Ardından, gelişmiş sekmeye geçin ve tüm satırı masaüstünde yeniden konumlandırın. Daha küçük ekran boyutlarında varsayılana geri getirin. Bu sıranın konum ayarları, sıranın bölüm kabının altına yapışmasını sağlayacaktır.

• Konum:
  • Masaüstü: Mutlak
  • Tablet ve Telefon: Varsayılan
• Yer: Alt Merkez

Sütun 1 Ayarları

aralık

Sütun 1 ayarlarını açarak devam edin ve bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: %3
• Alt Dolgu: %3
• Sol Dolgu: %3
• Sağ Dolgu: %3

Sınır

Bu sütun için de bazı duyarlı kenarlık ayarları kullanıyoruz.

• Üst Kenarlık:
  • Üst Kenar Genişliği: 5px
  • Üst Kenarlık Rengi:
    • Varsayılan: rgba(255,255,255,0)
    • Fareyle üzerine gelin: #ffffff
• Alt sınır:
  • Alt Kenar Genişliği:
    • Masaüstü ve Tablet: 0px
    • Telefon: 3 piksel
  • Alt Kenarlık Rengi: rgba(255,255,255,0.11)
• Sol Kenarlık:
  • Sol Kenar Genişliği:
    • Masaüstü: 0 piksel
    • Tablet: 3 piksel
    • Telefon: 0px
  • Sol Kenarlık Rengi: rgba(255,255,255,0.11)

Sütun 2 Ayarları

aralık

İkinci sütunun ayarlarına gidin. Aralık ayarlarına bazı dolgu değerleri ekleyin.

• Üst Dolgu: %3
• Alt Dolgu: %3
• Sol Dolgu: %3
• Sağ Dolgu: %3

Sınır

Ve aşağıdaki duyarlı sınırları ekleyin:

• Üst Kenarlık:
  • Üst Kenar Genişliği: 5px
  • Üst Kenarlık Rengi:
    • Varsayılan: rgba(255,255,255,0)
    • Fareyle üzerine gelin: #ffffff
• Alt sınır:
  • Alt Kenar Genişliği:
    • Masaüstü ve Tablet: 0px
    • Telefon: 3 piksel
  • Alt Kenarlık Rengi: rgba(255,255,255,0.11)
• Sol Kenarlık:
  • Sol Kenar Genişliği:
    • Masaüstü: 3 piksel
    • Tablet: 3 piksel
    • Telefon: 0px
  • Sol Kenarlık Rengi: rgba(255,255,255,0.11)

Sütun 3 Ayarları

aralık

Üçüncü sütun da özel dolgu değerlerine ihtiyaç duyar.

• Üst Dolgu: %3
• Alt Dolgu: %3
• Sol Dolgu: %3
• Sağ Dolgu: %3

Sınır

Aşağıdaki kenarlık ayarlarıyla birlikte:

• Üst Kenarlık:
  • Üst Kenar Genişliği: 5px
  • Üst Kenarlık Rengi:
    • Varsayılan: rgba(255,255,255,0)
    • Fareyle üzerine gelin: #ffffff
• Sol Kenarlık:
  • Sol Kenar Genişliği:
    • Masaüstü: 3 piksel
    • Tablet: 3 piksel
    • Telefon: 0px
  • Sol Kenarlık Rengi: rgba(255,255,255,0.11)

Sütun 4 Ayarları

Arka plan rengi

Son sütuna. Beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

aralık

Bazı özel duyarlı dolgu değerleri uygulayın.

• Üst Dolgu
  • Masaüstü: %3
  • Tablet: %3
  • Telefon: %10
• Alt Dolgu:
  • Masaüstü: %3
  • Tablet: %3
  • Telefon: %10
• Sol Dolgu:
  • Masaüstü: %3
  • Tablet: %5
  • Telefon: %10
• Sağ Dolgu:
  • Masaüstü: %3
  • Tablet: %5
  • Telefon: %10

Konum

Ve tüm sütunu masaüstünde yeniden konumlandırın. Bu, sütunun boyutunu mutlak yapacak ve satırın altına yapışmasına izin verecektir.

• Konum:
  • Masaüstü: Mutlak
  • Tablet ve Telefon: Varsayılan
• Konum: Sağ Alt

Düğme Modülünü Önceki Satırda Klonla ve Çoğaltmayı Yeni Satırın 1. Sütununa Yerleştir

Satır ve sütun ayarlarını tamamladıktan sonra modül eklemeye başlamanın zamanı geldi. Önceki satırın parçası olan Düğme Modülünü yeniden kullanıyoruz. Modülü klonlayın ve kopyasını yeni satırın ilk sütununa yerleştirin.

Düğme Hizalamasını Değiştir

Düğme Modülü kopyasını açın ve hizalamayı değiştirin.

• Düğme Hizalama: Merkez

Kopyalama ve Bağlantıları Değiştir

Modülün kopyasını ve sonraki bağlantısını değiştirin.

Sütun 1'deki Klonlama Düğmesi İki Kez ve Sütun 2 ve 3'te Kopyaları Yerleştirin

Düğme Modülünün 1. sütundaki ayarlarını değiştirdikten sonra, tüm modülü iki kez klonlayabilir ve kopyaları 2. ve 3. sütuna yerleştirebilirsiniz.

Kopyalama ve Bağlantıları Değiştir

Her kopya için kopyayı ve bağlantıları değiştirin.

Sütun 4'e Metin Modülü Ekle

H2 İçeriği Ekle

Satırın son sütununa. Orada, ihtiyacımız olan ilk modül, bazı H2 içeriğine sahip bir Metin Modülü.

H2 Metin Ayarları

Modülün tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: İş Sans
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Harf Aralığı: -2px

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Marj: %10

4. Sütun'a İletişim Formu Modülü Ekle

Alanları Tam Genişlikte Yap

Ardından, Metin Modülünün hemen altına bir İletişim Formu Modülü ekleyin. Ad ve e-posta adresi alanlarını ayrı ayrı açın ve her ikisi için "Tam Genişlik Yap" seçeneğini etkinleştirin.

• Tam Genişlik Yap: Evet

Alan Ayarları

Modülün tasarım sekmesine gidin ve alan ayarlarını aşağıdaki gibi değiştirin:

• Alanlar Arka Plan Rengi: #ffffff
• Alan Metin Rengi: #000000
• Alan Üst Dolgusu: %4
• Alan Alt Dolgusu: %4
• Fields Yazı Tipi: Work Sans
• Alanlar Metin Boyutu: 13px

Captcha Metin Ayarları

Ardından, captcha metin ayarlarında bazı değişiklikler yapın.

• Captcha Yazı Tipi: İş Sans
• Captcha Metin Rengi: #000000

Düğme Ayarları

Düğmeyi de şekillendiriyoruz.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 17px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: -1px
• Düğme Yazı Tipi: İş Sans

Sınır

Ve son olarak, bir alt sınır genişliği ekleyeceğiz. Bu kadar!

• Girişler Alt Kenar Genişliği: 1px
• Girişler Alt Kenarlık Rengi: #dddddd

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'deki kahraman bölümünüzle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, size mutlak konumlandırılmış bir alt çubuğu nasıl ekleyeceğinizi ve tasarlayacağınızı gösterdik. Bir alt çubuk kullanmak, çok bunaltıcı olmadan kahraman bölümünüzde daha fazla içerik paylaşmanıza yardımcı olur. Bu tekniği kullanarak her türlü tasarımı oluşturabilir ve birden fazla CTA'ya sahip olabilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.