Alur Web: Bagaimana Cara Membuat Tombol CTA Di Luar Menu?

Diterbitkan: 2024-11-27

Membuat tombol Call to Action (CTA) yang efektif adalah salah satu elemen terpenting dalam desain web. Tombol CTA meminta pengunjung untuk mengambil tindakan tertentu, seperti mendaftar untuk menerima buletin, melakukan pembelian, atau menghubungi bisnis Anda. Meskipun banyak situs web menampilkan tombol CTA di dalam menu navigasi, menempatkan tombol CTA di luar menu dapat membuatnya lebih menonjol dan mendorong lebih banyak konversi. Pada artikel ini, kami akan memandu Anda melalui langkah-langkah cara mendesain dan memposisikan tombol CTA di luar menu di Webflow.

Mengapa Menempatkan Tombol CTA Di Luar Menu?

seo

Menempatkan tombol CTA di luar menu navigasi utama dapat membuatnya lebih terlihat oleh pengunjung Anda. Jika ditempatkan secara strategis di area dengan lalu lintas tinggi, seperti header atau di bagian atas halaman, tombol ini dapat menarik perhatian pengguna dengan cepat. Tujuannya adalah membuat CTA lebih mudah diakses dan memastikan CTA langsung diketahui, tanpa mengharuskan pengguna menavigasi situs.

Keuntungan menempatkan tombol CTA di luar menu antara lain:

  • Peningkatan visibilitas : Dengan memposisikannya di lokasi yang menonjol, seperti di header atau mengambang di samping, pengguna dapat dengan mudah menemukannya.
  • Tingkat konversi yang ditingkatkan : CTA yang menonjol lebih mungkin untuk diklik, sehingga meningkatkan konversi.
  • Peningkatan pengalaman pengguna : Ini memberikan cara intuitif bagi pengguna untuk mengambil tindakan dengan cepat, tanpa menavigasi melalui bagian yang berbeda.

Langkah-langkah Membuat Tombol CTA Di Luar Menu di Webflow

Webflow menawarkan antarmuka yang ramah pengguna untuk membangun situs web tanpa perlu menulis kode apa pun. Ikuti langkah-langkah berikut untuk menambahkan tombol CTA di luar menu pada proyek Webflow Anda:

1. Siapkan Proyek Alur Web Anda

Sebelum memulai, pastikan Anda telah menyiapkan proyek Webflow dan Anda berada dalam tampilan Desainer.

  • Langkah 1.1 : Buka proyek Webflow Anda dan buka halaman tempat Anda ingin menambahkan tombol CTA.
  • Langkah 1.2 : Dalam mode Desainer, pastikan tata letak halaman Anda sudah siap, dengan menu navigasi di tempatnya (atau di mana pun Anda ingin menambahkan tombol).

2. Buat Tombol CTA Baru

Untuk membuat tombol CTA baru di luar menu, Anda perlu memposisikannya secara strategis di halaman.

  • Langkah 2.1 : Dari panel kiri, seret dan lepas elemen Button dari Panel Tambah ke kanvas.
  • Langkah 2.2 : Sesuaikan teks tombol agar sesuai dengan tindakan yang Anda ingin pengguna lakukan (misalnya, “Memulai”, “Daftar”, “Pelajari Lebih Lanjut”).
  • Langkah 2.3 : Gaya tombol sesuai dengan preferensi desain Anda. Anda dapat menyesuaikan font, ukuran, warna, latar belakang, dan radius batas agar sesuai dengan estetika merek Anda.

3. Posisikan Tombol CTA Di Luar Menu

Sekarang setelah Anda memiliki tombolnya, saatnya untuk memposisikannya di luar menu. Ada beberapa cara untuk melakukan ini, tergantung di mana Anda ingin tombol tersebut muncul.

Opsi 1: Tombol CTA Mengambang

Tombol CTA mengambang adalah pilihan populer untuk visibilitas. Itu menempel di samping atau bawah halaman, bahkan saat pengguna menggulir.

  • Langkah 3.1 : Pilih tombol yang Anda buat dan buka pengaturan Position di panel Gaya sebelah kanan.
  • Langkah 3.2 : Atur posisinya ke Fixed . Hal ini memastikan tombol tetap berada di tempatnya di layar saat pengguna menggulir.
  • Langkah 3.3 : Sesuaikan posisinya dengan mengatur nilai Top , Right , Bottom , atau Left untuk menempatkan tombol di tempat yang Anda inginkan pada layar (misalnya, pojok kanan bawah atau pojok kiri atas).
  • Langkah 3.4 : Tambahkan nilai indeks-z untuk memastikan tombol muncul di atas elemen lain, seperti menu. Anda dapat mengatur indeks-z ke nilai yang lebih tinggi, seperti 10 atau 100 , untuk memastikannya berada di atas.

Opsi 2: Diposisikan di Bagian Header

Jika Anda lebih suka tombol CTA berada di tempat yang lebih tradisional dan tetap di luar menu, Anda dapat menempatkannya di bagian header.

  • Langkah 3.1 : Buka panel Navigator dan temukan bagian header Anda.
  • Langkah 3.2 : Buat Div Block ​​baru untuk dijadikan wadah tombol CTA Anda. Ini akan membantu memposisikan tombol relatif terhadap elemen lainnya.
  • Langkah 3.3 : Seret tombol ke dalam wadah Div Block .
  • Langkah 3.4 : Gunakan pengaturan Margin atau Padding di panel Style untuk memindahkan tombol ke lokasi yang diinginkan di dalam header (misalnya, di luar menu utama namun tetap sejajar dengan header).

Opsi 3: Tombol CTA pada Navbar yang Lengket

Pilihan lainnya adalah menempatkan tombol CTA pada bilah navigasi yang melekat. Artinya, tombol tersebut akan mengikuti pengguna saat mereka menggulir halaman ke bawah, namun tetap berada di luar menu utama.

  • Langkah 3.1 : Pilih elemen bilah navigasi dan atur Position menjadi Sticky di panel Gaya.
  • Langkah 3.2 : Tambahkan Div Block ​​baru di sebelah item menu di mana Anda ingin tombol tersebut muncul.
  • Langkah 3.3 : Tempatkan tombol di dalam Div Block ​​ini dan sesuaikan posisinya menggunakan margin atau padding.

4. Jadikan Tombol Interaktif

Situs web

Setelah tombol diposisikan, Anda dapat menambahkan interaksi agar lebih menarik.

  • Langkah 4.1 : Pilih tombol dan buka panel Interactions di Webflow.
  • Langkah 4.2 : Tambahkan interaksi arahkan kursor, seperti mengubah warna latar belakang atau sedikit menskalakan tombol saat pengguna mengarahkan kursor ke atasnya.
  • Langkah 4.3 : Siapkan tautan untuk tombol tersebut. Anda dapat menautkannya ke halaman lain atau URL eksternal, atau menyiapkan tindakan seperti membuka modal atau formulir.

5. Pratinjau dan Publikasikan

Setelah menyiapkan tombol CTA, penting untuk melihat pratinjau perilakunya di halaman.

  • Langkah 5.1 : Klik tombol Preview di sudut kanan atas untuk melihat tampilan dan perilaku tombol di halaman.
  • Langkah 5.2 : Uji responsnya pada berbagai ukuran layar untuk memastikan posisinya benar.
  • Langkah 5.3 : Setelah Anda puas dengan hasilnya, klik Publish untuk membuat tombol tersebut aktif di situs web Anda.

Praktik Terbaik untuk Tombol CTA di Luar Menu

Meskipun menempatkan tombol CTA di luar menu bisa sangat efektif, penting untuk mengikuti beberapa praktik terbaik untuk memastikannya berfungsi dengan baik:

  1. Tetap Sederhana : Jangan memenuhi halaman dengan terlalu banyak tombol CTA. Fokus pada satu tindakan utama untuk hasil terbaik.
  2. Pastikan Visibilitas yang Baik : Pastikan tombol kontras dengan latar belakang agar menarik perhatian pengguna.
  3. Posisikan secara Strategis : Tempatkan tombol di area yang kemungkinan besar akan dilihat oleh pengguna, seperti pojok kanan atas atau mengambang di samping.
  4. Uji di Perangkat Berbeda : Pastikan tombol CTA Anda terlihat bagus di perangkat seluler, tablet, dan desktop.

Kesimpulan

Menambahkan tombol CTA di luar menu di Webflow dapat menjadi strategi ampuh untuk meningkatkan visibilitas dan meningkatkan konversi. Dengan mengikuti langkah-langkah yang diuraikan di atas, Anda dapat dengan mudah membuat dan memposisikan tombol CTA yang menonjol dari konten halaman Anda lainnya. Baik Anda memilih tombol mengambang, bilah navigasi tempel, atau posisi header tradisional, kuncinya adalah memastikan CTA Anda ditempatkan di tempat yang dapat dilihat pengguna dan didorong untuk mengambil tindakan. Dengan alat desain intuitif Webflow, mencapai hal ini lebih mudah dari sebelumnya!