Divi ile Yapışkan Durumda Bir Sütun CTA'sı Nasıl Ortaya Çıkarılır

Bir sayfa tasarımı oluştururken belirli bir noktada, etkileşimli bir şekilde paylaşmak istediğiniz hizmetler, kurslar veya benzeri bir listeyle karşılaşabilirsiniz. Liste içeriğiniz için kullandığınız tasarım, ziyaretçilerinizin içeriği nasıl sindirdiği konusunda çok önemli bir rol oynar. Ve çoğu listede, noktaları birleştiren bir harekete geçirici mesaj da eklemek isteyeceksiniz. Bunu yapmanın yaratıcı bir yolunu arıyorsanız, bu öğreticiyi seveceksiniz.

Bugün size Divi ile yapışkan durumda bir sütun CTA'sını nasıl ortaya çıkaracağınızı göstereceğiz. CTA sütunun sonuna dokunur dokunmaz, yapışkan etki durur, bu da insanların CTA'yı bulmak için yukarı veya aşağı kaydırmak zorunda kalmadan liste öğelerini okumaya devam edebilecekleri ve istedikleri zaman harekete geçmeye karar verebilecekleri zahmetsiz bir deneyim sunar. . JSON dosyasını da ücretsiz paylaşacağız!

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

Yapışkan Sütun CTA Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan sütun CTA bölümü düzenine 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!

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

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

• Arka Plan Rengi: #ffffff

1. Satır Ekle

Sütun Yapısı

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

aralık

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

• Alt Marj: %5

Sütuna Metin Modülü Ekle

H2 İçeriği Ekle

Seçtiğiniz bazı H2 içeriğine sahip bir Metin Modülü ekleyin.

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: Alata
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu:
  • Masaüstü: 55 piksel
  • Tablet: 40 piksel
  • Telefon: 30 piksel

Sütuna Ayırıcı Modül Ekle

görünürlük

Metin Modülünün hemen altına bir Bölücü Modül ekleyin ve “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

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

• Çizgi Rengi: #3a7a84
• Çizgi Stili: Çift

boyutlandırma

Boyutlandırma ayarlarını uygun şekilde değiştirerek modülün ayarlarını tamamlayın:

• Bölücü Ağırlığı: 10px
• Genişlik: %8
• Modül Hizalaması: Merkez
• Yükseklik: 10 piksel

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bir öncekinin hemen altına başka bir satır ekleyerek devam edin:

boyutlandırma

Satır ayarlarını açın 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
• Genişlik: %95
• Maksimum Genişlik: 2580 piksel

aralık

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

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

Sütun 1 Ayarları

Arka plan görüntüsü

Ardından, sütun 1 ayarlarını açın ve bir arka plan görüntüsü uygulayın.

• Arka Plan Resmi Boyutu: Kapak

Sınır

Sütunun tasarım sekmesine gidin ve bazı yuvarlatılmış köşeler uygulayın.

• Tüm Köşeler: 20px

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

İçerik Ekle

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

Simge Seç

Sonraki bir simge seçin.

Arka plan rengi

Ardından, beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #FFFFFF

Simge Ayarları

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

• Simge Rengi: #3a7a84
• Resim/Simge Yerleşimi: Sol

Başlık Metni Ayarları

Ardından, başlık metni ayarlarını biçimlendirin.

• Başlık Başlık Düzeyi: H3
• Başlık Fontu: Alata
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu:
  • Masaüstü: 35 piksel
  • Tablet: 30 piksel
  • Telefon: 20 piksel

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Karla
• Gövde Metni Boyutu:
  • Masaüstü: 17 piksel
  • tablet: 15 piksel
  • Telefon: 14 piksel
• Gövde Çizgisi Yüksekliği: 2.5em

boyutlandırma

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

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

aralık

Ve boşluk ayarlarına bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: %20
• Alt Dolgu: 20%
• Sol Dolgu: %10
• Sağ Dolgu: %10

Sınır

Ardından, kenarlık ayarlarına bazı yuvarlak köşeler ekleyeceğiz.

• Tüm Köşeler: 20px

Kutu Gölge

Ve ince bir kutu gölgesi ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(59,120,130,0.14)

Animasyon

Sonraki animasyon ayarlarında Blurb Module'ün varsayılan animasyonunu kaldırarak devam edin.

• Resim/Simge Animasyonu: Animasyon Yok

Bulanık Başlık CSS

Gelişmiş sekmesindeki tanıtıcı başlık CSS kutusuna bir satır CSS kodu ekleyerek modül ayarlarını tamamlayın.

margin-bottom: 20px;

Blurb Modülünü İki Kez Klonla

İlk Blurb Modülünü tamamladığınızda, Blurb Module'ü istediğiniz kadar çoğaltın.

İçeriği Değiştir

Her yinelenen modüldeki içeriği değiştirin.

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

İçerik Ekle

1. sütunda, ihtiyacımız olan tek modül Harekete Geçirici Mesaj Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Düğme Bağlantısı Ekle

Ardından bir düğme bağlantısı ekleyin.

Degrade Arka Plan

Ardından, bir degrade arka planı uygulayın.

• Renk 1: rgba(59,120,130,0.53)
• Renk 2: #112730
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 161deg

Başlık Metni Ayarları

Modülün tasarım sekmesine gidin ve başlık metni ayarlarında aşağıdaki değişiklikleri yapın:

• Başlık Başlık Düzeyi: H3
• Başlık Fontu: Alata
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 30 piksel

Düğme Ayarları

Sonraki düğmeyi stilleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 20 piksel
  • Tablet: 17 piksel
  • Telefon: 15 piksel
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Alata
• Düğme Yazı Ağırlığı: Kalın

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 3px
• Gölge Rengi: #ffffff

boyutlandırma

Modülün boyutlandırma ayarlarına gidin ve aşağıdaki değişiklikleri uygulayın:

• Genişlik:
  • Masaüstü: %95
  • Tablet ve Telefon: %100
• Modül Hizalaması: Merkez

aralık

Bazı özel üst ve alt dolguları da ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Sınır

Bazı yuvarlak köşeleri de ekleyin.

• Tüm Köşeler: 20px

Dönüştür Çeviri

Aşağıdaki dönüştürme çeviri ayarlarını uygulayarak modül ayarlarını tamamlayın:

• Doğru:
  • Masaüstü: -25 piksel
  • Tablet ve Telefon: 0px

CTA Modülüne Yapışkan Efekt Uygula

Yapışkan Ayarlar

Artık tüm unsurlar yerine oturduğuna göre, yapışkan efekti uygulama zamanı. CTA Modülünü açın ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum:
  • Masaüstü: En Üstte Kal
  • Tablet ve Telefon: Yapışma
• Yapışkan Üst Ofset: 50px
• Alt Yapışkan Sınır: Sütun
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

opaklık

Artık modül yapışkan hale geldiğine göre, yapışkan stiller uygulayabiliriz. Filtre ayarlarına gidin ve aşağıdaki opaklık filtresi ayarlarını uygulayın:

• Varsayılan Opaklık:
  • Masaüstü: %0
  • Tablet ve Telefon: %100
• Yapışkan Opaklık: %100

Geçiş

Son olarak, gelişmiş sekmesinde geçiş ayarlarını değiştireceğiz. Bu kadar!

• Geçiş Süresi: 800ms
• Geçiş Hızı Eğrisi: Kolaylık

Ö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, yapışkan sütun CTA'sı ile liste öğelerini nasıl güzel bir şekilde görüntüleyeceğinizi gösterdik. Bu yaklaşım, ziyaretçileriniz hizmetleriniz, kurslarınız veya diğer liste türleri aracılığıyla hazır olduğunda tüm öğeleri görsel olarak görüntülemenize ve yakınlarda bir harekete geçirici mesaja sahip olmanıza olanak tanır. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.