So verkleinern Sie die Größe Ihres globalen Headers beim Scrollen mit Divis Theme Builder

Wenn Sie eine feste globale Kopfzeile entwerfen, möchten Sie möglicherweise die Höhe der Kopfzeile verkleinern, wenn Ihre Besucher scrollen. Es hilft, den Platz zu reduzieren, den der globale Header in der Viewport-Höhe Ihrer Besucher einnimmt. In diesem Tutorial führen wir Sie durch diesen Prozess. Wir beginnen mit dem Erstellen des Menüs und fügen dann JQuery- und CSS-Code hinzu, um den Effekt auszulösen. 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!

Abonnieren Sie unseren Youtube-Kanal

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 dann auf „Globalen Header erstellen“ und wählen Sie „Globalen Header erstellen“.

2. Beginnen Sie mit dem Erstellen des globalen Headers

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, sehen Sie einen Abschnitt. Öffnen Sie den Abschnitt und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #FFFFFF

Größe

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

• Breite: 100%

Abstand

Ändern Sie auch die obere und untere Auffüllung des Abschnitts.

• Obere Polsterung: 2vw
• Untere Polsterung: 2vw

Box Schatten

Trennen Sie den Seiteninhalt vom globalen Header, indem Sie dem nächsten Abschnitt einen subtilen Boxschatten hinzufügen.

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

CSS-ID

Fügen Sie dann dem Abschnitt eine CSS-ID hinzu. Später im Tutorial verwenden wir diese CSS-ID, um den verkleinernden globalen Header-Effekt beim Scrollen zu erstellen.

• CSS-ID: Abschnittsauffüllung

Hauptelement

Gehen Sie zur Registerkarte Erweitert, gehen Sie zu den benutzerdefinierten CSS-Einstellungen und korrigieren Sie den Abschnitt, indem Sie dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.

position: fixed;
top: 0;

Z-Index

Um sicherzustellen, dass der Abschnitt über allen Seiten- und Postinhalten angezeigt wird, erhöhen wir auch den Z-Index des Abschnitts.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Spalteneinstellungen abgeschlossen haben, fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Größe entsprechend:

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

Abstand

Entfernen Sie als Nächstes die standardmäßige obere und untere Auffüllung der Zeile.

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

CSS-ID

Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie der Zeile eine CSS-ID hinzu. Wir benötigen diese CSS-ID später im Tutorial, damit der Verkleinerungseffekt funktioniert.

• CSS-ID: Zeilenbreite

Hauptelement

Um sicherzustellen, dass alle Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben und um den gesamten Spalteninhalt zu zentrieren, fügen wir dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzu.

display: flex;
align-items: center;

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo mit transparentem Hintergrund hoch.

Größe

Ändern Sie als nächstes die Breite des Moduls.

• Breite: 5vw (Desktop), 9vw (Tablet), 13vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

Gehen Sie zur zweiten Spalte und fügen Sie ein Menümodul ein. Wählen Sie ein Menü Ihrer Wahl.

Hintergrundfarbe entfernen

Entfernen Sie als nächstes die Hintergrundfarbe des Moduls.

Layout

Wechseln Sie zum Design-Tab des Moduls und ändern Sie auch das Layout.

• Stil: Zentriert
• Richtung des Dropdown-Menüs: Abwärts

Menütext

Öffnen Sie dann die Menütexteinstellungen und nehmen Sie einige Änderungen vor.

• Menüschrift: Rubik
• Menütextfarbe: #000000
• Menütextgröße: 0,9 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)

Dropdown-Menü

Ändern Sie auch die Dropdown-Menüeinstellungen.

• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Farbe der Dropdown-Menüzeile: #2970fa

Symbole

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen ändern.

• Hamburger Menüsymbolfarbe: #2970fa

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Weiter zur nächsten und letzten Spalte. Fügen Sie ein Button-Modul mit einer Kopie Ihrer Wahl hinzu.

Ausrichtung

Ändern Sie als nächstes die Ausrichtung des Moduls.

• Tastenausrichtung: Rechts

Tasteneinstellungen

Stylen Sie die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 1,5 vw (Tablet), 2 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #2970fa
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 1px
• Button-Schriftart: Rubik
• Schaltflächenschriftart: Großbuchstaben

Abstand

Und fügen Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 0.8vw (Desktop), 1.8vw (Tablet), 2.5vw (Telefon)
• Untere Polsterung: 0.8vw (Desktop), 1.8vw (Tablet), 2.5vw (Telefon)
• Linke Polsterung: 1,5 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• Rechte Polsterung: 1,5 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)

Box Schatten

Vervollständigen Sie die Einstellungen des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 30px
• Schattenfarbe: rgba(41,112,250,0.2)

Codemodul zu Spalte 2 hinzufügen

JQuery- und CSS-Code einfügen

Der nächste und letzte Teil dieses Tutorials behandelt den Schrumpfeffekt unter Verwendung der beiden CSS-IDs, die wir unserem Abschnitt und unserer Zeile zugewiesen haben. Fügen Sie in Spalte 2 ein Codemodul mit den folgenden Zeilen des JQuery- und CSS-Codes hinzu. Stellen Sie sicher, dass Sie den JQuery-Code zwischen script-Tags und den CSS-Code zwischen style-Tags einfügen.

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

3. Builder-Änderungen speichern und Ergebnis anzeigen

Nachdem Sie den Code hinzugefügt haben, können Sie alle Änderungen, die Sie an der globalen Kopfzeile vorgenommen haben, speichern und das Ergebnis auf Ihrer Website anzeigen!

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 mit Divis Theme Builder einen verkleinernden globalen Header erstellen. Kopfzeilen zu verkleinern sind eine großartige Möglichkeit, um Platz auf der Viewport-Höhe Ihres Besuchers zu sparen. Wir haben das Design von Grund auf neu erstellt und benutzerdefinierten benutzerdefinierten Code hinzugefügt, um den Schrumpfeffekt auszulösen. 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.