So blenden Sie Ihre Kopfzeile aus, bevor Sie mit den Sticky-Optionen von Divi scrollen

Ein Hero-Bereich ist der Eyecatcher Ihrer Website. Es gibt normalerweise den Ton für den Rest der Website an und zeigt den Besuchern, was sie erwarten können. Aus diesem Grund kann es hilfreich sein, sicherzustellen, dass sich der gesamte Fokus auf die wenigen Elemente konzentriert, die Sie in Ihrem Heldenabschnitt teilen, wie z. B. die Kopie und der Aufruf zum Handeln. Aber nur weil Sie den Heldenbereich hervorheben möchten, heißt das nicht, dass Sie nicht auch eine Navigationsleiste benötigen. Wenn Sie nach einer benutzerfreundlichen Möglichkeit suchen, Ihren Header anzuzeigen, sobald die Leute mit dem Scrollen beginnen, werden Sie diesen Beitrag lieben. Heute zeigen wir Ihnen, wie Sie Ihre Kopfzeile vor dem Scrollen mit den integrierten Sticky-Optionen von Divi ausblenden. Der Effekt, den wir erzielen, ist vollständig responsiv und sieht auf allen Bildschirmgrößen großartig aus. 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 Header-Vorlage KOSTENLOS herunter

Um die kostenlose Header-Vorlage in die Hände zu bekommen, müssen Sie sie zunächst ü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!

Wenn Sie die Vorlage in Ihren Divi Theme Builder hochladen und die Vorlage eingeben, werden Sie feststellen, dass der Abschnitt nicht sichtbar ist. Das liegt daran, dass der Effekt bereits darauf angewendet wurde. Um die verschiedenen Elemente zu ändern, können Sie entweder in den Drahtmodellmodus wechseln und dort auf die Elemente zugreifen, oder die Einstellungen für Abschnittstransformation und Hauptelement vorübergehend entfernen und zurücksetzen , wenn Sie mit der Änderung des Kopfzeilendesigns fertig sind.

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.

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #001b34

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie als nächstes 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:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und wenden Sie eine Hintergrundfarbe Ihrer Wahl an.

• Hintergrundfarbe: #001b34

Größe

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

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fahren Sie fort, indem Sie die Padding-Werte entsprechend ändern:

• Obere Polsterung: 0px
• Untere Polsterung: 0
• Linke Polsterung:
  • Desktop: /
  • Tablet & Telefon: 5%
• Rechte Polsterung:
  • Desktop: /
  • Tablet & Telefon: 5%

Spalte 1 Einstellungen

Hintergrundfarbe

Wenn Sie mit den allgemeinen Zeileneinstellungen fertig sind, öffnen Sie die Einstellungen von Spalte 1 und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #f4d5b8

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Menümodul in Spalte 1. Wählen Sie ein Menü Ihrer Wahl.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe.

• Hintergrundfarbe: #063765

Hintergrundbild

Und laden Sie ein Illustrationshintergrundbild Ihrer Wahl hoch. Sie können das folgende finden und verwenden, indem Sie das Freebie am Anfang dieses Beitrags herunterladen.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Textgröße des Menüs.

• Menütextgröße: 18px

Dropdown-Menüeinstellungen

Ändern Sie dann die Dropdown-Menüeinstellungen entsprechend:

• Farbe der Dropdown-Menüzeile: rgba(0,0,0,0)
• Hintergrundfarbe des mobilen Menüs: #ddc1a7
• Textfarbe des mobilen Menüs: #063765

Symboleinstellungen

Ändern Sie auch die Symbolfarben in den Symboleinstellungen auf Weiß.

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

Größe

Ändern Sie dann die maximale Breite des Logos in den Größeneinstellungen.

• Max. Breite des Logos: 70px

Abstand

Wenden Sie als Nächstes einige benutzerdefinierte Auffüllungswerte an.

• Obere Polsterung: 1%
• Untere Polsterung: 1%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Box Schatten

Zusammen mit einigen benutzerdefinierten Boxschatten.

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

Transformieren Übersetzen

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Transformationsübersetzungseinstellungen wie folgt ändern:

• Rechts:
  • Desktop: 20px
  • Tablet & Telefon: 0px

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 Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Rechts

Tasteneinstellungen

Stylen Sie dann die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #2a2a2a
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Farbe des Knopfrahmens: rgba(0,0,0,0)

• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Geben Sie Ihrem Knopf auch eine Form mit benutzerdefinierter Polsterung.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 40px
• Rechte Polsterung: 40px

Box Schatten

Wenden Sie als Nächstes einen Kastenschatten an.

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

Transformieren Übersetzen

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Werte der Transformationsübersetzung entsprechend ändern:

• Rechts:
  • Desktop: 50px
  • Tablet & Telefon: 0px

2. Wenden Sie benutzerdefinierte Sticky-Effekte an, um den Effekt "Vor dem Scrollen ausblenden" zu erreichen

Zeile absolut positioniert machen

Nachdem wir nun die Grundlage für unseren Header festgelegt haben, können wir den Header ausblenden vor dem Scroll-Effekt anwenden. Sie können diesen Effekt auf jeden von Ihnen erstellten Header anwenden, solange Sie die folgenden Schritte ausführen. Der erste Schritt besteht darin, die Zeileneinstellungen zu öffnen und die Zeile absolut zu drehen. Dies hilft uns zu verhindern, dass der Header oben auf unserer Seite Platz einnimmt.

• Position: Absolut
• Ort: Oben links

Abschnitt klebrig machen

Als Nächstes öffnen wir die Abschnittseinstellungen und lassen es oben bleiben.

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

Abschnitt Animation

Wir werden unserem Abschnitt auch eine Animation hinzufügen. Diese Animation hilft zu verhindern, dass die Kopfzeile angezeigt wird, wenn Ihre Seite geladen wird.

• Animationsstil: Ausblenden

Abschnittsübergangsdauer

Sie können selbst entscheiden, wie langsam oder schnell die Kopfzeile nach unten gleitet, wenn Sie mit dem Scrollen beginnen, indem Sie die Übergangsdauer auf der Registerkarte Erweitert des Abschnitts ändern. Je höher die Dauer, desto langsamer gleitet die Kopfzeile nach unten.

• Übergangsdauer: 800ms

Abschnitt Transformieren Übersetzen

In einem Standardzustand möchten wir jetzt nicht, dass der Header sichtbar ist. Der erste Schritt, um dies zu erreichen, besteht darin, zu den Transformationseinstellungen des Abschnitts zu gehen und einen negativen Wert für die Y-Achse zu verwenden.

• Rechts: -300px

Wir werden diesen Wert in einem klebrigen Zustand auf Null zurücksetzen. Das heißt, sobald Sie mit dem Scrollen beginnen, wird die Kopfzeile wieder sichtbar.

• Klebrig rechts: 0px

Abschnitt Sichtbarkeit CSS-Eigenschaft

Der nächste und letzte Schritt dieses Tutorials ist theoretisch nicht erforderlich, um den Effekt zu erzielen, aber es empfiehlt sich, nicht verwendete Elemente auszublenden. Aus diesem Grund gehen wir zum erweiterten Tab des Abschnitts und fügen die folgende Zeile CSS-Code in das Hauptelementfeld ein:

• Hauptelement:

  visibility: hidden

Wir ändern unseren Inhalt wieder in einen klebrigen Zustand, um ihn sichtbar zu machen. Das ist es!

• Klebriges Hauptelement:

  visibility: visible;

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 sicherstellen können, dass Ihr Heldenbereich im Mittelpunkt Ihrer Seite steht, sobald Personen Ihre Seite betreten. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihre Kopfzeile vor dem Scrollen ausblenden. Auf diese Weise können Ihre Besucher zuerst die Informationen des Heldenabschnitts verarbeiten, bevor ihnen die Möglichkeit zur Navigation geboten wird. 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.