Beim Erstellen Ihres globalen Headers müssen Sie viele Dinge berücksichtigen. Die Elemente, die Sie in Ihren Header einfügen, sollten Ihnen helfen Besucher leicht zu navigieren. Um die Zeit zu verkürzen, die Menschen mit dem Surfen verbringen, entscheiden sich viele Webdesigner für einen festen Top-Header, der es ermöglicht Besucher um sofort auf andere Seiten oder Veröffentlichungen zuzugreifen. Das ist wirklich praktisch, aber wenn Sie einen festen Header erstellen, nimmt er einen Großteil der Höhe Ihres Ansichtsfensters ein Besucher ist beschäftigt, was weniger als zulässt Inhalt sofort anzuzeigen. Wenn Sie nicht bereit sind, dieses Opfer zu bringen, wissen Sie, dass Sie es nicht müssen. Sie können die Vorteile eines festen Headers nutzen, indem Sie zulassen, dass der gesamte Header angezeigt wird, wenn Ihre Besucher nach oben scrollen, und ausgeblendet wird, wenn sie nach unten scrollen. Heute führen wir Sie durch das Ausblenden und Einblenden Ihres globalen Headers mit dem Theme Builder von Divi.

Übersicht

Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

1. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Beginnen Sie mit dem Divi Theme Builder.

Beginnen Sie mit der Erstellung eines globalen Headers

Klicken Sie dort auf "Globale Überschrift hinzufügen" und wählen Sie "Globale Überschrift erstellen".

2. Beginnen Sie mit der Erstellung eines globalen Headers

Abschnittseinstellungen

Hintergrundfarbe

Im Vorlageneditor sehen Sie einen Abschnitt. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Sizing

Gehen Sie zur Registerkarte Design und weisen Sie Ihrem nächsten Abschnitt 100% Breite zu.

• Breite: 100%

Abstand

Fügen Sie auch benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 2vw
• Polsterung unten: 2vw

Schattenkiste

Wir werden unserem Bereich auch einen subtilen Farbton zuweisen.

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

CSS-ID

Später in diesem Tutorial benötigen wir benutzerdefinierten Code, damit der Bildlaufeffekt auftritt. Um sich darauf vorzubereiten, fügen wir dem Abschnitt eine CSS-ID hinzu.

• CSS-ID: globaler Header-Abschnitt

Hauptelement

Wir werden den Abschnitt auch zu einem festen Header machen, indem wir dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.

position: fixed;top: 0;

Z Index

Stellen Sie nun sicher, dass unser Abschnitt oben auf der Seite angezeigt wird Inhalt des Beitrags werden wir auch den Z-Index in den Sichtbarkeitseinstellungen erhöhen.

• Z-Index: 99999

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

Wenn Sie alle Abschnittsparameter abgeschlossen haben, fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Sizing

Öffnen Sie die Zeileneinstellungen, ohne noch ein Modul hinzuzufügen, und lassen Sie die Zeile die gesamte Bildschirmbreite ausfüllen.

• Verwenden Sie eine benutzerdefinierte Rinnenbreite: 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
• Polsterung unten: 0px

Hauptelement

zentriere es Inhalt der Spalte und ermöglichen Sie, dass die Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, indem Sie dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzufügen.

display: flex;align-items: center;

Fügen Sie das Social Media Tracking-Modul zu Spalte 2 hinzu

Fügen Sie soziale Netzwerke hinzu

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Social-Media-Tracking-Modul in Spalte 1. Fügen Sie die sozialen Netzwerke hinzu, die Sie anzeigen möchten.

Einzelne Social-Media-Stile zurücksetzen

Setzen Sie die Stile jedes sozialen Netzwerks auf eine individuelle Ebene zurück.

Fügen Sie einen individuellen sozialen Netzwerkbereich hinzu

Sie müssen auch die Einstellungen für jedes soziale Netzwerk einzeln öffnen und in den Abstandseinstellungen eine untere Auffüllung hinzufügen.

• Polsterung unten: 0.5vw

Ausrichtung

Sobald du jedem sozialen Netzwerk das untere Padding einzeln hinzugefügt hast, gehe zurück zu den allgemeinen Einstellungen deines Mods. Wechseln Sie zur Registerkarte Design und ändern Sie die Modulausrichtung.

• Ausrichtung des Moduls: Mitte

Standard-Symboleinstellungen

Ändern Sie auch die Symbolfarbe in den Symboleinstellungen.

• Symbolfarbe: # 000000

Hover-Symboleinstellungen

Und ändern Sie die Farbe des Hover-Symbols.

• Symbolfarbe: # c2ab92

Grenze

Vervollständigen Sie die Modulparameter, indem Sie einen unteren Rand in die Randparameter einfügen.

• Breite des unteren Randes: 1px
• Farbe des unteren Randes: # 000000

Fügen Sie ein Menümodul zu Spalte 2 hinzu

Wählen Sie das Menü

Fahren wir mit der nächsten Spalte fort! Fügen Sie ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl.

Logo herunterladen

Laden Sie dann ein Logo in das Modul hoch.

Hintergrundfarbe entfernen

Und entfernen Sie die Hintergrundfarbe.

Bereitstellung

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: nach unten

Standardmenütext

Fahren Sie fort, indem Sie die Menütexteinstellungen wie folgt ändern:

• Farbe des aktiven Links: # c2ab92
• Menü Schriftart: Kormoran Garamond
• Textfarbe: # 000000
• Menütextgröße: 1 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)

Hover-Menütext

Ändern Sie den Menütext beim Hover.

• Menütextfarbe: # c2ab92

Menüführung

Ändern Sie dann die Farbe der Dropdown-Menüzeile in den Dropdown-Menüeinstellungen.

• Farbe der Zeile des Dropdown-Menüs: # 000000

Symbole

Wir ändern auch die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen.

• Hamburger Menü Symbol Farbe: # 000000

Sizing

Fahren Sie fort, indem Sie die maximale Logo-Breite auf verschiedenen Bildschirmgrößen in den Größeneinstellungen ändern.

• Maximale Logobreite: 5 Vw (Schreibtisch), 10 Vw (Tablet), 13 Vw (Telefon)

CSS-Link-Menü

Vervollständigen Sie die Moduleinstellungen, indem Sie dem Modulmenü-Link auf der Registerkarte "Erweitert" zwei Zeilen CSS-Code hinzufügen.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Fügen Sie der 3-Spalte einen Textbaustein hinzu

Kopie hinzufügen

Fahren wir mit dem letzten Modul fort! Dort brauchen wir nur ein Textmodul.

Ajouter un lien

Dieses Modul dient als CTA. Fügen Sie einen Link Ihrer Wahl hinzu.

• Modul-Link-URL: #

Standardeinstellungen für Text

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:

• Textschrift: Kormoran Garamond
• Textfarbe: # 000000
• Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)

Einstellungen für Schwebetext

Ändern Sie die Farbe des Texts beim Hover.

• Textfarbe: # c2ab92

Sizing

Fahren Sie fort, indem Sie die Parameter für die Modulgröße auf verschiedenen Bildschirmgrößen ändern.

• Breite: 12vw (Desktop), 18vw (Tablet), 22vw (Telefon)
• Ausrichtung des Moduls: Mitte

Abstand

Fügen Sie in den Abstandseinstellungen eine untere Polsterung hinzu.

• Polsterung unten: 0.5vw

Grenze

Vervollständigen Sie die Modulparameter, indem Sie einen unteren Rand hinzufügen.

• Breite des unteren Randes: 1px
• Farbe des unteren Randes: # 000000

Fügen Sie der 2-Spalte ein Codemodul hinzu

Fügen Sie JQuery- und CSS-Code ein

Sobald Sie alle Mods in der Reihe gestylt haben, ist es Zeit, den Enthüllungs- / Versteckeffekt zu aktivieren. Dazu müssen wir einem Codemodul, das wir in Spalte 2 einfügen, benutzerdefinierten Code hinzufügen. Dieser Code funktioniert in jedem Abschnitt, den Sie hinzufügen, unabhängig davon, wie Sie Ihren Header oder die Module entwerfen. Stellen Sie einfach sicher, dass Sie die CSS-ID zu Ihrem Abschnitt hinzugefügt haben. Platzieren Sie JQuery-Code zwischen Skript-Tags und CSS-Code zwischen Stil-Tags, wie im folgenden Druckbildschirm gezeigt.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Speichern Sie die Generatoränderungen und zeigen Sie das Ergebnis an

Wenn Sie den globalen Header abgeschlossen haben, speichern Sie alle Änderungen und sehen Sie sich das Ergebnis auf Ihrem an Website!

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Abschließende Gedanken

In diesem Artikel 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, mit der Ihre Besucher einfach navigieren können, ohne einen Teil ihrer Fensterhöhe in Anspruch zu nehmen. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.