Daftar Isi Artikel
SEO EDU Nezzan – kita akan membahas cara mudah membuat bar kontak mobile Divi di footer yang bisa digunakan untuk memudahkan pengunjung menghubungi kamu lewat telepon, email, SMS, atau menemukan alamat menggunakan Google Maps. Dengan menggunakan Divi, kamu bisa membuat desain ini dengan cepat tanpa perlu menjadi ahli coding. Yuk, simak langkah-langkahnya!
Apa itu Bar Kontak Mobile?
Bar kontak mobile adalah bar di footer website yang memungkinkan pengunjung untuk menghubungi pemilik website melalui berbagai cara, seperti telepon, email, atau SMS, hanya dengan satu klik. Ini sangat berguna untuk meningkatkan kemudahan bagi pengunjung yang ingin menghubungi kamu dari perangkat mobile mereka.
Kenapa Bar Kontak Mobile Itu Penting?
Membuat bar kontak seperti ini sangat berguna karena memudahkan pengunjung untuk segera menghubungi kamu tanpa perlu mencari informasi kontak di berbagai bagian website. Pengunjung cukup klik ikon telepon, email, SMS, atau peta untuk langsung melakukan tindakan. Ini membuat website kamu lebih user-friendly, terutama untuk pengunjung yang mengakses dari smartphone.
Langkah-langkah Membuat Bar Kontak Mobile di Footer Divi
1. Aktifkan Divi Builder
Pastikan kamu sudah menginstal dan mengaktifkan Divi di website WordPress kamu. Setelah itu, masuk ke halaman tempat kamu ingin menambahkan bar kontak, dan aktifkan Divi Builder.
2. Tambah Section Baru di Footer
Untuk memulai, kamu perlu menambahkan section baru di bagian footer website kamu. Scroll ke bagian bawah halaman, atau jika kamu belum punya footer, klik tombol + untuk menambahkannya. Pilih opsi Regular untuk membuat section yang sederhana.
Lalu pilih “Build From Scratch”.
Menggunakan the Global Footer Layout Editor
Pengaturan pada Section
Tingg: 80px- Padding: 0px top, 0px bottom
3. Menambahkan Modul Icon List untuk Kontak
Setelah menambahkan section, langkah selanjutnya adalah menambahkan Icon List. Modul ini memungkinkan kamu menambahkan ikon untuk telepon, email, SMS, dan lokasi.
4. Masukkan Ikon Kontak
Untuk masing-masing kontak, kamu akan menambahkan ikon dan link sebagai berikut:
- Telepon: Masukkan ikon telepon dan tambahkan link
tel:+628123456789(ganti dengan nomor telepon kamu). - Email: Masukkan ikon email dan tambahkan link
mailto:email@domain.com(ganti dengan email kamu). - SMS: Masukkan ikon SMS dan tambahkan link
sms:+628123456789(ganti dengan nomor SMS kamu). - Lokasi: Masukkan ikon lokasi dan tambahkan link Google Maps seperti
https://www.google.com/maps?q=alamat+anda(ganti dengan alamat kamu).
5. Desain dan Penataan Ikon
Setelah menambahkan ikon, kamu bisa mendesainnya agar tampil lebih menarik. Kamu bisa mengubah ukuran ikon, warna, dan jarak antar ikon agar tampak lebih rapi dan menarik di perangkat mobile. Jangan lupa sesuaikan juga untuk tampilan di perangkat desktop dan mobile.
6. Optimalkan untuk Mobile
Pastikan bar kontak ini responsif di perangkat mobile. Di Divi, kamu bisa menyesuaikan tampilan untuk berbagai perangkat. Jangan lupa untuk mengecek apakah ukuran ikon dan jarak antar elemen sudah sesuai dan mudah diklik.
7. Simpan dan Publikasikan
Setelah selesai, simpan perubahan yang kamu buat. Klik Save dan kemudian Publish untuk menampilkan bar kontak di footer website kamu.
- Cara Membuat Row Full Width di Divi
- Responsive Image Divi Builder Untuk Semua Perangkat
- Viewport Responsif Divi Builder Untuk Semua Perangkat
- Kursus WordPress Divi Builder
Tips Mempercantik Bar Kontak
- Pilih Ikon yang Jelas: Gunakan ikon yang mudah dipahami agar pengunjung langsung tahu cara menghubungi kamu.
- Warna yang Kontras: Gunakan warna yang kontras agar ikon mudah terlihat di footer yang mungkin berwarna gelap.
- Animasi Hover: Tambahkan animasi hover supaya pengunjung merasa lebih tertarik dan interaktif dengan bar kontak kamu.
Download Layout Footer Mobile untuk Free
Jika kamu ingin lebih cepat membuat bar kontak seperti ini, kamu bisa download layout gratis yang sudah disediakan. Layout ini sudah diatur sedemikian rupa agar kamu bisa langsung menggunakannya di website Divi kamu.
Download Footer Divi