So machen Sie Ihren transparenten Header mit Divi . beim Scrollen klebrig

Wenn es darum geht, einen globalen Header für Ihre Website einzurichten, gibt es viele Möglichkeiten. Einer der subtileren Ansätze ist ein transparenter Header. Transparente Kopfzeilen werden über den Heldenabschnitten Ihrer Seiten platziert, was zu schönen Designs führen kann, die sich auf einen minimalen, aber klaren Ansatz konzentrieren. Wenn Sie sich für einen transparenten Header entscheiden, aber beim Scrollen einen klebrigen Header benötigen, werden Sie dieses Tutorial lieben. Mit den integrierten Sticky-Optionen von Divi zeigen wir Ihnen, wie Sie beim Scrollen von einer transparenten Kopfzeile zu einer anders gestalteten Sticky-Kopfzeile wechseln. Der Übergang zwischen transparent und klebrig ist mühelos! 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 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

Beginnen Sie mit dem Divi Theme Builder. Beginnen Sie dort mit dem Erstellen eines neuen globalen oder benutzerdefinierten Headers.

Abschnitt #1 Einstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Dieser Abschnitt ist der oberen Kopfzeile gewidmet, die Sie in der Vorschau dieses Beitrags sehen können. Öffnen Sie die Einstellungen des Abschnitts und fügen Sie eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

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 eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Textmodul zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul hinzu und geben Sie eine Kopie Ihrer Wahl ein.

Texteinstellungen

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

• Textschriftart: Oswald
• Textschriftart: Großbuchstaben
• Textfarbe: #ffffff
• Textgröße:
  • Desktop: 19px
  • Tablet: 18px
  • Telefon: 16px
• Textausrichtung: Mitte

Abschnitt 2 hinzufügen

Abstand

Fügen Sie direkt unter dem ersten Abschnitt einen weiteren regulären Abschnitt hinzu. Dieser Abschnitt ist unserem transparenten Menü gewidmet, das beim Scrollen aufgeklebt wird. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster auf der Registerkarte Design.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Transparente Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und wenden Sie eine vollständig transparente Hintergrundfarbe auf die Zeile an.

• Hintergrundfarbe: rgba(255,255,255,0)

Größe

Wechseln Sie zur Registerkarte Design der Zeile und ändern Sie die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie als nächstes einige benutzerdefinierte linke und rechte Polster hinzu.

• Linke Polsterung: 10%
• Rechte Polsterung: 10%

Box Schatten

Wenden Sie dann einen transparenten Kastenschatten an. Später im Tutorial verwenden wir diesen Boxschatten in einem klebrigen Zustand mit einer anderen Schattenfarbe.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0)

Position

Um sicherzustellen, dass die Zeile mit einem transparenten Hintergrund über dem Seiteninhalt angezeigt wird, verwenden wir eine absolute Position für unsere Zeile im erweiterten Tab.

• Position: Absolut
• Ort: Oben links

Spalte 2 Sichtbarkeit

Wir blenden auch die zweite Spalte unserer Zeile auf Tablets und Telefonen aus, um ein weniger komplexes Header-Design auf kleineren Bildschirmgrößen zu haben.

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Nachdem unsere Zeileneinstellungen nun vorhanden sind, ist es an der Zeit, Module hinzuzufügen, beginnend mit einem Menümodul in Spalte 1. Wählen Sie ein Menü Ihrer Wahl aus.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Hintergrundfarbe entfernen

Entfernen Sie auch die Hintergrundfarbe des Moduls.

Menütexteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Menütexteinstellungen entsprechend:

• Menüschrift: Oswald
• Schriftstärke des Menüs: Fett
• Menüschriftart: Großbuchstaben
• Menütextfarbe: #effef
• Menütextgröße: 18px
• Textausrichtung: Rechts

Dropdown-Menüeinstellungen

Ändern Sie auch die Dropdown-Menüeinstellungen.

• Farbe der Dropdown-Menüzeile: rgba(0,0,0,0)
• Hintergrundfarbe des mobilen Menüs: rgba(0,0,0,0.95)

Symboleinstellungen

Ändern Sie dann die Symbolfarben in den Symboleinstellungen.

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

Logoeinstellungen

Wir ändern auch die Farbe unseres Logos in den Logoeinstellungen, indem wir den Bildinvertierungsfilter ändern.

• Bild invertieren: 90%

Größe

Dann weisen wir unserem Logo eine maximale Höhe zu.

• Max. Höhe des Logos: 40px

Abstand

Als Nächstes fügen wir bei kleineren Bildschirmgrößen einige obere und untere Polster hinzu.

• Obere Polsterung:
  • Tablet & Telefon: 10px
• Untere Polsterung:
  • Tablet & Telefon: 10px

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.

Tastenausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Schaltflächenausrichtung.

• Tastenausrichtung: Rechts

Tasteneinstellungen

Stylen Sie die Schaltfläche als nächstes.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #ed4441
• Farbe der Knopfleiste: #ed4441

• Schaltflächenrandradius: 0px
• Tastenabstand: 4px
• Button-Schriftart: Oswald
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben
• Schaltflächensymbol anzeigen: Ja
• Farbe des Schaltflächensymbols: #1a1a1a

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie einige benutzerdefinierte Abstandswerte hinzufügen.

• Oberer Rand: -70px
• Obere Polsterung: 25px
• Untere Polsterung: 25px

2. Wenden Sie benutzerdefinierte Sticky-Effekte an

Abschnitt #2 klebrig machen

Nachdem wir nun die Grundlage für unseren Header festgelegt haben, ist es an der Zeit, den Sticky-Effekt anzuwenden! Öffnen Sie dazu zunächst die Einstellungen des zweiten Abschnitts und wenden Sie die folgenden Sticky-Einstellungen auf die Registerkarte „Erweitert“ an:

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

Sticky Row Hintergrundfarbe

Nachdem die Sticky-Option nun aktiviert ist, können wir Sticky-Design-Änderungen an allen Elementen innerhalb des Abschnitts vornehmen. Wir beginnen damit, dass wir die Zeile mit unserem Menü öffnen und eine weiße klebrige Hintergrundfarbe anwenden.

• Hintergrundfarbe: #FFFFFF

Sticky Row Spacing

Als Nächstes ändern wir die Sticky-Abstandswerte der Zeile.

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

Sticky Row Box Schatten

Wir ändern auch die Schattenfarbe der Box in einem klebrigen Zustand.

• Schattenfarbe: rgba(0,0,0,0.08)

Sticky Row-Positionierung

Dann bringen wir die Zeilenpositionierung in einen klebrigen Zustand zurück in den relativen Zustand.

• Position: Relativ
• Offset-Ursprung: Oben links

Einstellungen für Sticky-Menütext

Als Nächstes ändern wir die Textfarbe des klebrigen Menüs.

• Menütextfarbe: #000000

Sticky Menu Dropdown-Einstellungen

Zusammen mit der Hintergrundfarbe des mobilen Menüs in den Menü-Dropdown-Einstellungen.

• Hintergrundfarbe des mobilen Menüs: #ffffff

Farben des Sticky-Menüsymbols

Ändern Sie auch die Symbolfarben in einem klebrigen Zustand.

• Farbe des Einkaufswagensymbols: #000000
• Farbe des Suchsymbols: #000000
• Hamburger Menüsymbol Farbe: #000000

Sticky-Logo-Filter

Entfernen Sie dann den Logo-Bild-Invertierungsfilter in einem klebrigen Zustand.

• Bild invertieren: 0%

Sticky Button-Abstand

Und schließen Sie das Tutorial ab, indem Sie den negativen oberen Rand der Schaltfläche entfernen, während sie klebrig ist.

• Oberer Rand: 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 Divis Theme Builder mit den neuen Sticky-Optionen kombinieren können. Genauer gesagt haben wir Ihnen gezeigt, wie Sie beim Scrollen von einer transparenten Kopfzeile zu einer anders gestalteten klebrigen Kopfzeile wechseln. Dieser Ansatz ermöglicht es Ihnen, Ihr Seitendesign mit Ihrem Menü zu verschmelzen, während Sie beim Scrollen immer noch eine schöne Kopfzeile behalten. 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.