Blog

Cara menambahkan tombol khusus di WordPress

Tanggal Pembaruan Terakhir: 
Cara menambahkan tombol khusus di WordPress

Salah satu aset terpenting pada sebuah landing page adalah tombol call-to-action (CTA). Ini adalah elemen yang diklik pengunjung untuk mengunduh sebuah sumber daya, mendaftar ke daftar email Anda, atau menjadwalkan konsultasi. Rancang dengan baik, dan tombol ini sangat mendorong konversi — rancang dengan buruk, dan pengguna mungkin menggulir melewatinya begitu saja sebelum meninggalkan halaman Anda.

Pada akhirnya, mengetahui cara menambahkan tombol di WordPress — tombol yang menonjol dibandingkan tombol generik pada halaman lain — bisa jadi menentukan perbedaan antara pelanggan baru dan pelanggan yang hilang. Namun, itu jauh lebih mudah diucapkan daripada dilakukan. Meskipun WordPress menyediakan opsi kustomisasi tombol di editor Gutenberg-nya, opsi tersebut sangat mendasar. Pengguna sering kali kebingungan dengan pengaturan warna yang membingungkan dan kurangnya opsi animasi. Jika Anda ingin membuat tombol CTA yang lebih menarik, editor Gutenberg tidak akan banyak membantu. 

Untuk mengatasi keterbatasan tombol WordPress, Anda punya dua pilihan: Memasang blok atau plug-in pihak ketiga yang berat, atau menggunakan widget serverless yang gratis dan ringan yang melindungi kecepatan halaman serta kode tema Anda. Panduan ini menjelaskan cara kerja masing-masing opsi sehingga Anda dapat memutuskan mana yang terbaik untuk situs web Anda.

Opsi 1: Pasang plug-in tombol WordPress khusus atau gunakan CSS kustom

Jika Anda sedang mempelajari cara menggunakan WordPress, Anda mungkin beralih ke plug-in pihak ketiga atau kode CSS untuk mengkustomisasi tombol. Anda dapat menemukan plug-in yang tersedia melalui dasbor administrasi WordPress atau menambahkan CSS Anda sendiri menggunakan Editor WordPress. 

Sebelum menjelajahi opsi-opsi ini, perhatikan potensi kekurangannya:

  • Beberapa plug-in menggunakan JavaScript dan CSS yang berlebihan, yang dapat memperlambat waktu pemuatan halaman dan merusak skor Core Web Vitals Anda. 
  • Pengembang tidak selalu memperbarui plug-in. Ini dapat menyebabkan masalah performa di masa mendatang. Ini juga memberi Anda satu hal lagi untuk dipantau.
  • CSS kustom yang salah dapat menimpa pengaturan tombol global situs web Anda saat ini, yang memengaruhi tampilan tombol lain di seluruh situs Anda. Ini juga dapat memengaruhi responsivitas seluler situs Anda.

Mari kita mulai dengan opsi termudah: plug-in pihak ketiga. Untuk menemukan dan memasangnya di situs Anda, lakukan langkah-langkah berikut:

  1. Klik opsi Plugins pada dasbor Admin WordPress Anda. Ketik fitur yang Anda butuhkan di bilah pencarian. Dalam contoh ini, kami memasukkan “custom CTA button WordPress.”
WordPress Add Plugins page showing search results for “custom CTA button WordPress
  1. Pilih plug-in dari daftar dan klik untuk mempelajari lebih lanjut tentang fiturnya. Plug-in WordPress terbaik selalu diperbarui, kompatibel dengan tema WordPress Anda, dan memiliki ulasan pengguna yang positif. Klik Install Now ketika Anda menemukan opsi yang Anda sukai.
Popup Maker plugin details window with the Install Now button highlighted
  1. Ketika plug-in selesai dipasang, klik tombol Activate. Ikuti instruksi pengembang untuk membuat tombol kustom Anda. 

Jika Anda mahir dengan CSS, Anda dapat membuat kode tombol CTA kustom Anda sendiri. Untuk melakukannya, ikuti langkah-langkah berikut:

  1. Klik Appearance > Editor pada dasbor admin WordPress Anda. Jika Anda menggunakan tema klasik atau pihak ketiga, klik Appearance > Customize. 
WordPress dashboard with the Appearance menu open and Editor highlighted
  1. Klik Styles > ⋮ > Additional CSS. Pada tema klasik dan pihak ketiga, klik Additional CSS.
WordPress Site Editor Styles panel with Additional CSS highlighted in the options menu
  1. Ketik kode CSS kustom tombol Anda ke dalam kotak teks.
WordPress Additional CSS panel showing an empty text box for entering custom CSS code

Daripada membuat kode tombol Anda sendiri, Anda dapat mencoba alternatif CSS kustom untuk WordPress: Widget Tombol Jotform. Kami akan membahas opsi tersebut di bagian berikutnya.

Opsi 2: Tambahkan widget tombol gratis yang dapat dikustomisasi (direkomendasikan)

Dengan Widget Tombol Jotform, Anda dapat membuat tombol CTA dengan gradien, ikon, dan efek hover yang unik. Opsi ini tidak akan memengaruhi CSS situs Anda atau mengurangi kecepatan pemuatannya, karena berjalan dari embed hosted yang andal.

Untuk menggunakannya, Anda akan mengonfigurasi tombol Anda di Jotform dan menyematkan tombol kustom di WordPress menggunakan blok HTML kustom. Tombol akan diperbarui secara langsung dengan tombol yang sempurna, responsif, dan mandiri yang sesuai dengan kebutuhan Anda. Lakukan langkah-langkah berikut untuk mencobanya:

  1. Buka Widget Tombol Jotform dan isi informasi dasar tentang tombol Anda. Klik Continue.
Jotform Button Widget editor showing general button settings, including action, phone number, label, text, and a live preview
  1. Tambahkan warna, ikon, dan opsi gaya lainnya. Anda dapat menyesuaikan gaya sudut, padding, ukuran teks, dan font, atau menambahkan bayangan (drop shadow) untuk penekanan ekstra. Setelah selesai, klik Continue.
Jotform Button Widget style editor showing icon, color, hover, and surrounding text customization options with a live preview
  1. Tinjau dan pilih opsi tata letak Anda, lalu klik Try it on your website for free.
Jotform Button Widget layout settings showing inline display, center alignment, all-device visibility, and a button preview
  1. Ikuti instruksi untuk membuat akun gratis dengan Jotform, lalu salin kode embed dan tempelkan ke dalam blok HTML Kustom di situs web WordPress Anda. Pastikan untuk memilih halaman dan bagian tempat Anda ingin tombol muncul.
Jotform Button Widget embed popup showing the generated embed code and Copy Code button

Alternatif call-to-action WordPress dari Jotform yang gratis dan tanpa kode memberi Anda kendali penuh atas tampilan dan fungsi tombol Anda. Baik Anda ingin menyesuaikan teks, warna, dan radius batas, atau menambahkan animasi hover, Jotform mampu menanganinya. 

Tingkatkan performa situs WordPress Anda dengan widget serverless yang cerdas

Jotform menawarkan jauh lebih dari sekadar desain tombol kustom. Telusuri direktori widget situs web gratis kami untuk menemukan alat lain yang memaksimalkan konversi, menghilangkan beban halaman, dan menjaga database situs Anda tetap ringan untuk kecepatan pemuatan yang sangat cepat. Beberapa widget favorit kami meliputi

  • Widget Google Reviews: Menampilkan ulasan Google merek Anda sesuai dengan preferensi Anda
  • Widget Countdown Timer: Menunjukkan kepada pengunjung berapa banyak waktu yang tersisa untuk melakukan tindakan tertentu, seperti mendaftar untuk sebuah acara
  • Widget FAQ: Menyediakan alat FAQ yang dapat dicari dengan jawaban kaya media dan gaya kustom
  • WordPress Forms: Memungkinkan Anda membuat formulir kustom dan menyematkannya di situs web Anda

Sebagai kreator, blogger, atau pemasar, fokus Anda adalah menghasilkan konten yang luar biasa dan mengoptimalkan funnel, bukan repot dengan CSS atau plug-in. Alat off-server gratis dari Jotform memungkinkan Anda menerapkan fitur premium dengan konversi tinggi dalam hitungan menit, sehingga Anda dapat kembali melakukan apa yang paling Anda kuasai. Mulai hari ini dengan Jotform.

Artikel ini ditujukan untuk pemilik situs WordPress, pemasar, dan blogger yang ingin menambahkan tombol call-to-action yang sangat dikustomisasi dan dioptimalkan untuk konversi tanpa dibatasi oleh pengaturan tema global atau memasang plugin shortcode yang berat.

Kirim Komentar:

Jotform Avatar
Situs ini dilindungi oleh reCAPTCHA dan tunduk pada Kebijakan Privasi serta Ketentuan Layanan Google.

Podo Comment Jadilah yang pertama berkomentar.