mange forretnings websebsteder viser et telefonnummer, så deres kunder kan kontakte dem. Når desktops var den mest populære måde at få adgang til sitesebstederne, ville brugerne notere telefonnummeret og ringe fra en separat enhed. Selvfølgelig får de fleste brugere nu adgang til websiteebstedet og foretager telefonopkald fra den samme enhed. Dette åbner en mulighed for at tilføje et opkaldslink – oprette et HTML-telefonnummer, der kan klikkes på.,
i denne artikel vil vi se på, hvordan du tilføjer et opkaldslink samt et par andre klikbare links som e-mail og andre CTA ‘ er.
Abonner på vores Youtube-kanal
hvordan Opkaldslinks fungerer
det er nemt at lave et telefonnummer, der kan klikkes, med HTML. HTML5 indeholder protokoller såsom tel: og mailto: at bro .sere kan bruge. Bro .sere reagerer forskelligt på disse protokoller. Nogle vil starte telefonappen og tilføje nummeret til displayet, mens du venter på, at du klikker på opkaldsknappen. Andre vil foretage opkaldet, mens andre vil spørge, om det er okay først.,da det er HTML, kan du tilføje protokollerne hvor som helst på dit .ebsted, herunder overskrift, sidefod, sidebjælker, inden for indholdet af indlæg og sider og inden for .idgets.
tilføjelse af et HTML-telefonnummer Opkaldslink til dit Websiteebsted
Tilføj koden som tekst til det sted, hvor linket skal vises:
<a href="tel:123-456-7890">123-456-7890</a>
href=tel: opretter opkaldslinket. Dette fortæller bro .seren, hvordan man bruger nummeret.
“Tel: 123-456-7890 “opretter HTML-telefonnummeret. Nummeret inden for citaterne er det nummer, det vil ringe til.,
nummeret inden for >< tags er den visuelle del, og det kan være alt, hvad du vil have det, inklusive telefonnummeret, en tekstlinje som “Klik for at ringe” eller “ring nu” eller enhver anden opfordring til handling, du ønsker. Det skal være beskrivende for, hvad der vil ske, når de klikker.,
visning af en meddelelse i stedet for nummeret vil se sådan ud:
<a href="tel:123-456-7890">CLICK TO CALL</a>
dine besøgende vil se teksten, men når de klikker på den, ser de opkaldsskærmen på deres telefoner med dit nummer klar til at klikke på opkaldsknappen.
tilføjelse af en udvidelse
nogle telefonnumre har en udvidelse. Du kan tilføje kode, der opretter en kort pause, før du ringer til lokalnummeret. Tilføjelse af P foran udvidelsen vil tilføje en sekunders pause., Koden kan se sådan ud:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
dette ringer nummeret, venter et sekund og ringer derefter udvidelse.
Du kan få den til at vente på en klartone ved at bruge w i stedet for p.
tilføjelse af landekoder
landekoder kan tilføjes ved at inkludere a + sammen med dit lands kode før telefonnummeret., Et eksempel kan se sådan ud:
<a href="tel:+1123-456-7890">123-456-7890</a>
tilføjelse af mikrodata til lokal SEO
en af mine foretrukne bekvemmeligheder ved at transportere en smartphone er, når jeg søger efter en lokal virksomhed, og resultatet i Google giver mig et klikbart telefonnummer. Jeg kan klikke på nummeret for at foretage opkaldet uden at skulle skrive det ned eller prøve at huske det. Denne funktion er nu en nødvendighed. Heldigvis kan du tilføje det til dit websiteebsted, så Google kan angive dit telefonnummer i lokale søgninger.
dette gøres med mikrodata., Microdata informerer søgemaskiner om, at numrene er et telefonnummer, så de vises som et klikbart opkaldslink. Du kan oprette dette ved at berige markeringen med et par tags til lokale søgninger.
for eksempel kan koden se sådan ud:
andre opfordringer til handling
med HTML5 er du ikke begrænset til telefonnumre. Du kan tilføje andre opkald til handling, såsom e-mail, messaging, fa.osv., HTML5 – protokoller Inkluderer:
- tel: – anbring et telefonopkald
- mailto: – Åbn en e – mail-app
- callto: åbn Skype
- sms: – send en sms
- fa.: – send en fa.
alle disse protokoller bruges på samme måde som vi så ovenfor. Lad os se på et par eksempler.
tilføjelse af koden til din kontaktside
et af de bedste steder at tilføje et opkaldslink er inden for dine kontaktoplysninger på din kontakt os-side.,
uanset om du bruger den klassiske Editor eller den nye Gutenberg editor, skal du se tekstversionen af siden. Klik på fanen Tekst i den klassiske editor. I Gutenberg skal du klikke på de tre prikker øverst til højre og vælge kodeditor.
Tilføj koden i stedet for dit telefonnummer.
Afslut kodeditoren, eller se en forhåndsvisning af siden, så ser du, at dit telefonnummer nu er et klikbart link.,
Kode for at Skabe en e-Mail-Link eller URL
HTML-kode til e-mail er mailto: Den e-mail-adresse er føjet til slutningen, som dette:
ligesom telefonen link, du kan bruge den visuelle del for at tilføje en besked, så som:
< href="mailto: "; Click here to send me an email</a>
Her er et eksempel fra Spa-layout pack ‘ s kontakt-side. Jeg har tilføjet et blurb-modul med et ikon, og teksten sender en e-mail. Jeg valgte fanen Tekst og tilføjede e-mailen HTML. Teksten kan nu klikkes og åbner din e-mail-app.,
tilføjelse af kode til åbne URL ‘ er
Du kan få HTML til at åbne en hvilken som helst URL, du ønsker. Det er godt, hvis du ønsker at sende læsere til sider til nyhedsbrev tilmeldinger, begivenheder, etc. For at linke til dem vil din HTML-kode indeholde URL ‘ en. For eksempel:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
Jeg har tilføjet en anden bagsidetekst med kode for at se begivenhedssiden.
Deaktiver på Desktop og Tablet
et problem med opkaldslinks er, at de ikke er nyttige til desktops eller tablets., Du kan løse dette med Divi ved at oprette moduler, der er specifikke for hver type enhed, og derefter deaktivere dem på de andre enheder.
Her har jeg oprettet to moduler med telefonnummeret: den ene indeholder et HTML-telefonnummer, og det andet gør det ikke. jeg har deaktiveret det med det klikbare nummer på tablets og desktops, så de vil aldrig se linket. Jeg har også deaktiveret modulet uden linket til telefoner, så telefonbrugere vil kun se modulet med linket.
tilføjelse af koden til din sidehoved eller sidefod
Du kan tilføje koden til din sidehoved eller sidefod ved hjælp af temaeditoren., Brug altid et barn tema eller din PHP kode vil blive overskrevet, når du opdaterer temaet. Dette vil kræve nogle CSS styling til at se godt ud.
i dit betjeningspanel skal du gå til udseende >Editor > Temaheader (eller Temafod). Placer koden i <body> del af koden. Jeg kiggede efter et slutmærke </a>, klikkede på enter for at tilføje et par ekstra linjer og indsatte i min kode., Du kan se koden her på linje 28 og 29.
Her er hvordan det ser ud, da jeg placerede opkaldslinket og e-mail-linket i overskriften på det tyve nitten tema. Det er der, og det virker, men det er ikke særlig smukt. Dette kan rettes ved at tilføje farve og margin plads, så de vil stå adskilt fra hinanden. Selvfølgelig gøres dette i CSS.
Styling af linkene
Du skal tilføje kode til det ekstra CSS-felt i Customi .er.
din kode kan se sådan ud:
dette fortæller CSS, hvordan man styler teksten til tel: og mailto:., Det ændrer telefonnummeret skrifttype til brun, e-mail skrifttype orange, og tilføjer en lille margin til højre for hvert link.
CSS fungerer uanset hvor koden er inkluderet i withinidgets, indlæg osv. Du kan endda bruge ikoner i stedet for tekst.
tilføjelse af koden til Divi sekundære Menu
Divi kan inkludere dit telefonnummer og e-mail i den sekundære Menu over overskriften. E-mail-knappen kan allerede klikkes som standard, men telefonnummeret er det ikke., Telefonnummeret kan omdannes til et opkaldslink ved hjælp af et lignende HTML-telefonnummer, som vi har brugt i tidligere eksempler.
gå til temaet Customi .er >Header &Navigation > Header elementer. Dette giver dig en tekstboks, hvor du kan tilføje dit telefonnummer. Heldigvis er du ikke begrænset til kun tal. Du kan også tilføje HTML. Jeg har tilføjet HTML fra de tidligere eksempler. Jeg har også øget telefonnummerets skriftstørrelse for at gøre det lettere at se for billederne.,
Du kan gøre det klart, at det kan klikkes ved at tilføje en meddelelse til den visuelle del af linket. Du kan erstatte nummeret med meddelelsen eller tilføje beskeden til slutningen af nummeret. Det kan se sådan ud:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
dette eksempel viser kun teksten.
i denne har jeg tilføjet telefonnummeret sammen med teksten.
test på mobil
Jeg anbefaler at teste linkene med mobile enheder for at sikre, at det fungerer., Hvis du ikke har adgang til en smartphone, kan du bruge Google Chromes udviklingsværktøjer.
Højreklik på din hjemmeside og vælg Undersøg. I øverste venstre hjørne af skærmen ser du en liste over enheder. Vælg den for at se, hvordan dit websiteebsted ser ud på den skærm. Hvis du klikker på linket HTML-telefonnummer, skal du åbne en dialogboks, der beder dig om at vælge en app. Hvis du ser dette, fungerer linket. Jeg anbefaler stadig at prøve det på en faktisk smartphone, men det er en god indikation af, at linket det gør noget.,
tilføjelse af Opkaldslinks med Plugins
Du kan også tilføje et opkaldslink til din overskrift med et plugin. De omfatter typisk funktioner til styling, tilføje flere opkald til handling, og evnen til at være tændt eller slukket baseret på enheden af den besøgende. De er også nemme at sætte op og bruge. Disse er store valg, hvis du ikke ønsker at håndtere kode. Her er et par af de bedste muligheder.
opkaldsknap
opkaldsknap tilføjer en klik-til-opkaldsknap til bunden af skærmen for dine mobile besøgende. Det vises ikke på andre enheder., Du kan også tilføje tekst, hvis du vil. Knappen er et telefonikon, så det er let at forstå, hvad det er til. Alt hvad du skal gøre er at aktivere knappen og indtaste dit telefonnummer. Du kan ændre standardadfærden i de avancerede indstillinger.
flere oplysninger
klistrede sideknapper
dette plugin giver dig mulighed for at tilføje knapper, der klæber til siden af dit websiteebsted og forbliver på skærmen, når brugeren ruller. Du kan tilføje et klikbart telefonnummer, e-mail-adresse, ikoner på sociale medier og gemme placeringer., Sæt dem til højre eller venstre, Vælg animations-og rollover-stilarter, tilpas farverne og vælg, hvor de vises.
få Flere Oplysninger
Speed Kontakt Bar
man tilføjer en kontakt bar, der indeholder klikbare links til et telefonnummer, fax-nummer, en overskrift, adresse, e-mail, sociale netværk, og tilpassede Webadresser. Indstil linjen til toppen eller bunden, og juster størrelsen, farven, farven på teksten og linkene, og hvordan linjen reagerer. Du kan også justere størrelsen. du kan tilføje mere indhold ved hjælp af filterkroge.,
flere oplysninger
mobil kontakt Bar
dette plugin tilføjer links til dit websiteebsted, når det ses på mobile enheder. Du kan vælge, hvilke links der vises fra 13 muligheder, herunder Telefon, E-mail, Skype, brugerdefinerede Urebadresser og sociale netværk. Det har fonta .esome integration for ikonerne. Du kan style linkene og vælge størrelse, kant, opacitet osv. Indstil menuen øverst eller nederst på skærmen. Menuen forbliver på skærmen, når brugeren ruller. Det omfatter også rulle til toppen og cartoocommerce vogn med vare tæller knapper.,
mere Information
Endelige tanker
populariteten af smartphones til at få adgang til websebsteder øges hver dag. Denne popularitet tager opkald links fra at være en simpel bekvemmelighed til en komplet nødvendighed. Tilføjelse klikbare telefonnumre kan gøre forskellen mellem brugere kalder din virksomhed eller dine konkurrenter. Heldigvis er det ikke så svært at oprette klikbare links for at tilføje HTML-telefonnumre til dine overskrifter, sidefødder, .idgets, sider og indlæg på dit .ordpress-websiteebsted.