Divi ile Muhteşem Bir CTA Bölümünde Yapışkan Düğmenizi Nasıl Vurgularsınız

Divi yapışkan seçenekler özelliği yayınlandığında, blogumuzdaki yayın gönderisine, bu yeni özelliğin çok yönlülüğünü gösteren canlı demolar eşlik etti. Yapışkan seçenekleri daha iyi anlamanıza ve bunları tasarımınızda kullanmaya başlamanıza yardımcı olmak için bu eğitimde size canlı demo tasarımlarından birini nasıl yeniden oluşturacağınızı göstereceğiz. Yeniden oluşturduğumuz tasarım, yapışkan düğmenizi vurgulamaya odaklanıyor. Harekete geçirici mesajınızı güzel bir şekilde vurgulamanızı sağlayan metin tabanlı bir CTA bölümüdür. 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

CTA Bölüm Düzenini ÜCRETSİZ İndirin

Ücretsiz CTA bölümü düzenine 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. Yapı Elemanı Yapısı

Yeni Bölüm Ekle

Arka plan rengi

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bu, yeni bir sayfa veya mevcut bir sayfa olabilir, ancak bunu, içinde zaten bir miktar içerik bulunan bir sayfaya eklemenizi öneririz, bu nedenle, efektlerin gerçekten hayata geçtiğini görmeniz için yeterli kaydırma alanı vardır. Bölüm ayarlarını açın ve seçtiğiniz bir arka plan rengini uygulayın.

• Arka Plan Rengi: #00965a

boyutlandırma

Bölümün tasarım sekmesine gidin ve maksimum yükseklik uygulayın. Bu maksimum yükseklik, bölümün yüksekliğinin sınırlı olmasını sağlamamıza yardımcı olacaktır.

• Maksimum Yükseklik: 100vh

taşmalar

Eğitimde daha sonra bazı kaydırma efektleri uygulayacağımızdan, hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak için bölümün taşmalarını da gizlememiz gerekecek.

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

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarları yapıldığında, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve bazı özel boyutlandırma ayarlarını uygulayın. Bu boyutlandırma ayarları, satır kapsayıcısının, tasarımımıza tam ekran efekti veren tüm satırın genişliğini almasına olanak tanır.

• Genişlik: %100
• Maksimum Genişlik: yok

Sütun 2 Ayarları

aralık

Sonraki sütun 2 ayarlarını açın ve farklı ekran boyutlarına bazı özel dolgu değerleri uygulayın.

• Alt Dolgu: 60px
• Sol Dolgu:
  • Tablet ve Telefon: %5
• Sağ Dolgu:
  • Masaüstü: 10vw
  • Tablet ve Telefon: %5

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

İçerik Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. İstediğiniz içeriği ekleyin. Bu gönderinin önizlemesindeki ile aynı tasarımı oluşturmak için, öğreticinin 2. sütununa yerleştireceğimiz CTA'yı güçlendirmeye yardımcı olacak bazı alakalı kelimeler ekleyin. Her kelimeyi kendi satırına da yerleştirdiğinizden emin olun.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını değiştirin. Metin boyutu birimimiz olarak görüntü alanı genişliğini kullandığımızı fark edeceksiniz. Görüntü alanı genişlik birimini kullanmak, metni tüm ekran boyutlarında duyarlı tutmamıza yardımcı olacaktır.

• Metin Yazı Tipi: İş Sans
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 10vw
• Metin Satırı Yüksekliği: 0.2em

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

İçerik Ekle

İkinci sütuna geçin. Orada, seçtiğiniz bazı harekete geçirici mesajlar içeren bir Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: İş Sans
• Metin Rengi: #ffffff
• Metin Boyutu: 56px
• Metin Satırı Yüksekliği: 1.2em

boyutlandırma

Metin Modülüne de bir maksimum genişlik atayın.

• Maksimum Genişlik: 400 piksel

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

Tasarımımızda ihtiyacımız olan sonraki ve son modül 2. sütundaki bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi:
  • Varsayılan: #ffffff
  • Fareyle üzerine gelin: rgba(255,255,255,0.7)
• Düğme Kenar Genişliği: 5px
• Düğme Kenar Rengi: rgba(0,0,0,0)

• Düğme Sınır Yarıçapı: 5px
• Düğme Yazı Tipi: İş Sans
• Düğme Simgesini Göster: Hayır

2. Kaydırma ve Yapışkan Efektler Uygulayın

Sütun 1'deki Metin Modülüne Dikey Hareket Ekleme

Tasarımımızın temeli atıldığına göre, şimdi kaydırma ve yapışkan efektleri uygulama zamanı! Sütun 1'deki Metin Modülünü açın ve biraz duyarlı dikey hareket uygulayın.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: 10
  • Tablet & Telefon: 0
• Orta Ofset: 0
• Bitiş Ofseti:
  • Masaüstü: -10
  • Tablet & Telefon: 0
• Hareket Efekti Tetikleyicisi: Elemanın Başı

Sütun 2'ye Yapışkan Efekt Ekle

Ardından, sütun 2 ayarlarını açacağız ve masaüstüne yapışkan bir efekt uygulayacağız. Daha küçük ekran boyutlarındaki sütunlar ve modüller yan yana değil alt alta yerleştirildiğinden, daha küçük ekran boyutlarında yapışkan ayarları “Yapışmaz” olarak geri getireceğiz.

• Yapışkan Konum:
  • Masaüstü: En Üstte Kal
  • Tablet ve Telefon: Yapışma
• Yapışkan Üst Ofset: 80px
• Alt Yapışkan Limit: Bölüm
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

2. Sütundaki Düğmeye Yapışkan Stil Ekleme

Artık 2. sütun yapışkan hale geldiğine göre, sütunun kendisine ve sütunun içindeki modüllere yapışkan stil uygulayabileceğiz. Ancak yapacağımız tek kalıcı değişiklik düğmeye odaklanmış durumda. Modülü açın, düğme ayarlarına gidin ve metin ve düğme renklerini ters çevirin. Bu kadar! Düzeni kaydettikten ve görsel oluşturucudan çıktığınızda, güzel tasarımı web sitenizde canlı olarak izleyebilirsiniz.

• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000

Ö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, yapışkan seçenekler özelliği güncelleme gönderisinde demo olarak kullanılan tasarımlardan birini nasıl yeniden oluşturacağınızı gösterdik. Bu tasarım, yapışkan durum etkinleştirildiğinde stili değiştirerek yapışkan düğmenizi vurgulamaya odaklanır. 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.