många företagswebbplatser visar ett telefonnummer så att deras kunder kan kontakta dem. När stationära datorer var det mest populära sättet att komma åt webbplatser, skulle användarna notera telefonnumret och ringa från en separat enhet. Naturligtvis har de flesta användare nu tillgång till webbplatsen och ringa samtalet från samma enhet. Detta öppnar en möjlighet att lägga till en samtalslänk-skapa ett HTML-telefonnummer som kan klickas.,
i den här artikeln tar vi en titt på hur du lägger till en samtalslänk samt några andra klickbara länkar som e-post och andra CTA.
prenumerera på vår Youtube-kanal
hur Samtalslänkar fungerar
att göra ett telefonnummer klickbart görs enkelt med HTML. HTML5 innehåller protokoll som tel: och mailto: att webbläsare kan använda. Webbläsare svarar annorlunda på dessa protokoll. Vissa kommer att starta appen telefon och lägga till numret på skärmen medan du väntar på att du klickar på samtalsknappen. Andra kommer att ringa, medan andra kommer att fråga om det är okej först.,
eftersom det är HTML kan du lägga till protokollen var som helst på din webbplats, inklusive sidhuvud, sidfot, sidofält, inom innehållet i inlägg och sidor och inom widgets.
lägga till en HTML-Telefonnummerlänk till din webbplats
Lägg till koden som text till den plats du vill att länken ska visas:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: skapar samtalslänken. Detta talar om för webbläsaren hur man använder numret.
Tel: 123-456-7890 ”skapar HTML-telefonnummer. Numret inom citaten är det nummer det kommer att ringa.,
numret i>< taggar är den visuella delen och det kan vara vad du vill att det ska vara inklusive telefonnumret, en textrad som ”Klicka för att ringa ”eller” ring nu”, eller något annat samtal till åtgärd du vill. Det bör vara beskrivande av vad som kommer att hända när de klickar.,
att visa ett meddelande istället för numret skulle se ut så här:
<a href="tel:123-456-7890">CLICK TO CALL</a>
dina besökare kommer att se texten men när de klickar på den ser de uppringningsskärmen på sina telefoner med ditt nummer redo för dem att klicka på samtalsknappen.
lägga till ett tillägg
vissa telefonnummer har ett tillägg. Du kan lägga till kod som skapar en kort paus innan du ringer upp anknytningsnumret. Lägga till P framför förlängningen kommer att lägga till en sekunders paus., Koden kan se ut så här:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
detta ringer numret, väntar en sekund och ringer sedan förlängning.
Du kan få det att vänta på en uppringningston genom att använda w istället för p.
lägga till landskoder
landskoder kan läggas till genom att inkludera A + tillsammans med ditt lands kod före telefonnumret., Ett exempel kan se ut så här:
<a href="tel:+1123-456-7890">123-456-7890</a>
lägga till Microdata för lokal SEO
en av mina favorit bekvämligheter att bära runt en smartphone är när jag söker efter ett lokalt företag och resultatet i Google ger mig ett klickbart telefonnummer. Jag kan klicka på numret för att ringa samtalet utan att behöva skriva ner det eller försöka memorera det. Denna funktion är nu en nödvändighet. Lyckligtvis kan du lägga till den på din webbplats så att Google kan ge ditt telefonnummer i lokala sökningar.
detta görs med microdata., Microdata informerar sökmotorer att siffrorna är ett telefonnummer så att de visas som en klickbar samtalslänk. Du kan skapa detta genom att berika markeringen med några taggar för lokala sökningar.
koden kan till exempel se ut så här:
andra samtal till handling
med HTML5 är du inte begränsad till telefonnummer. Du kan lägga till andra samtal till åtgärder som e-post, meddelanden, fax, etc., HTML5 protokoll inkluderar:
- tel: – placera ett telefonsamtal
- mailto: – öppna en e – post app
- callto: öppna Skype
- sms: – skicka ett textmeddelande
- fax: – skicka ett fax
alla dessa protokoll används på samma sätt som vi såg ovan. Låt oss titta på några exempel.
lägga till koden till din kontaktsida
en av de bästa ställena att lägga till en samtalslänk är inom din kontaktinformation på din kontakt oss sida.,
oavsett om du använder den klassiska redigeraren eller den nya Gutenberg-redigeraren måste du visa textversionen av sidan. Klicka på fliken Text i den klassiska redigeraren. I Gutenberg klickar du på de tre punkterna längst upp till höger och väljer kodredigerare.
Lägg till koden i stället för ditt telefonnummer.
avsluta kodredigeraren eller förhandsgranska sidan och du ser att ditt telefonnummer nu är en klickbar länk.,
skapa kod för en e-postlänk eller URL
HTML-koden för e-post är mailto: e-postadressen läggs till i slutet, så här:
precis som telefonlänken kan du använda den visuella delen för att lägga till ett meddelande, till exempel:
< href="mailto: "; Click here to send me an email</a>
här är ett exempel från Spa layout pack kontaktsida. Jag har lagt till en blurb-modul med en ikon och texten skickar ett mail. Jag valde fliken Text och lade till e-HTML. Texten är nu klickbar och öppnar din e-postapp.,
lägga till kod för att öppna webbadresser
Du kan ha HTML för att öppna vilken webbadress du vill. Detta är bra om du vill skicka läsare till sidor för nyhetsbrev registreringar, händelser, etc. För att länka till dem kommer din HTML-kod att innehålla webbadressen. Till exempel:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
Jag har lagt till en annan blurb med kod för att se händelsesidan.
Inaktivera på skrivbordet och surfplattan
ett problem med samtalslänkar är att de inte är användbara för Stationära datorer eller surfplattor., Du kan lösa detta med Divi genom att skapa moduler som är specifika för varje typ av enhet och sedan inaktivera dem på de andra enheterna.
Här har jag skapat två moduler med telefonnumret: ett innehåller ett HTML-telefonnummer och det andra gör det inte. jag har inaktiverat det med klickbart nummer på tabletter och stationära datorer, så de kommer aldrig att se länken. Jag har också inaktiverat modulen utan länken för telefoner, så telefonanvändare ser bara modulen med länken.
lägga till koden i sidhuvudet eller sidfoten
Du kan lägga till koden i sidhuvudet eller sidfoten med hjälp av temaredigeraren., Använd alltid ett barntema eller din PHP-kod skrivs över när du uppdaterar temat. Detta kommer att kräva vissa CSS styling att se bra ut.
i instrumentpanelen, gå till utseende> Editor> tema Header (eller tema sidfot). Placera koden i <body> – delen av koden. Jag letade efter en sluttagg </a>, klickade enter för att lägga till några extra linjer och klistras in i min kod., Du kan se koden här på raderna 28 och 29.
Så här ser det ut när jag placerade samtalslänken och e-postlänken i huvudet på det tjugo nitton temat. Det är där och det fungerar, men det är inte så vackert. Detta kan fixas genom att lägga till färg och marginalutrymme så att de kommer att stå ifrån varandra. Naturligtvis görs detta i CSS.
Styling länkarna
Du måste lägga till kod i det extra CSS-fältet i Customizer.
din kod kan se ut så här:
detta talar om för CSS hur man formaterar texten för tel: och mailto:., Det ändrar telefonnumret teckensnitt till brun, e-teckensnitt orange, och lägger till en liten marginal till höger om varje länk.
CSS fungerar varhelst koden ingår i widgets, inlägg, etc. Du kan även använda ikoner istället för text.
lägga till koden i den sekundära menyn för Divi
Divi kan inkludera ditt telefonnummer och e-post i den sekundära menyn ovanför rubriken. E-postknappen är redan klickbar som standard, men telefonnumret är inte., Telefonnumret kan omvandlas till en samtalslänk genom att använda ett liknande HTML-telefonnummer som vi har använt i tidigare exempel.
gå till temat Customizer> Header& navigering> Header element. Detta ger dig en textruta där du kan lägga till ditt telefonnummer. Lyckligtvis är du inte begränsad till bara siffror. Du kan också lägga till HTML. Jag har lagt till HTML från tidigare exempel. Jag ökade också telefonnummerets teckenstorlek för att göra det lättare att se för bilderna.,
Du kan göra det uppenbart att det är klickbart genom att lägga till ett meddelande till den visuella delen av länken. Du kan ersätta numret med meddelandet eller lägga till meddelandet i slutet av numret. Det kan se ut så här:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
det här exemplet visar bara texten.
i den här har jag lagt till telefonnumret tillsammans med texten.
testa på mobilen
Jag rekommenderar att du testar länkarna med mobila enheter för att se till att det fungerar., Om du inte har tillgång till en smartphone kan du använda Google Chromes utvecklingsverktyg.
högerklicka på din hemsida och välj Inspektera. Längst upp till vänster på skärmen visas en lista över enheter. Välj den för att se hur din webbplats ser ut på den skärmen. Om du klickar på länken HTML-telefonnummer ska du öppna en dialogruta där du uppmanas att välja en app. Om du ser detta fungerar länken. Jag rekommenderar fortfarande att du försöker på en verklig smartphone, men det här är en bra indikation på att länken gör något.,
lägga till Samtalslänkar med Plugins
Du kan också lägga till en samtalslänk i ditt huvud med en plugin. De innehåller vanligtvis funktioner för styling, lägga till flera samtal till handling, och möjligheten att slås på eller av baserat på enheten för besökaren. De är också lätta att ställa in och använda. Dessa är bra val om du inte vill hantera kod. Här är några av de bästa alternativen.
Ring nu knappen
Ring nu knappen lägger till en klick-till-samtal knappen längst ned på skärmen för dina mobila besökare. Det visas inte på andra enheter., Du kan också lägga till text om du vill. Knappen är en telefonikon så det är lätt att förstå vad det är för. Allt du behöver göra är att aktivera knappen och ange ditt telefonnummer. Du kan ändra standardbeteendet i avancerade inställningar.
Mer Information
klibbiga sidoknappar
denna plugin låter dig lägga till knappar som håller fast vid sidan av din webbplats och förblir på skärmen när användaren rullar. Du kan lägga till ett klickbart telefonnummer, e-postadress, sociala medier ikoner, och lagra platser., Ställ in dem till höger eller vänster, välj animering och rollover stilar, anpassa färgerna och välj var de visar.
Mer Information
Speed Contact Bar
den här lägger till en kontaktfält som innehåller klickbara länkar för ett telefonnummer, faxnummer, en rubrik, adress, e-post, sociala nätverk och anpassade webbadresser. Ställ in fältet till toppen eller botten och justera storleken, färgen, färgen på texten och länkarna och hur baren reagerar. Du kan också justera storleken. du kan lägga till mer innehåll med hjälp av filterkrokar.,
Mer Information
mobil kontakt Bar
denna plugin lägger till länkar till din webbplats när den visas på mobila enheter. Du kan välja vilka länkar som visas från 13 alternativ, inklusive telefon, e-post, Skype, anpassade webbadresser och sociala nätverk. Den har FontAwesome integration för ikonerna. Du kan styla länkarna och välja storlek, kant, opacitet, etc. Ställ in menyn högst upp eller längst ner på skärmen. Menyn finns kvar på skärmen när användaren rullar. Den innehåller också bläddra till toppen och WooCommerce vagn med objekt räknare knappar.,
Mer Information
slutliga tankar
populariteten för smartphones att komma åt webbplatser ökar varje dag. Denna popularitet tar samtalslänkar från att vara en enkel bekvämlighet till en fullständig nödvändighet. Lägga klickbara telefonnummer kan göra skillnaden mellan användare ringer ditt företag eller dina konkurrenter. Lyckligtvis är det inte så svårt att skapa klickbara länkar för att lägga till HTML-telefonnummer till dina rubriker, sidfot, widgets, sidor och inlägg på din WordPress-webbplats.