Viele Geschäftswebsites zeigen eine Telefonnummer an, damit ihre Kunden sie kontaktieren können. Wenn Desktops die beliebteste Methode für den Zugriff auf die Websites waren, notieren sich Benutzer die Telefonnummer und rufen von einem separaten Gerät aus an. Natürlich greifen die meisten Benutzer jetzt auf die Website zu und tätigen den Anruf von demselben Gerät aus. Dies eröffnet die Möglichkeit, einen Anruflink hinzuzufügen – Erstellen einer anklickbaren HTML-Telefonnummer.,
In diesem Artikel sehen wir uns an, wie Sie einen Anruflink sowie einige andere anklickbare Links wie E-Mail und andere CTAs hinzufügen.
Abonnieren Sie unseren Youtube-Kanal
Wie Anruflinks funktionieren
Eine Telefonnummer anklickbar zu machen, ist einfach mit HTML möglich. HTML5 enthält Protokolle wie tel: und mailto: dass Browser verwenden können. Browser reagieren unterschiedlich auf diese Protokolle. Einige starten die Telefon-App und fügen die Nummer dem Display hinzu, während Sie darauf warten, dass Sie auf die Anruftaste klicken. Andere werden den Anruf tätigen, während andere fragen, ob es zuerst in Ordnung ist.,
Da es HTML ist, können Sie die Protokolle überall auf Ihrer Website hinzufügen, einschließlich der Kopfzeile, Fußzeile, Seitenleisten, innerhalb des Inhalts von Beiträgen und Seiten und innerhalb von Widgets.
Hinzufügen eines HTML-Rufnummernanruflinks zu Ihrer Website
Fügen Sie den Code als Text zu dem Ort hinzu, an dem der Link angezeigt werden soll:
<a href="tel:123-456-7890">123-456-7890</a>
Href=tel: Erstellt den Anruflink. Dies teilt dem Browser mit, wie die Nummer verwendet wird.
„Tel: 123-456-7890“ erstellt die HTML-Telefonnummer. Die Nummer in den Anführungszeichen ist die Nummer, die sie anrufen wird.,
Die Nummer innerhalb der>< Tags ist der visuelle Teil und es kann alles sein, was Sie möchten, einschließlich der Telefonnummer, einer Textzeile wie „Click to Call“ oder „Call Now“ oder einem anderen Aufruf zur Aktion, die Sie möchten. Es sollte beschreibend sein, was passieren wird, wenn Sie klicken.,
Das Anzeigen einer Nachricht anstelle der Nummer sieht folgendermaßen aus:
<a href="tel:123-456-7890">CLICK TO CALL</a>
Ihre Besucher sehen den Text, aber wenn sie darauf klicken, sehen sie den Wählbildschirm ihrer Telefone mit Ihrer Nummer, die bereit ist, auf die Anruftaste zu klicken.
Hinzufügen einer Erweiterung
Einige Telefonnummern haben eine Erweiterung. Sie können Code hinzufügen, der eine kurze Pause erstellt, bevor Sie die Nebenstellennummer wählen. Wenn Sie P vor der Erweiterung hinzufügen, wird eine Pause von einer Sekunde hinzugefügt., Der Code könnte folgendermaßen aussehen:
<a href="tel:123-456-7890p123">CLICK TO CALL</a>
Dies wählt die Nummer, wartet eine Sekunde und wählt dann die Erweiterung.
Sie können es auf einen Wählton warten lassen, indem Sie w anstelle von p.
Hinzufügen von Ländercodes
Ländercodes können hinzugefügt werden, indem ein + zusammen mit dem Code Ihres Landes vor der Telefonnummer eingefügt wird., Ein Beispiel könnte so aussehen:
<a href="tel:+1123-456-7890">123-456-7890</a>
Hinzufügen von Mikrodaten für lokales SEO
Einer meiner Lieblingsvorteile beim Herumtragen eines Smartphones ist, wenn ich nach einem lokalen Unternehmen suche und das Ergebnis in Google mir eine anklickbare Telefonnummer gibt. Ich kann auf die Nummer klicken, um den Anruf zu tätigen, ohne ihn aufschreiben oder auswendig lernen zu müssen. Diese Funktion ist jetzt eine Notwendigkeit. Glücklicherweise können Sie es Ihrer Website hinzufügen, damit Google Ihre Telefonnummer in lokalen Suchanfragen angeben kann.
Dies geschieht mit Mikrodaten., Microdata informiert Suchmaschinen, dass es sich bei den Nummern um eine Telefonnummer handelt, sodass sie als anklickbarer Anruflink angezeigt werden. Sie können dies erstellen, indem Sie das Markup mit einigen Tags für die lokale Suche anreichern.
Der Code könnte beispielsweise folgendermaßen aussehen:
Andere Aktionsaufrufe
Mit HTML5 sind Sie nicht auf Telefonnummern beschränkt. Sie können andere Anrufe zu Aktion wie E-Mail, Messaging, Fax usw. hinzufügen., Diese Protokolle umfassen:
- tel: – Einen Anruf tätigen
- mailto: – Öffnen Sie eine E – Mail-App
- callto: Öffnen Sie Skype
- sms: – Senden Sie eine Textnachricht
- fax: – Senden Sie ein Fax
Alle diese Protokolle werden auf die gleiche Weise verwendet, wie wir oben gesehen haben. Schauen wir uns ein paar Beispiele an.
Hinzufügen des Codes zu Ihrer Kontaktseite
Einer der besten Orte, um einen Anruflink hinzuzufügen, sind Ihre Kontaktinformationen auf Ihrer Kontaktseite.,
Egal, ob Sie den klassischen Editor oder den neuen Gutenberg-Editor verwenden, Sie müssen die Textversion der Seite anzeigen. Klicken Sie im klassischen Editor auf die Registerkarte Text. Klicken Sie in Gutenberg oben rechts auf die drei Punkte und wählen Sie Code Editor.
Fügen Sie den Code anstelle Ihrer Telefonnummer hinzu.
Beenden Sie den Codeeditor oder zeigen Sie eine Vorschau der Seite an, und Sie werden sehen, dass Ihre Telefonnummer jetzt ein anklickbarer Link ist.,
Code für einen E-Mail-Link oder eine URL erstellen
Der HTML-Code für E-Mails lautet mailto: Die E-Mail-Adresse wird am Ende wie folgt hinzugefügt:
Genau wie der Telefonlink können Sie mit dem visuellen Teil eine Nachricht hinzufügen, z. B.:
< href="mailto: "; Click here to send me an email</a>
Hier ist ein Beispiel aus dem Spa-Layout pack ‚ s Kontaktseite. Ich habe ein Blurb-Modul mit einem Symbol und dem Text zum Senden einer E-Mail hinzugefügt. Ich habe die Registerkarte Text ausgewählt und den E-Mail-HTML-Code hinzugefügt. Der Text ist jetzt anklickbar und öffnet Ihre E-Mail-App.,
Hinzufügen von Code zum Öffnen von URLs
Sie können den HTML-Code zum Öffnen einer beliebigen URL verwenden. Dies ist gut, wenn Sie Leser für Newsletter-Anmeldungen, Veranstaltungen usw. auf Seiten senden möchten. Um auf sie zu verlinken, enthält Ihr HTML-Code die URL. Zum Beispiel:
<a href=" http://MySampleSite.com/SamplePage/"> See the sample page>
ich habe ein anderes Klappentext mit code zu sehen, der events-Seite.
Deaktivieren, auf Desktop-und Tablet
Ein problem mit call-verbindungen ist, dass Sie nicht nützlich für desktops oder tablets., Sie können dies mit Divi lösen, indem Sie Module erstellen, die für jeden Gerätetyp spezifisch sind, und sie dann auf den anderen Geräten deaktivieren.
Hier habe ich zwei Module mit der Telefonnummer erstellt: Eines enthält eine HTML-Telefonnummer und das andere nicht. Ich habe das Modul mit der anklickbaren Nummer auf Tablets und Desktops deaktiviert, sodass der Link nie angezeigt wird. Ich habe das Modul auch ohne den Link für Telefone deaktiviert, sodass Telefonbenutzer das Modul nur mit dem Link sehen.
Hinzufügen des Codes zu Ihrer Kopf-oder Fußzeile
Sie können den Code mit dem Themeneditor zu Ihrer Kopf-oder Fußzeile hinzufügen., Verwenden Sie immer ein untergeordnetes Thema oder Ihr PHP-Code wird überschrieben, wenn Sie das Thema aktualisieren. Dies erfordert ein CSS-Styling, um gut auszusehen.
Wechseln Sie in Ihrem Dashboard zu Appearance > Editor > Theme Header (oder Theme Footer). Platzieren Sie den Code im<body> Teil des Codes. Ich habe nach einem End-Tag gesucht </a>, auf enter geklickt, um ein paar zusätzliche Zeilen hinzuzufügen, und in meinen Code eingefügt., Sie können den Code hier in den Zeilen 28 und 29 sehen.
So sieht es aus, als ich den Anruflink und den E-Mail-Link in die Kopfzeile des Twenty Nineteen-Themas eingefügt habe. Es ist da und es funktioniert, aber es ist nicht sehr hübsch. Dies kann behoben werden, indem Farbe und Randraum hinzugefügt werden, damit sie sich voneinander unterscheiden. Dies geschieht natürlich in CSS.
Styling der Links
Sie müssen dem zusätzlichen CSS-Feld im Customizer Code hinzufügen.
Ihr Code könnte folgendermaßen aussehen:
Dies sagt dem CSS, wie der Text für tel: und mailto:., Es ändert die Telefonnummer Schriftart braun, die E-Mail-Schriftart orange, und fügt einen kleinen Rand rechts von jedem Link.
Das CSS funktioniert überall dort, wo der Code in Widgets, Posts usw. enthalten ist. Sie können sogar Symbole anstelle von Text verwenden.
Hinzufügen des Codes zum Divi-Sekundärmenü
Divi kann Ihre Telefonnummer und E-Mail-Adresse in das Sekundärmenü über der Kopfzeile aufnehmen. Die E-Mail-Schaltfläche ist standardmäßig bereits anklickbar, die Telefonnummer jedoch nicht., Die Telefonnummer kann mithilfe einer ähnlichen HTML-Telefonnummer, die wir in früheren Beispielen verwendet haben, in einen Anruflink umgewandelt werden.
Gehe zum Theme Customizer > Header & Navigation > Header Elements. Dadurch erhalten Sie ein Textfeld, in dem Sie Ihre Telefonnummer hinzufügen können. Glücklicherweise sind Sie nicht nur auf Zahlen beschränkt. Sie können auch HTML hinzufügen. Ich habe den HTML-Code aus den vorherigen Beispielen hinzugefügt. Ich habe auch die Schriftgröße der Telefonnummer erhöht, um das Sehen der Bilder zu erleichtern.,
Sie können deutlich machen, dass es anklickbar ist, indem Sie dem visuellen Teil des Links eine Nachricht hinzufügen. Sie können die Nummer durch die Nachricht ersetzen oder die Nachricht am Ende der Nummer hinzufügen. Es könnte wie folgt Aussehen:
<a href="tel:123-456-7890">123-456-7890 CLICK TO CALL</a>
Dieses Beispiel zeigt nur den text an.
In diesem habe ich die Telefonnummer zusammen mit dem Text hinzugefügt.
Testen auf Mobilgeräten
Ich empfehle, die Links mit Mobilgeräten zu testen, um sicherzustellen, dass sie funktionieren., Wenn Sie keinen Zugriff auf ein Smartphone haben, können Sie die Entwicklertools von Google Chrome verwenden.
Klicken Sie mit der rechten Maustaste auf Ihre Homepage und wählen Sie Inspect. In der oberen linken Ecke des Bildschirms sehen Sie eine Liste der Geräte. Wählen Sie die aus, um zu sehen, wie Ihre Website auf diesem Bildschirm aussieht. Wenn Sie auf den Link HTML-Telefonnummer klicken, wird ein Dialogfeld geöffnet, in dem Sie aufgefordert werden, eine App auszuwählen. Wenn Sie dies sehen, funktioniert der Link. Ich empfehle immer noch versuchen, es auf einem tatsächlichen Smartphone, aber das ist ein guter Hinweis darauf, dass der Link es etwas zu tun.,
Hinzufügen von Anruflinks mit Plugins
Sie können Ihrem Header auch einen Anruflink mit einem Plugin hinzufügen. Sie enthalten in der Regel Funktionen für das Styling, das Hinzufügen mehrerer Aktionsaufrufe und die Möglichkeit, basierend auf dem Gerät des Besuchers ein-oder ausgeschaltet zu werden. Sie sind auch einfach einzurichten und zu verwenden. Dies sind großartige Möglichkeiten, wenn Sie nicht mit Code umgehen möchten. Hier sind einige der besten Optionen.
Call Now Button
Call Now Button fügt eine Click-to-Call-Taste an der Unterseite des Bildschirms für Ihre mobilen Besucher. Es wird nicht auf anderen Geräten angezeigt., Sie können auch text hinzufügen, wenn Sie möchten. Die Schaltfläche ist ein Telefonsymbol, sodass Sie leicht verstehen können, wofür sie bestimmt ist. Sie müssen lediglich die Schaltfläche aktivieren und Ihre Telefonnummer eingeben. Sie können das Standardverhalten in den erweiterten Einstellungen ändern.
Weitere Informationen
Klebrige Seitentasten
Mit diesem Plugin können Sie Schaltflächen hinzufügen, die an der Seite Ihrer Website haften bleiben und beim Scrollen des Benutzers auf dem Bildschirm bleiben. Sie können eine anklickbare Telefonnummer, E-Mail-Adresse, Social-Media-Symbole und Speicherorte hinzufügen., Legen Sie sie rechts oder links fest, wählen Sie Animations-und Rollover-Stile, passen Sie die Farben an und wählen Sie aus, wo sie angezeigt werden.
Weitere Informationen
Speed Contact Bar
Dieser fügt eine Kontaktleiste hinzu, die anklickbare Links für eine Telefonnummer, Faxnummer, eine Überschrift, Adresse, E-Mail, soziale Netzwerke und benutzerdefinierte URLs enthält. Stellen Sie die Leiste oben oder unten ein und passen Sie Größe, Farbe, Farbe des Textes und der Links sowie die Reaktion der Leiste an. Sie können auch die Größe anpassen. sie können weitere Inhalte mithilfe von Filter-Hooks hinzufügen.,
Weitere Informationen
Mobile Kontaktleiste
Dieses Plugin fügt Links zu Ihrer Website hinzu, wenn sie auf mobilen Geräten angezeigt werden. Sie können aus 13 Optionen auswählen, welche Links angezeigt werden, darunter Telefon, E-Mail, Skype, benutzerdefinierte URLs und soziale Netzwerke. Es hat FontAwesome integration für die Symbole. Sie können die Links formatieren und Größe, Rahmen, Deckkraft usw. auswählen. Stellen Sie das Menü oben oder unten auf dem Bildschirm ein. Das Menü bleibt auf dem Bildschirm, wenn der Benutzer scrollt. Es enthält auch scrollen nach oben und WooCommerce Warenkorb mit Artikelzähler Tasten.,
Weitere Informationen
Letzte Gedanken
Die Popularität von Smartphones für den Zugriff auf Websites nimmt jeden Tag zu. Diese Popularität nimmt Anruflinks von einer einfachen Bequemlichkeit zu einer vollständigen Notwendigkeit. Das Hinzufügen anklickbarer Telefonnummern kann den Unterschied zwischen Benutzern, die Ihr Unternehmen anrufen, oder Ihren Wettbewerbern ausmachen. Glücklicherweise ist es nicht so schwierig, anklickbare Links zu erstellen, um HTML-Telefonnummern zu Ihren Kopf-und Fußzeilen, Widgets, Seiten und Posts Ihrer WordPress-Website hinzuzufügen.