So erstellen Sie eine Sticky-Fußzeile mit den Sticky-Optionen von Divi

Wenn Sie nach einer Möglichkeit suchen, einen CTA hinzuzufügen, der Ihren Besuchern beim Navigieren durch Ihre Website folgt, können Sie eine Sticky-Fußzeile in Betracht ziehen. Unten in Ihrem Browser wird eine Sticky-Fußzeile verwendet, und Sie können jeden Call-to-Action Ihrer Wahl einfügen, sei es eine Schaltfläche oder Kontaktinformationen. Sobald Besucher zum Fußzeilenbereich Ihrer Seite scrollen, werden die Fußzeilenleiste und das Fußzeilendesign zusammengeführt, während die Stile Ihrer klebrigen Fußzeilenleiste geändert werden. Diese schöne Ästhetik könnte Ihnen helfen, die Konversionsraten auf Ihren Seiten zu erhöhen! Sie können die JSON-Vorlagendatei 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 einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und wenden Sie eine schwarze Hintergrundfarbe an.

• Hintergrundfarbe: #000000

Zeile 1 hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ea6c01

Größe

Wechseln Sie zum Design-Tab der Zeile und ändern Sie als nächstes die Größeneinstellungen.

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

Abstand

Fügen Sie auch bei kleineren Bildschirmgrößen benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 5px (nur Tablet und Telefon)
• Untere Polsterung: 5px (nur Tablet und Telefon)

Grenze

Als nächstes fügen Sie den Rahmeneinstellungen einige ansprechende abgerundete Ecken hinzu.

• Alle Ecken:
  • Desktop: 30px
  • Tablet & Telefon: 15px

Überläufe

Und um sicherzustellen, dass wir später im Tutorial Überlappungen erstellen können, setzen wir die Zeilenüberläufe auf sichtbar.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Spalte 1 & 3 Sichtbarkeit

Um zu verhindern, dass zu viele Elemente in der Fußzeile auf kleineren Bildschirmgrößen angezeigt werden, blenden wir die erste und letzte Spalte in unserer Zeile sowohl auf dem Tablet als auch auf dem Telefon aus.

Blurb-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Blurb-Modul in Spalte 1. Fügen Sie Inhalte Ihrer Wahl hinzu.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und gestalten Sie das Symbol entsprechend:

• Symbolfarbe: #f5d72e
• Kreissymbol: Ja
• Kreisfarbe: #000000
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 32px

Texteinstellungen

Ändern Sie als Nächstes die Texteinstellungen.

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Nehmen Sie auch einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschriftart: Poppins
• Titeltextfarbe: #000000

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Körperschriftart: Poppins
• Schriftstärke des Körpers: Ultra Bold
• Körpertextgröße: 20px

Größe

Setzen Sie als nächstes die Inhaltsbreite in den Größeneinstellungen auf „100%“.

• Inhaltsbreite: 100%

Abstand

Um eine Überlappung zu erstellen, fügen Sie den Abstandseinstellungen einen negativen oberen Rand hinzu.

• Oberer Rand: -60px

Animation

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Symbolanimation in den Animationseinstellungen entfernen.

• Bild-/Symbolanimation: Keine Animation

Blurb-Modul klonen und Duplikat in Spalte 3 platzieren

Sobald Sie das erste Blurb-Modul in Spalte 1 fertiggestellt haben, klonen Sie es einmal und platzieren Sie das Duplikat in Spalte 3.

Inhalt und Symbol ändern

Ändern Sie den Inhalt und das Symbol für das Duplikat.

Blurb-Modul zu Spalte 2 hinzufügen

Symbol auswählen

Fügen Sie als Nächstes ein neues Blurb-Modul zu Spalte 2 hinzu. Lassen Sie das Inhaltsfeld leer und wählen Sie ein Symbol Ihrer Wahl aus.

Hintergrundfarbe

Fügen Sie als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Oben
• Bild-/Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 30px

Größe

Nehmen Sie als Nächstes einige Änderungen an den Größeneinstellungen vor.

• Breite: 70px
• Modulausrichtung: Mitte
• Höhe: 40px

Abstand

Wenden Sie dann benutzerdefinierte Werte für Rand und Abstand auf verschiedene Bildschirmgrößen an.

• Obere Marge: -20px (nur Tablet und Telefon)
• Obere Polsterung: 5px
• Untere Polsterung: 0px

Grenze

Als nächstes fügen Sie den Randeinstellungen einige abgerundete Ecken hinzu.

• Alle Ecken: 10px

Animation

Und entfernen Sie die Standardanimation in den Animationseinstellungen.

• Bild-/Symbolanimation: Keine Animation

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in dieser Zeile benötigen, ist ein Textmodul in Spalte 2. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Schriftstärke des Textes: Halbfett
• Textgröße: 18px
• Textzeilenhöhe: 1.8em
• Textausrichtung: Mitte

Zeile 2 hinzufügen

Spaltenstruktur

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

Größe

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

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

Abstand

Fügen Sie als nächstes einen oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 50px

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Fügen Sie in Spalte 1 ein Bildmodul hinzu und laden Sie Ihr Logo oder ein beliebiges Bild Ihrer Wahl hoch.

Größe

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 59%
• Modulausrichtung: Links

Textmodul zu Spalte 2 hinzufügen

H3-Inhalt hinzufügen

Fügen Sie als Nächstes ein Textmodul zu Spalte 2 mit H3-Inhalten Ihrer Wahl hinzu.

H3-Texteinstellungen

Ändern Sie die H3-Texteinstellungen des Moduls wie folgt:

• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #6d6d6d

Textmodul 3x klonen und auf Spalte 3 und 4 verteilen

Sobald Sie dieses Textmodul abgeschlossen haben, können Sie dreimal klonen und die Duplikate auf die beiden verbleibenden Spalten der Zeile verteilen.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt in jedem doppelten Textmodul ändern.

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie ein weiteres Textmodul direkt unter dem vorherigen Textmodul in Spalte 2 hinzu und fügen Sie einige verlinkte Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Poppins
• Textgröße: 30px
• Textzeilenhöhe: 1em
• Textausrichtung: Links
• Textfarbe: Hell

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

• Linktextfarbe: #ffffff

Textmodul nach Bedarf klonen

Wenn Sie das Textmodul fertiggestellt haben, klonen Sie es so oft Sie möchten.

Inhalt ändern

Stellen Sie sicher, dass Sie den Inhalt und die Links in jedem duplizierten Modul ändern.

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Fügen Sie dann in Spalte 3 ein weiteres Textmodul hinzu. Fügen Sie einige verlinkte Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Poppins
• Textgröße: 22px
• Textzeilenhöhe: 1em
• Textausrichtung: Links
• Textfarbe: Hell

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

• Linktextfarbe: #ea6c01

Textmodul nach Bedarf klonen

Klonen Sie dieses Modul so oft wie nötig.

Inhalt ändern

Und natürlich ändern Sie den Inhalt und die Links nach Bedarf.

Textmodul zu Spalte 4 hinzufügen

Inhalt hinzufügen

In Spalte 4 fügen wir unterhalb des ersten Textmoduls ein weiteres Textmodul hinzu. Fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Poppins
• Textgröße: 16px
• Textzeilenhöhe: 1.8em
• Textausrichtung: Links
• Textfarbe: Hell

Social Media Follow zu Spalte 4 hinzufügen

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Fügen Sie dann am Ende der Spalte ein Social Media Follow-Modul hinzu. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Entfernen Sie die Hintergrundfarbe jedes sozialen Netzwerks einzeln

Entfernen Sie die Hintergrundfarbe jedes sozialen Netzwerks einzeln.

Abstand

Gehen Sie zurück zu den regulären Moduleinstellungen, gehen Sie zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Randwerte hinzu.

• Oberer Rand: -15px
• Linker Rand: -8px

Zeile 3 hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2
• Spaltenhöhen ausgleichen: Ja
• Maximale Breite: 2580px

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie dann in Spalte 1 ein Textmodul hinzu. Fügen Sie Inhalte Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Poppins
• Textfarbe: #595959
• Textgröße: 13px
• Textausrichtung: Mitte

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

• Linktextfarbe: #595959

Textmodul zweimal klonen & Duplikate in verbleibende Spalten platzieren

Sobald Sie das Modul in Spalte 1 abgeschlossen haben, können Sie es zweimal klonen und die Duplikate in die beiden verbleibenden Spalten der Zeile platzieren.

Textausrichtungen ändern

Ändern Sie die Textausrichtungen für jedes duplizierte Textmodul entsprechend:

• Textbaustein in Spalte 2:
  • Desktop: Mitte
  • Tablet & Telefon: Links

• Textbaustein in Spalte 3:
  • Desktop: Rechts
  • Tablet & Telefon: Links

Inhalt ändern

Und ändern Sie auch den Inhalt in beiden doppelten Modulen.

3. Wenden Sie Sticky-Effekte auf die Fußzeilenleiste an

Öffnen Sie Zeile 1 und wenden Sie die Sticky-Einstellungen an

Jetzt, da unsere Designgrundlage vorhanden ist, ist es an der Zeit, den klebrigen Effekt anzuwenden. Öffnen Sie die erste Zeile im Abschnitt, gehen Sie zur Registerkarte Erweitert und wenden Sie die folgenden Sticky-Einstellungen an:

• Klebrige Position: Nach unten kleben
• Klebriger Bodenversatz:
  • Desktop: 50px
  • Tablet & Telefon: 20px

Zeilenklebrige Stile

Hintergrundfarbe

Nachdem wir unsere Zeile klebend gemacht haben, können wir Sticky-Stile auf die Zeile und alle ihre untergeordneten Elemente anwenden. Beginnen Sie damit, Zeile 1 eine klebrige Hintergrundfarbe hinzuzufügen.

• Klebrige Hintergrundfarbe: #000000

Anwenden von Sticky Styles auf Blurb-Module in Spalte 1 und 3

Symboleinstellungen

Öffnen Sie als Nächstes die Blurb-Module in den Spalten 1 und 3 und fügen Sie eine klebrige Kreisfarbe hinzu.

• Klebriger Kreis Farbe: #ea6c01

Einstellungen für Titeltext

Fügen Sie auch eine klebrige Titeltextfarbe hinzu.

• Textfarbe des klebrigen Titels: #ea6c01

Anwenden von Sticky Styles auf das Blurb-Modul in Spalte 2

Hintergrundfarbe

Öffnen Sie dann das Blurb-Modul in Spalte 2 und wenden Sie eine klebrige Hintergrundfarbe an.

• Klebrige Hintergrundfarbe: #ea6c01

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 Divis Sticky-Optionen kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine Sticky-Fußzeile erstellen, die mit dem Hauptfußzeilenbereich verschmilzt, sobald Benutzer auf der Seite, auf der sie sich befinden, nach unten scrollen. Sie konnten die JSON-Vorlagendatei 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.