So erstellen Sie eine Divi Mobile-Kontaktleiste mit Click-to-Call-, E-Mail-, SMS- und Richtungslinks

Da die Welt auf mobilen Geräten lebt, ist es sinnvoll, auf Ihrer Website anklickbare Kontaktlinks bereitzustellen, die das mobile Erlebnis nutzen. Diese Kontaktlinks können wie ein Click-to-Call-Link einen Anruf auf Ihrem Mobiltelefon mit einem einzigen Klick starten. Andere, z. B. ein Wegbeschreibungslink, können Wegbeschreibungen zu einer Geschäftsadresse in Google Maps öffnen. Diese sind für Benutzer sehr praktisch und für bestimmte Unternehmen ein Muss.

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Divi-Mobilkontaktleiste mit Click-to-Call-, E-Mail-, SMS- und Wegbeschreibungslinks erstellen. Dazu verwenden wir den Divi-Builder, um die Leiste und die Schaltflächen in einer globalen Fußzeile zu entwerfen. Dann fügen wir jedem Kontaktlink benutzerdefinierte URLs hinzu, um die von uns benötigte Funktionalität nach Hause zu bringen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So fügen Sie den Vorlagen-Download für feste Kontaktleisten zu Ihrer Divi-Site hinzu

WARNUNG!: Das Hinzufügen dieser Vorlage überschreibt die Standard-Website-Vorlage (sofern vorhanden) auf Ihrer Divi-Site. Wir empfehlen, dies zu einer Test-Site hinzuzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Um die Vorlage für die feste Fußzeilenleiste auf Ihre eigene Website zu importieren, entpacken Sie die heruntergeladene ZIP-Datei, um auf die JSON-Datei zuzugreifen.

Gehen Sie dann zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.

Klicken Sie dann oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Portabilitäts-Popup die gerade entpackte JSON-Datei aus und wählen Sie die Option "Backup vor dem Import herunterladen", nur für den Fall, dass Sie zuvor etwas in der Standard-Website-Vorlage hatten, das Sie nicht überschreiben wollten.

Klicken Sie dann auf die Schaltfläche Importieren.

Speichern Sie zuletzt die Änderungen am Theme Builder und zeigen Sie eine Live-Seite an, um die feste Fußzeile zu sehen.

Kommen wir nun zum Tutorial, oder?

Teil 1: Erstellen einer globalen Fußzeile

Für dieses Tutorial fügen wir mit dem Divi Theme Builder eine mobile Kontaktleiste zur globalen Fußzeile hinzu. Navigieren Sie zunächst zu Divi > Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den globalen Fußzeilenbereich. Wählen Sie in der Dropdown-Liste die Option Globale Fußzeile erstellen aus.

HINWEIS: Wenn Sie bereits über eine globale Fußzeile verfügen, können Sie die globale Fußzeile öffnen und bearbeiten und die Kontaktleiste zusätzlich zur aktuellen Fußzeile hinzufügen.

Wählen Sie die Option „Von Grund auf neu erstellen“.

Teil 2: Erstellen der festen Inhaltsleiste

Beginnen Sie im Global Footer Layout Editor den Entwurfsprozess, indem Sie dem Standardabschnitt eine einspaltige Zeile hinzufügen.

Abschnittseinstellungen

Bevor wir mit dem Hinzufügen von Modulen beginnen, öffnen Sie die Abschnittseinstellungen und geben Sie ihm eine Höhe wie folgt ein:

• Höhe: 80px

Dies ist wichtig, um den Platz am unteren Rand der Seite zu schaffen, in dem die fixierte Reihe schließlich zur Ruhe kommt. Wir werden auch die standardmäßige obere und untere Polsterung entfernen.

• Padding: 0px oben, 0px unten

Zeileneinstellungen

Jetzt, da unser Abschnitt fertig ist, können wir die Reihe so anpassen, dass sie als feste Kontaktleiste dient. Öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie dann Folgendes:

Hintergrund

• Hintergrundfarbe: #751136

Größe

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Höhe: erben

Obwohl die Zeile fixiert wird, möchten wir, dass die Höhe der Zeile mit der Höhe des übergeordneten Abschnitts übereinstimmt, damit der Platz am unteren Rand der Seite die Zeile angemessen enthält. Dazu müssen wir den Text „inherit“ für die Höhe eingeben.

Abstand

• Padding: 0px oben, 0px unten, 15 % links, 15 % rechts

Benutzerdefinierte CSS

Wir möchten sicherstellen, dass der Inhalt innerhalb der Zeile vertikal ausgerichtet bleibt und die Spalten auf Mobilgeräten nicht unterbrochen werden. Fügen Sie dazu das folgende benutzerdefinierte CSS zum Hauptelement der Zeile hinzu:

display:flex;
flex-wrap:nowrap;
align-items:center;

Feste Positionierung

Um die Zeile so zu fixieren, dass sie am unteren Bildschirmrand schwebt, müssen wir ihr wie folgt eine feste Position unten links zuweisen:

• Position: Behoben
• Ort: unten links
• Z-Index: 99999

Teil 3: Erstellen der Call-to-Click-, E-Mail-, SMS- und Direktionslinks

Nachdem unsere Kontaktleiste nun fertig ist, können wir die anklickbaren Kontaktschaltflächen zusammen mit den benutzerdefinierten URLs hinzufügen.

Gestaltung der Click-to-Call-Schaltfläche

Die erste Kontaktschaltfläche, die wir erstellen werden, ist die Click-to-Call-Schaltfläche. Um es zu erstellen, fügen Sie der Spalte ein neues Klappenmodul hinzu.

Inhalt

Fügen Sie auf der Registerkarte Inhalt wie folgt einen Titel und ein Symbol zum Klappentext hinzu:

• Titel: Anruf
• Symbol verwenden: JA
• Symbol: Telefon

Hintergrund

Geben Sie ihm eine weiße Hintergrundfarbe:

• Hintergrundfarbe: #ffffff

Designeinstellungen

Wechseln Sie zur Registerkarte Design und aktualisieren Sie die Einstellungen wie folgt:

Symbol

• Symbolfarbe: #751136
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 2em

Überschrift

• Tite-Schriftart: TT
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #751136
• Titeltextgröße: 1em

Körpertextgröße

Wenn Sie es bemerkt haben, haben wir die Größe der Klappenelemente mit der Längeneinheit „em“ festgelegt. Dies ist relativ zur Größe des Textkörpers. Daher wird durch das Anpassen der Größe des Klappentexts (auch wenn kein Fließtext angezeigt wird) die Größe aller Klappenelemente mit der Längeneinheit em angepasst. Dies ist einfach eine bequeme Möglichkeit, die Größe der Schaltfläche in Zukunft zu ändern, ohne jedes Element einzeln anpassen zu müssen.

Aktualisieren Sie den Textkörper wie folgt:

• Körpertextgröße: 12px

Größe

Geben Sie dem Klappentext wie folgt eine festgelegte Höhe und Breite:

• Breite: 4.5em
• Modulausrichtung: Mitte
• Höhe: 4.5em

Polsterung und Ecken

• Polsterung: 0.5em oben

Box Schatten

• Box Shadow: siehe Screenshot
• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Kastenschattens: 2px
• Schattenfarbe: rgba (255,255,255,0.55)

Benutzerdefinierte CSS

Um den Inhalt des Klappentext-Moduls vertikal zu zentrieren, fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
align-items:center;

Und nehmen Sie den Abstand unter dem Klappensymbol heraus, indem Sie das folgende Klappenbild hinzufügen:

margin-bottom: 0.3em;

Hinzufügen der Anruflink-URL

Um eine Anruflink-URL hinzuzufügen, die einen Anruf auf einem Mobiltelefon einleitet, fügen Sie die Nummer nach dem Präfix „tel:“ hinzu.

• Modul-Link-URL: Tel: 555-555-5555

Entwerfen des E-Mail-Buttons

Um die E-Mail-Schaltfläche zu erstellen, duplizieren Sie die gesamte Spalte.

Hinzufügen des E-Mail-Symbols und der Link-URL

Aktualisieren Sie dann den doppelten Klappentext in Spalte 2 mit einem neuen Titel und Symbol.

Um eine Anruflink-URL hinzuzufügen, die eine E-Mail in einer mobilen App initiiert, fügen Sie die E-Mail-Adresse nach dem Präfix „mailto:“ hinzu.

• Modul-Link-URL: mailto:[email protected]

Entwerfen der SMS-Schaltfläche (Textnachricht)

Um die SMS-Schaltfläche zu erstellen, duplizieren Sie Spalte 2.

Hinzufügen des SMS-Symbols und der Link-URL

Aktualisieren Sie dann den doppelten Klappentext in Spalte 2 mit einem neuen Titel und Symbol.

Um eine Anruflink-URL hinzuzufügen, die eine E-Mail in einer mobilen App initiiert, fügen Sie die E-Mail-Adresse nach dem Präfix „sms:“ hinzu.

• Modul-Link-URL: SMS:+15555555555

Entwerfen der Richtungsschaltfläche

Um die SMS-Schaltfläche zu erstellen, duplizieren Sie Spalte 3.

Hinzufügen des Wegbeschreibungssymbols und der Link-URL

Aktualisieren Sie dann den doppelten Klappentext in Spalte 3 mit einem neuen Titel und Symbol.

Verwenden Sie diese Richtungs-URL-Strukturen, um eine Anruflink-URL hinzuzufügen, die eine Wegbeschreibung über Google Maps initiiert.

Für dieses Tutorial fügen wir einen Wegbeschreibungslink hinzu, der Wegbeschreibungen vom aktuellen Standort des Benutzers zum GooglePlex in Mountain View, CA, generiert.

• Modul-Link-URL:

  https://www.google.com/maps/dir/?api=1&destination=1600+amphitheatre+pkwy+mountain+view+CA

Um der URL Ihre eigene Adresse hinzuzufügen, ersetzen Sie den Text nach „destination=“ in der URL und achten Sie darauf, die Wörter durch Pluszeichen („+“) zu trennen.

Wenn Sie auf die Schaltfläche klicken, sollten Sie etwas Ähnliches erhalten ...

Abschnitt auf dem Desktop ausblenden

Da wir möchten, dass die Kontaktleiste nur auf mobilen Geräten angezeigt wird, können wir den gesamten Abschnitt auf dem Desktop deaktivieren. Öffnen Sie dazu die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Deaktivieren auf: Desktop

Endgültige Ergebnisse

Weitere Kontaktlinks

Mit HTML5 sind Sie nicht auf Telefonnummern beschränkt. Sie können weitere Handlungsaufforderungen wie E-Mail, Messaging, Fax usw. hinzufügen. HTML5-Protokolle umfassen:

tel: – einen Anruf tätigen
mailto: – öffne eine E-Mail-App
callto: Skype öffnen
SMS: – eine SMS senden
faxen: – ein Fax senden

Und wenn Sie möchten, können Sie auch einen gezielten Waze-Link für die Wegbeschreibungs-URL hinzufügen.

Abschließende Gedanken

Die Kontaktleiste scheint eine großartige Ergänzung für jede Unternehmenswebsite zu sein, die es Benutzern bequem machen möchte, sie von einem mobilen Gerät aus zu kontaktieren. Und sobald Sie sich mit den Strukturen der Link-URLs vertraut gemacht haben, sind Sie auf jeden gewünschten Kontaktlink eingestellt.

Weitere Informationen finden Sie in unserem Beitrag zu Telefonlinks.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!