Divi ‘s Row Hizalaması & amp;Animasyon Ayarları
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Temizlik Şirketi Düzeni Paketini kullanarak CTA Hizalama ve Divi Animasyon Ayarları ile CTA Slayt-İnerliği Nasıl Yapılacağını Göstereceğiz. Bunu yapmak için mevcut tüm animasyonları kaldırarak başlayacağız. Bu şekilde, gelen harekete geçme davetini vurgulayabiliriz.
Haydi Yapalım şunu! Birincil, bu yazıda ele alacağımız üç farklı örneğe bakalım:
Yapıştırıcımız aynı zamanda sıra genişliğimizi de azaltacaktır. Özel genişlik kullanın: evet
Özel genişlik: 500 piksel
Mesafe ve gereksiz beyaz alanı gidermek için üst ve alt dolguyu çıkarın. Üst dolgu: 0px
Aşağıda dolgu: 0px
Davet Modülünü Ekle Bir kopya ekleyin Şimdi Davet Modülünü harekete geçirebiliriz! Biraz seçim içeriği ekleyin. Bir bağlantı ekleyin, bir sonraki CTA modülünüze bir bağlantı ekleyin. Yönlendirilecek bir bağlantınız yoksa ‘#’ girebilirsiniz. Bu kutuya bir şey eklemeden, düğmeyi göremezsiniz, bu yüzden boş bırakmadığınızdan emin olun. Varsayılan olarak CTA modülünün arka plan rengini silme arka plan rengine sahiptir. Lütfen ve arka plan ayarlarında silin. Saali gradyan bölümü mavi gradyanın arka planını içeren parçayı açın. Hiçbir şey değiştirmeden, ayarları sağlayın ve kopyalayın. Gradyanı CTA modülüne yapıştırın Bu gradyanın arka planını CTA modülüne takın. Başlık Metin Ayarları CTA Modül ayarlarını tekrar açın, başlık metni ayarlarını açın ve düzen paketiyle eşleşecek bazı değişiklikler yapın: Yazı tipi başlığı: ubuntu Ağır yazı tipi başlığı: kalın
Boyut Metin Başlığı: 24px (masaüstü ve tablet), 16px (telefon)
Hat yüksekliği başlığı: 1.2em
Gövde metnini ayarlamak vücut yazı tiplerini de değiştirir.
Vücut ağırlığı: yarı kalın Ayarlar Sonraki Düğme Değiştir düğmesi.
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 18pxMetin Renk Düğmesi: #557DF3
Arka plan renk düğmesi: #ffffff
Sınır Sınır Genişliği: 10 piksel
Düğme Sınır Rengi: #ffffff
Sınır sınır yarıçapı: 0px
Yazı tipi düğmesi: ubuntu
Mektup Ağırlığı: Kalın
Mesafe modül yataklarını da arttırır.
Üst dolgu: 80px Dolgu Alt: 80 piksel
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Daha sonra sınır, sınır ayarında sağ üst ve alt sağ sınırların yarıçapını ekleyin.
Sağ üst: 100 piksel Sağ alt: 100 piksel
Kutunun gölgesi daha derin hale getirmek için pürüzsüz bir kutu gölgesi ekleyeceğiz.
Bulanık Güç Gölgesi Kutusu: 71px Kutunun gölgesinin dağılımının gücü: -5px
Son fakat en az değil animasyon, CTA modülü animasyon efekti verin.
Animasyonlu yön: doğru Animasyon yoğunluğu:% 100
Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Doğrusal
CTA #2 yap
Klon CTA #1 satır ve ikinci bir örnek yapmak, devam etmek ve ilk sıra klonu yapmak için satır klonlarında değişiklik yapın. Sayfayı aşağı kaydırın ve kopyayı buraya yerleştirin: Dolmanın üstünü silin Sırayı koyduğunuz ve üst dolguyu sildiğiniz parçanın ayarlarını açın. Üst dolgu: 0px Sol üst sınırın yarıçapını çıkarın Bir sonraki sınır ayarlarını açın ve sol üst sınır yarıçapını da silin. CTA’nın sağ üst sınırının yarıçapını sökün, ardından CTA modülünü açın ve parçanın ve modülün entegre edilmesine izin vermek için sağ üst sınır yarıçapını silin.
Bu CTA slayt-in için animasyon değiştirin, farklı animasyonlar kullanacağız. Diğer animasyon seçenekleriyle de oynamaktan çekinmeyin. Animasyon yönü: merkez Animasyon Opaklık Başlar:% 100 Animasyon Hız Eğrisi: Doğrusal
CTA #3 yap
Klon CTA #1 satır ve son örneği yapmak için klon sıralarında değişiklikler oluşturun, satırı bir kez daha klonlayacağız.
Aşağıdaki bölümdeki kopya bölümüne sürükleyin: Satır seviyesini değiştirin Modül hattı ayarlarını açın ve seviyeyi sağa değiştirin. Satır Hizalama: Doğru CTA gradyanının arka planını silin, modül gradyanının arka planını da silin. Bunun yerine arka plan rengini kullanın, bunun yerine arka plan rengini kullanın.
Arka plan rengi: #f2835a Arka plan rengine uyacak şekilde metin düğmesinin rengini değiştirin, ayrıca düğme metninin rengini değiştirin. Metin Renk Düğmesi: #F2835A
CTA sınır yarıçapını kaldırın Verilen tüm sınırları kaldırarak CTA modülünü kare olarak değiştiriyoruz. Animasyonu Değiştir Bir sonraki animasyon ayarlarını değiştirin.
Animasyonlu yön: aşağıda Animasyon yoğunluğu:% 100 Animasyon Opaklık Başlar:% 100
Animasyon Hız Eğrisi: Doğrusal
Dolmanın altını son olarak çıkarın, ancak en az değil, yerleştirilmiş ve bitmiş alt pedleri çıkararak modülü parçanın altına iteceğiz!
Yaptığımız CTA slayt-in’in son üç örneğine bakalım.
Bu yazıdaki son zihin, DIVI Temizlik Şirketi Düzen Paketini kullanarak CTA Slayt’ı nasıl yapacağınızı gösterdik.Halihazırda sayfadaki animasyonu silerek başladık.Bundan sonra, dikkat çekmek için üç CTA slayt yaptık.Bu blog yazısı, her hafta tasarım ekipmanı kutunuza bir şeyler koymaya çalıştığımız Divi Tasarım Girişimimizin bir parçasıdır.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
