So zeigen Sie Ihren globalen Header beim Scrollen nach oben und verbergen beim Scrollen nach unten mit Divi
Veröffentlicht: 2019-12-11Wenn Sie Ihren globalen Header erstellen, müssen Sie viele Dinge berücksichtigen. Die Elemente, die Sie in Ihrer Kopfzeile platzieren, müssen Ihren Besuchern die Navigation erleichtern. Um die Zeit für die Navigation zu reduzieren, entscheiden sich viele Webdesigner für einen festen oberen Header, der es den Besuchern ermöglicht, sofort zu anderen Seiten oder Beiträgen zu gelangen. Das ist wirklich praktisch, aber wenn Sie einen festen Header erstellen, wird ein großer Teil der Viewport-Höhe Ihrer Besucher eingenommen, sodass weniger Inhalte auf einmal angezeigt werden. Wenn Sie nicht bereit sind, dieses Opfer zu bringen, sollten Sie wissen, dass Sie es nicht müssen. Sie können die Vorteile einer festen Kopfzeile nutzen, indem Sie Ihre globale Kopfzeile anzeigen lassen, wenn Ihre Besucher nach oben scrollen, und sie ausblenden, wenn sie nach unten scrollen. Heute führen wir Sie durch das Verbergen und Aufdecken Ihres globalen Headers mit Divis Theme Builder. 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.
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. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu
Gehe zum Divi Theme Builder
Beginnen Sie mit dem Divi Theme Builder.
Beginnen Sie mit dem Erstellen eines globalen Headers
Klicken Sie dort auf „Globalen Header hinzufügen“ und wählen Sie „Globalen Header erstellen“.
2. Beginnen Sie mit dem Erstellen des globalen Headers
Abschnittseinstellungen
Hintergrundfarbe
Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie seine Hintergrundfarbe.
- Hintergrundfarbe: #ffffff
Größe
Wechseln Sie zum Design-Tab und weisen Sie Ihrem Abschnitt als nächstes eine Breite von 100 % zu.
- Breite: 100%
Abstand
Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.
- Obere Polsterung: 2vw
- Untere Polsterung: 2vw
Box Schatten
Wir werden auch einen subtilen Kastenschatten auf unseren Abschnitt anwenden.
- Stärke der Box-Schattenunschärfe: 50px
- Schattenfarbe: rgba(0,0,0,0.08)
CSS-ID
Später in diesem Tutorial benötigen wir benutzerdefinierten Code, um den Bildlaufeffekt zu erzielen. Zur Vorbereitung fügen wir dem Abschnitt eine CSS-ID hinzu.
- CSS-ID: global-header-section
Hauptelement
Wir verwandeln den Abschnitt auch in einen festen Kopf, indem wir dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.
position: fixed; top: 0;
Z-Index
Um sicherzustellen, dass unser Abschnitt über allen Seiten- oder Postinhalten angezeigt wird, erhöhen wir auch den Z-Index in den Sichtbarkeitseinstellungen.
- Z-Index: 99999
Neue Zeile hinzufügen
Spaltenstruktur
Nachdem Sie alle Abschnittseinstellungen vorgenommen haben, fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Größe
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite einnehmen.
- Benutzerdefinierte Dachrinnenbreite verwenden: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
- Breite: 100%
- Maximale Breite: 100%
Abstand
Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.
- Obere Polsterung: 0px
- Untere Polsterung: 0px
Hauptelement
Zentrieren Sie den Spalteninhalt und lassen Sie die Spalten auf kleineren Bildschirmgrößen nebeneinander liegen, indem Sie dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzufügen.
display: flex; align-items: center;
Fügen Sie das Social Media Follow-Modul zu Spalte 2 hinzu
Soziale Netzwerke hinzufügen
Es ist Zeit, Module hinzuzufügen, beginnend mit einem Social Media Follow-Modul in Spalte 1. Fügen Sie die sozialen Netzwerke hinzu, die angezeigt werden sollen.
Zurücksetzen einzelner Stile für soziale Netzwerke
Fahren Sie fort, indem Sie die Stile jedes sozialen Netzwerks auf individueller Ebene zurücksetzen.
Individuellen Abstand für soziale Netzwerke hinzufügen
Sie müssen auch die Einstellungen jedes sozialen Netzwerks einzeln öffnen und in den Abstandseinstellungen eine untere Polsterung hinzufügen.
- Untere Polsterung: 0.5vw
Ausrichtung
Nachdem Sie das untere Padding jedem sozialen Netzwerk einzeln hinzugefügt haben, kehren Sie zu Ihren allgemeinen Moduleinstellungen zurück. Wechseln Sie zur Registerkarte Design und ändern Sie die Modulausrichtung.
- Modulausrichtung: Mitte
Standardsymboleinstellungen
Ändern Sie auch die Symbolfarbe in den Symboleinstellungen.
- Symbolfarbe: #000000
Hover-Symboleinstellungen
Und ändern Sie die Symbolfarbe beim Bewegen des Mauszeigers.
- Symbolfarbe: #c2ab92
Grenze
Vervollständigen Sie die Einstellungen des Moduls, indem Sie in den Rahmeneinstellungen einen unteren Rand hinzufügen.
- Breite des unteren Rands: 1px
- Farbe des unteren Rands: #000000
Menümodul zu Spalte 2 hinzufügen
Menü auswählen
Auf zur nächsten Spalte! Fügen Sie ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl aus.
Logo hochladen
Laden Sie als nächstes ein Logo in das Modul hoch.
Hintergrundfarbe entfernen
Und entfernen Sie die Hintergrundfarbe.
Layout
Wechseln Sie dann zur Registerkarte Design und stellen Sie sicher, dass die folgenden Einstellungen für das Layout gelten:
- Stil: Zentriert
- Richtung des Dropdown-Menüs: Abwärts
Standardmenütext
Fahren Sie fort, indem Sie die Menütexteinstellungen wie folgt ändern:
- Farbe des aktiven Links: #c2ab92
- Menüschrift: Kormoran Garamond
- Textfarbe: #000000
- Menütextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
Hover-Menütext
Ändern Sie den Menütext beim Hover.
- Menütextfarbe: #c2ab92
Dropdown-Menü
Ändern Sie als Nächstes die Farbe der Dropdown-Menüzeile in den Dropdown-Menüeinstellungen.
- Farbe der Dropdown-Menüzeile: #000000
Symbole
Wir ändern auch die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen.
- Hamburger Menüsymbol Farbe: #000000
Größe
Fahren Sie fort, indem Sie die maximale Breite des Logos für verschiedene Bildschirmgrößen in den Größeneinstellungen ändern.
- Max. Logobreite: 5vw (Desktop), 10vw (Tablet), 13vw (Telefon)
Menü-Link-CSS
Und vervollständigen Sie die Einstellungen des Moduls, indem Sie dem Menülink des Moduls auf der Registerkarte "Erweitert" zwei Zeilen CSS-Code hinzufügen.
padding-bottom: 1vw; border-bottom: 1px solid #000;
Textmodul zu Spalte 3 hinzufügen
Kopie hinzufügen
Auf zum letzten Modul! Dort brauchen wir nur noch ein Textmodul.
Link hinzufügen
Dieses Modul dient als CTA. Fügen Sie einen Link Ihrer Wahl hinzu.
- Modul-Link-URL: #
Standardtexteinstellungen
Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:
- Schriftart: Kormoran Garamond
- Textfarbe: #000000
- Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
Hover-Texteinstellungen
Ändern Sie die Textfarbe beim Schweben.
- Textfarbe: #c2ab92
Größe
Fahren Sie fort, indem Sie die Größeneinstellungen des Moduls für verschiedene Bildschirmgrößen ändern.
- Breite: 12vw (Desktop), 18vw (Tablet), 22vw (Telefon)
- Modulausrichtung: Mitte
Abstand
Und fügen Sie in den Abstandseinstellungen etwas unteres Polster hinzu.
- Untere Polsterung: 0.5vw
Grenze
Vervollständigen Sie die Einstellungen des Moduls, indem Sie einen unteren Rand hinzufügen.
- Breite des unteren Rands: 1px
- Farbe des unteren Rands: #000000
Codemodul zu Spalte 2 hinzufügen
JQuery- und CSS-Code einfügen
Sobald Sie alle Module in der Reihe gestylt haben, ist es an der Zeit, den Ein-/Ausblenden-Effekt auszuführen. Dazu müssen wir einem Codemodul benutzerdefinierten Code hinzufügen, den wir in Spalte 2 platzieren. Dieser Code funktioniert in jedem Abschnitt, den Sie hinzufügen, unabhängig davon, wie Sie Ihren Header entwerfen oder welche Module Sie verwenden Stellen Sie sicher, dass Sie die CSS-ID zu Ihrem Abschnitt hinzugefügt haben. Platzieren Sie den JQuery-Code zwischen Skript-Tags und den CSS-Code zwischen Style-Tags, wie im Druckbildschirm unten gezeigt.
jQuery(function($){
var topPosition = 0;
$(window).scroll(function() {
var scrollMovement = $(window).scrollTop();
if (topPosition < 200 ){
}
else{
if(scrollMovement > topPosition) {
$('#global-header-section').removeClass('show-header');
$('#global-header-section').addClass('hide-header');
} else {
$('#global-header-section').removeClass('hide-header');
$('#global-header-section').addClass('show-header');
}
}
topPosition = scrollMovement;
});
});#main-content{
margin-top: 7vw;
}
.hide-header {
opacity: 0;
margin-top: -200px !important;
}
.show-header {
opacity: 1;
margin-top: 0px !important;
}
#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
3. Builder-Änderungen speichern und Ergebnis anzeigen
Nachdem Sie den globalen Header ausgefüllt haben, speichern Sie alle Änderungen und sehen Sie sich das Ergebnis auf Ihrer Website an!
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 Ihren globalen Header beim Scrollen nach oben anzeigen und beim Scrollen nach unten ausblenden können. Dies ist eine beliebte und effektive Methode, um Ihren Besuchern die Navigation zu erleichtern, ohne einen Teil der Höhe des Ansichtsfensters zu beanspruchen. 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.