So bringen Sie Ihr Logo dazu, die primären und sekundären Menüleisten in Ihrem Divi-Header zu überqueren

Wenn es darum geht, einen Header zu erstellen, sind die Möglichkeiten endlos. Sie können alles, was Sie sich vorstellen können, in Ihren Divi-Header aufnehmen, wenn Sie den Divi Theme Builder verwenden. Heute fügen wir Ihrer Ressourcenliste ein weiteres stark nachgefragtes Tutorial zum Header-Design hinzu. Wir zeigen Ihnen, wie Sie Ihr Logo dazu bringen, die primären und sekundären Menüleisten in Ihrer Kopfzeile zu überqueren. 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!

1. Neue globale Header-Vorlage erstellen

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website. Klicken Sie dort auf „Globalen Header hinzufügen“.

Neuen globalen Header hinzufügen

Ein Dropdown-Menü wird angezeigt. Um mit dem Erstellen von Grund auf zu beginnen, fahren Sie fort, indem Sie „Build Global Header“ auswählen.

2. Header-Design erstellen

Spezialbereich hinzufügen

Um dieses Design zu erstellen, werden wir einen Spezialbereich verwenden.

Spaltenstruktur

Dies ist die Spaltenstruktur, die wir für unseren Spezialbereich verwenden:

Spalte 1 Hintergrundfarbe

Nachdem Sie den Spezialbereich hinzugefügt haben, öffnen Sie seine Einstellungen und wenden Sie eine Hintergrundfarbe für Spalte 1 an.

• Spalte 1 Hintergrundfarbe: rgba(255,191,0,0.27)

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

• Spaltenhöhen ausgleichen: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Innenbreite: 100%
• Innere maximale Breite: 2580px

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 oberer Abstand: 0px
• Spalte 1 untere Polsterung: 0px
• Spalte 2 obere Polsterung: 0px
• Spalte 2 untere Polsterung: 0px

Spalten-CSS-IDs

Gehen Sie dann zum Tab "Erweitert" und wenden Sie eine benutzerdefinierte CSS-ID auf beide Spalten an.

• Spalte 1 CSS-ID: header-first-column
• Spalte 2 CSS-ID: header-second-column

Bildmodul zu Spalte 1 hinzufügen

Bild hochladen

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

Ausrichtung

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Bildausrichtung.

• Bildausrichtung: Mitte

Größe

Wenden Sie auch eine maximale Breite auf die Größeneinstellungen an.

• Maximale Breite: 100px

Sichtweite

Und das Modul auf kleineren Bildschirmgrößen ausblenden.

Zeile 1 zu Spalte 2 hinzufügen

Spaltenstruktur

In Spalte 2 unseres Spezialbereichs fügen wir eine erste Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und verwenden Sie die folgende Hintergrundfarbe:

• Hintergrundfarbe: #a163ff

Abstand

Wechseln Sie zur Registerkarte Design der Zeile und ändern Sie die Abstandseinstellungen wie folgt:

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Grenze

Wenden Sie als nächstes die folgenden Rahmeneinstellungen an:

• Breite des unteren Rands: 3px
• Breite des linken Rands:
  • Desktop: 3px
  • Tablet & Telefon: 0px
• Rahmenfarbe: #6c2eb9

Hauptelement-CSS

Und verwenden Sie die folgenden CSS-Codezeilen im Hauptelement der Zeile:

display: flex;
justify-content: center;
align-items: center;

Spalte 1 & 2 bei kleineren Bildschirmgrößen ausblenden

Um das Design auf kleineren Bildschirmgrößen zu vereinfachen, öffnen wir die Einstellungen von Spalte 1 und 2 und blenden beide auf Tablet und Telefon aus.

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

Soziale Netzwerke hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem Social Media Follow-Modul in Spalte 1. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu.

Individuelle Hintergrundfarbe für soziale Netzwerke

Ändern Sie die Hintergrundfarbe jedes sozialen Netzwerks individuell.

• Hintergrundfarbe: #ffeeba

Symboleinstellungen

Gehen Sie zurück zu den allgemeinen Moduleinstellungen und ändern Sie die Symbolfarbe.

• Symbolfarbe: #6c2eb9

Grenze

Fügen Sie auch einige abgerundete Ecken zu den Rahmeneinstellungen hinzu.

• Alle Ecken: 100px

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie als Nächstes ein Textmodul zu Spalte 2 mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Moduleinstellungen wie folgt:

• Textschriftart: Poppins
• Textausrichtung: Mitte

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

In Spalte 3 ist das einzige Modul, das wir benötigen, ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tastenausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Ausrichtung der Schaltflächen für verschiedene Bildschirmgrößen.

• Tastenausrichtung:
  • Desktop: Rechts
  • Tablet & Telefon: Mitte

Tasteneinstellungen

Stylen Sie die Schaltfläche als nächstes.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #6c2eb9
• Hintergrundfarbe der Schaltfläche: #ffeeba
• Schaltflächenschriftart: Poppins
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: Großbuchstaben

• Schaltflächensymbol anzeigen: Ja
• Platzierung der Schaltflächensymbole: Links

Abstand

Und wenden Sie die folgenden Füllwerte an:

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 50px
• Rechte Polsterung: 30px

Zeile 2 zu Spalte 2 hinzufügen

Spaltenstruktur

Die nächste und letzte Zeile, die wir in der zweiten Spalte unseres Abschnitts benötigen, verwendet die folgende Spaltenstruktur:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und verwenden Sie die folgende Hintergrundfarbe:

• Hintergrundfarbe: rgba(161,99,255,0.1)

Abstand

Ändern Sie als Nächstes die Abstandseinstellungen der Zeile.

• Obere Polsterung: 20px
• Untere Polsterung: 20px
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Grenze

Wenden Sie dann die folgenden Rahmeneinstellungen an:

• Breite des linken Rands:
  • Desktop: 3px
  • Tablet & Telefon: 0px
• Farbe des linken Rands: #6c2eb9

Menümodul zur Spalte hinzufügen

Menü auswählen

Dann ist das einzige Modul, das wir in dieser Zeile benötigen, ein Menümodul. Wählen Sie ein Menü Ihrer Wahl.

Logo auf Tablet & Telefon hochladen

Laden Sie dann ein Logo nur auf Tablet und Telefon hoch.

Hintergrundfarbe entfernen

Entfernen Sie als nächstes die Hintergrundfarbe des Moduls.

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Menütexteinstellungen wie folgt:

• Menüschriftart: Poppins
• Menütextfarbe: #6c2eb9
• Menütextgröße: 16px

Dropdown-Menüeinstellungen

Wenden Sie als nächstes die folgende Dropdown-Menüzeilenfarbe an:

• Farbe der Dropdown-Menüzeile: rgba(0,0,0,0)

Symboleinstellungen

Ändern Sie dann die Symboleinstellungen.

• Farbe des Einkaufswagensymbols: #6c2eb9
• Farbe des Suchsymbols: #6c2eb9
• Hamburger Menüsymbol Farbe: #6c2eb9

Größe

Wenden Sie eine maximale Logobreite auf Tablet und Telefon an.

• Max. Breite des Logos:
  • Tablet: 70px
  • Telefon: 50px

Codemodul zu Spalte 1 hinzufügen

Um die Proportionen unseres Header-Designs zu ändern, werden wir einige geringfügige CSS-Änderungen vornehmen. Um den Code einzuschließen, fügen Sie unter dem Bildmodul in Spalte 1 ein Codemodul hinzu.

Style-Tags hinzufügen

Fügen Sie einige Stil-Tags in das Codefeld ein.

CSS-Code zwischen Style-Tags einfügen

Und fügen Sie die folgenden CSS-Codezeilen zwischen die style-Tags ein:

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. Speichern Sie die Änderungen am Divi Theme Builder

Jetzt, da alles an seinem Platz ist, müssen Sie nur noch alle Änderungen im Divi Theme Builder speichern und das Ergebnis 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 Ihrem Divi-Header kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihr Logo dazu bringen, die primäre und sekundäre Menüleiste in Ihrer Kopfzeile zu überqueren. 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.