Monet yritysten sivustot näyttää puhelinnumeron, jotta niiden asiakkaat voivat ottaa heihin yhteyttä. Kun työasemat olivat suosituin tapa käyttää sivustoja, käyttäjien tulisi huomata, puhelinnumeron ja soittaa erillinen laite. Tietenkin, useimmat käyttäjät nyt käyttää verkkosivuilla, ja soittaa samasta laitteesta. Tämä avaa mahdollisuuden lisätä puhelulinkin-luomalla HTML-puhelinnumeron, joka on klikkattavissa.,
tässä artikkelissa, me katsomaan miten lisätä puhelun linkki sekä muutamia muita linkkejä, kuten sähköposti ja muut CTAs.
Tilata Meidän Youtube-Kanava
Miten Soittaa Linkit Toimi
Making klikattava puhelinnumero on helppo tehdä HTML. HTML5 sisältää protokollat, kuten tel: ja mailto: että selaimet voivat käyttää. Selaimet reagoivat eri tavoin näihin protokolliin. Jotkut käynnistävät puhelimen sovelluksen ja lisäävät numeron näyttöön odottaessaan, että klikkaat puhelunappia. Toiset soittavat puhelun, kun taas toiset kysyvät, onko se ok ensin.,
Koska se on HTML, voit lisätä pöytäkirjat tahansa sivuston, mukaan lukien header, footer, sidebars, sisällä sisältöä virkaa ja sivut, ja sisällä widgetit.
Lisäämällä HTML-puhelinnumero Soittaa Linkki sivustoosi
Lisää koodi tekstinä sijainti et halua näyttää linkkiä:
<a href="tel:123-456-7890">123-456-7890</a>
Href=puh: luo puhelun linkki. Tämä kertoo selaimelle, miten numeroa käytetään.
”Tel: 123-456-7890 ”luo HTML-puhelinnumeron. Lainausten sisällä oleva numero on numero, jota se soittaa.,
numero sisällä >< tunnisteet on visuaalinen osa, ja se voi olla mitä tahansa haluat sen olevan myös puhelinnumero, rivi tekstiä, kuten ”Klikkaa ja Soita” tai ”Soita Nyt”, tai muita call to action haluat. Sen pitäisi kuvailla, mitä tapahtuu, kun ne klikkaavat.,
Näyttämällä viestin numero näyttäisi tältä:
<a href="tel:123-456-7890">CLICK TO CALL</a>
kävijät näkevät tekstiä, mutta kun he klikkaa sitä, he näkevät numerot ruudulla heidän puhelimissa numero valmiina napsauttamalla soita-painiketta.
lisäosan lisääminen
joillakin puhelinnumeroilla on jatke. Voit lisätä koodin, joka luo lyhyen tauon ennen kuin valitset laajennusnumeron. Lisäämällä P edessä laajennus lisää yhden sekunnin tauko., Koodi voisi näyttää tältä:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Tämä valitsee numeron, odota hetki, ja sitten soittaa laajennus.
Voit olla se odottaa valintaääntä käyttämällä w: n sijasta s.
Lisäämällä Maa-Koodit
Maa-koodit voidaan lisätä ottamalla mukaan + yhdessä teidän maan koodi ennen puhelinnumeroa., Esimerkki voisi näyttää tältä:
<a href="tel:+1123-456-7890">123-456-7890</a>
Lisäämällä mikrotietoa Paikallinen SEO
Yksi suosikkini varusteluun kuljettaa noin älypuhelin on, kun etsin paikallista liiketoimintaa ja tulosta Google antaa minulle klikattava puhelinnumero. Voin klikata numero soittaa puhelun ilman kirjoittaa sen ylös tai yrittää muistaa sen. Tämä ominaisuus on nyt välttämättömyys. Onneksi voit lisätä sen sivustoosi, jotta Google voi antaa puhelinnumerosi paikallisissa Hauissa.
Tämä tehdään microdatalla., Mikrotiedot ilmoittaa hakukoneille, että numerot ovat puhelinnumero, jotta ne näkyvät klikattava linkki. Voit luoda tämän rikastamalla merkintää muutamalla tägillä paikallisiin hakuihin.
esimerkiksi, koodi voisi näyttää tältä:
Muut Puhelut Toimia
HTML5, et ole rajoitettu puhelinnumeroita. Voit lisätä muita puheluita toimintaan, kuten sähköposti, viestit, faksi jne., HTML5 protokollia ovat:
- puh: – asettaa puhelun
- mailto: – avaa sähköposti-sovellus
- callto: avaa Skype
- sms: – lähetä tekstiviesti
- fax: – lähettää faksin
Kaikki nämä protokollat ovat käytössä samalla tavalla kuin me näimme edellä. Katsotaanpa muutamia esimerkkejä.
Lisäämällä Koodin Yhteystiedot-Sivu
Yksi parhaita paikkoja lisätä puhelun linkki on omassa yhteystiedot ota Yhteyttä sivun.,
Olitpa käyttää Klassinen editor tai uusi Gutenberg-editori, sinun täytyy tarkastella Teksti-version sivusta. Klassisessa muokkaimessa Napsauta Teksti-välilehteä. Napsauta gutenbergissä yläoikealla olevia kolmea pistettä ja valitse koodieditori.
Lisää koodi sijasta puhelinnumerosi.
Poistu Code editor tai Esikatsella sivun ja näet, että puhelinnumerosi on nyt klikattava linkki.,
Luo Koodi Sähköpostitse Linkin tai URL-osoite
HTML email on mailto: sähköpostiosoite on lisätty loppuun, kuten tämä:
Aivan kuten puhelin-linkki, voit käyttää visuaalinen osa, jonka haluat lisätä viestin, kuten:
< href="mailto: "; Click here to send me an email</a>
Tässä on esimerkki Spa layout pack on yhteyttä sivun. Olen lisännyt blurb moduuli kuvake ja teksti lähettää sähköpostia. Valitsin tekstin välilehden ja lisäsin sähköpostin HTML. Teksti on nyt klikattava ja avaa sähköpostisovelluksesi.,
koodin lisääminen avoimiin URL-osoitteisiin
HTML: llä voi avata minkä tahansa URL-osoitteen. Tämä on hyvä, jos haluat lähettää lukijat sivuille uutiskirjeen ilmoittautumisia, tapahtumia, jne. Jotta linkki niihin, HTML-koodi sisältää URL. Esimerkiksi:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
olen lisännyt toisen blurb-koodilla nähdä tapahtumia-sivulla.
poista Desktop ja Tablet
Yksi ongelma call linkkejä, he eivät ole hyödyllisiä, pöytätietokoneiden tai tablettien., Voit ratkaista tämän Divi luomalla moduulit, jotka ovat erityisiä kunkin laitteen, ja sitten poistamalla ne muissa laitteissa.
Tässä, olen luonut kaksi moduulia puhelinnumero: yksi sisältää HTML-puhelinnumero ja muut ei. Olen purkanut yhden kanssa klikattava numero, tabletit ja työpöytiä, joten he eivät koskaan katso linkki. Olen myös poistanut moduulin käytöstä ilman puhelinten linkkiä, joten puhelimen käyttäjät näkevät moduulin vain linkin avulla.
Lisäämällä Koodin Ylä-tai Alatunnisteen
Voit lisätä koodin ylä-tai alatunnisteen käyttäminen teema editori., Käytä aina lapsi-teemaa tai PHP-koodi korvataan, kun päivität teeman. Tämä edellyttää joitakin CSS muotoilu näyttää hyvältä.
Kojelautaan, mene Ulkoasu > Toimittaja > Teema Header (tai Teeman Footer). Paikka koodiin <kehon> osa koodia. Etsin päättyy tag </a>, napsautetaan enter lisätä muutama ylimääräinen linjat, ja liittää minun koodi., Koodin näet linjoista 28 ja 29.
Tässä on, mitä se näyttää, kun soitin linkkiä ja sähköpostilinkkiä sisällä otsikon Yhdeksäntoista Kaksikymmentä teema. Se on siellä ja toimii, mutta se ei ole kovin kaunis. Tämä on korjattavissa lisäämällä väri ja marginaali tilaa, jotta ne erottuvat toisistaan. Tämä tehdään tietenkin CSS: ssä.
Styling Linkit
Sinun täytyy lisätä koodin Ylimääräisiä CSS-kentän Customizer.
koodi voisi näyttää tältä:
Tämä kertoo CSS miten tyyli tekstin tel: ja mailto:., Se muuttaa puhelinnumeron fontin ruskeaksi, sähköpostin fontin oranssiksi ja lisää pienen marginaalin jokaisen linkin oikealle puolelle.
CSS-toimii missä tahansa, missä koodi on myös sisällä widgetit, viestit, jne. Voit jopa käyttää kuvakkeita tekstin sijaan.
koodin lisääminen Divi Secondary-valikkoon
Divi voi sisällyttää puhelinnumerosi ja sähköpostisi otsikon yläpuolella olevaan toissijaiseen valikkoon. Sähköpostinappula on jo oletusarvoisesti klikkailtavissa, mutta puhelinnumero ei., Puhelinnumeron voi muuttaa puhelulinkiksi käyttämällä vastaavaa HTML – puhelinnumeroa, jota olemme käyttäneet aiemmissa esimerkeissä.
Mene Teema Customizer > Otsikko & Navigointi > Header-Elementtejä. Tämä antaa sinulle tekstilaatikon, jossa voit lisätä puhelinnumerosi. Onneksi et rajoitu pelkkiin numeroihin. Voit myös lisätä HTML. Olen lisännyt HTML aiemmista esimerkeistä. Lisäsin myös puhelinnumeron fonttikokoa, jotta kuvien näkeminen olisi helpompaa.,
Voit tehdä selvää, että se on klikattava lisäämällä viestin visuaalinen osa linkkiä. Voit korvata numeron viestillä tai lisätä viestin numeron loppuun. Se voisi näyttää tältä:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Tämä esimerkki vain osoittaa tekstiä.
tässä yksi, olen lisännyt numeron, tekstin mukana.
testaus mobiililaitteilla
suosittelen linkkien testaamista mobiililaitteisiin sen toimivuuden varmistamiseksi., Jos sinulla ei ole pääsyä älypuhelimeen, voit käyttää Google Chromen kehittäjän työkaluja.
Oikea-klikkaa etusivulle ja valitse Tarkasta. Näytön vasemmassa yläkulmassa näet listan laitteista. Valitse yksi nähdäksesi, miltä sivustosi näyttää kyseisellä näytöllä. Klikkaamalla HTML – puhelinnumerolinkkiä pitäisi avata valintaikkuna, jossa pyydetään valitsemaan sovellus. Jos näet tämän, linkki toimii. Suosittelen silti yrittää se todellinen älypuhelin, mutta tämä on hyvä osoitus siitä, että linkki se tekee jotain.,
Lisäämällä Soittaa Linkkejä Plugins
Voit myös lisätä puhelun linkin otsikon kanssa plugin. Ne sisältävät tyypillisesti ominaisuuksia muotoiluun, lisäämällä useita puheluita toimintaan, ja kyky kytkeä päälle tai pois kävijän laitteen perusteella. Ne on myös helppo asentaa ja käyttää. Nämä ovat hyviä valintoja, jos et halua käsitellä koodia. Tässä muutamia parhaita vaihtoehtoja.
Soita Nyt-Painiketta
Soita Nyt-Painiketta lisää click-to-call-painiketta alareunassa näytön matkapuhelimeen kävijöitä. Se ei näy muilla laitteilla., Voit myös lisätä tekstiä, jos haluat. Painike on puhelimen kuvake, joten on helppo ymmärtää, mitä se on. Sinun tarvitsee vain ottaa painike käyttöön ja syöttää puhelinnumerosi. Voit muuttaa oletuskäyttäytymistä lisäasetuksissa.
Lisätietoja
Tahmea Puolella Painikkeet
Tämä plugin avulla voit lisätä painikkeita, jotka kiinni puolella sivuston ja pysyvät näytössä, kun käyttäjä rullaa. Voit lisätä clickable puhelinnumero, sähköpostiosoite, sosiaalisen median kuvakkeet, ja tallentaa paikoissa., Asettaa ne oikealle tai vasemmalle, valitse animaatio ja rollover tyylejä, muokata värejä, ja valita, missä he ssa.
Lisätietoja
Nopeus Yhteyttä Bar
Tässä yksi lisää ota yhteyttä palkki, joka sisältää linkkejä, puhelinnumero, fax-numero, otsikko, osoite, sähköposti, sosiaaliset verkostot, ja mukautettuja Url-osoitteita. Aseta baarissa ylhäältä tai alhaalta ja säädä kokoa, väriä, väriä, tekstiä ja linkkejä, ja miten palkki reagoi. Kokoa voi myös säätää. voit lisätä sisältöä käyttämällä suodatinkoukkuja.,
Lisätietoja
Mobiili Yhteystiedot Bar
Tämä liitännäinen lisää linkkejä sivustoosi, kun tarkastellaan mobiililaitteissa. Voit valita, mitkä linkit näytetään 13 vaihtoehdosta, mukaan lukien puhelin, sähköposti, Skype, mukautetut URL-osoitteet ja sosiaaliset verkostot. Se on FontAwesome integraatio kuvakkeet. Voit tyylitellä linkkejä ja valita koon, rajan, läpinäkymättömyyden jne. Aseta valikko näytön ylä-tai alaosaan. Valikko jää näytölle käyttäjän vieraillessa. Se sisältää myös vieritys alkuun ja WooCommerce ostoskoriin erä counter painikkeet.,
lisätietoa
lopulliset ajatukset
älypuhelinten suosio verkkosivustojen käyttöön kasvaa päivä päivältä. Tämä suosio vie puhelun linkkejä on yksinkertainen mukavuus täydellinen välttämättömyys. Klikattavien puhelinnumeroiden lisääminen voi tehdä eron käyttäjien, jotka soittavat yrityksellesi tai kilpailijoillesi. Onneksi, se ei ole niin vaikeaa luoda klikattavia linkkejä lisätä HTML puhelinnumeroita otsikot, alatunnisteet, widgetit, sivut, ja viestit WordPress verkkosivuilla.