Tutorial Mudah Cara Menambahkan Button di Elementor

Tombol atau button adalah elemen penting dalam sebuah website. Lewat button, pengunjung bisa melakukan tindakan seperti menghubungi WhatsApp, menuju halaman lain, melakukan pemesanan, atau membaca informasi lebih lanjut.
Di Elementor, menambahkan button sangat mudah karena cukup drag and drop tanpa coding sama sekali.

Pada artikel ini, kamu akan belajar cara menambahkan button di Elementor dengan langkah-langkah sederhana seperti mengajari anak SD.

Mengapa Button Itu Penting?

Button membantu pengunjung melakukan sesuatu yang kamu inginkan.
Contoh fungsi button:

Menuju halaman kontak

Membuka WhatsApp

Mendaftar layanan

Membeli produk

Membuka halaman promosi

Dengan button, website menjadi lebih interaktif dan mudah digunakan.

Bagian 1: Cara Menambahkan Button di Elementor

Button adalah salah satu widget dasar Elementor yang mudah ditemukan dan mudah dipakai.

1. Buka Halaman di Elementor

Masuk ke dashboard WordPress dan pilih halaman yang ingin kamu edit.
Klik tombol “Edit with Elementor” untuk membuka editor visual.

2. Cari Widget “Button”

Di panel sebelah kiri terdapat banyak widget.
Gunakan kolom pencarian dan ketik “Button” agar lebih cepat.

Widget bernama “Button” akan muncul.

3. Drag Widget Button ke Area Halaman

Klik widget tersebut, tahan, lalu tarik ke area halaman yang ingin kamu beri tombol.

Sebuah tombol default seperti “Click Here” akan muncul.

4. Ubah Tulisan Button

Klik tombol tersebut.
Lalu di panel kiri, pada kolom “Text”, ganti tulisannya sesuai kebutuhan.

Contoh:

Hubungi Kami

Pesan Sekarang

Beli Produk Ini

Daftar Kelas

Ke WhatsApp

Gunakan kalimat yang jelas dan membuat pengunjung ingin mengklik.

5. Tambahkan Link pada Button

Pada kolom “Link”, masukkan alamat tujuan ketika tombol diklik.

Contoh link umum:

Halaman lain: /kontak/

WhatsApp: https://wa.me/628xxxxx

Nomor telepon: tel:+628xxxxx

Email: mailto:nama@email.com

Jika ingin membuka link di tab baru, aktifkan opsi “Open in new window”.

Bagian 2: Mengatur Style Button di Elementor

Agar tampilan tombol lebih menarik, kamu bisa mengatur style-nya.

1. Buka Tab “Style”

Di panel sebelah kiri, klik tab “Style”.

Di sini kamu bisa mengatur:

Warna background

Warna teks

Border (garis pinggir)

Border radius (untuk membuat tombol melengkung atau kotak)

Tipografi (ukuran dan jenis font)

Semua perubahan akan langsung terlihat di layar.

2. Mengatur Bentuk Button

Jika ingin tombol sudutnya melengkung:

Atur “Border Radius” dengan angka besar seperti 20–30px.

Jika ingin tombol kotak:

Isi 0px pada border radius.

3. Mengatur Hover Effect

Hover effect adalah efek saat kursor menyentuh tombol.

Buka bagian “Hover” di dalam tab Style.

Kamu bisa mengatur:

Warna saat hover

Border hover

Kecepatan transisi

Atur supaya tombol terlihat lebih hidup dan profesional.

Bagian 3: Mengatur Posisi dan Ukuran Button

Elemen tombol harus ditempatkan dengan rapi agar mudah dilihat.

1. Mengatur Alignment

Pada tab Content, ada pengaturan “Alignment”.

Pilih:

Left → kiri

Center → tengah

Right → kanan

Justified → memenuhi seluruh baris

Pilih posisi yang paling cocok untuk desain halaman kamu.

Bagian 4: Mengatur Button untuk Mobile dan Tablet

Elementor memungkinkan kamu mengatur tampilan tombol secara responsif.

1. Gunakan Mode Responsif

Pada beberapa pengaturan seperti typografi, padding, dan margin, klik ikon perangkat (Desktop, Tablet, Mobile).

2. Sesuaikan Ukuran di Mobile

Biasanya tombol terlalu besar atau terlalu kecil di mobile.
Kamu bisa mengatur:

Ukuran font

Lebar tombol

Padding

Alignment

Agar tombol nyaman diklik pada layar kecil.

Kesimpulan

Menambahkan button di Elementor sangat mudah.
Langkah-langkahnya adalah:

Buka halaman di Elementor

Drag widget Button

Ubah teks tombol

Tambahkan link

Atur style warna, bentuk, dan hover

Sesuaikan posisi dan ukuran

Atur tampilan responsif untuk mobile dan tablet

Dengan mengikuti langkah-langkah sederhana ini, kamu bisa membuat tombol yang rapi, menarik, dan berfungsi dengan baik di halaman website mana pun.