veel zakelijke websites tonen een telefoonnummer zodat hun klanten contact met hen kunnen opnemen. Wanneer desktops waren de meest populaire manier om toegang te krijgen tot de sites, gebruikers zou notitie maken van het telefoonnummer en bellen vanaf een apart apparaat. Natuurlijk, de meeste gebruikers nu toegang tot de website en maak het telefoontje vanaf hetzelfde apparaat. Dit opent een mogelijkheid om een call link toe te voegen – het creëren van een HTML-telefoonnummer dat is aanklikbaar.,
in dit artikel zullen we een kijkje nemen op het toevoegen van een aanroep link evenals een paar andere klikbare links zoals e-mail en andere CTA ‘ s.
abonneren op ons Youtube-kanaal
hoe Oproepkoppelingen werken
een telefoonnummer aanklikbaar maken is eenvoudig met HTML. HTML5 bevat protocollen zoals tel: en mailto: die browsers kunnen gebruiken. Browsers reageren anders op deze protocollen. Sommigen zullen de telefoon-app te starten en het nummer toe te voegen aan het display tijdens het wachten op u om te klikken op de Call-knop. Anderen zullen bellen, terwijl anderen zullen vragen of het goed is eerst.,
omdat het HTML is, kunt u de protocollen overal op uw site toevoegen, inclusief de koptekst, voettekst, zijbalken, binnen de inhoud van berichten en pagina ‘ s en binnen widgets.
een HTML-Oproeplink naar uw Website toevoegen
voeg de code als tekst toe aan de locatie die u wilt dat de koppeling verschijnt:
<a href="tel:123-456-7890">123-456-7890</a>
href=tel: maakt de oproeplink aan. Dit vertelt de browser hoe het nummer te gebruiken.
“Tel: 123-456-7890” maakt het HTML-telefoonnummer aan. Het nummer binnen de aanhalingstekens is het nummer dat het zal bellen.,
het nummer binnen de >< tags is het visuele gedeelte en het kan alles zijn wat u wilt, inclusief het telefoonnummer, een regel tekst zoals “Click to Call” of “Call Now”, of elke andere oproep tot actie die u wilt. Het moet beschrijven wat er gaat gebeuren als ze klikken.,
het weergeven van een bericht in plaats van het nummer zou er als volgt uitzien:
<a href="tel:123-456-7890">CLICK TO CALL</a>
uw bezoekers zullen de tekst zien, maar wanneer ze erop klikken, zien ze het kiescherm van hun telefoons met uw nummer klaar om op de belknop te klikken.
een extensie toevoegen
sommige telefoonnummers hebben een extensie. U kunt code toevoegen die een korte pauze zal maken voordat u het uitbreidingsnummer kiest. Het toevoegen van P voor de extensie zal een pauze van één seconde toevoegen., De code zou er zo uit kunnen zien:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Dit kiest het nummer, wacht een seconde, en dan kiest extensie.
u kunt het laten wachten op een kiestoon door w te gebruiken in plaats van p.
landencodes toevoegen
landencodes kunnen worden toegevoegd door a + samen met de code van uw land voor het telefoonnummer op te nemen., Een voorbeeld zou er als volgt uit kunnen zien:
<a href="tel:+1123-456-7890">123-456-7890</a>
Microdata toevoegen voor lokale SEO
een van mijn favoriete gemakken bij het dragen van een smartphone is wanneer ik zoek naar een lokaal bedrijf en het resultaat in Google geeft me een klikbaar telefoonnummer. Ik kan op het nummer klikken om het gesprek te voeren zonder het op te schrijven of te proberen het te onthouden. Deze functie is nu een noodzaak. Gelukkig kunt u het toevoegen aan uw website, zodat Google Uw telefoonnummer in lokale zoekopdrachten kan verstrekken.
Dit wordt gedaan met microdata., Microdata informeert zoekmachines dat de nummers zijn een telefoonnummer, zodat ze worden weergegeven als een klikbare oproep link. U kunt dit maken door de opmaak te verrijken met een paar tags voor lokale zoekopdrachten.
bijvoorbeeld, de code zou er zo uit kunnen zien:
andere oproepen tot actie
met HTML5 bent u niet beperkt tot telefoonnummers. U kunt andere oproepen toevoegen aan actie, zoals e-mail, messaging, fax, enz., HTML5-protocollen omvatten:
- tel: – plaats een telefoongesprek
- mailto: – open een e – mailapp
- callto: Open Skype
- sms: – stuur een sms
- fax: – stuur een fax
al deze protocollen worden op dezelfde manier gebruikt als hierboven. Laten we een paar voorbeelden bekijken.
het toevoegen van de Code aan uw contactpagina
een van de beste plaatsen om een oproep link toe te voegen is binnen uw contactgegevens op uw contact pagina.,
of u nu de klassieke Editor of de nieuwe Gutenberg editor gebruikt, u moet de tekstversie van de pagina bekijken. Klik in de klassieke editor op het tabblad Tekst. In Gutenberg, klik op de drie punten in de rechterbovenhoek en selecteer Code Editor.
voeg de code toe in plaats van uw telefoonnummer.
verlaat de codebewerker of bekijk een voorbeeld van de pagina en u zult zien dat uw telefoonnummer nu een klikbare link is.,
Code aanmaken voor een e-mailkoppeling of URL
de HTML-code voor e-mail is mailto: het e-mailadres wordt als volgt toegevoegd:
net als de telefoonkoppeling kunt u het visuele gedeelte gebruiken om een bericht toe te voegen, zoals:
< href="mailto: "; Click here to send me an email</a>
Hier is een voorbeeld van de contactpagina van het Spa layout-pakket. Ik heb een blurb module toegevoegd met een icoon en de tekst stuur een e-mail. Ik heb het tabblad Tekst geselecteerd en de e-mail HTML toegevoegd. De tekst is nu klikbaar en zal uw e-mail app te openen.,
Code toevoegen om URL ‘ s te openen
u kunt de HTML hebben om elke gewenste URL te openen. Dit is goed als u wilt lezers te sturen naar pagina ‘ s voor nieuwsbrief aanmeldingen, evenementen, enz. Om naar hen te linken, zal uw HTML-code de URL bevatten. Bijvoorbeeld:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
Ik heb een andere blurb met code toegevoegd om de events pagina te zien.
Disable on Desktop and Tablet
een probleem met oproeplinks is dat ze niet bruikbaar zijn voor desktops of tablets., U kunt dit oplossen met Divi door modules te maken die specifiek zijn voor elk type apparaat en deze vervolgens uit te schakelen op de andere apparaten.
Hier heb ik twee modules gemaakt met het telefoonnummer: een bevat een HTML-telefoonnummer en de andere niet. Ik heb de module met het klikbare nummer uitgeschakeld op tablets en desktops, zodat ze de link nooit zullen zien. Ik heb ook de module uitgeschakeld zonder de link voor telefoons, zodat telefoongebruikers alleen de module met de link te zien.
de Code toevoegen aan uw kop-of voettekst
u kunt de code toevoegen aan uw kop-of voettekst met behulp van de thema-editor., Gebruik altijd een kind thema of uw PHP-code zal worden overschreven wanneer u het thema bij te werken. Dit vereist een aantal CSS styling om er goed uit te zien.
in uw Dashboard, ga naar Uiterlijk > Editor > Theme Header (of Theme Footer). Plaats de code in het <body> gedeelte van de code. Ik zocht naar een eindlabel </a>, klikte op enter om een paar extra regels toe te voegen, en plakte in mijn code., Je kunt de code hier zien op de lijnen 28 en 29.
Hier is hoe het eruit ziet toen ik de aanroep link en e-mail link binnen de header van het Twenty negentien thema plaatste. Het is er en het werkt, maar het is niet erg mooi. Dit is fixeerbaar door het toevoegen van kleur en marge ruimte, zodat ze uit elkaar staan. Natuurlijk, dit wordt gedaan in CSS.
Styling van de Links
u moet code toevoegen aan het extra CSS-veld in de Customizer.
uw code zou er zo uit kunnen zien:
Dit vertelt de CSS hoe de tekst moet worden opgemaakt voor tel: en mailto:., Het verandert het telefoonnummer lettertype bruin, de e-mail lettertype oranje, en voegt een kleine marge aan de rechterkant van elke link.
de CSS werkt overal waar de code is inclusief in widgets, berichten, enz. U kunt zelfs pictogrammen gebruiken in plaats van tekst.
het toevoegen van de Code aan het secundaire menu van de Divi
Divi kan uw telefoonnummer en e-mail in het secundaire Menu boven de header opnemen. De e-mail knop is al klikbaar standaard, maar het telefoonnummer is niet., Het telefoonnummer kan worden omgezet in een oproep link met behulp van een vergelijkbaar HTML-telefoonnummer dat we hebben gebruikt in eerdere voorbeelden.
Ga naar de Theme Customizer > Header & navigatie > Header elementen. Dit geeft u een tekstvak waar u uw telefoonnummer kunt toevoegen. Gelukkig ben je niet beperkt tot alleen getallen. U kunt ook HTML toevoegen. Ik heb de HTML van de vorige voorbeelden toegevoegd. Ik heb ook de lettergrootte van het telefoonnummer vergroot om het gemakkelijker te maken om de afbeeldingen te zien.,
u kunt duidelijk maken dat het klikbaar is door een bericht toe te voegen aan het visuele gedeelte van de link. U kunt het nummer vervangen door het bericht, of het bericht toevoegen aan het einde van het nummer. Het zou er zo uit kunnen zien:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
dit voorbeeld toont alleen de tekst.
in deze, heb ik het telefoonnummer toegevoegd samen met de tekst.
testen op mobiel
Ik adviseer om de koppelingen met mobiele apparaten te testen om er zeker van te zijn dat het werkt., Als u geen toegang hebt tot een smartphone, kunt u de ontwikkeltools van Google Chrome gebruiken.
Klik met de rechtermuisknop op uw homepage en selecteer inspecteren. In de linkerbovenhoek van uw scherm ziet u een lijst met apparaten. Selecteer degene om te zien hoe uw website eruit ziet op dat scherm. Als u op de link HTML-telefoonnummer klikt, wordt een dialoogvenster geopend waarin u wordt gevraagd een app te kiezen. Als je dit ziet, werkt de link. Ik raad nog steeds proberen het op een echte smartphone, maar dit is een goede indicatie dat de link het iets te doen.,
Aanroepkoppelingen toevoegen met Plugins
u kunt ook een aanroepkoppeling toevoegen aan uw header met een plugin. Ze bevatten meestal functies voor styling, het toevoegen van meerdere oproepen aan actie, en de mogelijkheid om te worden in-of uitgeschakeld op basis van het apparaat van de bezoeker. Ze zijn ook eenvoudig op te zetten en te gebruiken. Dit zijn goede keuzes als je niet wilt omgaan met code. Hier zijn een paar van de beste opties.
Call Now Button
Call Now button voegt een klik-naar-call-knop toe aan de onderkant van het scherm voor uw mobiele bezoekers. Het wordt niet weergegeven op andere apparaten., U kunt ook tekst toevoegen als u wilt. De knop is een telefoonpictogram, dus het is gemakkelijk te begrijpen waar het voor is. Het enige wat je hoeft te doen is het inschakelen van de knop en voer uw telefoonnummer. U kunt het standaardgedrag wijzigen in de geavanceerde instellingen.
meer informatie
Sticky Side Buttons
met deze plugin kunt u knoppen toevoegen die aan de zijkant van uw website plakken en op het scherm blijven wanneer de gebruiker scrollt. U kunt een klikbaar telefoonnummer, e-mailadres, sociale media pictogrammen, en winkel locaties toe te voegen., Stel ze aan de rechterkant of links, Kies animatie en rollover stijlen, pas de kleuren, en kies waar ze laten zien.
meer informatie
Snelheidscontactbalk
deze balk voegt een contactbalk toe met klikbare links voor een telefoonnummer, faxnummer, een kop, adres, e-mail, sociale netwerken en aangepaste URL ‘ s. Stel de balk naar boven of beneden en pas de grootte, kleur, kleur van de tekst en links, en hoe de balk reageert. U kunt ook de grootte aanpassen. u kunt meer inhoud toevoegen met filterhaken.,
meer informatie
mobiele contactbalk
deze plugin voegt links toe aan uw website wanneer deze op mobiele apparaten wordt bekeken. U kunt kiezen welke links worden weergegeven uit 13 opties, waaronder telefoon, e-mail, Skype, aangepaste URL ‘ s en sociale netwerken. Het heeft FontAwesome integratie voor de pictogrammen. U kunt de links stijl en kies de grootte, rand, dekking, enz. Stel het menu aan de boven-of onderkant van het scherm. Het menu blijft op het scherm wanneer de gebruiker scrollt. Het omvat ook scroll naar boven en WooCommerce kar met item teller knoppen.,
meer informatie
laatste gedachten
de populariteit van smartphones voor toegang tot websites neemt elke dag toe. Deze populariteit neemt call links van een eenvoudig gemak om een volledige noodzaak. Het toevoegen van klikbare telefoonnummers kan het verschil maken tussen gebruikers die uw bedrijf of uw concurrenten bellen. Gelukkig is het niet zo moeilijk om klikbare links te maken om HTML-telefoonnummers toe te voegen aan uw headers, voetteksten, widgets, pagina ‘ s en berichten van uw WordPress website.