Divi'nin Yapışkan Seçenekleriyle Yapışkan Altbilgi Çubuğu Nasıl Oluşturulur

Ziyaretçilerinizi web sitenizde gezinirken takip eden bir CTA eklemenin bir yolunu arıyorsanız, yapışkan bir alt bilgi çubuğu kullanmayı düşünebilirsiniz. Tarayıcınızın alt kısmında yapışkan bir alt bilgi çubuğu kullanılır ve ister bir düğme ister iletişim bilgileri olsun, istediğiniz herhangi bir harekete geçirici mesajı ekleyebilirsiniz. Ziyaretçiler sayfanızın altbilgi alanına kaydırır kaydırmaz, altbilgi çubuğu ve altbilgi tasarımı, yapışkan altbilgi çubuğunuzun stillerini değiştirirken birleşir. Bu güzel estetik, sayfalarınızdaki dönüşüm oranlarını artırmanıza yardımcı olabilir! Şablon 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

Global Altbilgi Şablonunu ÜCRETSİZ olarak indirin

Ücretsiz global altbilgi şablonuna el koymak 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!

1. Yeni Altbilgi Şablonu Oluşturun

Divi Tema Oluşturucu'ya gidin ve Yeni Küresel veya Özel Altbilgi Ekle

WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın. Orada, yeni bir genel veya özel altbilgi ekleyin.

Sıfırdan İnşa Etmeye Başlayın

Altbilgi şablonunu sıfırdan oluşturmaya başlayın.

2. Alt Bilgi Tasarımı Oluşturun

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve siyah bir arka plan rengi uygulayın.

• Arka Plan Rengi: #000000

1. Satır Ekle

Sütun Yapısı

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

Arka plan rengi

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

• Arka Plan Rengi: #ea6c01

boyutlandırma

Satırın tasarım sekmesine gidin ve sonraki boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %90
• Maksimum Genişlik: 2580 piksel
• Satır Hizalama: Merkez

aralık

Daha küçük ekran boyutlarına da bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 5px (Yalnızca Tablet ve Telefon)
• Alt Dolgu: 5px (Yalnızca Tablet ve Telefon)

Sınır

Ardından, kenarlık ayarlarına bazı duyarlı yuvarlak köşeler ekleyin.

• Tüm Köşeler:
  • Masaüstü: 30 piksel
  • Tablet ve Telefon: 15px

taşmalar

Öğreticide daha sonra çakışmalar oluşturabileceğimizden emin olmak için satır taşmalarını görünür olarak ayarlayacağız.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun 1 ve 3 Görünürlük

Daha küçük ekran boyutlarında çok fazla alt bilgi çubuğu öğesinin görünmesini önlemek için, hem tablette hem de telefonda satırımızdaki ilk ve son sütunu gizleriz.

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Sütun 1'deki Blurb Modülü ile başlayarak modül ekleme zamanı. İstediğiniz içeriği ekleyin.

Simge Seç

Sonraki bir simge seçin.

Simge Ayarları

Modülün tasarım sekmesine gidin ve simgeye uygun şekilde stil verin:

• Simge Rengi: #f5d72e
• Daire Simgesi: Evet
• Daire Rengi: #000000
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Merkez
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 32px

Metin Ayarları

Ardından, metin ayarlarını değiştirin.

• Metin Hizalama: Merkez
• Metin Rengi: Açık

Başlık Metni Ayarları

Başlık metni ayarlarında da bazı değişiklikler yapın.

• Başlık Yazı Tipi: Poppins
• Başlık Metin Rengi: #000000

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Poppins
• Gövde Yazı Tipi Ağırlığı: Ultra Kalın
• Gövde Metni Boyutu: 20px

boyutlandırma

Sonraki boyutlandırma ayarlarında içerik genişliğini "%100" olarak ayarlayın.

• İçerik Genişliği: %100

aralık

Bir örtüşme oluşturmak için, boşluk ayarlarına bir miktar negatif üst kenar boşluğu ekleyin.

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

Animasyon

Ve animasyon ayarlarında ikon animasyonunu kaldırarak modül ayarlarını tamamlayın.

• Resim/Simge Animasyonu: Animasyon Yok

Blurb Modülünü Klonla ve Çoğaltmayı Sütun 3'e Yerleştir

1. sütundaki ilk Blurb Modülünü tamamladıktan sonra, onu bir kez klonlayın ve kopyayı 3. sütuna yerleştirin.

İçeriği ve Simgeyi Değiştir

Kopyanın içeriğini ve simgesini değiştirin.

Sütun 2'ye Blurb Modülü Ekle

Simge Seç

Ardından, 2. sütuna yeni bir Bulanıklık Modülü ekleyin. İçerik kutusunu boş bırakın ve istediğiniz bir simgeyi seçin.

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Simge Ayarları

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

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Merkez
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 30px

boyutlandırma

Daha sonra boyutlandırma ayarlarında bazı değişiklikler yapın.

• Genişlik: 70 piksel
• Modül Hizalaması: Merkez
• Yükseklik: 40 piksel

aralık

Ardından, farklı ekran boyutlarına özel kenar boşluğu ve dolgu değerleri uygulayın.

• Üst Kenar Boşluğu: -20 piksel (Yalnızca Tablet ve Telefon)
• Üst Dolgu: 5px
• Alt Dolgu: 0px

Sınır

Ardından, kenarlık ayarlarına bazı yuvarlak köşeler ekleyin.

• Tüm Köşeler: 10px

Animasyon

Ve animasyon ayarlarından varsayılan animasyonu kaldırın.

• Resim/Simge Animasyonu: Animasyon Yok

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

İçerik Ekle

Bu satırda ihtiyacımız olan sonraki ve son modül, 2. sütundaki bir Metin Modülüdür. İstediğiniz içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Boyutu: 18px
• Metin Satır Yüksekliği: 1.8em
• Metin Hizalama: Merkez

2. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Modül eklemeden, satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Maksimum Genişlik: 2580 piksel

aralık

Sonra biraz üst ve alt kenar boşluğu ekleyin.

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

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Sütun 1'e bir Resim Modülü ekleyin ve logonuzu veya istediğiniz herhangi bir resmi yükleyin.

boyutlandırma

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

• Genişlik: %59
• Modül Hizalama: Sol

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

H3 İçeriği Ekle

Ardından, seçtiğiniz bazı H3 içeriğiyle 2. sütuna bir Metin Modülü ekleyin.

H3 Metin Ayarları

Modülün H3 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 3 Yazı Tipi: Poppins
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #6d6d6d

Metin Modülünü 3x Klonla ve Sütun 3 ve 4'e Yayılma

Bu Metin Modülünü tamamladıktan sonra, üç kez klonlayabilir ve kopyaları satırın kalan iki sütununa yayabilirsiniz.

İçeriği Değiştir

Her yinelenen Metin Modülündeki içeriği değiştirdiğinizden emin olun.

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

İçerik Ekle

2. sütundaki önceki Metin Modülünün hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı bağlantılı içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Boyutu: 30px
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Sol
• Metin Rengi: Açık

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #ffffff

Metin Modülünü Gerektiğinde Klonla

Metin Modülünü tamamladıktan sonra, istediğiniz kadar klonlayın.

İçeriği Değiştir

Yinelenen her modüldeki içeriği ve bağlantıları değiştirdiğinizden emin olun.

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

İçerik Ekle

Ardından, sütun 3'e başka bir Metin Modülü ekleyin. Seçtiğiniz bazı bağlantılı içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Boyutu: 22px
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Sol
• Metin Rengi: Açık

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #ea6c01

Metin Modülünü Gerektiğinde Klonla

Bu modülü istediğiniz kadar klonlayın.

İçeriği Değiştir

Ve tabii ki, içeriği ve bağlantıları gerektiği gibi değiştirin.

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

İçerik Ekle

4. sütunda, ilk Metin Modülünün altına başka bir Metin Modülü ekleyeceğiz. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Boyutu: 16px
• Metin Satır Yüksekliği: 1.8em
• Metin Hizalama: Sol
• Metin Rengi: Açık

4. Sütun'a Sosyal Medya Takibini Ekle

Seçtiğiniz Sosyal Ağları Ekleyin

Ardından, sütunun sonuna bir Sosyal Medya Takip Modülü ekleyin. Seçtiğiniz sosyal ağları ekleyin.

Her Sosyal Ağın Arka Plan Rengini Tek Tek Kaldırın

Her sosyal ağın arka plan rengini tek tek kaldırın.

aralık

Normal modül ayarlarına geri dönün, boşluk ayarlarına gidin ve bazı özel kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: -15px
• Sol Kenar Boşluğu: -8px

3. Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine geçin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Sütun Yüksekliklerini Eşitle: Evet
• Maksimum Genişlik: 2580 piksel

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

İçerik Ekle

Ardından, 1. sütuna bir Metin Modülü ekleyin. İstediğiniz içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Rengi: #595959
• Metin Boyutu: 13px
• Metin Hizalama: Merkez

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #595959

Metin Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki modülü tamamladıktan sonra, onu iki kez klonlayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

Metin Hizalamalarını Değiştir

Her yinelenen Metin Modülü için metin hizalamalarını uygun şekilde değiştirin:

• Sütun 2'deki Metin Modülü:
  • Masaüstü: Merkez
  • Tablet ve Telefon: Sol

• Sütun 3'teki Metin Modülü:
  • Masaüstü: Sağ
  • Tablet ve Telefon: Sol

İçeriği Değiştir

Ve her iki kopya modüldeki içeriği de değiştirin.

3. Altbilgi Çubuğuna Yapışkan Efektler Uygulayın

1. Satırı Açın ve Yapışkan Ayarları Uygulayın

Artık tasarım temelimiz hazır olduğuna göre, yapışkan efekti uygulama zamanı. Bölümdeki ilk satırı açın, gelişmiş sekmesine gidin ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum: Aşağıya Yapış
• Yapışkan Alt Ofset:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 20px

Satır Yapışkan Stiller

Arka plan rengi

Artık satırımızı yapışkan hale getirdiğimize göre, satıra ve tüm alt öğelerine yapışkan stiller uygulayabiliriz. 1. satıra yapışkan bir arka plan rengi ekleyerek başlayın.

• Yapışkan Arka Plan Rengi: #000000

Sütun 1 ve 3'teki Bulanıklaştırma Modüllerine Yapışkan Stiller Uygulayın

Simge Ayarları

Ardından, 1. ve 3. sütunlardaki Blurb Modüllerini açın ve yapışkan bir daire rengi ekleyin.

• Yapışkan Daire Rengi: #ea6c01

Başlık Metni Ayarları

Yapışkan bir başlık metni rengi de ekleyin.

• Yapışkan Başlık Metni Rengi: #ea6c01

2. Sütundaki Bulanıklık Modülüne Yapışkan Stiller Uygulayın

Arka plan rengi

Ardından, 2. sütundaki Blurb Modülünü açın ve yapışkan bir arka plan rengi uygulayın.

• Yapışkan Arka Plan Rengi: #ea6c01

4. Tüm Şablon ve Tema Oluşturucu Değişikliklerini Kaydet

Yapışkan adımları tamamladıktan sonra, sonucu web sitenizde görüntülemeden önce şablonunuzu ve tema oluşturucu değişikliklerinizi kaydettiğinizden emin olun!

Ö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 yazıda, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, insanlar üzerinde bulundukları sayfayı aşağı kaydırdığında ana alt bilgi alanıyla birleşen yapışkan bir alt bilgi çubuğunun nasıl oluşturulacağını gösterdik. Şablon JSON dosyasını da ücretsiz olarak indirebildiniz! 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.