mnoho obchodních webů zobrazuje telefonní číslo, aby je mohli zákazníci kontaktovat. Když byly stolní počítače nejoblíbenějším způsobem přístupu k webům, uživatelé by si všimli telefonního čísla a volali ze samostatného zařízení. Samozřejmě, většina uživatelů nyní přistupuje k webu a telefonuje ze stejného zařízení. Tím se otevře možnost přidat odkaz na volání-vytvoření telefonního čísla HTML, na které lze kliknout.,
v tomto článku se podíváme na to, jak přidat odkaz na volání, stejně jako několik dalších klikatelných odkazů, jako je e-mail a další CTA.
přihlaste se K Odběru Našeho Kanálu Youtube
Jak Volat Odkazy
telefonní číslo klikací, je snadno provést s HTML. HTML5 obsahuje protokoly jako tel: a mailto:, které mohou prohlížeče používat. Prohlížeče reagují na tyto protokoly odlišně. Někteří spustí telefonní aplikaci a přidají číslo na displej, zatímco čekají, až kliknete na tlačítko Volat. Ostatní budou volat, zatímco jiní se zeptají, jestli je to v pořádku jako první.,
protože je to HTML, můžete přidat protokoly kdekoli na vašem webu, včetně záhlaví, zápatí, postranních panelů, v obsahu příspěvků a stránek a v rámci widgetů.
Přidání HTML Telefonní Číslo Zavolat Odkaz na vaše webové Stránky
Přidat kód jako text na místo, které chcete odkaz se objeví:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: vytváří hovor odkaz. To řekne prohlížeči, Jak používat číslo.
„Tel: 123-456-7890“ vytvoří telefonní číslo HTML. Číslo v uvozovkách je číslo, které bude volat.,
v >< značky je vizuální část, a to může být cokoliv chcete, aby to bylo včetně telefonní číslo, řádek textu, jako například „Klikněte na Volání“ nebo „Call Now“, nebo jiné výzva k akci, kterou chcete. Mělo by být popisné, co se stane, když kliknou.,
Zobrazení zprávu, místo čísla by měl vypadat takhle:
<a href="tel:123-456-7890">CLICK TO CALL</a>
Vaše návštěvníci uvidí text, ale když na něj kliknete vidí vytáčení obrazovce svých telefonů s číslem připravená na to, aby klikněte na tlačítko volání.
přidání rozšíření
některá telefonní čísla mají příponu. Můžete přidat kód, který vytvoří krátkou pauzu před vytočením čísla rozšíření. Přidání P Před příponou přidá jednu sekundu pauzy., Kód může vypadat takto:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
toto vytočí číslo, čeká jednu sekundu a pak vytočí rozšíření.
můžete mít čekat na oznamovací tón pomocí w místo p.
Přidat Kódy Zemí
kódy Zemí mohou být přidány včetně + spolu s vaší země kód před telefonním číslem., Příklad může vypadat takto:
<a href="tel:+1123-456-7890">123-456-7890</a>
Přidání Mikrodat pro Místní SEO
Jeden z mých oblíbených vymoženosti nosit smartphone je, když jsem se hledat pro místní obchodní a výsledek v Google dává mi klikací telefonní číslo. Mohu kliknout na číslo, aby se hovor, aniž by museli zapsat nebo se pokusit zapamatovat. Tato funkce je nyní nutností. Naštěstí jej můžete přidat na svůj web, aby Google mohl v místních vyhledáváních poskytnout své telefonní číslo.
to se provádí pomocí microdata., Microdata informuje vyhledávače, že čísla jsou telefonní číslo, takže jsou zobrazeny jako klikací odkaz na volání. Můžete to vytvořit obohacením značky o několik značek pro místní vyhledávání.
například kód může vypadat takto:
ostatní volání do akce
s HTML5, nejste omezeni na telefonní čísla. K akci můžete přidat další hovory, jako je e-mail,zasílání zpráv, fax atd., HTML5 protokoly patří:
- tel: – telefonní hovor
- mailto: otevřít e-mail aplikace
- výzvu: otevřít Skype
- sms: – odeslat textovou zprávu
- fax: – fax odeslat
Všechny tyto protokoly jsou používány stejným způsobem, jako jsme viděli výše. Podívejme se na několik příkladů.
Přidání Kódu na kontaktní stránku
jedním z nejlepších míst pro přidání odkazu na volání je vaše kontaktní informace na stránce Kontaktujte nás.,
Ať už používáte Klasický Editor nebo nové Gutenberg editor, musíte zobrazit Textovou verzi stránky. V klasickém editoru klikněte na kartu Text. V Gutenbergu klikněte na tři tečky v pravém horním rohu a vyberte Editor kódu.
přidejte kód místo svého telefonního čísla.
Ukončete Editor Kódu nebo Náhled stránky a uvidíte, že vaše telefonní číslo je nyní klikací odkaz.,
Vytvoření Kódu pro Odkaz E-mailem nebo adresu URL
HTML kód pro e-mail mailto: e-mailová adresa je přidán na konec, jako tohle:
Stejně jako telefon odkaz, můžete použít vizuální část, přidat zprávu, jako například:
< href="mailto: "; Click here to send me an email</a>
Zde je příklad z Lázní rozložení pack kontaktní stránce. Přidal jsem modul blurb s ikonou a text poslat e-mail. Vybral jsem kartu Text a přidal e-mail HTML. Text je nyní klikací a otevře vaši e-mailovou aplikaci.,
Přidání Kódu k otevření adres URL
můžete mít HTML otevřít libovolnou adresu URL, kterou chcete. To je dobré,pokud chcete posílat čtenáře na stránky pro newsletter registrací, události, atd. Chcete-li na ně odkazovat, bude váš HTML kód obsahovat adresu URL. Například:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
přidal jsem další reklama s kódem vidět události stránce.
zakázat na ploše a tabletu
jedním problémem s odkazy na volání je, že nejsou užitečné pro stolní počítače nebo tablety., To můžete vyřešit pomocí Divi vytvořením modulů, které jsou specifické pro každý typ zařízení, a jejich deaktivací na ostatních zařízeních.
Sem, vytvořil jsem dva moduly s telefonním číslem: jeden obsahuje HTML telefonní číslo a druhý ne. Vyřadil jsem jeden s klikací číslo na tablety a desktopy, takže se nikdy vidět odkaz. Také jsem zakázal modul bez odkazu na telefony, takže uživatelé telefonů uvidí modul pouze s odkazem.
Přidání Kódu do záhlaví nebo zápatí
kód můžete přidat do záhlaví nebo zápatí pomocí editoru motivů., Vždy používejte dětské téma nebo váš PHP kód bude přepsán při aktualizaci motivu. To bude vyžadovat nějaký styl CSS, aby vypadal dobře.
V hlavním Panelu, přejděte na Vzhled > Editor > Téma Záhlaví (nebo Téma Zápatí). Umístěte kód do části<body> kódu. Podíval jsem se na konec tag </>, klikl enter přidat několik dalších řádků, a vložit v mém kódu., Kód můžete vidět zde na linkách 28 a 29.
Zde je, jak to vypadá, když jsem volal odkaz a e-mail odkaz v záhlaví Dvacet Devatenáct téma. Je tam a funguje to, ale není to moc hezké. To je opravitelné přidáním barvy a okraje prostoru, takže budou stát od sebe navzájem. To se samozřejmě provádí v CSS.
Styling odkazů
budete muset přidat kód do dalšího pole CSS v Customizeru.
váš kód může vypadat takto:
to říká CSS, jak styl textu pro tel: a mailto:., Změní písmo telefonního čísla na hnědou, oranžové písmo e-mailu a přidá malou rezervu napravo od každého odkazu.
CSS funguje všude tam, kde je Kód včetně widgetů, příspěvků atd. Můžete dokonce použít ikony místo textu.
Přidání Kódu do sekundární nabídky Divi
Divi může obsahovat vaše telefonní číslo a e-mail v sekundární nabídce nad hlavičkou. Tlačítko e-mailu je již ve výchozím nastavení klikatelné, ale telefonní číslo není., Telefonní číslo lze proměnit v Odkaz na volání pomocí podobného telefonního čísla HTML, které jsme použili v předchozích příkladech.
Přejděte na Téma Customizer > Záhlaví & Navigace > Záhlaví Prvky. To vám dá textové pole, kam můžete přidat své telefonní číslo. Naštěstí nejste omezeni pouze na čísla. Můžete také přidat HTML. Přidal jsem HTML z předchozích příkladů. Také jsem zvýšil velikost písma telefonního čísla, aby bylo snazší vidět obrázky.,
můžete si uvědomit, že je možné kliknout přidáním zprávy do vizuální části odkazu. Číslo můžete nahradit zprávou nebo přidat zprávu na konec čísla. Mohlo by to vypadat takto:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Tento příklad zobrazuje pouze text.
v tomto jsem přidal telefonní číslo spolu s textem.
testování na mobilu
doporučuji testovat odkazy s mobilními zařízeními, aby se ujistil, že to funguje., Pokud nemáte přístup k smartphonu, můžete použít nástroje pro vývojáře Google Chrome.
klikněte pravým tlačítkem myši na domovskou stránku a vyberte možnost zkontrolovat. V levém horním rohu obrazovky se zobrazí seznam zařízení. Vyberte ten, který chcete vidět, jak váš web vypadá na této obrazovce. Kliknutím na odkaz na telefonní číslo HTML byste měli otevřít dialogové okno s výzvou k výběru aplikace. Pokud to uvidíte, odkaz funguje. Stále doporučuji vyzkoušet to na skutečném smartphonu, ale to je dobrý náznak, že odkaz to dělá něco.,
přidání odkazů na volání pomocí pluginů
můžete také přidat odkaz na volání do záhlaví pomocí pluginu. Obvykle obsahují funkce pro styling, přidání více hovorů do akce a možnost zapnutí nebo vypnutí na základě zařízení návštěvníka. Jsou také snadno nastavit a používat. To jsou skvělé možnosti, pokud nechcete zpracovávat kód. Zde je několik nejlepších možností.
Call Now Button
Call Now button přidává tlačítko click-to-call do spodní části obrazovky pro mobilní návštěvníky. Nezobrazuje se na jiných zařízeních., Můžete také přidat text, pokud chcete. Tlačítko je ikona telefonu, takže je snadné pochopit, k čemu je. Jediné, co musíte udělat, je povolit tlačítko a zadat své telefonní číslo. Výchozí chování můžete změnit v pokročilém nastavení.
Více Informací
Lepkavé Boční Tlačítka
Tento plugin vám umožní přidat tlačítka, které se lepí na straně vaší webové stránky a zůstat na obrazovce, když uživatel roluje. Můžete přidat klikací telefonní číslo, e-mailovou adresu, ikony sociálních médií a umístění obchodu., Nastavte je vpravo nebo vlevo, vyberte styly animace a převrácení, přizpůsobte barvy a vyberte, kde se zobrazují.
Více Informací
Rychlost Kontaktu Bar
Toto přidá kontakt panel, který obsahuje klikací odkazy, telefonní číslo, faxové číslo, nadpis, adresa, e-mail, sociální sítě a vlastní adresy Url. Nastavte lištu nahoře nebo dole a upravte velikost, barvu, barvu textu a odkazů a způsob, jakým lišta reaguje. Můžete také upravit velikost. další obsah můžete přidat pomocí filtračních háčků.,
Více Informací
Mobilní Kontakt Bar
Tento plugin přidává odkazy na vaše webové stránky při prohlížení na mobilních zařízeních. Můžete si vybrat, které odkazy jsou zobrazeny z 13 možností, včetně telefonu, e-mailu, Skype, vlastních adres URL a sociálních sítí. Má FontAwesome integraci pro ikony. Můžete stylovat odkazy a vybrat velikost,ohraničení, neprůhlednost atd. Nastavte nabídku v horní nebo dolní části obrazovky. Nabídka zůstává na obrazovce, když uživatel posouvá. Obsahuje také přejděte na vrchol a WooCommerce vozík s tlačítky čítače položek.,
Více informací
Závěrečné myšlenky
Popularita smartphonů pro přístup na webové stránky se každým dnem zvyšuje. Tato popularita bere odkazy na volání z jednoduchého pohodlí na úplnou nutnost. Přidání klikatelných telefonních čísel může znamenat rozdíl mezi uživateli, kteří volají vaši firmu nebo konkurenty. Naštěstí není tak obtížné vytvářet klikací odkazy pro přidání telefonních čísel HTML do záhlaví, zápatí, widgetů, stránek a příspěvků na vašem webu WordPress.