Wie Sie mit Divi . Kontaktdetails in Ihrem globalen Footer interaktiv hervorheben

Obwohl eine Fußzeile am unteren Rand eines Seitendesigns angezeigt wird, ist sie ein sehr wichtiger Bestandteil jeder von Ihnen erstellten Website. Die Leute sind an das Footer-Konzept gewöhnt und erwarten es auf jeder Website, die sie besuchen. Mit Divis Theme Builder können Sie jedes gewünschte Fußzeilendesign erstellen, aber wenn Sie nach einem einzigartigen Ansatz suchen, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie Kontaktdaten, die im ersten Teil Ihrer Fußzeile erscheinen, interaktiv hervorheben. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die globale Fußzeilenvorlage KOSTENLOS herunter

Um die kostenlose globale Fußzeilenvorlage in die Hände zu bekommen, müssen Sie sie 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!

1. Neue Fußzeilenvorlage erstellen

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue globale oder benutzerdefinierte Fußzeile hinzu

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website. Fügen Sie dort eine neue globale oder benutzerdefinierte Fußzeile hinzu.

Beginnen Sie von Grund auf mit dem Bauen

Beginnen Sie mit dem Erstellen der Fußzeilenvorlage von Grund auf neu.

2. Erstellen Sie ein Fußzeilendesign

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie feststellen, dass bereits ein Abschnitt vorhanden ist. Öffnen Sie die Abschnittseinstellungen und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #e8e8e8

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 2580px

Abstand

Fügen Sie als nächstes etwas untere Polsterung hinzu.

• Untere Polsterung: 1%

Spaltenhauptelement CSS

Öffnen Sie dann die Einstellungen von Spalte 1, navigieren Sie zur Registerkarte Erweitert und wenden Sie die folgenden responsiven CSS-Codezeilen auf das Hauptelement der Spalte an:

Desktop:

display: flex;
flex-direction: row;

Tablet & Telefon:

display: block;

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Responsive Inhalte

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Fügen Sie einige responsive Inhalte Ihrer Wahl hinzu. Stellen Sie sicher, dass Sie die Telefonnummer auf Tablets und Mobiltelefonen angeben, wenn die Hover-Optionen nicht so offensichtlich sind.

Hover-Inhalt

Ändern Sie als nächstes den Hover-Inhalt.

Hintergrundfarbe

Wenden Sie dann eine Hintergrundfarbe an.

• Hintergrundfarbe: #ffffff

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Bewegen des Mauszeigers.

• Hover-Hintergrundfarbe: #00ff88

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H3-Texteinstellungen wie folgt:

• Überschrift 3 Schriftart: Oswald
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Schriftstil: Großbuchstaben & Unterstrichen
• Überschrift 3 Textausrichtung: Mitte
• Überschrift 3 Textfarbe: #000000
• Überschrift 3 Textgröße:
  • Desktop: 2.5vw
  • Tablet: 4.5vw
  • Telefon: 5.5vw

Größe

Stellen Sie als nächstes sicher, dass die Breite "100%" beträgt.

• Breite: 100%

Abstand

Wenden Sie dann die folgenden responsiven Abstandswerte an:

• Unterer Rand:
  • Desktop: /
  • Tablet & Telefon: 1%
• Rechter Rand:
  • Desktop: 1%
  • Tablet & Telefon: 0%
• Obere Polsterung: 10vh
• Untere Polsterung: 10vh

Hauptelement-CSS

Wenden Sie auch die folgenden CSS-Codezeilen auf das Modul an:

flex: 1;
position: relative !important;
transition: flex 800ms !important;

Hover-Hauptelement-CSS

Und ändern Sie die CSS-Flex-Eigenschaft des Hover-Hauptelements.

flex: 3;

Textmodul zweimal klonen

Nachdem Sie das erste Modul abgeschlossen haben, können Sie es zur Wiederverwendung zweimal klonen. Sie werden feststellen, dass die doppelten Module automatisch nebeneinander angezeigt werden.

Textmodul Nr. 2 ändern

Inhalt ändern & Hover-Inhalte

Öffnen Sie das erste duplizierte Textmodul und ändern Sie den Responsive- und Hover-Inhalt.

Abstand ändern

Entfernen Sie auch den rechten Rand dieses Moduls.

Textmodul Nr. 3 ändern

Inhalt ändern & Hover-Inhalte

Öffnen Sie als nächstes die Einstellungen des dritten Textmoduls und ändern Sie die Kopie.

Abstand ändern

Entfernen Sie den rechten Rand in den Abstandseinstellungen und fügen Sie stattdessen etwas linken Rand hinzu.

• Linker Rand:
  • Desktop: 1%
  • Tablet & Telefon: 0%

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und wenden Sie die folgende Hintergrundfarbe an:

• Hintergrundfarbe: #141414

Größe

Wechseln Sie zum Design-Tab der Zeile und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 2580px

Abstand

Ändern Sie auch die Abstandseinstellungen der Zeile.

• Obere Polsterung:
  • Desktop: 100px
  • Tablet & Telefon: 50px
• Untere Polsterung:
  • Desktop: 100px
  • Tablet & Telefon: 50px
• Linke Polsterung:
  • Desktop: 8%
  • Tablet & Telefon: 10%
• Rechte Polsterung:
  • Desktop: 8%
  • Tablet & Telefon: 10%

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H4-Inhalt hinzufügen

Fügen Sie dann in Spalte 1 ein erstes Textmodul mit H4-Inhalten Ihrer Wahl hinzu.

H4-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H4-Texteinstellungen wie folgt:

• Überschrift 4 Schriftart: Oswald
• Überschrift 4 Schriftstil: Großbuchstaben
• Überschrift 4 Textfarbe: #ffffff
• Überschrift 4 Textgröße:
  • Desktop: 26px
  • Tablet: 22px
  • Telefon: 18px
• Überschrift 4 Zeilenhöhe: 1,3em

Abstand

Wenden Sie auch einen unteren Rand an.

• Unterer Rand: 20px

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie unterhalb des vorherigen ein weiteres Textmodul hinzu und fügen Sie einige Fußzeilenelemente mit Links Ihrer Wahl ein.

Linktext-Einstellungen

Ändern Sie die Linktexteinstellungen des Moduls entsprechend:

• Link-Schriftart: Lato
• Linktextfarbe: #00ff88
• Linktextgröße: 17px

Abstand

Wenden Sie als nächstes einen ansprechenden unteren Rand an.

• Unterer Rand:
  • Desktop: 0px
  • Tablet & Telefon: 50px

Spalte 1 wiederverwenden

Spalte 2, 3 & 4 entfernen

Nachdem Sie beide Textbausteine ​​in Spalte 1 ausgefüllt haben, können Sie die drei verbleibenden Spalten der Zeile löschen.

Spalte 1 dreimal klonen

Und verwenden Sie die erste Spalte wieder, indem Sie sie dreimal klonen.

Alle doppelten Inhalte ändern

Stellen Sie sicher, dass Sie alle doppelten Inhalte in jeder neuen Spalte ändern.

Entfernen Sie den unteren Rand von Textmodul #2 in Spalte 4

Und entfernen Sie den unteren Rand des letzten Textbausteins in Spalte 4.

Zeile 3 hinzufügen

Spaltenstruktur

Weiter zur nächsten und letzten Reihe. Verwenden Sie die folgende Spaltenstruktur:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 2580px

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie dann in Spalte 1 ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls entsprechend:

• Textschriftart: Lato
• Textgröße: 17px

Textmodul klonen und Duplikat in Spalte 2 platzieren

Klonen Sie das Textmodul in Spalte 1 einmal und platzieren Sie das Duplikat in Spalte 2.

Inhalt ändern

Ändern Sie den Inhalt des duplizierten Moduls.

Textausrichtung ändern

Und verwenden Sie eine andere responsive Textausrichtung.

• Textausrichtung:
  • Desktop: Rechts
  • Tablet & Telefon: Links

4. Speichern Sie alle Änderungen an Vorlagen und Theme Builder

Nachdem Sie die klebrigen Schritte abgeschlossen haben, stellen Sie sicher, dass Sie Ihre Vorlagen- und Theme-Builder-Änderungen speichern, bevor Sie das Ergebnis auf Ihrer Website anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit der Fußzeile Ihrer Website kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Kontaktdetails mit dem Divi Theme Builder interaktiv hervorheben können. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.