Divi's Row Hizalama ve Animasyon Ayarları ile Slide-in CTA'ları Oluşturma

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz. Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Temizleme Şirketi Düzen Paketi'ni kullanarak Divi'nin satır hizalaması ve animasyon ayarlarıyla kaydırmalı CTA'ları nasıl oluşturacağınızı göstereceğiz.

Bunu başarmaya yardımcı olmak için, zaten orada olan tüm animasyonları kaldırarak başlayacağız. Bu şekilde, içeri kayan harekete geçirici mesajları vurgulayabiliriz.

Hadi hadi bakalım!

Ön izleme

Bu yazıda ele alacağımız üç farklı örneğe bir göz atalım:

Temizlik Şirketi Açılış Sayfası Yükle

Yeni Sayfa Ekle ve Visual Builder'a Geç

Daha önce de belirtildiği gibi, bu öğreticiyi oluşturmak için Temizlik Şirketi Düzen Paketini kullanacağız, ancak bu yaklaşımı oluşturduğunuz herhangi bir web sitesi için kullanmaktan çekinmeyin. Yeni bir sayfa ekleyin, sayfa başlığınızı girin ve hemen Visual Builder'a geçin.

Temizlik Şirketi Açılış Sayfası Yükle

Bunu yaptığınızda, ekranınızda beliren üç seçenek göreceksiniz. Sıfırdan oluşturmaya başlayabilir, önceden hazırlanmış bir düzen seçebilir veya mevcut bir sayfayı kopyalayabilirsiniz. İkinci seçeneği seçin.

Temizlik Şirketi Düzen Paketini arayın, açılış sayfası düzenini seçin ve sayfanıza yükleyin.

Sayfadaki tüm Animasyon Ayarlarını Kaldırma

Sayfadaki Bölümü Bul

Düzen sayfanıza yüklendikten sonra devam edin ve aşağıdaki bölümü bulun.

Animasyonu Kaldır

Ayarlarını açın ve zaten orada olan animasyonu kaldırın.

Stili Tüm Bölümlere Genişlet

Zaman kazanmak için bu animasyon stilini sayfadaki tüm tasarım öğelerine genişleteceğiz. Sağ tıklayıp 'Animasyon Stillerini Genişlet'i seçerek sayfamızdaki bölümlerle başlayacağız. Sayfa boyunca tüm bölümlere uygulanmasını sağlayın ve 'Genişlet'i tıklayın.

Stili Tüm Satırlara Genişlet

Aynı adımları tekrarlayın, ancak bunun yerine sayfadaki tüm satırlara uygulanmasını sağlayın.

Stili Tüm Modüllere Genişletin

Son olarak, sayfadaki tüm modüllere de uygulanmasını sağlayın.

CTA #1 oluşturma

Yeni Satır Ekle

Konum

İlk slayt CTA'sını oluşturmaya başlayalım! Aşağıdaki bölümün altına yeni bir satır ekleyin:

Sütun Yapısı

Yeni eklediğiniz satır için aşağıdaki sütun yapısını seçin:

Satır Hizalama

Kaydırma efektini oluşturmaya yardımcı olmak için satırı sola iteceğiz.

• Satır Hizalama: Sol

boyutlandırma

Ayrıca sıramızın genişliğini de azaltacağız.

• Özel Genişlik Kullan: Evet
• Özel Genişlik: 500 piksel

aralık

Gereksiz beyaz boşluktan kurtulmak için sıranın üst ve alt dolgusunu çıkarın.

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

Harekete Geçirici Mesaj Modülü Ekle

Kopya Ekle

Artık Eyleme Çağrı Modülümüzü ekleyebiliriz! Seçtiğiniz bazı içeriği ekleyin.

Link ekle

Daha sonra CTA Modülünüze bir bağlantı ekleyin. Henüz yönlendirilecek bir bağlantınız yoksa, '#' girmeniz yeterlidir. Bu kutuya bir şey eklemeden düğmeyi göremezsiniz, bu yüzden boş bırakmadığınızdan emin olun.

Arka Plan Rengini Kaldır

CTA Modülünün varsayılan olarak bir arka plan rengi vardır. Devam edin ve arka plan ayarlarından kaldırın.

Bölüm Gradyanını Kopyala

Mavi degrade arka planı içeren bölümü açın. Bununla ilgili hiçbir şeyi değiştirmeden, sağ tıklayın ve ayarları kopyalayın.

Degradeyi CTA Modülüne Yapıştır

Bu degrade arka planı CTA Modülüne yapıştırın.

Başlık Metni Ayarları

CTA Modülü ayarlarını tekrar açın, başlık metni ayarlarına gidin ve düzen paketine uyacak şekilde bazı değişiklikler yapın:

• Başlık Yazı Tipi: Ubuntu
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Boyutu: 24px (Masaüstü ve Tablet), 16px (Telefon)
• Başlık Satırı Yüksekliği: 1.2em

Gövde Metni Ayarları

Gövdenin gövde yazı tipi ağırlığını da değiştirin.

• Gövde Yazı Tipi Ağırlığı: Yarı Kalın

Düğme Ayarları

Sonraki düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 18px
• Düğme Metin Rengi: #557df3
• Düğme Arka Plan Rengi: #FFFFFF
• Düğme Kenar Genişliği: 10px
• Düğme Kenar Rengi: #FFFFFF
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Ubuntu
• Yazı Ağırlığı: Kalın

aralık

Modülün dolgusunu da artırın.

• Üst Dolgu: 80px
• Alt Dolgu: 80px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Ardından, kenarlık ayarlarına biraz sağ üst ve sağ alt kenarlık yarıçapı ekleyin.

• Sağ Üst: 100 piksel
• Sağ Alt: 100 piksel

Kutu Gölge

Daha fazla derinlik yaratmak için ince bir kutu gölgesi ekleyeceğiz.

• Kutu Gölge Bulanıklığı Gücü: 71px
• Kutu Gölge Yayılma Gücü: -5px

Animasyon

Son olarak, CTA Modülünüze bir animasyon efekti verin.

• Animasyon Yönü: Sağ
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hız Eğrisi: Doğrusal

CTA #2 oluşturma

CTA #1 Satırını Klonla ve Değişiklik Yap

Klon Satırı

İkinci örneği oluşturmak için devam edin ve ilk satırı klonlayın.

Bölüme Sürükle

Sayfayı aşağı kaydırın ve kopyayı tam buraya yerleştirin:

Bölüm Üst Dolgusunu Kaldır

Satırı koyduğunuz bölümün ayarlarını açın ve üst dolguyu çıkarın.

• Üst Dolgu: 0px

Bölümü Kaldır Üst Sol Kenar Yarıçapı

Sonraki Kenarlık ayarlarına gidin ve sol üst kenarlık yarıçapını da kaldırın.

CTA Sağ Üst Kenar Yarıçapını Kaldır

Ardından, CTA Modülünü açın ve bölümün ve modülün karışmasını sağlamak için sağ üst kenarlık yarıçapını kaldırın.

Animasyonu Değiştir

Bu slayt CTA'sı için farklı bir animasyon kullanacağız. Diğer animasyon seçenekleriyle de oynamaktan çekinmeyin.

• Animasyon Yönü: Merkez
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hız Eğrisi: Doğrusal

CTA #3 oluşturma

CTA #1 Satırını Klonla ve Değişiklik Yap

Klon Satırı

Son örneği oluşturmak için satırı bir kez daha klonlayacağız.

Bölüme Sürükle

Kopyayı aşağıdaki bölüme yerleştirin:

Satır Hizalamasını Değiştir

Modülün satır ayarlarını açın ve hizalamayı sağa değiştirin.

• Satır Hizalama: Sağ

CTA Gradyan Arka Planını Kaldır

Modülün degrade arka planını da kaldırın.

Bunun yerine Arka Plan Rengini Kullanın

Bunun yerine bir arka plan rengi kullanın.

• Arka Plan Rengi: #f2835a

Düğme Metin Rengini Değiştir

Arka plan rengini eşleştirmek için düğme metni rengini de değiştirin.

• Düğme Metin Rengi: #f2835a

CTA Sınır Yarıçapını Kaldır

CTA Modülünü kendisine verilen tüm border-radius'u kaldırarak kareye dönüştürüyoruz.

Animasyonu Değiştir

Sonraki animasyon ayarlarını değiştirin.

• Animasyon Yönü: Aşağı
• Animasyon Yoğunluğu: %100
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hız Eğrisi: Doğrusal

Bölüm Alt Dolgusunu Kaldır

Son olarak, modülü, yerleştirildiği bölümün alt dolgusunu kaldırarak bölümün altına iteceğiz ve işimiz bitti!

• Alt Dolgu: 0px

Ön izleme

Oluşturduğumuz slayt CTA'larının üç örneğine son bir göz atalım.

Son düşünceler

Bu gönderide, Divi's Cleaning Company Layout Pack'i kullanarak CTA'ları nasıl oluşturacağınızı gösterdik. Sayfada zaten mevcut olan animasyonları kaldırarak başladık. Bundan sonra, dikkat çekmek için üç kaydırmalı CTA oluşturduk. Bu blog yazısı, her hafta tasarım araç kutunuza bir şeyler koymaya çalıştığımız Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!