Sebuah Call to Action (CTA) yang dirancang dengan baik dapat menjadi kunci untuk meningkatkan tingkat konversi situs web Anda. Dengan Elementor untuk WordPress, Anda memiliki alat yang kuat di tangan Anda untuk merancang CTA sesuai dengan keinginan Anda. Dalam tutorial ini, Anda akan belajar bagaimana mengintegrasikan elemen Call-to-Action secara efektif ke dalam halaman Anda dan menyesuaikannya sehingga langsung menarik perhatian.
Temuan terpenting
- Call to Action terletak di bawah Flipbox atau di bawah Tabel Harga dan mudah digunakan.
- Anda dapat memilih antara berbagai horizon desain (Skins) dan menyesuaikan posisi serta ukuran elemen gambar.
- Pilihan untuk penyesuaian sangat luas, dari tata teks hingga efek visual.
Panduan Langkah-demi-Langkah
Pilih Skin dan Tambahkan Gambar
Untuk membuat Call to Action yang efektif, mulailah dengan memilih Skin. Anda dapat memilih apakah CTA ditampilkan dalam gaya Cover atau gaya klasik.
Sekarang Anda harus menambahkan gambar untuk membuat CTA Anda lebih menarik secara visual. Ini bisa dilakukan dengan mudah melalui Drag-and-Drop atau dengan memanggil pengaturan di area Elementor.
Edit Posisi dan Ukuran Gambar
Setelah menambahkan gambar, Anda dapat menyesuaikan posisinya. Dalam pengaturan gambar, Anda memiliki berbagai opsi. Atur ukuran gambar menjadi "Sedang" untuk mencapai tampilan yang seimbang.
Sesuaikan Judul dan Teks
Dalam langkah ini, fokuslah pada memilih judul yang bermakna. Pikirkan tentang pesan yang ingin Anda sampaikan. Misalnya, Anda bisa menambahkan "Penawaran Spesial" atau "Pesan Coaching sebelum [Tanggal]".
Tambahkan dan Tautkan Tombol
Sekarang saatnya untuk mendesain tombol Call-to-Action. Tambahkan teks "Amankan Penawaran" dan tautkan ke halaman yang ingin Anda promosikan. Tombol CTA harus terlihat jelas untuk mendorong pengguna untuk mengkliknya.
Tambahkan Ribbon
Secara opsional, Anda dapat menambahkan tampilan "Ribbon" untuk membuat CTA Anda lebih mencolok. Pilih antara "Populer" atau "Terlaris", tergantung mana yang lebih cocok untuk penawaran Anda. Di sini Anda juga dapat menyesuaikan latar belakang dan warna teks sesuai keinginan Anda.
Ukuran Kotak dan Penyesuaian
Anda juga dapat memperbesar kotak tempat CTA Anda berada dan mendesain semuanya sesuai keinginan Anda. Pastikan bahwa hierarki visualnya jelas agar pengguna tidak bingung.
Sesuaikan Gaya Cover
Jika Anda memilih gaya Cover, Anda dapat menggunakan gambar sebagai latar belakang untuk CTA Anda, dengan teks ditampilkan di atasnya. Ini bisa lebih menarik secara visual dan banyak orang lebih menyukai bentuk tampilan ini.
Tambahkan Efek Hover
Sekarang saatnya untuk bagian menarik: efek Hover. Anda dapat menggunakan berbagai animasi, seperti "Grow" atau "Slide In". Dengan cara ini, CTA akan lebih dinamis dan mendorong lebih banyak interaksi.
Edit Gambar Latar Belakang
Aspek lain adalah pengeditan gambar latar belakang. Di sini, Anda dapat menggunakan filter CSS untuk mencapai efek khusus. Pilih antara latar belakang biasa atau blur, tergantung desain Anda.
Lakukan Penyesuaian Akhir
Periksa semua elemen untuk memastikan bahwa Call to Action menarik dan terlihat baik. CTA yang direncanakan dengan baik tidak hanya harus terlihat bagus, tetapi juga efektif dalam mendorong pengunjung Anda untuk bertindak.
Ringkasan – Call to Action di Elementor: Panduan Langkah-demi-Langkah Anda
Membuat Call to Action yang menarik di Elementor adalah cara yang sederhana, namun efektif untuk mendorong interaksi dan meningkatkan tingkat konversi. Dengan opsi penyesuaian di Elementor, Anda dapat memastikan bahwa CTA Anda menarik secara visual dan fungsional.
Pertanyaan yang Sering Diajukan
Bagaimana cara memilih Skin yang tepat untuk CTA saya?Itu tergantung pada desain individu Anda dan tujuan situs web Anda. Cobalah baik gaya Cover maupun gaya klasik.
Bisakah saya mengubah warna CTA?Ya, Elementor menawarkan banyak opsi penyesuaian untuk warna, font, dan ukuran.
Bagaimana saya menambahkan efek Hover?Anda dapat memilih animasi dalam pengaturan gaya, seperti "Grow" atau "Slide In", untuk menambahkan efek Hover.
