multe site-uri web de afaceri arată un număr de telefon, astfel încât clienții lor să le poată contacta. Atunci când desktop-uri au fost cel mai popular mod de a accesa site-urile, utilizatorii ar face notă de numărul de telefon și de apel de la un dispozitiv separat. Desigur, majoritatea utilizatorilor accesează acum site-ul web și efectuează apelul telefonic de pe același dispozitiv. Aceasta deschide o oportunitate de a adăuga un link de apel-creând un număr de telefon HTML care poate fi făcut clic.,
În acest articol, vom arunca o privire la cum să adăugați un apel link-ul precum și alte câteva link-uri face clic, cum ar fi e-mail și alte CTAs.
Abonați-vă la canalul nostru Youtube
cum funcționează linkurile de apel
făcând clic pe un număr de telefon este ușor de făcut cu HTML. HTML5 include protocoale precum tel: și mailto: pe care browserele le pot utiliza. Browserele răspund diferit la aceste protocoale. Unii vor lansa aplicația telefon și vor adăuga numărul pe afișaj în timp ce vă așteaptă să faceți clic pe butonul de apelare. Alții vor face apelul, în timp ce alții vor întreba dacă este în regulă mai întâi.,
deoarece este HTML, puteți adăuga protocoalele oriunde pe site-ul dvs., inclusiv antetul, subsolul, barele laterale, în conținutul postărilor și paginilor și în widget-uri.
adăugarea unui link de apel la numărul de telefon HTML la site-ul dvs.
adăugați codul ca text la locația în care doriți să apară linkul:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: creează linkul de apel. Acest lucru îi spune browserului cum să folosească numărul.
„Tel: 123-456-7890 „creează numărul de telefon HTML. Numărul din ghilimele este numărul pe care îl va apela.,
numărul cadrul >< tag-uri este de partea vizuală și acesta poate fi orice vrei tu să fie, inclusiv numărul de telefon, o linie de text, cum ar fi „Click pentru a Call” sau „Sunați Acum”, sau orice alt apel la acțiune doriți. Ar trebui să fie descriptiv de ceea ce se va întâmpla atunci când faceți clic.,
afișarea unui mesaj în loc de număr ar arăta astfel:
<a href="tel:123-456-7890">CLICK TO CALL</a>
vizitatorii dvs. vor vedea textul, dar când fac clic pe el, vor vedea ecranul de apelare al telefoanelor lor cu numărul dvs. gata pentru a face clic pe butonul de apelare.
adăugarea unei extensii
unele numere de telefon au o extensie. Puteți adăuga cod care va crea o scurtă pauză înainte de a forma numărul extensiei. Adăugarea P în fața extensiei va adăuga o pauză de o secundă., Codul ar putea arăta astfel:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
aceasta formează numărul, așteaptă o secundă și apoi formează extensia.
puteți să așteptați un ton de apel utilizând w în loc de p.
adăugarea codurilor de țară
codurile de țară pot fi adăugate prin includerea a + împreună cu codul țării dvs. înainte de numărul de telefon., Un exemplu ar putea arata astfel:
<a href="tel:+1123-456-7890">123-456-7890</a>
Adăugarea de Microdate pentru Local SEO
Una dintre preferatele mele facilități de a transporta în jurul valorii de un smartphone este atunci când am căuta un local de afaceri și rezultatul din Google îmi dă un clic pe un număr de telefon. Pot face clic pe numărul pentru a efectua apelul fără a fi nevoie să-l scriu sau să încerc să-l memorez. Această caracteristică este acum o necesitate. Din fericire, îl puteți adăuga pe site-ul dvs. web, astfel încât Google să vă poată furniza numărul de telefon în căutările locale.acest lucru se face cu microdate., Microdata informează motoarele de căutare că numerele sunt un număr de telefon, astfel încât acestea sunt afișate ca un link de apel pe care se poate face clic. Puteți crea acest lucru îmbogățind marcajul cu câteva etichete pentru căutările locale.de exemplu, codul poate arăta astfel:
alte apeluri la acțiune
cu HTML5, nu vă limitați la numere de telefon. Puteți adăuga alte apeluri la acțiune, cum ar fi e-mail, mesagerie, fax etc., HTML5 protocoale includ:
- tel: – plasa un apel telefonic
- mailto: – deschideți o aplicație de e-mail
- apella: deschide Skype
- sms: – trimite un mesaj text
- fax: – trimite un fax
Toate aceste protocoale sunt folosite în același mod cum am văzut mai sus. Să ne uităm la câteva exemple.
adăugarea codului la pagina dvs. de Contact
unul dintre cele mai bune locuri pentru a adăuga un link de apel se află în informațiile dvs. de contact din pagina Contactați-Ne.,
indiferent dacă utilizați editorul clasic sau noul editor Gutenberg, va trebui să vizualizați versiunea Text a paginii. În editorul clasic Faceți clic pe fila Text. În Gutenberg, faceți clic pe cele trei puncte din dreapta sus și selectați Code Editor.
adăugați codul în locul numărului dvs. de telefon.
Ieșire Editorul de Cod sau de Previzualizare a paginii și veți vedea că numărul dvs. de telefon este acum un link.,codul HTML pentru e-mail este mailto: adresa de e-mail este adăugată la sfârșit, astfel:
la fel ca legătura telefonică, puteți utiliza porțiunea vizuală pentru a adăuga un mesaj, cum ar fi:
< href="mailto: "; Click here to send me an email</a>
iată un exemplu din pagina de contact a spa layout pack. Am adăugat un modul blurb cu o pictogramă și textul trimite un e-mail. Am selectat fila Text și am adăugat HTML-ul de e-mail. Textul este acum clickable și se va deschide aplicația de e-mail.,
adăugarea de cod pentru a deschide URL-uri
puteți avea HTML pentru a deschide ORICE URL doriți. Acest lucru este bun dacă doriți să trimiteți cititori la pagini pentru înscrieri la newsletter, evenimente etc. Pentru a le conecta, codul HTML va include adresa URL. De exemplu:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
am adăugat un alt blurb cu codul pentru a vedea pagina de evenimente.
Dezactivare pe Desktop și Tablete
O problemă cu link-uri nu sunt utile pentru desktop-uri sau tablete., Puteți rezolva acest lucru cu Divi creând module specifice fiecărui tip de dispozitiv și apoi dezactivându-le pe celelalte dispozitive.
aici, am creat două module cu numărul de telefon: unul include un număr de telefon HTML, iar celălalt nu.l-am dezactivat pe cel cu numărul pe care se poate face clic pe tablete și desktop-uri, așa că nu vor vedea niciodată linkul. Am dezactivat, de asemenea, modulul fără link-ul pentru telefoane, astfel încât utilizatorii de telefoane vor vedea doar modulul cu link-ul.
adăugarea codului în antet sau subsol
puteți adăuga codul în antet sau subsol folosind editorul de teme., Utilizați întotdeauna o temă copil sau codul PHP va fi suprascris atunci când actualizați tema. Acest lucru va necesita un stil CSS pentru a arăta bine.
În tabloul de Bord, du-te la Aspectul > Editor > Tema Antet (sau Temă de Subsol). Plasați codul în porțiunea<body> a codului. M-am uitat pentru un final tag-ul </un>, apasat enter pentru a adăuga un plus câteva linii, și inserat în codul meu., Puteți vedea codul aici pe liniile 28 și 29.
Iată cum arată când am plasat linkul de apel și linkul de e-mail în antetul temei douăzeci și nouăsprezece. Este acolo și funcționează, dar nu este foarte frumos. Acest lucru este fixabil prin adăugarea de culoare și spațiu de margine, astfel încât acestea vor sta în afară unul de celălalt. Desigur, acest lucru se face în CSS.
Configurarea legăturilor
va trebui să adaugi cod în câmpul CSS suplimentar din Customizer.
codul dvs. ar putea arăta astfel:
Acest lucru spune CSS cum să stilizeze textul pentru tel: și mailto:., Schimbă fontul numărului de telefon în maro, fontul de e-mail portocaliu și adaugă o marjă mică în partea dreaptă a fiecărui link.
CSS funcționează oriunde codul este, inclusiv în widget-uri, posturi, etc. Puteți utiliza chiar și pictograme în loc de text.
adăugarea codului în meniul secundar Divi
Divi poate include numărul dvs. de telefon și e-mailul în meniul secundar de deasupra antetului. Butonul de e-mail poate face deja clic în mod implicit, dar numărul de telefon nu este., Numărul de telefon poate fi transformat într-un link de apel utilizând un număr de telefon HTML similar pe care l-am folosit în exemplele anterioare.
Du-te la Tema Customizer > Antet & Navigatie > Elemente de Antet. Acest lucru vă va oferi o casetă de text în care puteți adăuga numărul dvs. de telefon. Din fericire, nu te limitezi doar la numere. Puteți adăuga, de asemenea, HTML. Am adăugat HTML din exemplele anterioare. Am crescut, de asemenea, dimensiunea fontului numărul de telefon pentru a face mai ușor pentru a vedea pentru imagini.,
puteți face evident că se poate face clic prin adăugarea unui mesaj la porțiunea vizuală a linkului. Puteți înlocui numărul cu mesajul sau puteți adăuga mesajul la sfârșitul numărului. S-ar putea arata astfel:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Acest exemplu arată textul.
în aceasta, am adăugat numărul de telefon împreună cu textul.
testarea pe mobil
vă recomandăm să testați legăturile cu dispozitivele mobile pentru a vă asigura că funcționează., Dacă nu aveți acces la un smartphone, puteți utiliza instrumentele pentru dezvoltatori Google Chrome.
faceți clic dreapta pe pagina dvs. de pornire și selectați Inspect. În colțul din stânga sus al ecranului, vei vedea o listă de dispozitive. Selectați unul pentru a vedea cum arată site-ul dvs. pe acel ecran. Dacă faceți clic pe linkul număr de telefon HTML, ar trebui să deschideți o casetă de dialog care vă solicită să alegeți o aplicație. Dacă vedeți acest lucru, link-ul funcționează. Eu încă recomandăm să-l încercați pe un smartphone real, dar acest lucru este un bun indiciu că link-ul face ceva.,
adăugarea legăturilor de apel cu pluginurile
puteți adăuga, de asemenea, un link de apel la antetul dvs. cu un plugin. Acestea includ de obicei caracteristici pentru styling, adăugarea mai multor apeluri la acțiune și posibilitatea de a fi activate sau dezactivate în funcție de dispozitivul vizitatorului. De asemenea, sunt ușor de configurat și de utilizat. Acestea sunt alegeri excelente dacă nu doriți să gestionați codul. Iată câteva dintre cele mai bune opțiuni.
butonul Call Now
butonul Call Now adaugă un buton click-to-call în partea de jos a ecranului pentru vizitatorii dvs. mobili. Nu se afișează pe alte dispozitive., De asemenea, puteți adăuga text dacă doriți. Butonul este o pictogramă a telefonului, astfel încât este ușor de înțeles pentru ce este destinat. Tot ce trebuie să faceți este să activați butonul și să introduceți numărul dvs. de telefon. Puteți modifica comportamentul implicit în setările avansate.
Mai multe Informatii
Lipicios Butoane Laterale
Acest plugin vă permite să adăugați butoane care se lipesc pe partea de site-ul dvs. și va rămâne pe ecran, atunci când sulurile de utilizator. Puteți adăuga un număr de telefon, o adresă de e-mail, pictograme de social media și locații de magazin., Setați-le la dreapta sau la stânga, alegeți stiluri de animație și rollover, personalizați culorile și alegeți unde se afișează.
Mai multe Informatii
Viteza de Contact Bara
Aceasta adaugă un contact bar, care include link-uri face clic pentru un număr de telefon, număr de fax, un titlu, adresa, adresa de e-mail, rețele sociale, și Url-uri personalizate. Setați bara în partea de sus sau de jos și reglați dimensiunea, culoarea, culoarea textului și a legăturilor și modul în care reacționează bara. De asemenea, puteți ajusta dimensiunea. puteți adăuga mai mult conținut folosind cârlige de filtrare.,
Mai multe informații
bara de contacte Mobile
Acest plugin adaugă linkuri către site-ul dvs. web atunci când este vizualizat pe dispozitive mobile. Puteți alege ce link-uri sunt afișate din 13 opțiuni, inclusiv Telefon, E-mail, Skype, URL-uri personalizate și rețele sociale. Are integrare FontAwesome pentru icoane. Puteți stiliza legăturile și puteți alege dimensiunea, marginea, opacitatea etc. Setați meniul din partea de sus sau de jos a ecranului. Meniul rămâne pe ecran atunci când utilizatorul derulează. De asemenea, include scroll to top și coșul WooCommerce cu butoane de contorizare a articolelor.,
Mai multe informații
Gânduri finale
popularitatea smartphone-urilor pentru a accesa site-uri web crește în fiecare zi. Această popularitate ia link-uri de apel de la a fi o comoditate simplu la o necesitate completă. Adăugarea de numere de telefon cu clic poate face diferența între utilizatorii care apelează afacerea dvs. sau concurenții dvs. Din fericire, nu este atât de dificil să creezi linkuri pe care să poți face clic pentru a adăuga numere de telefon HTML la anteturile, subsolurile, widget-urile, paginile și postările site-ului tău WordPress.