So erstellen Sie eine feste Fußzeilenleiste für Ihr Divi-Theme

Feste Fußzeilen können eine bequeme Möglichkeit sein, wichtige Informationen über Ihre Website im Vordergrund zu halten, während der Benutzer auf jedem Gerät mit Ihrem Seiteninhalt interagiert. Wie bei Divi existiert normalerweise eine Fußzeilenleiste als statisches Element ganz unten auf der Seite nach dem Hauptinhalt der Fußzeile. Dazu gehören Dinge wie Copyright-Text und Social-Media-Symbole. Wenn Sie jedoch den Inhalt der Fußzeile nicht unten auf der Seite verbergen, können Sie eine benutzerdefinierte Fußzeile erstellen, die am unteren Bildschirmrand schwebt, während der Benutzer scrollt.

In diesem Tutorial werden wir mit Divis Theme Builder eine vollständig benutzerdefinierte feste Fußzeilenleiste entwerfen. Dies ist praktisch, um diese kleinen, aber wichtigen Inhalte jederzeit im Blick zu behalten.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die feste Fußzeile, die wir entwerfen 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 Download der Vorlage für die feste Fußzeilenleiste 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: Hinzufügen einer globalen Fußzeile

Mit dem Theme Builder von Divi können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie das Standard-Website-Template aktualisieren.

Um eine globale Fußzeile zu erstellen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den Bereich "Globale Fußzeile hinzufügen".

Wählen Sie dann aus der Dropdown-Liste die Option „Globale Fußzeile erstellen“.

Dadurch wird der Vorlagen-Layout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten aufgefordert werden, wie Sie mit dem Erstellen beginnen möchten. Wählen Sie „Von Grund auf neu erstellen“.

Teil 2: Erstellen der festen Fußzeilenleiste

Da wir nun im Vorlagenlayout-Editor bearbeiten, können wir mit der Gestaltung der festen Fußzeilenleiste beginnen. Sobald Sie fertig sind, haben Sie eine feste Fußzeile mit drei Spalten, die für den Inhalt bereit sind.

Dreispaltiges Layout zur Zeile hinzufügen

Fügen Sie der Zeile zunächst ein dreispaltiges Layout hinzu.

Abschnittshöhe

Nachdem die drei Spalten hinzugefügt wurden, geben wir dem Abschnitt eine festgelegte Höhe. 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.

Um Höhe und Polsterung einzustellen, öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Höhe: 85px
• Padding: 0px oben, 0px unten

Zeileneinstellungen

Nachdem unser Abschnitt nun fertig ist, können wir die Zeile so anpassen, dass sie als feste Fußzeile dient. Öffnen Sie die Einstellungen für die Zeile und aktualisieren Sie dann Folgendes:

Hintergrund

• Hintergrundfarbe: #1a1e36

Größe und Abstand

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%
• Padding: 0px oben, 0px unten, 3% links, 3% rechts

Benutzerdefinierte CSS

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. Und wir möchten sicherstellen, dass der Inhalt innerhalb der Zeile vertikal ausgerichtet bleibt. Fügen Sie dazu das folgende benutzerdefinierte CSS zum Hauptelement der Zeile hinzu:

Desktop

height: inherit !important;
display:flex;
align-items: center;

Telefon

height: inherit !important;
display:block;

Feste Positionierung

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

• Position: Behoben
• Ort: unten Mitte

Teil 2: Erstellen des festen Inhalts der Fußzeilenleiste

An dieser Stelle haben wir eine Fußzeilenleiste an der festen Position für den Inhalt bereit. Wir können jeder der drei Spalten jeden beliebigen Inhalt hinzufügen. Da es sich jedoch um eine Fußzeilen-"Leiste" mit einer begrenzten Höhe von 85px handelt, müssen wir die Inhaltsmenge begrenzen. Aus diesem Grund fügen wir in Spalte 1 ein kleines Menü mit dynamischem Logo und 4 Menüpunkten hinzu. In Spalte 2 fügen wir Copyright-Text mit einem dynamischen aktuellen Jahr hinzu. In Spalte 3 werden wir drei Social Media Follow Icons hinzufügen.

Menü zu Spalte 1 hinzufügen

Fügen Sie in Spalte 1 ein Menümodul hinzu.

Menü auswählen

Wählen Sie dann eines der Menüs aus, die Sie bereits auf Ihrer Website erstellt haben. Stellen Sie sicher, dass die Menüpunkte auf 4 oder weniger eingestellt sind.

Site-Logo als dynamischen Inhalt hinzufügen

Für das Logo-Menü werden wir das Site-Logo dynamisch hinzufügen. Klicken Sie auf das Symbol "Dynamische Inhalte verwenden", während Sie den Mauszeiger über den Logo-Vorschaubereich bewegen. Wählen Sie dann Site-Logo aus der Dropdown-Liste aus.

Hintergrund entfernen

Entfernen Sie dann den Standardhintergrund aus dem Menü, sodass er transparent ist.

Menüdesign

An dieser Stelle sind wir bereit, dem Menü Design hinzuzufügen. Für dieses Design werden wir es einfach und klein halten. Aktualisieren Sie die folgenden Designeinstellungen:

• Menüschrift: Überführung
• Menütextfarbe: #b59c61
• Bild-Sepia: 100 %
• Max. Höhe des Logos: 50px

Copyright-Text zu Spalte 2 hinzufügen

Sobald das Menü eingerichtet ist, springen Sie zu Spalte 2, um den Copyright-Text hinzuzufügen.

Textmodul hinzufügen

Fügen Sie in Spalte 2 einen neuen Textbaustein hinzu.

Aktuelles Datum dynamisch mit Vorher- und Nachher-Text hinzufügen

Hier werden wir mit dynamischen Inhalten kreativ, um das aktuelle Jahr im Copyright-Text anzuzeigen. Dadurch wird sichergestellt, dass das Jahr während der gesamten Lebensdauer der Website automatisch aktualisiert wird.

Klicken Sie dazu auf das Symbol „Dynamische Inhalte verwenden“ und wählen Sie aus der Liste „Aktuelles Datum“.

Aktualisieren Sie im Popup-Fenster Aktuelles Datum Folgendes:

• Vor:

• Copyright ©

• Nach:

•  | All Rights Reserved

• Datumsformat : Benutzerdefiniert
• Benutzerdefiniertes Datumsformat : 20 Jahre

Textdesign

Aktualisieren Sie das Textdesign und den Rand wie folgt:

• Textschriftart: Überführung
• Text Textfarbe: #b59c61
• Textausrichtung: Mitte
• Rand (nur Telefon): 10 Pixel oben, 10 Pixel unten

Das kümmert sich um den Copyright-Text.

Fügen Sie Social Media Follow-Symbole zu Spalte 3 hinzu

Fügen Sie in Spalte 3 ein Social Media Follow-Modul hinzu.

Soziale Netzwerke hinzufügen

Fügen Sie auf der Registerkarte Inhalt die für die Site erforderlichen sozialen Netzwerke hinzu. Für dieses Design verwenden wir drei.

Einstellungen zum Folgen sozialer Medien

Aktualisieren Sie dann die Designeinstellungen für alle Social Media Follow-Symbole wie folgt:

• Modulausrichtung: rechts (Desktop und Tablet), Mitte (Telefon)
• Symbolfarbe: #1a1e36
• Benutzerdefinierte Symbolgröße verwenden: JA
• Symbolschriftgröße: 16px (Desktop und Tablet), 14px (Telefon)

Einstellungen für soziale Netzwerke aktualisieren

Um das individuelle Design der sozialen Netzwerke zu aktualisieren, öffnen Sie die Einstellungen für das erste Netzwerk und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #ffffff
• Polsterung: 8px rechts, 8px links
• Abgerundete Ecken: 8px

Erweitern Sie die Einstellungen für soziale Netzwerke auf alle

Öffnen Sie dann das Menü Weitere Einstellungen für das erste Netzwerk und wählen Sie „ Artikelstile erweitern “ aus der Liste. Wählen Sie im Popup-Fenster „Stile erweitern“ aus, dass die Stile in „ Diese Spalte “ erweitert werden sollen, und klicken Sie auf „ Erweitern“ .

Dadurch wird das Design auf die restlichen Symbole in der Spalte ausgedehnt.

Spalte 1/Menü auf Tablet und Telefon deaktivieren

Um die Fußzeilenleiste mobilfreundlich zu gestalten, müssen wir eine unserer Spalten mit ihrem Inhalt auf dem Tablet- und Telefondisplay deaktivieren. In diesem Beispiel deaktivieren wir die Anzeige des Menüs, indem wir Spalte 1 auf Telefon und Tablet wie folgt deaktivieren:

Ergebnisse speichern

Stellen Sie sicher, dass Sie das Layout speichern, bevor Sie den Layout-Editor beenden.

Stellen Sie dann auch sicher, dass Sie die Änderungen für den Divi Theme Builder speichern.

Endergebnis

Um das Ergebnis anzuzeigen, rufen Sie eine Live-Seite auf Ihrer Website auf. So sieht es auf einer Seite mit dem Event Layout Pack aus.

Beobachten Sie, wie die Fußzeile fixiert bleibt, bis sie im Abschnitt am unteren Rand der Seite zur Ruhe kommt.

Abschließende Gedanken

Das Hinzufügen einer festen Fußzeilenleiste ist in einigen Fällen sinnvoll. Die Höhe der Leiste ist klein genug, damit sie auf dem Handy nicht ablenkt oder zu viel Platz beansprucht. Und es gibt Ihnen die Möglichkeit, wichtige CTAs für bessere Conversions und eine reibungslosere Benutzererfahrung hinzuzufügen.

Bei diesem Design wird der Platz am unteren Rand der Seite erstellt, indem eine feste Höhe für den Abschnitt festgelegt wird und dann der festen Zeile ermöglicht wird, die Abschnittshöhe zu übernehmen (obwohl sie fixiert ist). Es gibt jedoch andere Möglichkeiten, Containerplatz für solche Dinge zu generieren, wenn Sie die eingestellte Höhe als einschränkend oder nicht reagierend empfinden.

Ich hoffe, es ist nützlich.

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

Danke schön!