Cara Membuat Floating Button di WordPress

Floating button pada sebuah website adalah elemen interaktif yang tetap terlihat di layar pengguna saat mereka menggulir halaman. Biasanya, tombol ini muncul di satu sisi layar dan mengapung di atas konten lain, sehingga selalu mudah diakses. Floating button sering digunakan untuk:

1. Aksi Cepat: Seperti tombol “chat” untuk layanan pelanggan, “berlangganan” untuk newsletter, atau “kembali ke atas” untuk navigasi cepat.
2. Panggilan Tindakan: Mendorong pengguna untuk melakukan tindakan tertentu, seperti “beli sekarang” atau “daftar”.
3. Peningkatan User Experience: Memberikan akses mudah ke fitur penting atau promosi tanpa harus menggulir halaman panjang.

Karakteristik Floating Button

• Posisi Tetap: Floating button biasanya memiliki posisi fixed atau sticky sehingga tetap berada di posisi tetap saat pengguna menggulir halaman.
• Desain Menonjol: Didesain untuk menarik perhatian, sering kali dengan warna kontras, ukuran besar, atau efek bayangan.
• Interaksi Minimal: Biasanya mengarahkan pengguna ke aksi tertentu dengan klik yang cukup ringkas dan sederhana.

Untuk membuat floating button pada website dengan basis WordPress, Anda dapat menggunakan beberapa metode atau cara tergantung pada kebutuhan dan cara yang anda senangi. Berikut adalah beberapa cara yang biasa dipakai oleh beberapa web developer untuk membuat floating buttong:

1. Menggunakan Plugin

Jika Anda tidak ingin repot atau dipusingkan dengan kode, menggunakan plugin adalah cara termudah dan cepat:

A. Install Plugin Floating Button:
1. Masuk ke Dashboard WordPress Anda.
2. Pergi ke Plugins > Add New.
3. Cari plugin dengan kata kunci “Floating Button” atau “Floating Action Button”.
4. Beberapa plugin yang populer adalah WP Floating Menu atau Simple Floating Button.
5. Install dan aktifkan plugin tersebut.
6. Ikuti panduan plugin untuk menambahkan dan mengonfigurasi floating button sesuai keinginan Anda.

B. Menggunakan Plugin Custom Code:
1. Install dan aktifkan plugin seperti Insert Headers and Footers.
2. Tambahkan kode HTML, CSS, dan JavaScript untuk floating button di bagian Header atau Footer sesuai kebutuhan.

2. Menggunakan Kode Kustom

Jika Anda merasa nyaman menambahkan kode sendiri, berikut adalah langkah-langkah untuk membuat floating button secara manual:

a. Menambahkan Kode HTML di Theme Anda:
1. Masuk ke Dashboard WordPress.
2. Pergi ke Appearance -> Theme Editor.
3. Temukan file `footer.php` atau file template yang sesuai.
4. Tambahkan kode HTML untuk button di bagian bawah file sebelum tag penutup `</body>`:

html
<!– Floating Button HTML –>
<div class=”floating-button”>
<a href=”#your-link” class=”button”>Click Me</a>
</div>

b. Menambahkan CSS untuk Styling:
1. Masih di bagian Theme Editor, buka file `style.css` dari tema Anda.
2. Tambahkan kode CSS berikut untuk membuat button mengambang:

css
/* Floating Button CSS */
.floating-button {
position: fixed;
bottom: 20px; /* Jarak dari bawah halaman */
right: 20px; /* Jarak dari kanan halaman */
z-index: 9999; /* Agar selalu berada di atas elemen lain */
}

.floating-button .button {
display: block;
width: 50px; /* Lebar button */
height: 50px; /* Tinggi button */
background-color: #ff5733; /* Warna latar belakang button */
color: white; /* Warna teks */
text-align: center;
line-height: 50px; /* Untuk menyejajarkan teks secara vertikal */
border-radius: 50%; /* Membuat button bulat */
box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* Efek bayangan */
text-decoration: none; /* Menghapus garis bawah */
}

.floating-button .button:hover {
background-color: #c70039; /* Warna saat hover */
}

c. Menambahkan JavaScript (Opsional):
Jika Anda ingin menambahkan interaksi atau efek tambahan, Anda dapat menambahkan kode JavaScript di `footer.php` sebelum tag penutup `</body>`:

<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var button = document.querySelector(‘.floating-button .button’);
button.addEventListener(‘click’, function() {
alert(‘Button clicked!’);
});
});
</script>

3. Menggunakan Page Builder
Jika Anda menggunakan page builder seperti Elementor atau WPBakery:

a. Elementor:
1. Edit halaman atau postingan dengan Elementor.
2. Tambahkan widget **Button** ke halaman.
3. Di panel kiri, buka **Advanced** dan gunakan **Custom CSS** untuk menambahkan posisi fixed:

css
selector {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}

b. WPBakery:
1. Edit halaman dengan WPBakery.
2. Tambahkan elemen button.
3. Gunakan **Custom CSS** untuk mengatur posisi button seperti langkah di atas.

Tips Tambahan
– Pastikan untuk melakukan backup sebelum melakukan perubahan kode.
– Cek tampilan button di berbagai perangkat untuk memastikan responsivitas.
– Gunakan Child Theme jika Anda menambahkan kode ke file tema untuk menghindari hilangnya perubahan saat tema diperbarui.

Dengan metode ini, Anda dapat menambahkan floating button ke situs WordPress Anda sesuai dengan preferensi dan kebutuhan.