So erstellen Sie einen Sticky Header mit Divis Sticky Options

Die Art und Weise, wie wir den Divi Theme Builder beim Einrichten einer Website verwenden, hat unseren Workflow beschleunigt und alles einfacher gemacht. Obwohl wir seit dem Erscheinen des Divi Theme Builder vom ersten Tag an in der Lage waren, benutzerdefinierte Header zu erstellen, wurde ständig nach einem gefragt, nämlich einen Sticky-Header ohne zusätzlichen Code erstellen zu können. Mit den neuen Sticky-Optionen von Divi ist das Erstellen eines Sticky-Headers einfacher denn je. Die Sticky-Einstellungen, die Divi bietet, helfen Ihnen mühelos, jedes Designelement klebrig zu machen und benutzerdefinierten Stilen einen Sticky-Status zuzuweisen, was zu endlosen Design- und Benutzererfahrungsmöglichkeiten führt.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen Sticky-Header erstellen, der Folgendes enthält:

• Die Kopfzeile, die wir erstellen, hat eine obere Kopfzeilenleiste + eine Menüleiste
• Wir machen den Abschnitt mit der Menüleiste klebrig, wenn Sie daran vorbeigehen, sobald Sie wieder nach oben gehen, wird die Kopfleiste wieder angezeigt
• Wir ändern die Designstile des klebrigen Abschnitts (und seiner Elemente), sobald der Abschnitt klebrig wird

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 Header-Vorlage KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage 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. Erstellen der Header-Elementstruktur in einer neuen Header-Vorlage

Neue globale Header-Vorlage erstellen

Gehen Sie zum Divi Theme Builder und beginnen Sie mit der Erstellung eines neuen globalen oder benutzerdefinierten Headers.

Abschnitt #1 Einstellungen

Hintergrund mit Farbverlauf

Sobald wir uns im Vorlageneditor befinden, beginnen wir damit, die Elementstruktur unseres Headers aufzubauen. Im zweiten Teil dieses Tutorials konzentrieren wir uns darauf, die verschiedenen Sticky-Einstellungen anzuwenden, um unser Sticky-Header-Design zu vervollständigen. Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und wenden Sie einen Verlaufshintergrund an.

• Farbe 1: #ffba60
• Farbe 2: #ffd6a0
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 50%

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Um unsere obere Kopfzeilenleiste zu erstellen, fügen wir unserem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

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: 95%
• Maximale Breite: 2580px

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 15px
• Untere Polsterung: 15px

Hauptelement-CSS

Und um sicherzustellen, dass die Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, fügen wir dem Hauptelement der Zeile auf der Registerkarte "Erweitert" eine Zeile CSS-Code hinzu.

display: flex;

Fügen Sie das Social Media Follow-Modul zu Spalte 1 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem Social Media Follow-Modul in Spalte 1. Fügen Sie die sozialen Netzwerke Ihrer Wahl zusammen mit den entsprechenden Links hinzu.

Entfernen Sie die Hintergrundfarbe jedes sozialen Netzwerks

Fahren Sie fort, indem Sie jede Hintergrundfarbe des sozialen Netzwerks einzeln entfernen.

Symboleinstellungen

Gehen Sie dann zurück zu den allgemeinen Moduleinstellungen und ändern Sie die Symbolfarbe im Design-Tab.

• Symbolfarbe: #26333a

Abstand

Fügen Sie auch etwas oberen Rand hinzu.

• Oberer Rand: 5px

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

In Spalte 2 benötigen wir als einziges Modul ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie als nächstes einen Link hinzu.

Tastenausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Rechts

Tasteneinstellungen

Wir gestalten auch den Button.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #26333a
• Breite des Tastenrahmens: 2px
• Farbe der Knopfleiste: #26333a
• Schaltflächenrandradius: 0px

• Tastenabstand: 4px
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben
• Schaltfläche anzeigen: Ja

Abstand

Und wir vervollständigen die Moduleinstellungen, indem wir den Abstandseinstellungen einige obere und untere Auffüllung hinzufügen.

• Obere Polsterung: 10px
• Untere Polsterung: 10px

Abschnitt 2 hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie einen weiteren regulären Abschnitt direkt unter dem vorherigen hinzu. Dieser Abschnitt ist unserem Menü gewidmet und wird im zweiten Teil dieses Tutorials klebrig. Nachdem Sie den Abschnitt hinzugefügt haben, wenden Sie einen Verlaufshintergrund an.

• Farbe 1: #ffffff
• Farbe 2: #f7f7f7
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Startposition: 25%
• Endposition: 25%

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

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

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 10px
• Untere Polsterung: 10px

Menümodul zur Spalte hinzufügen

Menü auswählen

Fügen Sie dann ein Menümodul zur Spalte der Zeile hinzu und wählen Sie ein dynamisches Menü Ihrer Wahl aus.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Hintergrundfarbe entfernen

Entfernen Sie dann die standardmäßige weiße Hintergrundfarbe des Moduls.

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design und gestalten Sie auch die Menütexteinstellungen.

• Schriftstärke des Menüs: Fett
• Menütextfarbe: #002d4c
• Menütextgröße: 15px
• Menübuchstabenabstand: 4px
• Textausrichtung: Rechts

Texteinstellungen des Dropdown-Menüs

Nehmen Sie dann einige Änderungen an den Dropdown-Menüeinstellungen vor.

• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Farbe der Dropdown-Menüzeile: #002d4c

Symboleinstellungen

Zusammen mit den Symboleinstellungen.

• Farbe des Einkaufswagensymbols: #002d4c
• Farbe des Suchsymbols: #002d4c
• Hamburger Menüsymbolfarbe: #002d4c

Größe

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Größeneinstellungen eine maximale Logohöhe hinzufügen.

• Max. Höhe des Logos: 60px

2. Wenden Sie benutzerdefinierte Sticky-Effekte an

Abschnitt #2 klebrig machen

Nachdem wir nun die Elementstruktur unserer Kopfzeile erstellt haben, ist es an der Zeit, unseren zweiten Abschnitt klebend zu machen und den Designstil davon und seine Elemente in einen klebrigen Zustand zu ändern. Öffnen Sie die Einstellungen des zweiten Abschnitts und wechseln Sie zur Registerkarte Erweitert. Gehen Sie dort zu den Scroll-Effekt-Einstellungen und wenden Sie die folgenden Sticky-Optionen an:

• Klebrige Position: Bleiben Sie oben
• Sticky Top Offset: 0px
• Untere Klebrigkeitsgrenze: Keine
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Farbverlaufshintergrund des Abschnitts in Sticky State ändern

Nachdem unser Abschnitt nun klebrig wurde, erscheint eine zusätzliche Option in unseren Abschnitts-, Zeilen- und Moduleinstellungen; die klebrige Option. Wenn Sie auf dieses Symbol klicken, können Sie einen alternativen Stil für das Element erstellen, das Sie im Sticky-Status ausgewählt haben. Wir werden einige dieser Sticky-Design-Einstellungen kombinieren, um das Erscheinungsbild unseres Sticky-Headers beim Scrollen anzupassen. Gehen Sie zunächst zu den Hintergrundeinstellungen des zweiten Abschnitts und wenden Sie den folgenden klebrigen Farbverlaufshintergrund an:

• Farbe 1: #26333a
• Farbe 2: #1e272f

Stretch Row im Sticky State

Als nächstes öffnen wir die Zeile mit dem Menümodul und ändern die Breite in einen klebrigen Zustand.

• Breite: 95%

Zeilenauffüllung im Sticky State entfernen

Wir entfernen auch die klebrige obere und untere Polsterung unserer Reihe.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Ändern Sie die Menütextfarbe im Sticky State

Als Nächstes ändern wir die Menütextfarbe in einen klebrigen Zustand.

• Menütextfarbe: #ffbd68

Ändern Sie die Farben des Menüsymbols im Sticky-Status

Zusammen mit den Symbolfarben.

• Farbe des Einkaufswagensymbols: #ffffff
• Farbe des Suchsymbols: #ffffff
• Farbe des Hamburger-Menüsymbols: #ffffff

Logohöhe im Sticky State entfernen

Und zu guter Letzt ändern wir die maximale Höhe des Logos in einem klebrigen Zustand auf Null. Dadurch wird das Logo vollständig aus unserem Header entfernt, sobald die Sticky-Einstellungen des Abschnitts aktiviert sind. Das ist es! Stellen Sie sicher, dass Sie alle Divi Theme Builder-Änderungen speichern, sobald Sie Ihr Header-Design abgeschlossen haben, und sehen Sie es sich auf Ihrer Website an.

• Max. Höhe des Logos: 0px

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 Theme Builder und den Sticky-Optionen einen Sticky-Header erstellen. Sobald der Abschnitt mit unserem Menü klebrig geworden ist, wenden wir auch benutzerdefinierte Stile an. Diese Optionen werden durch die neuen Divi-Sticky-Optionen ermöglicht, die Ihnen unzählige Möglichkeiten bieten, die Benutzererfahrung und das von Ihnen erstellte Design zu verbessern. Sie konnten auch die globale Header-Vorlage 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.