4 Langkah Menambah Pautan Telefon Boleh Diklik dalam HTML
Anna Fitzgerald
Diterbitkan:02 November 2021
Memaparkan nombor telefon di tapak web anda boleh membantu meningkatkan kepercayaan dalam perniagaan anda, menarik bakal pelanggan dan menggembirakan yang sedia ada.
Pelawat laman web menghubungi perniagaan melalui pautan telefon HTML
Untuk memudahkan pengguna menghubungi anda atau seseorang dalam pasukan anda semudah mungkin, anda boleh menjadikan nombor telefon boleh diklik dalam HTML . Ini merupakan strategi UX yang hebat memandangkan akaun mudah alih menyumbang kira-kira separuh daripada trafik web di seluruh dunia . Maksudnya, lebih separuh daripada pelawat tapak web anda akan menggunakan peranti yang sama untuk mencari perniagaan anda dalam talian dan membuat panggilan.
Dalam siaran ini, kami akan melalui proses mencipta pautan telefon HTML, atau pautan “klik untuk memanggil”.
Cara Memautkan Nombor Telefon dalam HTML
Buat elemen penambat.
Masukkan nombor telefon anda dalam atribut href.
Tambah tel: sebelum nombor di dalam tanda petikan.
Sertakan teks dalam elemen sauh.
1. Buat elemen penambat.
Untuk bermula, buat elemen utama dengan atribut href kosong. Ia akan kelihatan seperti ini:
<a href=””></a>
2. Masukkan nombor telefon anda dalam atribut href.
Letakkan nombor telefon di dalam atribut href di dalam teg pembukaan. Atribut href (rujukan hiperteks) ini memastikan hiperpautan berfungsi. Ia akan kelihatan seperti ini:
<a href=”6031112298″></a>
3. Tambah tel: sebelum nombor di dalam tanda petikan.
Sekarang tambahkan tel: di dalam atribut href, sebelum nombor telefon. Kedua-dua telefon: dan nombor telefon hendaklah berada di dalam tanda petikan tanpa ruang atau sempang. Ia akan kelihatan seperti ini:
<a href=”tel:6031112298″></a>
4. Sertakan teks dalam elemen penambat.
Anda boleh memasukkan teks dalam elemen sauh. Walaupun ia tidak diperlukan, ia boleh menjadikan seruan tindak lebih jelas kepada pengguna. Berikut ialah kod bersebelahan dengan cara ia kelihatan kepada pengguna di hujung hadapan tapak web.
Jika anda ingin memasukkan nombor telefon dan menjadikannya satu-satunya teks yang dipautkan, kemudian balut nombor telefon dalam elemen utama dan letakkan di dalam teg perenggan. Ia akan kelihatan seperti ini:
Cara Memautkan Nombor Telefon Dengan Sambungan dalam HTML
Jika nombor telefon yang anda ingin jadikan boleh diklik mempunyai sambungan, maka anda perlu mengambil langkah tambahan.
Anda mencipta elemen sauh.
Masukkan tel: dan nombor telefon dalam atribut href.
Sekarang, selepas nombor telefon, tambahkan huruf “p” dan nombor sambungan. Ia akan kelihatan seperti ini:
<a href=”tel:6031112298p000″></a>
Apabila mengklik pautan “klik untuk memanggil” ini, pengguna akan mendengar nombor yang didail, kemudian jeda satu saat, kemudian sambungan didail.
Cara Memautkan Nombor Telefon Dengan Kod Negara dalam HTML
Jika nombor telefon yang anda ingin jadikan boleh diklik mempunyai kod negara, maka anda perlu mengambil langkah tambahan yang berbeza.
Anda mencipta elemen sauh.
Masukkan tel: dan nombor telefon dalam atribut href.
Sekarang, sebelum nombor telefon, tambah ikon tambah (+) dan kod negara. Ia akan kelihatan seperti ini:
<a href=”tel:+16031112298p000″></a>
Cara Menambah Pautan Telefon HTML ke Tapak Web Anda
Pautan telefon HTML, atau pautan “klik untuk memanggil”, boleh disertakan dalam pelbagai bahagian tapak web anda. Halaman kenalan dan pengepala atau pengaki anda adalah antara yang paling biasa. Mari lihat contoh menyertakan pautan boleh klik ini pada tapak web WordPress .
Halaman Kenalan
Langkah tepat untuk menambah pautan telefon HTML ke halaman kenalan akan berbeza-beza bergantung pada platform dan templat yang anda gunakan. Di bawah adalah proses umum.
Untuk memulakan, pilih templat halaman kenalan yang direka bentuk terlebih dahulu.
Kemudian klik ke dalam blok dengan nombor telefon contoh.
Klik ikon tiga titik.
Klik Edit sebagai HTML .
Cara Menambah Pautan Telefon HTML ke Halaman Kenalan Anda dalam WordPress: Edit sebagai HTML
Gantikan nombor telefon sedia ada dengan elemen sauh: <a href=”tel:6031112298″>(603)111-2298</a>
Cara Menambah Pautan Telefon HTML ke Halaman Kenalan Anda dalam WordPress: Tambah elemen utama
Klik Simpan Draf dan Pratonton .
Cara Menambah Pautan Telefon HTML ke Halaman Kenalan Anda di WordPress: Pratonton pautan klik untuk memanggil
Pengepala dan Pengaki
Langkah tepat untuk menambah pautan telefon HTML pada pengepala atau pengaki akan berbeza-beza bergantung pada platform dan templat yang anda gunakan. Di bawah adalah proses umum.
Dalam papan pemuka anda, klik Rupa > Widget .
Cara Menambah Pautan Telefon HTML pada Pengaki Anda dalam WordPress: Klik widget
Dalam bahagian berlabel “Pengaki”, tambahkan sebarang blok yang anda mahukan. Demi demo ini, saya hanya akan menambah blok perenggan.
Cara Menambah Pautan Telefon HTML pada Pengaki Anda dalam WordPress: Tambahkan blok pada widget pengaki
Apabila anda sudah bersedia, klik Kemas Kini .
Sekarang pergi ke salah satu halaman anda.
Tatal ke bawah ke kawasan pengaki dan klik blok perenggan.
Cara Menambah Pautan Telefon HTML pada Pengaki Anda dalam WordPress: Edit blok perenggan
Tambahkan nombor telefon anda, kemudian klik ikon tiga titik.
Klik Edit sebagai HTML .
Cara Menambah Pautan Telefon HTML pada pengaki anda dalam WordPress: Klik edit sebagai HTML
Balut nombor telefon dalam elemen sauh dan tambahkan href=”tel:6031112298″ pada teg pembukaan.
Cara Menambah Pautan Telefon HTML pada Pengaki Anda dalam WordPress: Tambahkan elemen utama
Klik Simpan Draf dan Pratonton .
Cara Menambah Pautan Telefon HTML pada Pengaki Anda dalam WordPress: Pratonton panggilan untuk klik pautan
Bagaimana untuk menggayakan Pautan Telefon HTML
Untuk menggayakan pautan telefon HTML, anda perlu menambah beberapa CSS tersuai .
Sebagai contoh, katakan anda mahu nombor telefon kelihatan tebal, oren dan tanpa garis bawah. Berikut ialah CSS dan cara pautan “klik untuk memanggil” akan muncul di bahagian hadapan:
Cara anda menambahkan CSS ini pada tapak web anda bergantung pada platform yang anda gunakan. Jika membina tapak anda dalam WordPress, sebagai contoh, anda akan menambah CSS ini pada tab CSS Tambahan dalam Penyesuai WordPress.
Bagaimana untuk menggayakan Pautan Telefon HTML dalam Penyesuai WordPress
Menambah Pautan “Klik untuk Panggil” ke Tapak Web Anda
Memaparkan nombor telefon di tapak web anda boleh membantu menarik dan menggembirakan bakal pelanggan dan sedia ada — menjadikan mereka boleh diklik adalah lebih baik untuk UX. Berita baiknya ialah membuat pautan telefon adalah mudah. Anda hanya perlu mengetahui beberapa HTML dan CSS untuk mencipta dan menggayakan pautan ini dan membenamkannya di kawasan yang berbeza di tapak anda.