Cara Membuat Tombol di Situs Web
Tombol adalah salah satu elemen terpenting di situs web, berperan kunci dalam membimbing pengguna menuju tindakan tertentu, apakah itu melakukan pembelian, mendaftar ke buletin, atau sekadar menavigasi ke halaman lain. Sebagai fitur yang sangat terlihat dan interaktif, tombol biasanya dirancang untuk menonjol, mendorong pengguna berinteraksi dengan situs Anda. Lantas, apa saja cara paling umum untuk mendapatkan tombol HTML untuk situs Anda?
Buat Kode Tombol HTML
Solusi pertama adalah menulis kode tombol HTML sesuai selera Anda. Dengan begitu, Anda akan membuat tombol dengan properti yang Anda perlukan secara tepat. Karena ini adalah karya Anda sendiri, hasil akhirnya hanya dibatasi oleh kemampuan pemrograman Anda saat ini.
Buat tombol sebagai widget
Sebagai alternatif, Anda bisa menggunakan solusi Tanpa Coding yang cepat untuk membuat tombol di editor—di mana Anda mengubah semuanya secara visual atau dengan mengetik properti di kolom terkait. Proses membangun widget ini jelas dan intuitif, terlepas dari tingkat pengetahuan coding Anda.
Cara cepat membuat tombol menggunakan widget?
Widget tombol Elfsight memungkinkan Anda membuat tombol dalam beberapa langkah mudah:
- Pilih templat untuk mendapatkan skenario tombol yang tepat.
- Atur CTA, tautan, dan desain.
- Salin kode HTML yang dihasilkan dan tempelkan di situs Anda.
Dengan ini, Anda dapat memiliki tombol yang sepenuhnya berfungsi dan dapat disesuaikan di situs Anda dalam beberapa menit—tanpa coding!
Coba buat tombol HTML kustom Anda di editor ⇩
Panduan Lengkap: Cara Membuat Tombol di HTML
Dengan panduan rinci ini, buat widget Tombol untuk halaman situs Anda dengan mulus dan mulai tingkatkan keterlibatan pengguna hari ini.
Setelah tombol Anda siap, publikasikan untuk melanjutkan di dasbor Anda. Anda akan langsung melihat kode HTML tombol Anda. Sekarang yang perlu Anda lakukan adalah menambahkan kode ini ke HTML situs web Anda. Bagian berikutnya menjelaskan cara melakukannya secara rinci.
Tambahkan Tombol ke Situs Mana pun
Sangat mudah menambahkan widget tombol ke situs berbasis HTML mana pun. Kami akan meninjau beberapa panduan yang membahas prosesnya untuk CMS paling populer, dengan fokus pada keunikan dashboard masing-masing.
Tambahkan Tombol ke Situs HTML
Menambahkan widget tombol ke halaman tertentu pada situs HTML Anda mudah. Cukup tempelkan kode yang dibuat dari Elfsight di lokasi yang diperlukan.
- Akses backend situs Anda. Pastikan Anda bisa mengedit kode HTML di panel admin Anda untuk mengintegrasikan widget secara mulus.
- Masukkan kode kalkulator. Pilih lokasi di situs web Anda tempat widget akan muncul dan tambahkan kode HTML tombol Anda.
- Simpan perubahan Anda. Periksa apakah semuanya berfungsi seperti yang diharapkan dan terlihat konsisten di halaman.
Tambahkan Tombol ke Situs WordPress
Anda dapat dengan cepat menyematkan widget Tanpa Coding ke dalam situs Anda, dengan memasukkan kode yang disediakan ke dalam blok. Dengan begitu, tombol Anda akan muncul tepat di lokasi yang Anda perlukan.
- Masuk ke akun WordPress Anda. Anda perlu bekerja di panel admin Anda untuk melakukan perubahan pada kode HTML.
- Masuk ke ‘Halaman’ dan pilih halaman yang Anda inginkan. Pertimbangkan tujuan bisnis Anda dan alasan menanamkan plugin ini di area tertentu.
- Tambahkan blok HTML khusus. Ini harus muncul di bagian situs web yang telah Anda pilih untuk menyematkan tombol.
- Masukkan kode yang dihasilkan ke blok ini. Jangan lupa klik ‘Perbarui’ pada halaman dan periksa fungsionalitas widget.
Tambahkan Tombol ke Situs Wix
Menambahkan kode widget dengan tombol HTML Anda ke halaman yang dibutuhkan di situs Wix sangat mudah. Kode kustom yang Anda terima dari Elfsight terintegrasi mulus dengan area halaman yang Anda inginkan.
- Akses editor situs Wix Anda. Masuk ke akun Wix Anda dan pilih situs yang ingin Anda edit. Buka dasbor situs Anda dan klik ‘Edit Site’ untuk membuka editor situs.
- Tambahkan blok HTML untuk widget. Klik ikon Plus di menu kiri dan buka bagian Penyematkan. Di tab ‘Sisipan Kustom’, pilih ‘Sematkan Widget’ untuk menambahkan blok HTML baru ke halaman Anda.
- Sisipkan kode HTML widget Tombol. Klik ‘Masukkan Kode’ dan tempelkan kode instalasi yang disediakan oleh editor widget Tombol. Setelah memasukkan kodenya, klik ‘Perbarui’ untuk menyematkan widget ke halaman Anda.
- Sesuaikan ukuran dan penempatan widget. Sesuaikan ukuran dan penempatan widget di halaman. Pastikan widget pas secara sempurna dan terlihat menarik dengan mengubah ukuran serta menempatkannya dengan tepat.
- Optimalkan untuk perangkat seluler. Beralih ke editor seluler dan sesuaikan widget sesuai kebutuhan. Pastikan widget terlihat luar biasa di perangkat seluler, lalu publikasikan perubahan Anda setelah Anda puas dengan tata letaknya.
Tambahkan tombol ke situs Shopify
Anda bisa dengan cepat menambahkan tombol HTML ke halaman mana pun pada situs Shopify Anda. Anda hanya perlu menempelkan kode siap pakai dari Elfsight ke area yang ditentukan di situs Anda.
- Masuk ke panel admin Shopify. Anda perlu menemukan area ‘Online Store’ pada situs Anda.
- Pilih ‘Sesuaikan’ dari menu tarik-turun. Kemudian di menu kiri, pilih ‘Tambahkan Bagian.’
- Di ‘Konten Kustom,’ klik ‘Tambahkan’. Anda harus menghapus bagian Shopify yang telah terpasang sebelumnya.
- Pilih ‘HTML Kustom’. Itu adalah opsi yang akan Anda temukan di menu ‘Tambahkan Konten’.
- Temukan bagian ‘HTML’. Di situlah Anda bisa menyisipkan kode instalasi formulir dan menyimpan semua perubahan.
Tambahkan Tombol ke Situs Squarespace
Siapa saja bisa dengan cepat menyematkan tombol yang bisa disesuaikan ke halaman yang diinginkan pada situs Squarespace. Yang perlu Anda lakukan hanyalah memasukkan kode yang dihasilkan dari Elfsight ke blok tertentu di halaman tersebut.
- Masuk ke akun Squarespace Anda. Masuk ke akun Squarespace Anda dan pilih situs untuk widget. Buka dasbor situs Anda dan pilih situs yang ingin Anda sunting.
- Pindah ke bagian ‘Website’. Pilih halaman tempat Anda ingin menambahkan widget formulir. Buka bagian ‘Website’ dari menu utama dan pilih halaman yang diinginkan.
- Klik ‘Edit’ lalu ‘Tambahkan Bagian’. Klik ‘Edit’ pada halaman yang dipilih, lalu pilih ‘Tambahkan Bagian’ di tempat widget akan bekerja. Ini memungkinkan Anda membuat bagian baru di halaman Anda untuk widget.
- Add a code block. Pilih ‘Add a blank section,’ lalu klik ‘Add block’ dan pilih ‘Code’ dari daftar. Ini tempat Anda akan memasukkan kode widget tombol Anda.
- Masukkan kode instalasi widget. Pada ikon ‘Edit’, tempelkan kode instalasi widget Tombol dan sesuaikan lebar bloknya. Pastikan widget terlihat terpasang dengan baik dan menarik secara visual di halaman Anda.
Tambahkan tombol ke situs Webflow
Menambahkan widget ke halaman Webflow berjalan mulus karena Anda hanya perlu menambahkan elemen Embed di lokasi Anda menampilkan kode HTML tombol yang dihasilkan.
- Mulai di Webflow. Masuk ke akun Webflow Anda dan pilih situs web tempat Anda berencana menanam widget.
- Menanamkan widget. Di editor Webflow, klik ikon Plus. Lalu seret dan lepas elemen Sematkan dari menu kiri ke lokasi tombol akan ditampilkan.
- Menyisipkan kode. Masukkan kode pemasangan formulir ke Editor Kode Sematkan HTML yang muncul. Setelah itu, klik ‘Simpan & Tutup.’
- Customization and publication. Adjust the settings of your button, then press ‘Publish’ and choose the domains for its activation.
Tambahkan Tombol ke situs Elementor
Mudah dan praktis menyematkan widget tombol ke Elementor. Anda hanya perlu blok kosong di halaman Anda tempat Anda memasukkan kode widget.
- Mulai dari backend WordPress. Masuk ke backend situs WordPress Anda, buka ‘Halaman’, dan pilih halaman untuk menambahkan widget Tombol.
- Mulai penyuntingan Elementor. Pilih ‘Edit dengan Elementor’ untuk mulai menyesuaikan halaman yang Anda pilih.
- Implementasikan elemen HTML. Gunakan fitur drag-and-drop untuk menempatkan elemen HTML di halaman Anda.
- Tambahkan kode widget ke situs web. Sisipkan kode HTML tombol dari Elfsight ke dalam kotak Kode HTML.
- Perbarui dan nikmati. Tekan ‘Perbarui’ untuk menerapkan perubahan Anda dan melihat halaman Anda berubah dengan tombol yang disematkan.
Cara Membuat Tombol dengan Kode HTML
Lihat cara membuat tombol HTML tanpa alat pihak ketiga. Dengan HTML dasar, Anda bisa menyesuaikan beberapa parameter tombol ini dan membaca panduan singkat setelah kode ini untuk memasukkan tautan yang Anda perlukan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Example</title>
<style>
/* Simple styling for the button */
.cta-button {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
padding: 10px 20px; /* Padding */
font-size: 16px; /* Font size */
border: none; /* No borders */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
}
.cta-button:hover {
background-color: #45a049; /* Darker green on hover */
}
</style>
</head>
<body>
<!-- Button with a customizable link -->
<button class="cta-button" onclick="window.location.href='https://your-cta-link.com';">
Click Me
</button>
<script>
// Optional: You can also handle the button click with JavaScript if needed
function goToLink() {
window.location.href = 'https://your-cta-link.com'; // Insert your own link here
}
</script>
</body>
</html>Cara Kerja
- Tombol ini menggunakan HTML sederhana untuk strukturnya dan CSS untuk gaya dasar.
- Anda dapat mengubah tampilan tombol menggunakan kelas .cta-button (warna latar belakang, ukuran, huruf, dll.).
- The onclick event triggers a redirect to the specified link. Users can replace ‘https://your-cta-link.com’ with their own URL (the link they want to direct visitors to).
Contoh Widget Tombol di Situs Web
Elfsight menawarkan berbagai template tombol siap pakai yang bisa Anda sesuaikan dengan estetika situs Anda, sehingga situs Anda menonjol. Apakah Anda menginginkan gaya minimalist, warna yang berani dan hidup, atau desain yang ramping dan profesional—selalu ada opsi yang memaksimalkan branding Anda dan menonjolkan fitur unik. Lihat selengkapnya:
Contoh 1: Tombol Belanja Sekarang
Template widget ‘Shop Now‘ sangat cocok untuk bisnis e-commerce. Ini menampilkan desain yang tebal dan menarik dengan judul CTA yang mengarahkan pengunjung ke toko online Anda dengan satu klik. Template ini membantu menciptakan rasa urgensi dan mendorong calon pelanggan untuk menjelajahi produk Anda dan melakukan pembelian.
Contoh 2: Tombol Ikuti Instagram
Untuk bisnis yang ingin meningkatkan kehadiran Instagram, template ‘Follow on Instagram’ adalah pilihan yang sangat baik. Template ini menyertakan nama pengguna Instagram dan mengundang pengunjung untuk mengikuti akun Anda langsung dari situs Anda. Template ini membantu meningkatkan jumlah pengikut Anda dan memperluas jangkauan media sosial merek Anda.
Contoh 3: Tombol Ikuti Facebook
Dengan template ‘Ikuti di Facebook‘ Anda bisa terhubung dengan pengunjung situs Anda di platform media sosial terbesar di dunia. Template ini menampilkan pesan CTA dan mendorong pengunjung untuk menyukai dan mengikuti halaman Anda, memungkinkan Anda menciptakan komunitas yang setia dan menjaga keterlibatan mereka dengan merek Anda.
Contoh 4: Tombol Ikuti di Pinterest
TEMPLATE ‘Ikuti di Pinterest‘ sangat cocok untuk bisnis yang fokus pada narasi visual dan inspirasi. Template ini menampilkan font Pinterest yang mudah dikenali dan mengajak pengunjung situs untuk menjelajahi papan Anda serta mengikuti merek Anda. Template ini membantu meningkatkan lalu lintas ke akun Anda dan meningkatkan visibilitas merek.
Contoh 5: Tombol Email Kami
Templat ‘Email Kami‘ memudahkan proses menghubungi bisnis Anda. Desain tombolnya minimalis dan mendorong pengunjung untuk mengklik guna menulis email langsung dari halaman situs Anda. Template ini meningkatkan pengalaman pengguna dengan cara yang cepat dan praktis untuk menghubungi Anda dengan pertanyaan atau permintaan.
Contoh 6: Tombol Ikuti di TikTok
Seiring popularitas TikTok yang terus meningkat, bisnis dapat memanfaatkan template tombol ‘Follow on TikTok’ untuk menjangkau platform media sosial yang dinamis ini. Template ini menampilkan elemen identitas merek — warna pink cerah — dan mengundang pengunjung untuk mengikuti akun TikTok Anda, sehingga Anda dapat membagikan konten video yang menarik dan terhubung dengan audiens yang lebih muda dan sangat terlibat.
Contoh 7: Obrolan melalui Tombol WhatsApp
Dengan template tombol ‘Chat via WhatsApp‘ Anda bisa menawarkan dukungan pelanggan secara real-time dan percakapan. Template ini menyertakan skema warna hijau dan salinan CTA untuk mendorong pengunjung situs memulai percakapan melalui aplikasi WhatsApp. Template ini memfasilitasi komunikasi langsung untuk memberikan bantuan yang dipersonalisasi bagi calon pelanggan Anda.
Contoh 8: Tombol Ikuti di Twitter
Follow on Twitter template dapat membantu meningkatkan kehadiran Anda di Twitter. Ini mendorong pengunjung untuk mengikuti akun Twitter Anda melalui pesan CTA langsung. Ini membantu memperluas jumlah pengikut, meningkatkan kesadaran merek, dan mendorong keterlibatan melalui tweet dan percakapan.
Contoh 9: Tombol Chat melalui Skype
Template tombol ‘Chat via Skype‘ adalah opsi yang sangat tepat bagi bisnis yang lebih suka chat teks atau video. Template ini menampilkan teks CTA yang mengundang pengguna situs untuk memulai obrolan atau panggilan melalui Skype. Ini tidak hanya memungkinkan komunikasi langsung dan interaksi yang dipersonalisasi, tetapi juga meningkatkan pengalaman pelanggan dan membangun kepercayaan.
Contoh 10: Tombol Hubungi Kami
Template ‘Call Us‘ memudahkan proses menghubungi bisnis Anda melalui telepon. Template ini menampilkan ikon telepon dan mengajak pengunjung untuk menghubungi bisnis Anda langsung dari situs web Anda. Ini menyediakan cara komunikasi yang praktis dan langsung, memudahkan calon pelanggan untuk memperoleh klarifikasi atau informasi dengan cepat.
Dengan widget Tombol Tanpa Kode HTML, Anda bisa membuat tombol ajakan bertindak yang mencolok secara visual yang melibatkan dan membimbing pengunjung situs Anda menuju tindakan tertentu. Dari e-commerce hingga keterlibatan media sosial, komunikasi, dan lainnya, setiap templat menawarkan peluang unik untuk terhubung, mengonversi, dan meningkatkan pengalaman pengguna. Pilih yang sesuai dengan tujuan Anda!
Jelajahi 35+ Template Tombol
Tips Menggunakan Tombol Website
Template ‘Hubungi Kami‘ memudahkan proses menghubungi bisnis Anda lewat telepon. Ini menampilkan ikon telepon dan mendorong pengunjung untuk menelepon bisnis Anda langsung dari situs web Anda. Ini menyediakan cara komunikasi yang praktis dan langsung, memungkinkan calon pelanggan untuk meminta klarifikasi atau mengumpulkan informasi dengan efisien.
- 📌 Gunakan teks yang jelas dan berorientasi pada tindakan. Teks pada tombol Anda harus singkat dan secara tepat menyampaikan apa yang seharusnya dilakukan pengguna. Frasa seperti ‘Get Started,’ ‘Sign Up Now,’ atau ‘Learn More’ efektif karena langsung dan mendorong tindakan. Hindari kata-kata yang terlalu umum seperti ‘Click Here.’
- 📌 Buat tombolnya menonjol dengan warna kontras. Tombol Anda harus terlihat menonjol di halaman, sehingga mudah dilihat pengguna. Gunakan warna-warna yang kontras dengan latar belakang situs Anda, tetapi juga selaras dengan palet merek Anda. Teksnya harus benar-benar terbaca.
- 📌 Place it strategically. Location is key when it comes to buttons. Make sure it’s placed where the user is most likely to take action, such as near key pieces of information. Consider using it above the fold or following up with another button after detailed information to capture interest once users are ready to act.
Kesimpulannya, tombol adalah alat yang kuat untuk membimbing tindakan pengguna dan meningkatkan konversi di situs Anda. Dengan mengikuti kiat-kiat ini — menggunakan teks yang jelas, membuat tombol Anda menonjol, dan menempatkannya secara strategis
Kesimpulan
Sekarang Anda tahu bagaimana menyematkan tombol yang berfungsi ke situs web Anda untuk menjalankan tindakan yang dibutuhkan bisnis Anda. Tarik perhatian pada produk Anda, minta ulasan, dan undang mereka untuk subscibe ke media sosial Anda. Widget Tombol sederhana, tetapi kegunaannya tak terbatas.
Anda bisa yakin tombol akan terlihat menarik dan berfungsi sempurna pada semua jenis pembangun situs atau CMS.
FAQ
Apakah Widget Tombol Gratis?
Bisakah saya menggunakan widget Tombol untuk berbagai CTA (ajakan bertindak)?
Apa itu tombol ajakan bertindak (CTA) di situs web?
Cara memusatkan tombol di HTML?
Lebih Banyak Ide untuk Meningkatkan Situs Anda
- Apakah merek Anda aktif di media sosial? Kami memiliki widget yang bisa membantu mempromosikan aktivitas media sosial Anda di situs web. Lihat widget Umpan Media Sosial oleh Elfsight untuk meningkatkan audiens online Anda.
- Dealing with numbers? Coba widget Kalkulator Elfsight. Dengan banyak kolom perhitungan, pembuat yang mudah, dan fitur AI untuk pembuatan kalkulator secara otomatis, Anda bisa menciptakan solusi sempurna bagi pelanggan yang ingin mengukur manfaat dari penawaran Anda.
- All-in-One Reviews widget. Use your website to display customer reviews from your audiences on any platform.”> Ingin mendapatkan lebih banyak umpan balik? Sematkan ulasan dari Amazon, Facebook, Yelp, dan lebih dari 30 perusahaan lainnya di widget All-in-One Reviews kami. Gunakan situs Anda untuk menampilkan ulasan pelanggan dari audiens Anda di platform mana pun.
Atau cukup lihat semua widget yang telah dikembangkan Elfsight untuk mempermudah e-commerce, aktivitas media sosial, dan manajemen situs.
Punya Pertanyaan?
Kami berharap panduan ini bermanfaat. Hubungi kami jika Anda membutuhkan informasi lebih lanjut tentang menyematkan tombol situs web atau memerlukan bantuan. Kami di sini untuk memastikan pengalaman Anda lancar dan sukses. Elfsight berkomitmen menyediakan solusi tanpa kode yang lengkap untuk kebutuhan situs Anda. Kami juga sebuah Komunitas yang dinamis tempat ide-ide dan keahlian berkumpul, jadi silakan bagikan saran kreatif Anda di Daftar Keinginan!
