8 Animasi Tombol Tertunda untuk CTA Header Divi Kustom Anda
Diterbitkan: 2020-01-23Menambahkan animasi tombol tertunda ke CTA apa pun dapat menjadi cara yang efektif untuk menarik perhatian pengunjung dan, pada gilirannya, meningkatkan kemungkinan mendapatkan klik. Dalam tutorial ini, kami akan menunjukkan cara menggunakan Divi untuk membuat 8 animasi tombol tertunda untuk CTA header kustom. Untuk melakukan ini, kami akan menggabungkan pengaturan animasi dengan cara yang mungkin belum pernah Anda pertimbangkan. Plus, animasi ini dapat diterapkan ke hampir semua tombol CTA di seluruh situs Anda.
Mari kita mulai.
Sneak Peek
Berikut adalah intip 8 animasi tombol tertunda yang akan kami tambahkan ke CTA header khusus di Divi:
Unduh 8 Tata Letak Animasi Tombol Tajuk Tertunda GRATIS
Untuk mendapatkan 8 animasi tombol tertunda dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.
Unduh Gratis
Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.
Anda perlu mengunduh Paket Pembuat Tema Kedua karena kami akan menggunakan Header khusus pada templat halaman 404 dari paket itu untuk tutorial ini.
Setelah itu, Anda siap untuk pergi.
Mengimpor Template dari Paket Pembuat Tema Kedua
Dari dasbor WordPress, navigasikan ke Divi > Theme Builder. Di dalam pembuat tema, pilih ikon portabilitas di kanan atas halaman. Di popup portabilitas, pilih tab impor, pilih file theme-builder-pack-2-404-page-template.json dan klik tombol impor. (File impor ini akan berada di dalam folder Paket Pembuat Tema Kedua)
Anda juga dapat memilih opsi untuk mengimpor header dan footer global sebagai tata letak statis.
Setelah template diimpor, klik ikon untuk mengedit area header kustom.
Ini akan membawa Anda ke editor tata letak template tubuh di mana kami akan menambahkan animasi yang tertunda ke tombol pada header premade.
8 Animasi Tombol Tertunda untuk CTA Header Kustom Anda
8 animasi tombol tertunda di bawah ini mencakup kombinasi unik opsi animasi Divi bawaan dan properti CSS perspektif. Properti perspektif menambahkan efek 3D saat animasi tombol menyertakan efek flip atau fold. Untuk sebagian besar animasi ini, kami akan menambahkan animasi ke tombol dan kolom induknya untuk mendapatkan gerakan yang lebih kompleks.
Di sini mereka…
#1 Dropdown Bouncing
Pengaturan Tombol:
Animasi tombol dropdown bouncing tertunda sederhana dan efektif. Untuk membangunnya, buka pengaturan modul tombol dan perbarui yang berikut:
- Gaya Animasi: Bounce
- Arah Animasi: Bawah
- Durasi Animasi: 1100ms
- Penundaan Animasi: 1500ms
- Animasi Mulai Opacity: 100%
#2 Balik Vertikal 3D
Untuk membuat animasi tombol tunda flip vertikal 3D, Anda harus terlebih dahulu menambahkan properti perspektif ke kolom induk tombol (kolom 2).
Pengaturan Kolom
Untuk menambahkan perspektif ke kolom, buka pengaturan baris lalu klik untuk mengedit pengaturan kolom 2. Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:
perspective: 150px
Pengaturan Tombol:
- Gaya Animasi: Balik
- Arah Animasi: Pusat
- Durasi Animasi: 1500ms
- Penundaan Animasi: 1000ms
- Intensitas Animasi: 400%
- Animasi Mulai Opacity: 100%
#3 Balik Horizontal 3D
Animasi tombol tunda Flip Horizontal 3D mirip dengan flip vertikal. Satu-satunya perbedaan nyata adalah arah animasi.
Pengaturan Kolom:
Pertama, pastikan Anda telah menambahkan perspektif ke kolom 2 dengan menambahkan CSS khusus berikut ke elemen utama:
perspective: 150px
Pengaturan Tombol:
Buka pengaturan modul tombol dan perbarui yang berikut:
- Penjajaran Tombol: Tengah
Ini memastikan flip horizontal dipusatkan dengan properti perspektif induk.
- Gaya Animasi: Lipat
- Arah Animasi: Pusat
- Durasi Animasi: 1000ms
- Penundaan Animasi: 2000ms
- Intensitas Animasi: 400%
- Animasi Mulai Opacity: 100%
- Kurva Kecepatan Animasi: Linear
#4 Dropdown Bounce + Balik Vertikal 3D
Animasi tombol tertunda ini dicapai dengan menggabungkan animasi bouncing (ditambahkan ke kolom) dan animasi flip (ditambahkan ke tombol).
Berikut cara membangunnya.
Pengaturan Kolom:
Buka pengaturan baris, dan perbarui pengaturan kolom 2 dengan yang berikut:
- Gaya Animasi: Bounce
- Arah Animasi: Bawah
- Penundaan Animasi: 2000ms
- Animasi Mulai Opacity: 100%
Kemudian tambahkan css perspektif ke elemen utama sebagai berikut:
perspective: 150px;
Pengaturan Tombol:
Setelah pengaturan kolom di tempat, perbarui pengaturan modul tombol sebagai berikut:
- Gaya Animasi: Balik
- Arah Animasi: Pusat
- Durasi Animasi: 1500ms
- Penundaan Animasi: 1000ms
- Intensitas Animasi: 400%
- Animasi Mulai Opacity: 100%
Triknya di sini adalah memastikan Anda menunda flip untuk memulai setelah animasi kolom selesai.
#5 Menukik ke bawah (geser ke bawah + Putar)
Untuk mendapatkan animasi "swoop down" untuk yang berikutnya, kita perlu menggabungkan animasi slide (ditambahkan ke kolom) dan animasi roll (ditambahkan ke tombol).
Ayo lakukan.
Pengaturan Kolom:
Buka pengaturan baris dan perbarui pengaturan kolom 2 sebagai berikut:
- Gaya Animasi: Slide
- Arah Animasi: Bawah
- Penundaan Animasi: 1000ms
- Animasi Mulai Opacity: 100%
Kemudian tambahkan css khusus berikut ke elemen utama:
perspective: 150px
Pengaturan Tombol:
Kemudian perbarui pengaturan tombol sebagai berikut:
- Gaya Animasi: Roll
- Arah Animasi: Bawah
- Durasi Animasi: 1500ms
- Penundaan Animasi: 1000ms
- Animasi Mulai Opacity: 100%
#6 Perbesar (perbesar + skala transformasi)
Animasi tombol tertunda ini unik karena melibatkan penskalaan tombol menggunakan skala transformasi. Kemudian kita tambahkan animasi zoom ke tombol.
Berikut cara melakukannya.
Pengaturan Tombol:
Buka pengaturan modul tombol dan perbarui yang berikut:
- Skala Transformasi: 175%
- Gaya Animasi: Zoom
- Arah Animasi: Pusat
- Durasi Animasi: 1500ms
- Penundaan Animasi: 1000ms
- Animasi Mulai Opacity: 100%
#7 Pulsa (memperbesar + memperkecil)
Animasi pulsa tertunda ini dibuat dengan menggabungkan animasi zoom out (ditambahkan ke kolom) dan animasi zoom in (ditambahkan ke tombol).
Ayo lakukan.
Pengaturan Kolom:
Buka pengaturan baris dan perbarui pengaturan untuk kolom 2 sebagai berikut:
- Gaya Animasi: Zoom
- Arah Animasi: Pusat
- Durasi Animasi: 1000ms
- Penundaan Animasi: 2000ms
- Intensitas Animasi: -100%
- Animasi Mulai Opacity: 100%
Perhatikan bahwa kami menambahkan nilai negatif (-100%) untuk intensitas animasi. Ini menyebabkan kolom memiliki efek sebaliknya yang akan mengecilkan kolom/tombol (atau memperkecil).
Pengaturan Tombol:
Kemudian perbarui pengaturan tombol sebagai berikut:
- Gaya Animasi: Zoom
- Arah Animasi: Pusat
- Durasi Animasi: 1500ms
- Penundaan Animasi: 1000ms
- Intensitas Animasi: 50%
- Animasi Mulai Opacity: 100%
Perhatikan bahwa penundaan animasi diatur agar terjadi 1000 md sebelum animasi kolom sehingga tombol akan memperbesar sebelum memperkecil.
#8 Spiral (geser ke kiri + putaran)
Animasi tombol tertunda terakhir ini menggabungkan animasi slide (ditambahkan ke kolom) dan animasi flip 720 derajat (ditambahkan ke tombol).
Berikut cara melakukannya.
Pengaturan Kolom:
Pertama, buka pengaturan baris dan perbarui pengaturan untuk kolom 2 sebagai berikut:
- Gaya Animasi: Slide
- Arah Animasi: Kiri
- Durasi Animasi: 2000ms
- Penundaan Animasi: 2000ms
- Intensitas Animasi: 100%
- Animasi Mulai Opacity: 100%
Pengaturan Tombol:
Kemudian perbarui pengaturan modul tombol sebagai berikut:
- Gaya Animasi: Balik
- Arah Animasi: Pusat
- Durasi Animasi: 2000ms
- Penundaan Animasi: 2000ms
- Intensitas Animasi: 800%
- Animasi Mulai Opacity: 100%
Perhatikan di sini bahwa intensitas animasi diatur ke 800%. Ini akan menyebabkan tombol berputar tiga kali untuk menciptakan efek putaran.
Hasil Akhir
Mari kita lihat terakhir pada 8 animasi tombol tertunda.
Pikiran Akhir
Saya harap 8 animasi tombol tertunda ini akan membantu meningkatkan konversi untuk CTA tajuk khusus Anda. Anda juga dapat menggunakan contoh-contoh ini untuk inspirasi dan menjelajahi desain dan aplikasi tambahan untuk situs web Anda sendiri!
Punya favorit?
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!