Cara Membuat CTA yang Menarik di Divi dengan Beberapa Efek Arahkan Arah Sederhana
Diterbitkan: 2019-07-19Interaksi halus dan efek hover dapat berguna untuk membuat CTA (Call to Action) yang menarik. Triknya adalah menggunakan efek yang membuat CTA Anda lebih menarik dan intuitif sehingga pengguna lebih cenderung mengambil tindakan. Dan karena tujuan akhir dari sebagian besar CTA adalah mengklik tautan atau tombol, penting untuk mengoptimalkan CTA Anda dengan cara yang membawa item yang dapat diklik tersebut ke permukaan.
Dalam tutorial ini, saya akan menunjukkan cara menggunakan Divi untuk mengoptimalkan visibilitas CTA menggunakan beberapa efek hover. Saya akan menunjukkan cara menambahkan latar belakang pembagi bagian saat mengarahkan kursor ke tahap CTA Anda untuk kontras dan keterbacaan yang lebih baik. Dan saya akan menunjukkan cara memperbesar dan memindahkan CTA ke tengah halaman di hover sehingga menjadi fokus utama. Efek melayang-layang ini akan berguna untuk membuat ajakan bertindak apa pun menonjol dan, semoga, meningkatkan pengalaman pengguna.
Mari kita mulai.
Sneak Peek
Berikut adalah intip efek hover CTA yang menarik yang akan kita buat dalam tutorial ini.
Unduh Tata Letak CTA Hover Effects yang Menarik secara GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!
Berlangganan Saluran Youtube Kami
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 memerlukan yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Gambar latar belakang yang akan digunakan dalam pembuatan desain. Saya akan menggunakan salah satu dari Paket Tata Letak Dokter Hewan untuk tutorial ini.
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Menerapkan Efek Arahan CTA yang Menarik di Divi
Untuk contoh desain ini, kita akan mulai dengan modul ajakan bertindak yang rata kiri atau kanan. Kemudian kita akan membawa modul ke tengah halaman dan skala (atau memperbesar) ketika mengarahkan kursor ke baris. Untuk membuat ajakan bertindak lebih menonjol dalam status hover baris, kami akan mengaturnya dengan menambahkan pembagi bagian yang akan menutup di belakang modul untuk kontras yang lebih baik.
Berikut cara melakukannya.
Membuat Bagian dan Baris
Pertama, buat bagian reguler dengan baris satu kolom.
Sebelum menambahkan modul, buka pengaturan bagian dan perbarui yang berikut:
Tambahkan gambar latar belakang dengan titik fokus gambar di sisi kanan sehingga tetap terlihat saat menambahkan modul kita di sebelah kiri.
- Lebar Maks: 1080px
- Perataan Bagian: tengah
Itu menangani bagian untuk saat ini. Kami akan melingkari kembali ke pengaturan bagian nanti untuk menambahkan efek hover pembagi bagian.
Selanjutnya, buka pengaturan baris dan perbarui yang berikut:
- lebar: 100%
- lebar maks: 100%
- Padding: 5% atas, 5% bawah, 35% kanan
Padding kanan adalah kunci desain ini karena mendorong konten ke kiri. Kami akan kembali lagi nanti untuk menambahkan opsi hover kami untuk memindahkan konten baris kembali ke tengah nanti.
Menambahkan Modul Ajakan Bertindak
Sekarang kami siap untuk membangun Modul Ajakan Bertindak yang akan menjadi fokus utama CTA kami yang menarik.
Lanjutkan dan tambahkan modul ajakan bertindak ke baris satu kolom.
Kemudian perbarui pengaturan modul ajakan bertindak sebagai berikut:
Isi
- Judul: Diskon Kunjungan Pertama
- Tombol: Buat Janji Temu
- URL Tautan Tombol: #
Desain
- Warna Latar Belakang: #ffffff
- Warna Teks: Gelap
- Judul Font: Nunito
- Judul Font Berat: Tebal
- Ukuran Teks Judul: 36px
- Warna Teks Tombol: #ffffff
- Warna Latar Tombol: #154c87
- Lebar Batas Tombol: 0px
- Lebar Maks: 500px
- Penyelarasan Modul: tengah
- Sudut Bulat: 10px
Fitur utama dari desain ini adalah lebar maksimal 500px. Ini akan memastikan lebar modul tidak berubah setiap kali kita menyesuaikan padding kanan baris saat mengarahkan kursor nanti.
- Bayangan Kotak: lihat tangkapan layar
- Posisi Vertikal Bayangan Kotak: 30px
- Kekuatan Buram Bayangan Kotak: 100px
- Kekuatan Penyebaran Bayangan Kotak: -30px
Menskalakan dan Memusatkan Ajakan Bertindak saat Melayang di Atas Baris
Sekarang kita siap untuk mulai menambahkan efek hover CTA yang menarik. Pada titik ini kami ingin menyelesaikan dua hal saat mengarahkan kursor ke baris. Pertama, kita ingin memindahkan CTA ke tengah. Dan kemudian kami ingin meningkatkan skala modul (membuatnya lebih besar) untuk membuatnya lebih terlihat.
Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:
- Padding (arahkan kursor): 0% ke kanan
Kemudian sesuaikan padding untuk tampilan seluler:
- Padding (tablet): 0% benar
- Padding (telepon): 5% kiri, 5% kanan
Untuk memperbesar CTA, tambahkan properti transformasi berikut ke baris saat mengarahkan kursor:
- Skala Transform (arahkan kursor): 110%
Meskipun properti skala transformasi sedang diterapkan ke baris, ini juga secara tidak langsung berlaku untuk semua elemen anak di dalam baris, termasuk modul. Oleh karena itu, modul akan menskalakan hingga 110% saat mengarahkan kursor ke baris.
Mementaskan CTA saat Melayang dengan Pembagi Bagian
Terakhir, kita siap untuk menambahkan pembagi bagian untuk menampilkan cta saat mengarahkan kursor ke bagian/baris. Kuncinya di sini adalah memastikan bagian dan baris memiliki tinggi dan lebar yang sama sehingga pengguna akan secara bersamaan mengarahkan kursor ke bagian dan baris tanpa ada celah. Jadi, kita perlu mengeluarkan bantalan bagian apa pun. Kemudian kita perlu membuat pembagi bagian atas dan bawah yang bertambah tinggi saat melayang di atas bagian.
Inilah yang harus dilakukan.
Buka pengaturan bagian dan perbarui yang berikut ini:
Padding: 0px atas, 0px bawah
- Gaya Pembagi Atas (desktop): lihat tangkapan layar
- Gaya Pembagi Teratas (tablet dan ponsel): tidak ada
- Warna Pembagi Atas: rgba (21,76,135,0.61)
- Tinggi Pembagi Atas (default): 0%
- Tinggi Pembagi Atas (arahkan kursor): 120%
- Balik Pembagi Atas: horizontal
- Gaya Pembagi Bawah (desktop): lihat tangkapan layar
- Gaya Pembagi Bawah (tablet dan ponsel): tidak ada
- Warna Pembagi Bawah: rgba (21,76,135,0.61)
- Tinggi Pembagi Bawah (default): 0%
- Tinggi Pembagi Bawah (arahkan kursor): 120%
- Balik Pembagi Bawah: horizontal
Untuk memastikan pembagi tidak muncul di luar bagian, perbarui opsi luapan vertikal dan horizontal ke tersembunyi.
- Luapan Horisontal: Tersembunyi
- Overflow Vertikal: Tersembunyi
Sekarang mari kita lihat hasil akhirnya.
Hasil Akhir
Dan inilah desain pada tablet dan ponsel.
Mengubah Posisi CTA
Jika Anda ingin mengubah posisi awal Modul Ajakan Bertindak sebelum status melayang, Anda dapat dengan mudah memperbarui spasi baris.
Dari Sisi Kanan
Katakanlah Anda ingin modul untuk memulai di sebelah kanan sebelum mengarahkan kursor. Cukup perbarui pengaturan baris sebagai berikut:
- Padding: 35% Kiri
- Padding (arahkan kursor): 0% Kiri
Anda akan ingin memperbarui gambar untuk memiliki titik fokus kiri. Setelah itu, inilah hasilnya.
Dari bawah
Atau, jika Anda mau, Anda dapat memiliki popup CTA dari bagian bawah baris. Untuk melakukan ini, Anda perlu menambahkan ketinggian tetap ke bagian dan kemudian menurunkan modul dengan beberapa bantalan atas.
Buka pengaturan bagian dan beri bagian ketinggian maksimal dan atur overflow menjadi tersembunyi.
- Tinggi Maks (desktop): 415px
- Luapan Horisontal: tersembunyi
- Overflow Vertikal: tersembunyi
Kemudian buka pengaturan baris dan perbarui padding untuk mendorong modul sebagian keluar dari tampilan di bawah bagian. Kemudian keluarkan bantalan atas saat mengarahkan kursor untuk membawanya kembali.
- Padding (desktop): 25% atas, 5% bawah
- Padding (arahkan kursor): 5% atas
Inilah hasilnya…
Pikiran Akhir
Divi membuatnya menyenangkan dan mudah untuk menambahkan semua jenis efek hover ke desain halaman web Anda. Efek hover terbaik adalah yang memiliki tujuan dan benar-benar meningkatkan pengalaman pengguna. Beberapa efek hover sederhana yang tercakup dalam posting ini akan membantu membuat beberapa CTA menarik yang tampak hebat, meningkatkan pengalaman pengguna, dan mudah-mudahan menghasilkan lebih banyak konversi.
Untuk lebih banyak ide, lihat posting kami tentang 3 cara Anda dapat menggunakan opsi arahkan kursor untuk menekankan CTA di Divi dan posting kami tentang membuat CTA slide-in.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!