Cara Membuat Bilah Kontak Seluler Divi dengan Klik-untuk-Panggilan, Email, SMS, dan Tautan Arah

Dengan dunia yang hidup di perangkat seluler, masuk akal untuk menyediakan tautan kontak yang dapat diklik di situs web Anda yang memanfaatkan pengalaman seluler. Tautan kontak ini, seperti tautan klik untuk menelepon, dapat memulai panggilan di ponsel Anda dengan sekali klik. Lainnya, seperti tautan petunjuk arah, dapat membuka petunjuk arah ke alamat bisnis di Google Maps. Ini benar-benar nyaman bagi pengguna dan suatu keharusan untuk bisnis tertentu.

Dalam tutorial ini, kami akan menunjukkan cara membuat bilah kontak seluler Divi dengan Click-to-Call, Email, SMS, dan Directions Links. Untuk melakukan ini, kita akan menggunakan pembuat Divi untuk mendesain bilah dan tombol pada footer global. Kemudian kami akan menambahkan URL khusus ke setiap tautan kontak untuk menghadirkan fungsionalitas yang kami butuhkan.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Cara Menambahkan Unduhan Templat Bilah Kontak Tetap ke Situs Divi Anda

PERINGATAN!: Menambahkan templat ini akan menggantikan templat situs web default (jika ada) di situs Divi Anda. Kami menyarankan untuk menambahkan ini ke situs uji sehingga Anda tidak mengacaukan apa pun di situs langsung.

Untuk mengimpor templat bilah footer tetap ke situs web Anda sendiri, unzip file zip unduhan untuk mengakses file JSON.

Lalu buka Dashboard WordPress dan arahkan ke Divi > Theme Builder.

Kemudian klik ikon portabilitas di kanan atas halaman.

Di dalam popup portabilitas, pilih file JSON yang baru saja Anda buka ritsletingnya dan pilih opsi "Unduh cadangan sebelum mengimpor", untuk berjaga-jaga jika Anda memiliki sesuatu di templat situs web default sebelumnya yang tidak ingin Anda timpa.

Kemudian klik tombol Impor.

Terakhir, simpan perubahan Pembuat Tema dan lihat halaman langsung untuk melihat bilah footer tetap.

Sekarang, mari kita ke tutorialnya, ya?

Bagian 1: Membuat Footer Global

Untuk tutorial ini, kita akan menambahkan bilah kontak seluler ke footer global menggunakan Divi Theme Builder. Mulailah dengan menavigasi ke Divi > Theme Builder. Kemudian klik Global Footer Area di dalam templat situs web default. Dari dropdown, pilih Build Global Footer.

CATATAN: Jika Anda sudah memiliki footer global, Anda dapat membuka edit footer global dan menambahkan bilah kontak selain footer saat ini.

Pilih opsi "Bangun Dari Awal".

Bagian 2: Membuat Bilah Konten Tetap

Di dalam Global Footer Layout Editor, mulailah proses desain dengan menambahkan baris satu kolom ke bagian default.

Pengaturan Bagian

Sebelum kita mulai menambahkan modul, buka pengaturan bagian, berikan ketinggian yang ditetapkan sebagai berikut:

• Tinggi: 80px

Ini penting untuk menciptakan ruang di bagian bawah halaman tempat baris tetap pada akhirnya akan berhenti. Kami juga akan mengeluarkan padding atas dan bawah default juga.

• Padding: 0px atas, 0px bawah

Pengaturan Baris

Sekarang bagian kami sudah siap, kami siap untuk menyesuaikan baris untuk berfungsi sebagai bilah kontak tetap. Buka pengaturan untuk baris dan kemudian perbarui yang berikut:

Latar belakang

• Warna Latar Belakang: #751136

Ukuran

• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%
• Tinggi: mewarisi

Meskipun baris akan diperbaiki, kami ingin tinggi baris sesuai dengan tinggi bagian induk sehingga ruang di bagian bawah halaman cukup memuat baris. Untuk melakukan ini kita harus mengetikkan teks "mewarisi" untuk ketinggian.

Jarak

• Padding: 0px atas, 0px bawah, 15% kiri, 15% kanan

CSS khusus

Kami ingin memastikan konten di dalam baris tetap sejajar secara vertikal dan kolom tidak rusak di seluler. Untuk melakukannya, tambahkan CSS khusus berikut ke elemen utama baris:

display:flex;
flex-wrap:nowrap;
align-items:center;

Pemosisian Tetap

Untuk membuat baris tetap sehingga mengapung di bagian bawah layar, kita perlu memberikan posisi tetap di lokasi kiri bawah sebagai berikut:

• Posisi: Tetap
• Lokasi: kiri bawah
• Indeks Z: 99999

Bagian 3: Membangun Link Ajakan-untuk-Klik, Email, SMS, dan Arah

Sekarang setelah bilah kontak kami selesai, kami siap untuk menambahkan tombol kontak yang dapat diklik bersama dengan URL khusus.

Mendesain Tombol Klik untuk Menelepon

Tombol kontak pertama yang akan kita buat adalah tombol klik untuk menelepon. Untuk membuatnya, tambahkan modul uraian baru ke kolom.

Isi

Di bawah tab konten, tambahkan Judul dan Ikon ke uraian sebagai berikut:

• Judul: Panggilan
• Gunakan Ikon: YA
• Ikon: telepon

Latar belakang

Berikan warna latar belakang putih:

• Warna Latar Belakang: #ffffff

Pengaturan Desain

Lompat ke tab desain, dan perbarui pengaturan sebagai berikut:

ikon

• Warna Ikon: #751136
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 2em

Font Judul

• Gaya Font Tite: TT
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #751136
• Judul Teks Ukuran: 1em

Ukuran Teks Tubuh

Jika Anda perhatikan, kami telah mengukur elemen uraian menggunakan satuan panjang "em". Ini relatif terhadap ukuran teks isi. Oleh karena itu, menyesuaikan ukuran teks isi uraian (meskipun tidak menampilkan teks isi) akan menyesuaikan ukuran semua elemen uraian dengan satuan panjang em. Ini hanyalah cara mudah untuk mengubah ukuran tombol ke depan tanpa harus menyesuaikan setiap elemen satu per satu.

Perbarui teks isi sebagai berikut:

• Ukuran Teks Tubuh: 12px

Ukuran

Berikan uraian tinggi dan lebar yang ditetapkan sebagai berikut:

• Lebar: 4.5em
• Penyelarasan Modul: tengah
• Tinggi: 4.5em

Padding dan Sudut

• Padding: 0.5em atas

Bayangan Kotak

• Bayangan Kotak: lihat tangkapan layar
• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 2px
• Warna Bayangan: rgba (255,255,255,0.55)

CSS khusus

Untuk membuat konten modul uraian di tengah secara vertikal, tambahkan CSS Kustom berikut ke Elemen Utama:

display:flex;
align-items:center;

Dan hilangkan spasi di bawah ikon uraian dengan menambahkan Gambar Blurb berikut:

margin-bottom: 0.3em;

Menambahkan URL tautan Panggilan

Untuk menambahkan URL tautan panggilan yang akan memulai panggilan di ponsel, tambahkan nomor setelah awalan “tel:”.

• URL Tautan Modul: tel: 555-555-5555

Mendesain Tombol Email

Untuk membuat tombol email, duplikat seluruh kolom.

Menambahkan Ikon Email dan URL tautan

Kemudian perbarui uraian duplikat di kolom 2 dengan Judul dan Ikon baru.

Untuk menambahkan URL tautan panggilan yang akan memulai email di aplikasi seluler, tambahkan alamat email setelah awalan “mailto:”.

• URL Tautan Modul: mailto:[dilindungi email]

Mendesain Tombol SMS (Pesan Teks)

Untuk membuat tombol SMS, duplikat kolom 2.

Menambahkan Ikon SMS dan URL tautan

Kemudian perbarui uraian duplikat di kolom 2 dengan Judul dan Ikon baru.

Untuk menambahkan URL tautan panggilan yang akan memulai email di aplikasi seluler, tambahkan alamat email setelah awalan “sms:”.

• URL Tautan Modul: sms: +15555555555

Mendesain Tombol Arah

Untuk membuat tombol SMS, duplikat kolom 3.

Menambahkan Ikon Petunjuk Arah dan URL Tautan

Kemudian perbarui uraian duplikat di kolom 3 dengan Judul dan Ikon baru.

Untuk menambahkan URL tautan panggilan yang akan memulai petunjuk arah melalui Google Maps, gunakan struktur URL Arah ini.

Untuk tutorial ini, kita akan menambahkan tautan petunjuk arah yang akan menghasilkan petunjuk arah dari lokasi pengguna saat ini ke GooglePlex di Mountain View, CA.

• URL Tautan Modul:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Untuk menambahkan alamat Anda sendiri ke URL, ganti teks setelah “destination=" di URL, pastikan untuk memisahkan kata dengan simbol plus (“+”).

Mengklik tombol akan memberi Anda sesuatu yang mirip dengan ini ...

Sembunyikan Bagian di Desktop

Karena kami ingin bilah kontak hanya ditampilkan di perangkat seluler, kami dapat menonaktifkan seluruh bagian di desktop. Untuk melakukannya, buka pengaturan bagian dan perbarui yang berikut ini:

• Nonaktifkan Aktif: Desktop

Hasil Akhir

Lebih Banyak Tautan Kontak

Dengan HTML5, Anda tidak terbatas pada nomor telepon. Anda dapat menambahkan ajakan bertindak lain seperti email, pesan, faks, dll. Protokol HTML5 meliputi:

telp: – lakukan panggilan telepon
mailto: – buka aplikasi email
panggilan ke: buka Skype
sms: – mengirim pesan teks
faks: – mengirim faks

Dan jika mau, Anda juga dapat menambahkan tautan Waze yang ditargetkan untuk URL Petunjuk Arah.

Pikiran Akhir

Bilah kontak sepertinya akan menjadi tambahan yang bagus untuk situs web perusahaan mana pun yang ingin memudahkan pengguna untuk menghubungi mereka dari perangkat seluler. Dan setelah Anda membiasakan diri dengan struktur URL tautan, Anda siap untuk semua jenis tautan kontak yang Anda inginkan.

Untuk lebih lanjut, lihat posting kami di Tautan Telepon.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!