Divi Header (Menü) erstellen (inkl. responsivem Button)

Divi Header erstellen
Lukas Fischer

Geschrieben von Lukas Fischer

c

Ein benutzerfreundlicher Header ist entscheidend für das Design sowie das Nutzererlebnis auf deiner Webseite. Mit dem Divi Theme hast du die Möglichkeit entweder vorgefertigte Standard Header zu verwenden oder einen individuellen Header nach deinen eigenen Vorstellungen zu gestalten.

Um mit Divi einen individuellen Header zu erstellen, wähle im WordPress Menü Divi und klicke auf Theme Builder. Unter Standard-Website-Vorlage hast du dann bei Globale Kopfzeile hinzufügen die Möglichkeit mit dem Divi Builder wie gewohnt den Abschnitt für deinen Header zu gestalten.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du einen maßgeschneiderten Header im Divi Theme erstellen kannst. Falls du mit dem Standard Header zufrieden bist oder nur wissen möchtest, wie man das Logo im Header platziert, dann lies gerne auch meinen Artikel zu diesem Thema.

Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.

1. Divi Theme Builder öffnen und globalen Header anlegen

Um bei Divi einen eigenen Header zu erstellen, benötigst du den Divi Theme Builder. Du findest ihn im WordPress Dashboard im Menü auf der linken Seite unter DiviTheme Builder.

Dort angekommen klickst du unter Standard-Website-Vorlage auf Globale Kopfzeile hinzufügen.

Globalen Header in Divi hinzufügen mit dem Theme Builder
Globalen Header in Divi hinzufügen mit dem Theme Builder

Es öffnet sich ein weiteres Auswahlfeld, bei welchem du Globale Kopfzeile erstellen wählst.

Danach startet der Divi Builder, den du vermutlich bereits vom Aufbau deiner übrigen Inhalte kennst. In den nächsten Schritten schauen wir uns an, wie du diesen Header individuell selbst gestalten kannst.

2. Abstände anpassen und Hintergrundfarbe wählen

Als erstes solltest du die bereits vorhandene Section (blauer Rahmen) an deine gewünschten Farben anpassen sowie die Abstände (und somit auch die Größe) bestimmen. Wenn dein Header mit deinem Menü weiß bleiben soll, brauchst du die Farbe nicht anzupassen.

Für dieses Beispiel wählen wir einen schwarzen Header mit weißer Schrift.

Um die Hintergrundfarbe deines Headers anzupassen, fahre mit der Maus über deine Section (blauer Kasten) und öffne mit Klick auf das Zahnrad-Symbol die Abschnittseinstellungen.

Divi Header Abschnittseinstellungen öffnen
Divi Header Abschnittseinstellungen öffnen

Es öffnen sich die Sektion Einstellungen (Ja, heißt wirklich so. Die deutschen Übersetzungen sind halt manchmal etwas komisch).

Hier kannst du unter Hintergrund nun deine Hintergrundfarbe für deinen Divi Header wählen. Ich wähle schwarz, du wählst die Farbe, die für dich am meisten Sinn ergibt.

Hintergrundfarbe des Divi Headers bestimmen
Hintergrundfarbe des Divi Headers bestimmen

Für die Anpassung der Abstände bleiben wir in den Abschnitseinstellungen der Section, wechseln aber in den Design-Tab, welchen du oben in der Mitte findest.

Divi Header Abstände anpassen
Divi Header Abstände anpassen

Unter Zwischenraum kannst du bei Innenabstand (Padding) bei den Werten für oben und unten beispielsweise je 5px eingeben. Diese Zahl solltest du natürlich ggfs. an deine Bedürfnisse anpassen.

Abschließend einmal speichern.

3. Divi Header Layout wählen und Spalte hinzufügen

Um deinen Header nun nach deinen eigenen Vorstellungen zu gestalten, musst du eine Reihe (in Divi Zeile genannt) mit deinem gewünschten Design hinzufügen. Dies geht über Klick auf das grüne Pluszeichen.

Divi Header - Spalte hinzufügen
Divi Header – Spalte hinzufügen

In diesem Beispiel erstellen wir ein Header Logo, Menü und einem Button. Daher wählen wir das folgende Layout für unsere Reihe:

Divi Header Layout auswählen
Divi Header Layout auswählen

Auch hier gilt: Wähle das Layout, was zu deinen Anforderungen passt.

4. Logo im Divi Header hinzufügen und Startseite verlinken

In deiner neuen Reihe solltest du als erstes dein Logo in der linken Spalte hinzufügen und mit der Startseite verlinken. Diese Platzierung sorgt für eine erhöhte Nutzerfreundlichkeit und ist wissenschaftlich belegt. Mehr dazu erfährst du in diesem Artikel.

Du fügst dein Logo im Header hinzu, indem du auf das graue Pluszeichen in der linken Spalte klickst. Wähle dann das Bild-Modul aus der Liste der Module aus.

Du hast nun zwei Möglichkeiten dein Logo zu hinterlegen:

Möglichkeit 1: Fahre mit der Maus über das graue Vorschaubild und klicke auf das Zahnrad-Symbol. Du wirst zu deiner Mediathek weitergeleitet. Hier kannst du dein Logo direkt aus deiner Medien-Bibliothek wählen – oder es zunächst darüber hochladen.

Welche Anforderungen dein Logo erfüllen sollte, erfährst du ebenfalls in diesem Artikel.

Möglichkeit 2: Du fügst dein Logo dynamisch hinzu, sodass du es nicht erst aus der Medienbibliothek suchen musst. Diese Methode hat zudem den Vorteil, dass du dein Logo global über Divi steuern kannst.

Um dein Logo dynamisch hinzuzufügen, fahre zunächst ebenfalls mit der Maus über das Vorschaubild und klicke auf das Mülltonnen-Symbol, um es zu entfernen.

Danach klickst du oben rechts auf das Symbol für Dynamischen Inhalt verwenden.

Logo im Divi Header dynamisch einfügen
Logo im Divi Header dynamisch einfügen

Danach wählst du dann Site-Logo aus.

Wichtig: Damit diese Möglichkeit funktioniert, musst du deine Logo Datei über Divi Theme OptionenAllgemeinesLogo hinzugefügt haben. Eine Anleitung dazu findest du hier.

Divi Logo mit der Startseite verlinken

Internetnutzer haben mit der Zeit gelernt, dass das Logo einer Webseite mit der Startseite verlinkt ist. Dies ist eine Erwartungshaltung, die auch deine Seite erfüllen sollte, um nutzerfreundlich zu sein.

Um das Logo in deinem Divi Header mit der Startseite zu verlinken, fahre mit der Maus über das Bild-Modul und öffne mit Klick auf das Zahnrad-Symbol die Moduleinstellungen.

Hier findest du unter Link die Option Link-URL für das Bild. Fahre mit der Maus über diese Spalte, sodass sich auf der rechten Seite das Symbol für Dynamische Inhalte laden öffnet. Wähle es aus.

Logo im Divi Header mit der Startseite verlinken
Logo im Divi Header mit der Startseite verlinken

Danach wählst du dann Link zur Homepage aus. Diese Methode hat den Vorteil, dass du den Link nicht selbst eingeben musst und der Link sich dynamisch anpasst, falls die URL sich einmal verändern sollte (Letzteres ist bei der Startseite zwar unwahrscheinlich aber man weiß ja nie).

Alternativ kannst du den Link zu deiner Startseite natürlich auch bei Link-URL für das Bild selbst eintippen. In diesem Fall halte dich an folgendes Muster:
https://deinedomain.de/

Dein Header sollte mittlerweile so aussehen:

Divi Header mit Logo
Divi Header mit Logo

Menü im Divi Header hinzufügen und anpassen

Das Menü des Headers fügen wir in diesem Beispiel in der Mitte ein (rechts kommt später ein Button hin).

Um das Menü hinzuzufügen, klicke auf das graue Plus-Symbol in der mittleren Spalte und wähle aus der Liste der Module das Modul Menü. Unter Inhalt kannst du nun das Menü auswählen, was dort angezeigt werden soll.

Divi Header eigenes Menü hinzufügen
Divi Header eigenes Menü hinzufügen

Achtung: Damit du hier ein Menü auswählen kannst, musst du natürlich zuvor bereits eines angelegt haben. Falls du noch kein Menü angelegt hast, solltest du dies jetzt nachholen.

Um in WordPress ein Menü anzulegen, navigiere in dein WordPress Dashboard und wähle im Menü auf der linke Seite DesignMenüs. Du hast hier die Möglichkeit dir ein individuelles Menü aus deinen bereits vorhandenen Seiten zusammenzustellen.

Menü im Divi Header gestalten

Da wir in diesem Beispiel einen schwarzen Header gewählt haben, muss zunächst die Hintergrundfarbe des Menüs sowie die Schriftfarbe angepasst werden.

Öffne dazu die Modul Einstellungen, indem du mit der Maus über das Menü-Modul fährst und auf das Zahnrad-Symbol klickst.

Bei Hintergrund kannst du durch klick auf das Mülltonnen-Symbol jetzt einfach die vorhandene Hintergrundfarbe löschen. Falls dein Header weiß ist, brauchst du dies natürlich nicht zu tun. Alternativ kannst du auch das Transparenz-Symbol (in der Farbpalette ganz rechts) auswählen.

Hintergrundfarbe des Menüs anpassen
Hintergrundfarbe des Menüs anpassen

Schriften des Divi Menüs gestalten

Als nächstes ist die Schriftfarbe dran. In unserem Beispiel soll die Schrift weiß sein, da der Hintergrund schwarz ist und der Kontrast somit sehr gut ist.

Falls du hier andere Farben gewählt hast, beachte, dass dein Menü gut leserlich sein muss. Schwarze Schrift auf weißem Hintergrund ist ebenfalls sehr gut zu lesen.

Um die Schriftfarbe zu ändern, klicke in den Moduleinstellungen des Menüs oben auf den Design-Tab und wähle den Punkt Menütext aus. Unter Menü Schriftfarbe kannst du nun die Schriftfarbe deines Menüs bestimmen – in diesem Beispiel weiß.

Ebenfalls kannst du unter Farbe für aktiven Link die Farbe bestimmen, die ein Link haben soll, wenn dieser angeklickt ist. Diese Farbe sollte sich von der normalen Schriftfarbe unterscheiden.

Divi Menü Schriftfarbe und Schriftgröße einstellen
Divi Menü Schriftfarbe und Schriftgröße einstellen

Bei Menü Schriftgröße wählst du 18px. Diese Zahl ist natürlich nur als Richtwert zu verstehen und kommt auf deine gewählte Schriftart sowie die Anzahl deiner Menüpunkte an.

Achtung: Falls du deine Schriftarten noch nicht DSGVO konform auf deinen eigenen Server geladen hast, solltest du dies jetzt mit dieser Anleitung nachholen. Denn standardmäßig lädt Divi Google Fonts, was entsprechend aktueller Urteile rechtswidrig ist.

Jetzt möchten wir das Menü noch zentriert ausrichten. Scrolle dafür etwas nach unten und wähle bei Textausrichtung zentriert aus.

Als letztes passen wir jetzt noch die Abstände an, da das Menü viel besser aussieht, wenn es mit dem Logo auf einer Linie ist. Wir bleiben dazu im Design-Tab der Moduleinstellungen, wechseln aber zum Unterpunkt Zwischenraum.

Divi Menü Abstände anpassen
Divi Menü Abstände anpassen

Bei Außenabstand (Margin) gibst du für Oben 20px ein. Natürlich hängt dieser Wert von deinem Menü ab. In unserem Beispiel sorgt diese Einstellung dafür, dass dein Menü mit deinem Logo auf einer Höhe ist.

Dein Header sollte jetzt in etwa so aussehen:

Zwischenstand: Divi Header mit Logo und Menü
Zwischenstand: Divi Header mit Logo und Menü

Button im Divi Header einfügen

Für die rechte Spalte haben wir in diesem Beispiel einen Button mit der Aufschrift “Jetzt Anrufen!” vorgesehen. Hier kannst du aber auch dein wichtigstes Angebot platzieren oder zu einer anderen Handlung auffordern.

Um den Button hinzuzufügen, klicke auf das graue Plus-Symbol und wähle aus der Liste der Module das Button-Modul.

Unter Button kannst du jetzt deinen eigenen Text eingeben. Bei Link trägst du deine Ziel-URL ein.

Bei einem “Jetzt anrufen!”-Button kannst du dort deine Telefonnummer mit einem vorangestelltem tel: eintragen (also sowas wie: tel:+49160829912). Der Präfix “tel:” sorgt dafür, dass die Telefon-App deiner Besucher geöffnet wird.

Abschließend kannst du noch in den Design-Tab der Button-Einstellungen wechseln und ein paar Anpassungen vornehmen. In diesem Beispiel erstellen wir einen Button mit roter Hintergrundfarbe und weißer, fetter Schrift.

Falls es zu deinem Design passt, kannst du die Ecken deines Buttons final noch etwas abrunden. Das Ergebnis sieht dann in etwa so aus:

Divi Header mit Logo, Menü und Button
Divi Header mit Logo, Menü und Button

Natürlich kannst du auch die Abstände des Buttons selbst bestimmen, sodass der Button mit dem Logo sowie dem Menü auf einer Linie erscheint.

Wechsel dazu in den Design-Tab der Button-Einstellungen und füge unter Zwischenraum bei Außenabstand (Margin) einen Wert von 9px hinzu. Auch hier kann dieser Wert bei dir natürlich variieren.

Divi Header oben anheften (sticky machen)

Wenn du deinen Header über den Divi Theme Builder erstellst, ist dir vielleicht schon aufgefallen, dass das Menü nicht dauerhaft am oberen Bildschirmrand angeheftet ist und dort kleben bleibt.

Um dies zu ändern, öffne die Einstellungen deiner Section (blauer Kasten), indem du mit der Maus über deinen Header fährst und die Abschnittseinstellungen öffnest.

Divi Header Abschnittseinstellungen öffnen
Divi Header Abschnittseinstellungen öffnen

Navigiere dann in den Erweitert-Tab und wähle bei Scroll-Effekte unter Klebrige Position den Punkt Bleiben Sie oben aus (Ja, die Übersetzungen sind manchmal wirklich so absurd).

Divi Header oben anheften (Sticky machen)
Divi Header oben anheften (Sticky machen)

Divi Header mobil anpassen

Wenn du deinen Header individuell erstellst, musst du natürlich auch selbst dafür sorgen, dass dein Design auch auf mobilen Geräten gut aussieht. Der Button zerschießt dir in diesem Beispiel ansonsten das Design.

Als ersten Schritt solltest du deine Reihe (grüner Kasten) duplizieren.

Divi Header Zeile duplizieren
Divi Header Zeile duplizieren

In der duplizierten Zeile löscht du dann das Bild- sowie das Button-Modul und änderst danach die Spaltenstruktur von drei Spalten zu lediglich einer Spalte. Das ist wichtig für die mobile Ansicht.

Divi Header Spalten reduzieren für mobile Ansicht
Divi Header Spalten reduzieren für mobile Ansicht

Übrig bleibt lediglich das Menü-Modul, was nun in einer einzigen Spalte zu finden ist.

Danach musst du noch in den Modul-Einstellungen des Menüs unter Logo erneut das Logo deiner Seite verknüpfen. Das Menü-Modul verarbeitet das Logo auf diese Weise in mobiler Ansicht deutlich besser.

Abschließend musst du bestimmen, welche der beiden Zeilen auf welchem Endgerät angezeigt werden soll. In diesem Beispiel soll die erste Zeile auf dem Desktop angezeigt werden, während die untere Zeile für Tablet und Handy genutzt werden soll.

Um die Zeile auf den entsprechenden Geräten zu deaktivieren, fahre mit der Maus über die Reihe (Grüner Kasten) und klicke auf die drei Punkte. Unter Deaktivieren kannst du nun festlegen, auf welchen Geräten die entsprechende Reihe deaktiviert werden soll.

Menü für mobile Ansicht anpassen
Menü für mobile Ansicht anpassen

Wichtig: Dieses Procedere musst du natürlich für beide Reihen durchführen!

Abschließend musst du noch die für die mobile Ansicht hinzugefügte Reihe tatsächlich mobil optimieren. Das heißt vor allem Abstände anpassen sowie die Größe des Logos aktualisieren.

Diese Einstellungen nimmst du im Design-Tab deiner Reihe (grüner Kasten) vor. Am besten wechselt du dafür in die mobile Ansicht. Unter Zwischenraum kannst du dort falls nötig den Innenabstand (Padding) verringern sowie unter Größe einstellen die Größe deines Logos steuern.

Zudem solltest du in den Moduleinstellungen deines Menüs im Design-Tab unter Dropdown-Menü-Links dein mobiles Menü gestalten und auch dort die Farben für den Hintergrund und die Schriftfarbe anpassen.

Entferne unter Zwischenraum am besten direkt den zuvor hinzugefügten Abstand bei Außenabstand (Margin) oben und setzt den Wert wieder auf 0px.

Falls du den Button mobil nicht brauchst, bist du jetzt fertig. Ansonsten mache weiter mit dem nächsten und letzten Abschnitt.

Divi Header Button mobil einfügen

Damit du auch mobil nicht auf deinen Button verzichten musst, müssen wir etwas tricksen. Denn für Logo, Dropdown-Menü UND Button ist am Handy einfach nicht genug Platz!

Was machen wir also? Wir packen den Button einfach als eigenen Menüpunkt in dein Menü.

Damit das funktioniert, musst du allerdings zunächst in deinem WordPress Dashboard unter DesignMenüs ein neues Menü anlegen. Dieses Menü kann und darf die exakt gleichen Punkte enthalten wie dein Hauptmenü am Desktop (muss es aber nicht; du kannst auf diese Weise mobil auch ein komplett anderes Menü anzeigen lassen).

Es sollte nur anders benannt sein! Ich nenne es in diesem Beispiel main-mobile.

Zweites Menü in WordPress anlegen für mobilen Button
Zweites Menü in WordPress anlegen für mobilen Button

Und jetzt beginnt die Magie!

Unter Menüeinträge hinzufügen, wählst du Individuelle Links. Bei URL trägst du die Ziel-URL deines Buttons ein. In unserem Beispiel ist das die gewünschte Telefonnummer mit vorangestelltem “tel:”.

Bei Link-Text trägst du das ein, was auf deinem Button als Text stehen soll. Abschließend klickst du auf Zum Menü hinzufügen.

Als nächstes müssen wir diesen neuen Menüeintrag noch gestalten, damit das ganze auch aussieht wie ein Button. Denn, wenn du es hierbei belässt, dann hast du lediglich nur einen neuen Menüpunkt hinzugefügt, der genauso aussieht wie die anderen.

Für die Gestaltung nutzen wir CSS. Damit du dem Menüpunkt eine CSS-Klasse zur Gestaltung hinzufügen kannst, musst du zunächst am oberen Bildschirmrand unter Ansicht anpassen den Haken bei CSS-Klassen setzen.

CSS Klassen im WordPress Menü hinzufügen
CSS Klassen im WordPress Menü hinzufügen

Jetzt findest du bei deinen Menüpunkten die Option CSS-Klassen. Dort trägst du .mobile-button ein.

Menüpunkt mit einer CSS-Klasse versehen
Menüpunkt mit einer CSS-Klasse versehen

Danach einmal speichern.

Jetzt musst du noch folgendes CSS-Snippet in die CSS-Datei deines Child Themes einfügen. Falls du kein Child Theme verwendest, füge den Code unter Divi ➝ Theme Optionen ➝ Eigene CSS ein.

/*Menupünkt mobil als Button stylen*/

.mobile-button {
background-color: #FE0000; /*hier eigenen Farbcode für die Hintergrundfarbe eingeben*/
color: #fff; /*hier eigenen Farbcode für die Schriftfarbe eingeben*/
padding: 0 !important;
border-radius: 30px;
text-align: center;
}

.mobile-button a {
color: #fff !important;
padding: 10px 10px 10px 10px !important;
border-radius: 30px;
text-align: center;
}

Abschließend musst dem Divi Theme Builder nur noch mitteilen, dass für mobile Geräte dein soeben neu hinzugefügtes Menü inkl. responsivem Button angezeigt werden soll.

Gehe dazu zurück zum Theme Builder (Divi ➝ Theme Builder), öffne deine globale Kopfzeile und navigiere zu den Moduleinstellungen deines Menüs, indem du mit der Maus über das Menü fährst und das Zahnrad-Symbol anklickst.

Unter Inhalt wählst du nun das soeben angelegte Menü main-mobile.

Das Ergebnis sieht dann wie folgt aus:

Desktop:

Divi Header Desktopansicht: individuell gestaltet mit Logo, Menü und Button
Divi Header Desktopansicht: individuell gestaltet mit Logo, Menü und Button

Mobil:

Divi Header mobile Ansicht: individuell gestaltet mit Logo, Menü und Button
Divi Header mobile Ansicht: individuell gestaltet mit Logo, Menü und Button

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

14. November 2023

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

Borlabs Cookie Gutschein Code LUKASFISCHER

Spare 5% auf Borlabs Cookie – Das beste Cookie Consent Tool auf dem Markt

Top 11 Divi Plugins - E-Book von Lukas Fischer
Lukas Fischer Newsletter Anmeldung

Bleib in Kontakt und trage dich in meinen Newsletter ein:

Abonniere gerne meinen 0€ Newsletter und erhalte Tipps zu WordPress, Divi, Webdesign und der DSGVO.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert