So tauschen Sie Ihren Divi-Header bei Scroll gegen einen anderen aus

Ihr Header bleibt unweigerlich eines der wichtigsten Elemente Ihrer Website. Es beeinflusst den Navigationsprozess Ihrer Besucher und ermöglicht es ihnen, im Handumdrehen zu finden, wonach sie suchen. Wenn Sie nun nach einer Möglichkeit suchen, Ihren Divi-Header beim Scrollen durch einen anderen zu ersetzen, werden Sie diesen Beitrag genießen. Wir zeigen Ihnen genau, wie Sie es mit Divis Theme Builder, integrierten Elementen und etwas zusätzlichem Code schaffen. Wir stellen außerdem sicher, dass oben auf Ihrer Seite automatisch generierter Platzhalter für die Kopfzeile vorhanden ist. 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 Swap-Divi-Header-Vorlage KOSTENLOS herunter

Um die kostenlose Swap-Divi-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!

1. Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website und klicken Sie auf 'Global Header hinzufügen'.

Globalen Header erstellen

Klicken Sie dann auf "Globalen Header erstellen", um zum Vorlageneditor weitergeleitet zu werden.

2. Erstellen Sie beide Kopfzeilen im selben Abschnitt

Abschnitt ändern

Größe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Abschnittseinstellungen und stellen Sie sicher, dass die Abschnittsbreite „100%“ beträgt.

• Breite: 100%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Box Schatten

Wir verwenden auch einen subtilen Kastenschatten.

• Vertikale Position des Kastenschattens: 15px
• Schattenfarbe: rgba(0,0,0,0.06)

Position

Zu guter Letzt werden wir den Abschnitt mithilfe der Positionseinstellungen im erweiterten Tab oben in der Mitte unserer Seite festhalten.

• Position: Behoben
• Ort: Top Center

Zeilenkopfzeile 1 hinzufügen

Spaltenstruktur

Beide Header, die wir erstellen, sind Teil desselben Abschnitts. Wir verwenden eine separate Zeile für jede Überschrift. Fügen Sie die erste Zeilenüberschrift mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #000000

Größe

Ändern Sie auch die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Hauptelement

Vervollständigen Sie die Zeileneinstellungen, indem Sie dem Hauptelement der Zeile zwei Zeilen CSS-Code hinzufügen. Dieser CSS-Code hilft uns, den gesamten Spalteninhalt auszurichten.

display: flex;
align-items: center;

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo Ihrer Wahl hoch.

Ausrichtung

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

• Bildausrichtung: Mitte

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

In der zweiten Spalte benötigen wir als einziges Modul ein Menümodul. Wählen Sie ein Menü Ihrer Wahl.

Hintergrundfarbe entfernen

Entfernen Sie als nächstes die Hintergrundfarbe des Moduls.

Layout

Wechseln Sie zur Registerkarte Design und ändern Sie das Layout entsprechend:

• Stil: Zentriert

Menütexteinstellungen

Nehmen Sie dann einige Änderungen an den Menütexteinstellungen vor.

• Menüschrift: Roboto
• Schriftstärke des Menüs: Fett
• Menütextfarbe: #ffffff (Desktop), #000000 (Tablet & Telefon)
• Menütextgröße: 18px

Texteinstellungen des Dropdown-Menüs

Als Nächstes ändern wir die Farbe der Dropdown-Menüzeile in den Texteinstellungen des Dropdown-Menüs.

• Farbe der Dropdown-Menüzeile: #000000

Symboleinstellungen

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

• Farbe des Hamburger-Menüsymbols: #ffffff

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie bei kleineren Bildschirmgrößen benutzerdefinierte linke und rechte Abstände hinzufügen.

• Linke Polsterung: 30px (nur Tablet und Telefon)
• Rechte Polsterung: 30px (nur Tablet und Telefon)

Fügen Sie das Social Media Follow-Modul zu Spalte 3 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

In der letzten Spalte benötigen wir als einziges Modul ein Social Media Follow Module. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Individuelle Hintergrundfarbe für soziale Netzwerke

Öffnen Sie dann jedes soziale Netzwerk einzeln und ändern Sie die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #FFFFFF

Ausrichtung

Gehen Sie zurück zu den allgemeinen Einstellungen des Moduls und ändern Sie die Modulausrichtung.

• Modulausrichtung: Mitte

Symboleinstellungen

Ändern Sie auch die Symbolfarbe.

• Symbolfarbe: #0042c9

Grenze

Und vervollständigen Sie die Moduleinstellungen, indem Sie einen Randradius hinzufügen.

• Alle Ecken: 100px

Zeilenkopfzeile 2 hinzufügen

Spaltenstruktur

Auf zum zweiten Header! Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

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

Hauptelement

Richten Sie dann den gesamten Spalteninhalt aus, indem Sie zwei Zeilen CSS-Code im Hauptelement der Zeile verwenden.

display: flex;
align-items: center;

Spalte 3 Hintergrundfarbe

Und vervollständigen Sie die Zeileneinstellungen, indem Sie die Einstellungen von Spalte 3 öffnen und eine Hintergrundfarbe verwenden.

• Hintergrundfarbe: #0042c9

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

In Spalte 1 ist das einzige Modul, das wir brauchen, ein Image-Modul. Laden Sie ein Logo Ihrer Wahl hoch.

Ausrichtung

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

• Bildausrichtung: Mitte

Menümodul klonen und in Spalte 2 von Zeilenkopf Nr. 2 platzieren

Klonen Sie das Menümodul, das in der vorherigen Zeile verwendet wurde, und platzieren Sie das Duplikat in der mittleren Spalte der zweiten Zeile.

Menütexteinstellungen ändern

Öffnen Sie das doppelte Menümodul und ändern Sie die Menütextfarbe.

• Menütextfarbe: #0042c9

Ändern Sie die Texteinstellungen des Dropdown-Menüs

Ändern Sie auch die Texteinstellungen des Dropdown-Menüs.

• Farbe der Dropdown-Menüzeile: #ffc21d

Symboleinstellungen ändern

Vervollständigen Sie die Einstellungen des Menümoduls, indem Sie die Farbe des Hamburger-Menüsymbols ändern.

• Hamburger Menüsymbolfarbe: #0042c9

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

In der letzten Spalte der Zeile ist das einzige Modul, das wir brauchen, ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Ändern Sie als nächstes die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie dann die Schaltfläche wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 20px (Desktop), 18px (Tablet), 15px (Telefon)
• Schaltflächentextfarbe: #ffffff
• Breite des Tastenrahmens: 0px

• Schaltflächenschriftart: Roboto
• Schriftstärke der Schaltfläche: Fett

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Polster für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 33px (Desktop), 35px (Tablet), 38px (Telefon)
• Untere Polsterung: 33px (Desktop), 35px (Tablet), 38px (Telefon)

2. CSS-Klassen hinzufügen

Abschnitt

Nachdem Sie alle Module hinzugefügt und gestaltet haben, ist es an der Zeit, die CSS-Klassen hinzuzufügen, die wir in unserem JQuery-Code verwenden. Öffnen Sie zunächst die Abschnittseinstellungen und verwenden Sie die folgende CSS-Klasse:

• CSS-Klasse: header-section

Zeilenkopf Nr. 1

Öffnen Sie dann die Kopfzeile der ersten Zeile und verwenden Sie die folgende CSS-Klasse:

• CSS-Klasse: header-1

Zeilenkopf #2

Öffnen Sie auch die zweite Reihe. Verwenden Sie dafür die folgende CSS-Klasse:

• CSS-Klasse: header-2

3. JQuery- und CSS-Code hinzufügen

Codemodul zur dritten Spalte der ersten Zeile hinzufügen

Sobald alle CSS-Klassen vorhanden sind, ist es an der Zeit, den Code hinzuzufügen. Fügen Sie ein neues Codemodul an einer beliebigen Stelle in Ihrem Abschnitt hinzu. Wir platzieren es in der dritten Spalte der ersten Zeile.

JQuery-Code hinzufügen (zwischen Skript-Tags)

Fügen Sie dann die folgenden CSS-Codezeilen zwischen Skript-Tags ein, wie Sie im Druckbildschirm unten sehen können:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

CSS-Code hinzufügen (zwischen Style-Tags)

Fügen Sie auch den folgenden CSS-Code zwischen style-Tags hinzu :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Theme Builder-Änderungen speichern und Ergebnis anzeigen

An diesem Punkt müssen Sie nur noch alle Änderungen am Theme Builder 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 Ihren Divi-Header beim Scrollen mit dem Theme-Builder von Divi, den Divi-Elementen und etwas zusätzlichem JQuery- und CSS-Code gegen einen anderen austauschen. Außerdem haben wir oben im Seitencontainer automatisch etwas Platz generiert, der verhindert, dass die feste Kopfzeile den Seiteninhalt überlappt. Sie konnten auch die JSON-Datei der Swap-Divi-Header-Vorlage 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.