Legături telefonice: Cum să adăugați link-uri „CTA” și CTA-uri pe site-ul dvs. web

Publicat: 2019-01-14

Multe site-uri web de afaceri arată un număr de telefon, astfel încât clienții lor să le poată contacta. Când desktop-urile erau cel mai popular mod de a accesa site-urile, utilizatorii notau numărul de telefon și apelau de pe un dispozitiv separat. Desigur, majoritatea utilizatorilor accesează acum site-ul web și apelează telefonic de pe același dispozitiv. Aceasta deschide o oportunitate de a adăuga un link de apel - crearea unui 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 link de apel, precum și alte câteva linkuri care pot fi făcute clic, cum ar fi e-mailul și alte CTA-uri.

Abonați-vă la canalul nostru Youtube

Cum funcționează legăturile de apelare

Faceți clic pe un număr de telefon se face cu ușurință cu HTML. HTML5 include protocoale precum tel: și mailto: pe care browserele le pot folosi. Browserele răspund diferit la aceste protocoale. Unii vor lansa aplicația pentru telefon și vor adăuga numărul pe ecran în timp ce așteaptă să faceți clic pe butonul Apelare. Alții vor efectua apelul, în timp ce alții vor întreba dacă mai întâi este bine.

Întrucât este HTML, puteți adăuga protocoalele oriunde pe site-ul dvs., inclusiv antet, subsol, bare laterale, în conținutul postărilor și paginilor și în widgeturi.

Adăugarea unui link de apel de număr de telefon HTML pe site-ul dvs. web

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ă legătura de apel. Aceasta î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 din etichetele> <este porțiunea vizuală și poate fi orice doriți să fie, inclusiv numărul de telefon, o linie de text, cum ar fi „Faceți clic pentru a apela” sau „Apelați acum” sau orice alt apel la acțiune vrei. Ar trebui să fie descriptiv a ceea ce se va întâmpla atunci când fac clic.

Afișarea unui mesaj în locul numărului ar arăta astfel:

<a href="tel:123-456-7890">CLICK TO CALL</a>

Vizitatorii dvs. vor vedea textul, dar când dau clic pe el, vor vedea ecranul de apelare a telefoanelor lor, cu numărul dvs. pregătit pentru ca ei să facă 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 de extensie. 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.

Aveți posibilitatea 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 unui + împreună cu codul țării dvs. înainte de numărul de telefon. Un exemplu ar putea arăta astfel:

<a href="tel:+1123-456-7890">123-456-7890</a>

Adăugarea de microdate pentru SEO local

Una dintre facilitățile mele preferate de a transporta un smartphone este atunci când caut o afacere locală, iar rezultatul din Google îmi dă un număr de telefon pe care se poate face clic. Pot să fac clic pe numărul pentru a efectua apelul fără a fi necesar să îl notez 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. Microdatele informează motoarele de căutare că numerele sunt un număr de telefon, astfel încât acestea să fie afișate ca un link de apel clicabil. Puteți crea acest lucru îmbogățind marcajul cu câteva etichete pentru căutări locale.

De exemplu, codul ar putea arăta astfel:

<div itemscope itemtype="https://schema.org/LocalBusiness">
<h1 itemprop="name">WordPress Theme</h1>
Phone: <span itemprop="telephone"><a href="tel:+123456890">
234567890</a></span>
</div>

Alte chemări la acțiune

Cu HTML5, nu vă limitați la numerele de telefon. Puteți adăuga alte apeluri la acțiune, cum ar fi e-mail, mesagerie, fax etc. Protocoalele HTML5 includ:

tel: - efectuați un apel telefonic
mailto: - deschideți o aplicație de e-mail
callto: deschide Skype
sms: - trimiteți un mesaj text
fax: - trimiteți un fax

Toate aceste protocoale sunt utilizate în același mod așa 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 de contact de pe 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 Editor de cod .

Adăugați codul în locul numărului dvs. de telefon.

Părăsiți Editorul de cod sau Previzualizați pagina și veți vedea că numărul dvs. de telefon este acum un link care poate fi făcut clic.

Crearea codului pentru un link de e-mail sau o adresă URL

Codul HTML pentru e-mail este mailto: Adresa de e-mail este adăugată la final, astfel:

<a href="mailto:[email protected]"> [email protected] </a>
Just like the phone link, you can use the visual portion to add a message, such as:
<a href="mailto: [email protected]"> Click here to send me an email</a>

La fel ca și legătura telefonică, puteți utiliza porțiunea vizuală pentru a adăuga un mesaj, cum ar fi:

< href="mailto: [email protected]"; Click here to send me an email</a>

Iată un exemplu din pagina de contact a pachetului de layout Spa. Am adăugat un modul blurb cu o pictogramă și textul Trimiteți un e-mail. Am selectat fila Text și am adăugat codul HTML al e-mailului. Textul face clic acum și vă va deschide aplicația de e-mail.

Adăugarea codului la adresele URL deschise

Puteți avea codul HTML pentru a deschide orice adresă URL doriți. Acest lucru este bun dacă doriți să trimiteți cititorilor pe pagini pentru înscrieri la buletine, evenimente etc. Pentru a vă conecta la acestea, codul dvs. HTML va include adresa URL. De exemplu:

<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>

Am adăugat un alt mesaj cu cod pentru a vedea pagina evenimentelor.

Dezactivați pe desktop și tabletă

O problemă cu legăturile de apel este că nu sunt utile pentru desktopuri sau tablete. Puteți rezolva acest lucru cu Divi creând module care sunt 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 și 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. De asemenea, am dezactivat modulul fără linkul pentru telefoane, astfel încât utilizatorii de telefoane vor vedea modulul doar cu linkul.

Adăugarea codului la antet sau subsol

Puteți adăuga codul la antet sau subsol folosind editorul de teme. Utilizați întotdeauna o temă copil sau codul PHP va fi suprascris când actualizați tema. Acest lucru va necesita unele stiluri CSS pentru a arăta bine.

În tabloul de bord, accesați Aspect> Editor> Antet temă (sau subsol temă ). Plasați codul în porțiunea <body> a codului. Am căutat o etichetă de final </a>, am dat clic pe Enter pentru a adăuga câteva rânduri suplimentare și am lipit în codul meu. Puteți vedea codul aici la 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 se poate rezolva prin adăugarea de culoare și spațiu de margine, astfel încât acestea să se deosebească unul de celălalt. Desigur, acest lucru se face în CSS.

Stilul link-urilor

Va trebui să adăugați cod în câmpul CSS suplimentar din Customizer.

Codul dvs. ar putea arăta astfel:

a[href^="tel:"] {
color: brown;
text-decoration: none;
margin-right: 0.em;
}
a[href^="mailto:"] {
color: orange;
text-decoration: none;
margin-right: 0.8em;
}

Acest lucru îi spune CSS cum să stilizeze textul pentru tel: și mailto :. Schimbă fontul numărului de telefon în maro, fontul e-mailului portocaliu și adaugă o mică marjă la dreapta fiecărui link.

CSS funcționează oriunde codul este inclus în widgeturi, postări etc. Puteți folosi chiar și pictograme în loc de text.

Adăugarea codului la meniul secundar Divi

Divi vă poate include numărul de telefon și adresa de e-mail în meniul secundar de deasupra antetului. Butonul de e-mail este deja clicabil în mod prestabilit, 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.

Accesați Personalizatorul temei > Antet și navigare > Elemente antet . Acest lucru vă va oferi o casetă text în care puteți adăuga numărul dvs. de telefon. Din fericire, nu vă limitați doar la numere. De asemenea, puteți adăuga HTML. Am adăugat codul HTML din exemplele anterioare. De asemenea, am mărit dimensiunea fontului numărului de telefon pentru a face mai ușor de văzut imaginile.

Puteți face evident că se poate da clic pe acesta adăugând un mesaj la partea vizuală a linkului. Puteți înlocui numărul cu mesajul sau puteți adăuga mesajul la sfârșitul numărului. Ar putea arăta astfel:

<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>

Acest exemplu arată doar textul.

În acesta, am adăugat numărul de telefon împreună cu textul.

Testare pe mobil

Vă recomand să testați legăturile cu dispozitive 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 Inspectați . În colțul din stânga sus al ecranului, veți vedea o listă de dispozitive. Selectați-l pe unul pentru a vedea cum arată site-ul dvs. web pe ecranul respectiv. Dacă faceți clic pe linkul numărului de telefon HTML, trebuie să deschideți o casetă de dialog care vă solicită să alegeți o aplicație. Dacă vedeți acest lucru, linkul funcționează. Încă vă recomand să îl încercați pe un smartphone propriu-zis, dar acesta este un bun indiciu că legătura face ceva.

Adăugarea de legături de apel cu pluginuri

De asemenea, puteți adăuga un link de apel la antetul dvs. cu un plugin. Acestea includ de obicei caracteristici pentru stil, adăugarea mai multor apeluri la acțiune și posibilitatea de a fi activat sau dezactivat î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.

Buton Sunați acum

Butonul Call Now adaugă un buton click-to-call în partea de jos a ecranului pentru vizitatorii dvs. de pe mobil. 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 la ce servește. Tot ce trebuie să faceți este să activați butonul și să introduceți numărul de telefon. Puteți modifica comportamentul implicit în setările avansate.

Mai multe informatii

Butoane laterale lipicioase

Acest plugin vă permite să adăugați butoane care se lipesc pe partea laterală a site-ului dvs. web și să rămână pe ecran când utilizatorul derulează. Puteți adăuga un număr de telefon pe care se poate face clic, o adresă de e-mail, pictogramele de pe rețelele sociale și locațiile magazinului. Setați-le în dreapta sau în stânga, alegeți stiluri de animație și rollover, personalizați culorile și alegeți unde se afișează.

Mai multe informatii

Bara de contact rapid

Acesta adaugă o bară de contact care include linkuri care pot fi făcute clic pentru un număr de telefon, un număr de fax, un titlu, o adresă, un e-mail, rețelele sociale și adrese URL personalizate. Setați bara în partea de sus sau de jos și ajustați dimensiunea, culoarea, culoarea textului și a linkurilor ș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 informatii

Bara de contact mobilă

Acest plugin adaugă linkuri către site-ul dvs. web atunci când este vizualizat pe dispozitive mobile. Puteți alege ce linkuri sunt afișate din 13 opțiuni, inclusiv telefon, e-mail, Skype, adrese URL personalizate și rețele sociale. Are integrare FontAwesome pentru icoane. Puteți stiliza linkurile și puteți alege dimensiunea, chenarul, opacitatea etc. Setați meniul în partea de sus sau de jos a ecranului. Meniul rămâne pe ecran atunci când utilizatorul derulează. De asemenea, include derulare până sus și coș WooCommerce cu butoane de numărare a articolelor.

Mai multe informatii

Gânduri finale

Popularitatea smartphone-urilor de a accesa site-urile web crește în fiecare zi. Această popularitate face ca legăturile de apel să devină o simplă comoditate la o necesitate completă. Adăugarea de numere de telefon pe care se poate face clic poate face diferența între utilizatorii care vă apelează afacerea sau concurenții. Din fericire, nu este atât de dificil să creați linkuri care pot fi făcute clic pentru a adăuga numere de telefon HTML la antetele, subsolurile, widgeturile, paginile și postările site-ului dvs. WordPress.

Vrem sa auzim de la tine. Ați adăugat un link către un site web? Spuneți-ne despre experiența dvs. în comentariile de mai jos.

Imagine prezentată prin Jane Kelly / shutterstock.com