Özel Divi Başlık CTA'nız için 8 Gecikmeli Düğme Animasyonu
Yayınlanan: 2020-01-23Herhangi bir CTA'ya gecikmeli düğme animasyonları eklemek, ziyaretçilerin dikkatini çekmenin ve dolayısıyla tıklama alma olasılığını artırmanın etkili bir yolu olabilir. Bu öğreticide, özel bir başlık CTA'sı için 8 gecikmeli düğme animasyonu oluşturmak için Divi'yi nasıl kullanacağınızı göstereceğiz. Bunu yapmak için, animasyon ayarlarını hiç düşünmemiş olabileceğiniz şekillerde birleştireceğiz. Ayrıca, bu animasyonlar sitenizdeki hemen hemen tüm CTA düğmelerine uygulanabilir.
Başlayalım.
Gizlice Bakış
Divi'deki özel başlık CTA'sına ekleyeceğimiz 8 gecikmeli düğme animasyonuna bir göz atın:
8 Gecikmeli Başlık Düğmesi Animasyonu Düzenini ÜCRETSİZ İndirin
Bu öğreticideki 8 gecikmeli düğme animasyonuna 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.
Ü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.
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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için Divi Temasını yüklemeniz ve etkinleştirmeniz gerekir. Divi'nin en son sürümüne sahip olduğunuzdan emin olun.
Bu eğitim için bu paketteki 404 sayfa şablonundaki özel Başlığı kullanacağımızdan İkinci Tema Oluşturucu Paketini indirmeniz gerekecek.
Bundan sonra, gitmeye hazırsınız.
Şablonu İkinci Tema Oluşturucu Paketinden İçe Aktarma
WordPress panosundan Divi > Tema Oluşturucu'ya gidin. Tema oluşturucuda, sayfanın sağ üst köşesindeki taşınabilirlik simgesini seçin. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin, theme-builder-pack-2-404-page-template.json dosyasını seçin ve içe aktar düğmesini tıklayın. (Bu içe aktarma dosyası Second Theme Builder Pack klasörünün içinde olacaktır)
Genel üstbilgi ve altbilgiyi statik düzenler olarak içe aktarma seçeneğini de belirleyebilirsiniz.
Şablon içe aktarıldıktan sonra özel başlık alanını düzenlemek için simgeye tıklayın.
Bu sizi, önceden hazırlanmış başlıktaki düğmeye gecikmeli animasyonları ekleyeceğimiz gövde şablonu düzeni düzenleyicisine götürecektir.
Özel Başlık CTA'nız için 8 Gecikmeli Düğme Animasyonu
Aşağıdaki 8 gecikmeli düğme animasyonu, yerleşik Divi animasyon seçeneklerinin ve perspektif CSS özelliğinin benzersiz bir kombinasyonunu içerir. Perspektif özelliği, düğme animasyonu bir çevirme veya katlama efekti içerdiğinde bir 3B efekti ekler. Bu animasyonların çoğu için, daha karmaşık hareket elde etmek için hem düğmeye hem de üst sütununa animasyon ekleyeceğiz.
İşte buradalar…
#1 Açılan Sıçrama
Düğme Ayarları:
Açılan sekme gecikmeli düğme animasyonu basit ve etkilidir. Oluşturmak için düğme modülünün ayarlarını açın ve aşağıdakileri güncelleyin:
- Animasyon Stili: Sıçrama
- Animasyon Yönü: Aşağı
- Animasyon Süresi: 1100ms
- Animasyon Gecikmesi: 1500ms
- Animasyon Opaklığı Başlatma: %100
#2 3D Dikey Çevirme
3B dikey çevirme gecikmeli düğme animasyonunu oluşturmak için önce perspektif özelliğini düğmenin üst sütununa (2. sütun) eklemelisiniz.
Sütun Ayarları
Sütuna perspektif eklemek için, satır ayarlarını açın ve ardından 2. sütun ayarlarını düzenlemek için tıklayın. Gelişmiş sekmesinin altında, ana öğeye aşağıdaki özel CSS'yi ekleyin:
perspective: 150px
Düğme Ayarları:
- Animasyon Stili: Çevir
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1500ms
- Animasyon Gecikmesi: 1000ms
- Animasyon Yoğunluğu: %400
- Animasyon Opaklığı Başlatma: %100
#3 3D Yatay Çevirme
3D Yatay Çevirme gecikmeli düğme animasyonu, dikey çevirmeye benzer. Tek gerçek fark, animasyon yönüdür.
Sütun Ayarları:
İlk olarak, ana öğeye aşağıdaki özel CSS'yi ekleyerek perspektifi sütun 2'ye eklediğinizden emin olun:
perspective: 150px
Düğme Ayarları:
Düğme modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Düğme Hizalama: Merkez
Bu, yatay çevirmenin ana perspektif özelliğiyle ortalanmasını sağlar.
- Animasyon Stili: Katlama
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1000ms
- Animasyon Gecikmesi: 2000ms
- Animasyon Yoğunluğu: %400
- Animasyon Opaklığı Başlatma: %100
- Animasyon Hız Eğrisi: Doğrusal
#4 Açılır Sıçrama + 3D Dikey Çevirme
Bu gecikmeli düğme animasyonu, bir sekme animasyonu (sütuna eklenir) ve bir çevirme animasyonu (düğmeye eklenir) birleştirilerek gerçekleştirilir.
İşte nasıl inşa edileceği.
Sütun Ayarları:
Satır ayarlarını açın ve sütun 2 ayarlarını aşağıdakilerle güncelleyin:
- Animasyon Stili: Sıçrama
- Animasyon Yönü: Aşağı
- Animasyon Gecikmesi: 2000ms
- Animasyon Opaklığı Başlatma: %100
Ardından perspektif css'yi ana öğeye aşağıdaki gibi ekleyin:
perspective: 150px;
Düğme Ayarları:
Sütun ayarları yapıldıktan sonra, düğme modülü ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Çevir
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1500ms
- Animasyon Gecikmesi: 1000ms
- Animasyon Yoğunluğu: %400
- Animasyon Opaklığı Başlatma: %100
Buradaki hile, sütun animasyonu tamamlandıktan sonra çevirmenin başlamasını geciktirdiğinizden emin olmaktır.
#5 Aşağı kaydır (aşağı kaydır + Döndür)
Bunun için bir sonraki "swoop down" animasyonunu elde etmek için, bir slayt animasyonunu (sütununa eklendi) ve bir rulo animasyonunu (düğmeye eklendi) birleştirmemiz gerekecek.
Haydi Yapalım şunu.
Sütun Ayarları:
Satır ayarlarını açın ve sütun 2 ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Slayt
- Animasyon Yönü: Aşağı
- Animasyon Gecikmesi: 1000ms
- Animasyon Opaklığı Başlatma: %100
Ardından ana öğeye aşağıdaki özel css'yi ekleyin:
perspective: 150px
Düğme Ayarları:
Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Tarzı: Rulo
- Animasyon Yönü: Aşağı
- Animasyon Süresi: 1500ms
- Animasyon Gecikmesi: 1000ms
- Animasyon Opaklığı Başlatma: %100
#6 Büyüt (yakınlaştır + ölçeği dönüştür)
Bu gecikmeli düğme animasyonu, dönüştürme ölçeği kullanılarak düğmenin ölçeklenmesini içermesi bakımından benzersizdir. Ardından butona zoom animasyonunu ekliyoruz.
İşte nasıl yapılacağı.
Düğme Ayarları:
Düğme modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Dönüşüm Ölçeği: %175
- Animasyon Stili: Yakınlaştır
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1500ms
- Animasyon Gecikmesi: 1000ms
- Animasyon Opaklığı Başlatma: %100
#7 Darbe (yakınlaştırma + uzaklaştırma)
Bu gecikmeli nabız animasyonu, bir uzaklaştırma animasyonu (sütuna eklenir) ve bir yakınlaştırma animasyonu (düğmeye eklenir) birleştirilerek oluşturulur.
Haydi Yapalım şunu.
Sütun Ayarları:
Satır ayarlarını açın ve 2. sütunun ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Yakınlaştır
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1000ms
- Animasyon Gecikmesi: 2000ms
- Animasyon Yoğunluğu: -%100
- Animasyon Opaklığı Başlatma: %100
Animasyon yoğunluğu için negatif bir değer (-%100) eklediğimize dikkat edin. Bu, sütunun, sütunu/düğmeyi küçültecek (veya uzaklaştıracak) zıt etkiye sahip olmasına neden olur.
Düğme Ayarları:
Ardından düğme ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Yakınlaştır
- Animasyon Yönü: Merkez
- Animasyon Süresi: 1500ms
- Animasyon Gecikmesi: 1000ms
- Animasyon Yoğunluğu: %50
- Animasyon Opaklığı Başlatma: %100
Animasyon gecikmesinin, sütun animasyonundan 1000 ms önce gerçekleşecek şekilde ayarlandığına dikkat edin, böylece düğme, uzaklaştırmadan önce yakınlaşacaktır.
#8 Spiral (sola kaydır + döndür)
Bu son gecikmeli düğme animasyonu, bir slayt animasyonunu (sütuna eklenir) ve 720 derecelik bir çevirme animasyonunu (düğmeye eklenir) birleştirir.
İşte nasıl yapılacağı.
Sütun Ayarları:
İlk olarak, satır ayarlarını açın ve 2. sütunun ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Slayt
- Animasyon Yönü: Sol
- Animasyon Süresi: 2000ms
- Animasyon Gecikmesi: 2000ms
- Animasyon Yoğunluğu: %100
- Animasyon Opaklığı Başlatma: %100
Düğme Ayarları:
Ardından düğme modülü ayarlarını aşağıdaki gibi güncelleyin:
- Animasyon Stili: Çevir
- Animasyon Yönü: Merkez
- Animasyon Süresi: 2000ms
- Animasyon Gecikmesi: 2000ms
- Animasyon Yoğunluğu: %800
- Animasyon Opaklığı Başlatma: %100
Burada animasyon yoğunluğunun %800 olarak ayarlandığına dikkat edin. Bu, döndürme efektini oluşturmak için düğmenin üç kez dönmesine neden olur.
Nihai sonuçlar
8 gecikmeli düğme animasyonuna son bir kez bakalım.
Son düşünceler
Bu 8 gecikmeli düğme animasyonunun, özel başlık CTA'larınız için dönüşümleri artırmaya yardımcı olacağını umuyorum. Ayrıca bu örnekleri ilham almak için kullanabilir ve kendi web siteniz için ek tasarımlar ve uygulamalar keşfedebilirsiniz!
Sevdiğin var mı?
Yorumlarda sizden haber bekliyorum.
Şerefe!