Wie Sie Ihren Divi Sticky Header „aufnehmen“, wenn Sie den Hero-Bereich Ihrer Seite passieren
Veröffentlicht: 2020-11-18Seit der Veröffentlichung des Divi Sticky Options-Updates haben wir Tipps und Tricks zur Verwendung in Ihren Website-Builds mit Divi geteilt, und heute fügen wir Ihnen ein weiteres als Lesezeichen hinzu! In diesem Tutorial dreht sich alles um Interaktion. Wir platzieren automatisch eine benutzerdefinierte Kopfzeile unter dem Heldenbereich jeder Seite und kleben diese Kopfzeile, sobald Besucher daran vorbeiscrollen, was zu einem schönen Scroll-Erlebnis führt. 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 Vorlage KOSTENLOS herunter
Um die kostenlose Seitenvorlage 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.
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.
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 Sie eine neue Seite mit Divis Polsterlayout Pack Landing Page
Für dieses Tutorial verwenden wir das Polsterlayoutpaket und seine kostenlose Kopf- und Fußzeilenvorlage, die Sie im Blog herunterladen können. Obwohl wir dieses spezielle Layout-Paket verwenden, können Sie diese Methode auf jede Art von Website anwenden, die Sie erstellen. Um eine Vorschau des Ergebnisses während des folgenden Tutorials zu erhalten, empfehlen wir Ihnen, eine Seite einzurichten, die Sie in einem separaten Tab geöffnet halten. Um die von uns verwendete Kopf- und Fußzeile abzugleichen, richten wir eine neue Seite mit einem Layout Ihrer Wahl ein, das mit Divis Polsterlayout-Paket geliefert wird.
2. Laden Sie die kostenlose Kopf- und Fußzeile für Divi's Polsterlayout-Paket herunter und installieren Sie es
Laden Sie die kostenlose Kopf- und Fußzeile in unserem Blog herunter
Als Nächstes laden wir die kostenlose Kopf- und Fußzeilenvorlage für Divi's Polsterlayoutpaket herunter. Das Herunterladen und Installieren dieses Freebies wird uns helfen, uns auf den wichtigen Teil dieses Tutorials zu konzentrieren, nämlich die richtige Technik. Wenn Sie zum Blogbeitrag gegangen sind, navigieren Sie zum E-Mail-Optin-Formular und geben Sie Ihre E-Mail-Adresse ein. Dann wird ein Download-Button angezeigt. Mit dieser Download-Schaltfläche können Sie einen gezippten Ordner herunterladen. Nachdem Sie den Ordner entpackt haben, finden Sie eine JSON-Datei, die eine Standard-Website-Vorlage mit einer globalen Kopf- und Fußzeile enthält.
Navigieren Sie zu Divis Theme Builder
Um die gerade heruntergeladene JSON-Datei zu verwenden, navigieren Sie zu Ihrem Divi Theme Builder.
Laden Sie die Standard-Website-Vorlage mit Kopf- und Fußzeilendesigns hoch
Klicken Sie dort oben rechts auf die Schaltfläche Import & Export und laden Sie die JSON-Datei hoch, die Sie in Ihrem Download-Ordner finden.
Neue Seitenvorlage erstellen
Sobald Sie die Vorlage hochgeladen haben, wird eine globale Kopf- und Fußzeile in Ihrer Standard-Website-Vorlage angezeigt. Um seltsame Header-Platzierungen zu vermeiden, wenden wir nur den Effekt "Sticky Header aufnehmen" auf unsere Seiten an. Wenn Sie jedoch auch einen von Divi erstellten Heldenbereich für andere benutzerdefinierte Beitragstypen haben, können Sie den Header auch dort verwenden. Fügen Sie eine neue Vorlage hinzu und verwenden Sie sie auf allen Seiten.
- Verwenden auf: Alle Seiten
Kopf- und Fußzeilenvorlage aus der Standard-Websitevorlage entfernen
Sobald Sie die Seitenvorlage hinzufügen, werden die globale Kopf- und Fußzeile automatisch zu dieser Vorlage hinzugefügt. Wir verwandeln diese globale Kopfzeile in eine benutzerdefinierte Kopfzeile, indem wir die globale Kopf- und Fußzeile in unserer Standard-Website-Vorlage entfernen. Auf diese Weise gelten die Änderungen, die wir an unserem Header vornehmen, nur für Seiten.
3. Platzieren Sie den Header-Bereich unter dem Hero-Bereich
Globale Header-Vorlage öffnen
Nachdem wir die Theme-Builder-Umgebung für unseren Header eingerichtet haben, ist es an der Zeit, zu unserer Header-Vorlage zu wechseln, indem Sie auf das Stiftsymbol klicken.
Weisen Sie dem Abschnitt im globalen Header eine benutzerdefinierte CSS-ID zu
Sobald Sie sich im Vorlageneditor befinden, sehen Sie ein Kopfzeilendesign, das einen Abschnitt, eine Zeile und einige Module enthält. Um die Kopfzeile automatisch unter dem ersten Heldenabschnitt jeder Seite zu platzieren, müssen wir unserem Abschnitt eine benutzerdefinierte ID zuweisen. Die von uns verwendete Technik basiert auf einem früheren Tutorial. Der Unterschied zwischen diesem Beitrag und dem im vorherigen Satz erwähnten besteht darin, dass er, sobald ein Besucher am Header vorbeigeht, klebrig wird. Wenn die Leute wieder nach oben scrollen, nimmt es seinen Platz unterhalb des Heldenabschnitts ein.
- CSS-ID: benutzerdefinierter Header
Codemodul unter Menümodul in Spalte 1 hinzufügen
Fahren Sie fort, indem Sie der ersten Spalte der Zeile ein neues Codemodul hinzufügen.
Fügen Sie JQuery-Code hinzu, um Abschnitt unter dem ersten Abschnitt jeder Seite zu platzieren
Dort fügen wir JQuery-Code ein, der den Header-Abschnitt automatisch unter dem ersten Hero-Abschnitt jeder Seite platziert.
jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});
CSS-Code zum gleichen Codemodul hinzufügen
Wir werden auch eine CSS-Klasse zwischen Style-Tags einfügen, um zu verhindern, dass der Header beim Erstellen von Seiten im Builder angezeigt wird.
#et_pb_root #custom-header {
display: none;
}
4. Wenden Sie Sticky Position & Styles auf Header an
Sticky Positioning zum Abschnitt hinzufügen
Da sich unser Abschnitt nun unter dem ersten Heldenabschnitt jeder Seite befindet, ist es an der Zeit, auch den Sticky-Effekt anzuwenden. Dazu verwenden wir die integrierten Sticky-Einstellungen von Divi auf der Registerkarte "Erweitert".
- Klebrige Position: Bleiben Sie oben
Sticky Box Shadow zum Abschnitt hinzufügen
Nachdem die Sticky-Position nun angewendet wurde, können wir damit beginnen, Sticky-Änderungen an unserem Abschnitt und allen darin enthaltenen untergeordneten Elementen vorzunehmen. Wir beginnen damit, unserem Abschnittscontainer einen Sticky-Box-Schatten hinzuzufügen.
- Stärke der Box-Schattenunschärfe: 30px
- Schattenfarbe
- Standard: rgba(0,0,0,0)
- Klebrig: rgba(0,0,0,0.13)
Hintergrund mit Farbverlauf in Sticky Row ändern
Dann wenden wir einen klebrigen Farbverlaufshintergrund auf unsere Zeile an.
- Farbe 1: #ffffff
- Farbe 2: #e8e8e8
Textfarbe des Sticky-Menümoduls ändern
Dann öffnen wir das Menümodul und ändern die Menütextfarbe in einen klebrigen Zustand.
- Menütextfarbe: #2d2e34
Sticky Menu Hamburger Symbolfarbe ändern
Wir werden auch die Farbe des Hamburger-Symbols für das Sticky-Menü ändern.
- Hamburger Menüsymbolfarbe: #2d2e34
Invertierungsfilter für klebriges Logo hinzufügen
Und wir vervollständigen das Tutorial, indem wir einen Bildinvertierungsfilter hinzufügen. Das ist es! Nachdem Sie alle diese Änderungen auf Ihre Kopfzeile angewendet haben, stellen Sie sicher, dass Sie die Vorlagen- und Divi Theme Builder-Änderungen speichern, bevor Sie das Ergebnis auf der Seite anzeigen, die Sie im ersten Teil des Tutorials erstellt haben.
- Bildumkehrung: 80%
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 einen weiteren Tipp und Trick geteilt, den Sie mit den integrierten Sticky-Optionen von Divi anwenden können. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihre Kopfzeile „aufnehmen“ können, wenn Sie daran vorbeiscrollen. Die Kopfzeile wird automatisch unter dem ersten Abschnitt jeder Seite platziert. 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.