So platzieren Sie Ihre Kopfzeile automatisch unter dem ersten Divi-Abschnitt jeder Seite

Seit dem Erscheinen des Divi Theme Builder haben wir Tutorials zum Erstellen und Anpassen einer Kopfzeile geteilt, um sie an unterschiedliche Bedürfnisse anzupassen. Im heutigen Tutorial setzen wir diese Reise fort, indem wir Ihnen zeigen, wie Sie automatisch eine benutzerdefinierte Kopfzeile unter dem ersten Divi-Abschnitt jeder Seite platzieren. Dieser Ansatz ermöglicht es Besuchern, zuerst den Heldenbereich Ihrer Seiten zu sehen und dann Zugriff auf das Menü und alle seine Elemente zu erhalten. Der Stil, den wir für die benutzerdefinierte Kopfzeile verwenden, entspricht dem Bistro-Layout-Paket. Sie können die benutzerdefinierte Seitenvorlage 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 benutzerdefinierte Header-Vorlage KOSTENLOS herunter

Um die kostenlose benutzerdefinierte 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 fügen Sie eine neue Seitenvorlage hinzu

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

Gehen Sie zunächst zum Divi Theme Builder und fügen Sie eine neue Vorlage hinzu.

Verwenden Ein

Verwenden Sie diese neue Vorlage auf allen Seiten.

• Verwenden auf: Alle Seiten

2. Beginnen Sie mit der Erstellung eines benutzerdefinierten Header-Designs

Fahren Sie fort, indem Sie eine benutzerdefinierte Kopfzeile in der Seitenvorlage erstellen.

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Abstand

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

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

Grenze

Fügen Sie auch einen oberen und unteren Rand hinzu.

• Obere und untere Randbreite: 1px
• Farbe des oberen und unteren Rands: #002d4c

CSS-ID

Und fügen Sie eine CSS-ID hinzu. Später in der Anleitung verwenden wir diese CSS-ID, um den Abschnitt unter dem ersten Abschnitt jeder Seite zu platzieren.

• CSS-ID: benutzerdefinierter Header

Z-Index

Zu guter Letzt erhöhen wir den Z-Index des Abschnitts, um sicherzustellen, dass er über allen Seiteninhalten angezeigt wird.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

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 Breite des Abschnitts einnehmen.

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

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

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

Hauptelement

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

display: flex;
align-items: center;

Spalte 1

Abstand

Fahren Sie fort, indem Sie die Einstellungen von Spalte 1 öffnen und den Abstandseinstellungen einige obere und untere Auffüllung hinzufügen.

• Obere Polsterung: 20px
• Untere Polsterung: 20px

Grenze

Fügen Sie der Spalte auch einen rechten Rahmen hinzu.

• Breite des rechten Rands: 1px
• Farbe des rechten Rands: #002d4c

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Zeit, Module hinzuzufügen! In Spalte 1 benötigen wir ein Image-Modul. Laden Sie Ihr Logo hoch.

Ausrichtung

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

• Bildausrichtung: Mitte

Größe

Ändern Sie auch die Breite des Moduls über verschiedene Bildschirmgrößen hinweg.

• Breite: 4vw (Desktop), 7vw (Tablet), 12vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

In der zweiten Spalte brauchen wir dort ein Menümodul. Wählen Sie ein Menü Ihrer Wahl.

Layout

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Layout-Einstellungen wie folgt:

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

Menütext

Ändern Sie auch die Menütexteinstellungen.

• Menüschrift: Kabine
• Menütextfarbe: #77848d
• Menütextgröße: 16px (Desktop), 15px (Tablet), 14px (Telefon)
• Höhe der Menüzeile: 1.8em

Dropdown-Text

Ändern Sie dann einige Farben in den Dropdown-Texteinstellungen.

• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Farbe der Dropdown-Menüzeile: #002d4c

Symbole

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

• Hamburger Menüsymbolfarbe: #002d4c

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Weiter zur nächsten und letzten Spalte. Dort benötigen wir ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Ausrichtung

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

• Tastenausrichtung: Mitte

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche in den Schaltflächeneinstellungen gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 13px
• Schaltflächentextfarbe: #002d4c
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 2px
• Rahmenfarbe der Schaltfläche: #ffffff (Standard), #d1d1d1 (Hover)
• Schaltflächenrandradius: 0px

• Tastenabstand der Buchstaben: 2px
• Schaltflächenschrift: Kabine
• Tastenschriftstärke: Halbfett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Fügen Sie dann benutzerdefinierte Polster für verschiedene Bildschirmgrößen hinzu.

• Obere Polsterung: 16px
• Untere Polsterung: 16px
• Linke Polsterung: 24px (Desktop & Tablet), 13px (Telefon)
• Rechte Polsterung: 24px (Desktop & Tablet), 13px (Telefon)

Box Schatten

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

• Horizontale Position des Boxschattens: 0px
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 2px (Standard), 6px (Hover)
• Schattenfarbe: #002d4c
• Position des Boxschattens: Innerer Schatten

3. Kopfzeile automatisch nach dem ersten Abschnitt jeder Seite mit JQuery platzieren

Codemodul zu Spalte 2 hinzufügen

Um das Menü nun automatisch unter den ersten Abschnitt jeder Seite zu platzieren, benötigen wir etwas JQuery-Code. Um diesen Code in unseren benutzerdefinierten Header aufzunehmen, fügen Sie ein Codemodul zu Spalte 2 hinzu.

JQuery-Code einfügen

Fügen Sie die folgenden Zeilen des JQuery-Codes zwischen den Skript-Tags, wie Sie im Druckbildschirm unten sehen können , zum Code-Modul hinzu, um den Effekt anzuwenden:

jQuery(Funktion($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

4. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Und vervollständigen Sie den benutzerdefinierten Header, indem Sie alle Änderungen am Theme-Builder speichern und das Ergebnis auf Ihren Seiten 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 den benutzerdefinierten Header, den Sie mit Divis Theme Builder erstellen, automatisch nach dem ersten Divi-Abschnitt jeder Seite platzieren. Sie müssen den benutzerdefinierten Header nur einmal erstellen, den JQuery-Code hinzufügen und der benutzerdefinierte Header wird automatisch neu positioniert. Dies ist eine großartige Möglichkeit, die normale Position auf der obersten Seite des Menüs zu ändern und Ihren Heldenbereich zuerst zu glänzen. Sie konnten die Vorlage 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.