Floating button atau tombol mengambang sering kali digunakan di website-website bisnis. Tujuannya agar pengunjung mudah untuk menemukan tombol panggilan atau percakapan dengan pengelola website tersebut.
Di wordpress memang banyak sekali ditemukan plugin untuk floating button. Namun bagi pengguna DIVI ada baiknya menggunakan tools yang ada DIVI saja, agar plugin tidak menambah beban kerja website tersebut.
Namun masalahnya, di DIVI Builder tidak terdapat tools floating button yang sudah jadi. Maka dari itu, kita akan membuatnya sendiri.
Untuk mempelajari Divi dari awal, silahkan klik tombol di bawah ini:
Tombol ini akan kita letakkan di footer global, yang artinya ini akan tampil di semua laman website yang posisinya berada di area footer.
1.Masukkan ke dashboard wordpress, Klik menu DIVI >> Theme Builder.
2.Klik Tambahkan footer global seperti foto di bawah ini.
3. Kemudian akan muncul pilihan, Klik >> Bangun Footer Global.
4. Setelah masuk ke area disain, kita akan membuat 2 section (area biru) footer. Yaitu section untuk informasi kontak dan section untuk nama website.
5.Tambahkan baris(area hijau) dengan pilihan 2 kolom. Kolom kiri tambahkan modul gambar, dan kolom kanan dengan modul teks.
6.Tambahkan warna pada background section (klik roda gigi pada area biru). Masukkan warna pada latar belakang (warna bebas sesuai keinginan, misal disini kita pakai warna abu tua: #282828).
7. Tambahkan section ke2, klik tanda + pada area biru
8. Tambahkan modul teks, dan ketikkan nama website Anda dan atur teks di tengah.
9. Agar footer paling bawah tidak terlalu lebar, atur section(area biru) jarak padding atas dan bawah dengan nilai 0, dan jarak padding atas bawah pada baris (area hijau) dengan nilai 10. Atau silahkan sesuaikan dengan keinginan.
10.Tambahkan baris(area hijau) baru dengan 1 kolom di section paling bawah. Kemudian masukkan modul tombol.
11. Di Pengaturan tombol, ubah menjadi setting berikut:
- Ubah teks tombol= Telp
- Perataan= Kanan
- Gunakan gaya kustom untuk tombol= Ya
- Tombol ukuran teks=14
- Tombol warna teks putih atau #ffffff
- Tombol latar belakang= biru
- Tombol perbatasan warna= abu terang atau #cccccc
- Tombol perbatasan radius= 16px
- Tampilkan tombol ikon=ya (pilih ikon phone)
- Tombol ikon penempatan= kiri
- Hanya menunjukkan ikon di hover untuk tombol= Tidak
- Tambahkan link, ini ada di menu Konten> tautan= tel:+6282xxxxxxxxxx (sesuaikan dengan no telp Anda)
- klik tombol hijau kanan bawah. simpan perubahan.
12.Kita akan membuat tombol 1 lagi, yaitu tombol WA. Tidak perlu membuat dari awal seperti di atas, cukup arahkan mouse ke area warna abu modul tombol dan klik gandakan modul.
13.Yang perlu diganti di tombol ini:
- Ubah teks tombol= WA
- Tombol latar belakang= Hijau
- Ikon Whatsapp
- Ganti link, yang ada di menu Konten> tautan= https://wa.me/6282xxxxxxxxxx?text=Halo%20Namawebsiteanda.com%20 (sesuaikan dengan no telp dan tulisan Anda)
14.Selanjutnya masuk ke pengaturan baris(area hijau).
- Menggunakan custom selokan lebar= Ya
- Jarak antarkolom= 1
- Perataan= Kanan
- Pilih menu Lanjutan> Posisi= Tetap (pilih di tengah kanan)
- Offset horisontal= -5px (agar posisi tombol lebih menempel ke sisi kanan)
- Indeks Z= 500 (pilih nilai yang paling tinggi agar tombol berada di posisi teratas dari semua konten yang dilaluinya)
15. Tampilan akan seperti di bawah ini, kemudian Klik tombol simpan di kanan bawah, dan klik tombol silang di kanan atas.
16. Terakhir klik tombol Simpan Perubahan.
17. Selesai.
Bila tombol ini tidak ingin tampil di tampilan desktop, Anda bisa masuk kembali ke editor footer tersebut kemudian klik pengaturan baris.
Pilih menu lanjutan > Visibilitas > Nonaktifkan pada= klik Desktop.
Selamat mencoba, bila ada pertanyaan silahkan komentar di bawah ini.