Divi 5 Header erstellen: Ein schicker Website-Header mit Glas-Effekt und Button in 10 Minuten

In diesem Beitrag zeige ich Dir Schritt für Schritt, wie Du mit Divi 5 einen modernen, sticky Website-Header mit Glas-Effekt erstellen kannst. Wenn Du also in Divi 5 einern Header erstellen möchtest, bekommst Du hier eine klare Anleitung, praktische Tipps und einige Stolperfallen, die ich aus eigener Erfahrung kenne.

Das Endergebnis dieses Blogbeitras, ein Divi 5 Header mit Glas-Effekt und Button, umgesetzt mit der neuen Divi 5 Flexbox-Funktion.

Inhaltsverzeichnis

• Warum ein Glas-Header? Vorteile und Einsatzszenarien
• Vorbereitung: Was Du brauchst
• Schritt-für-Schritt: Divi 5 Header erstellen
• Feinabstimmung & Debugging: Meine persönlichen Learnings
• Code-Snippet: Glas-Effekt (für die Videobeschreibung aus dem Tutorial)
• Download & Inspiration
• Häufige Fragen (FAQ)
• Bonus: Checkliste vor dem Go-Live
• Abschließende Worte & persönliche Anekdote

Warum ein Divi 5 Header mit Glas-Effekt? 

Ein Header mit leichter Transparenz und Blur (Glas-Effekt) bringt mehrere Vorteile:

• Modernes Design: Der Glas-Effekt wirkt elegant und hebt Deine Seite von einfachen, flachen Designs ab.
• Lesbarkeit: Durch das leichte Blur bleibt das Menü gut lesbar, auch wenn im Hintergrund ein aktives Bild oder Slider läuft.
• Fokus auf Content: Der Header nimmt nicht zuviel Aufmerksamkeit – er rahmt das Design ein und bleibt trotzdem präsent.

Wenn Du also „Divi 5 Header erstellen“ willst, ist der Glas-Header eine exzellente Wahl für Portfolio-Seiten, Agenturen oder Membership-Seiten, bei denen Professionalität zählt. Auch einen Button für den Handlungsaufruf (Call to Action) setzen wir in diesem Beispiel Header um.

Vorbereitung: Was Du brauchst

Bevor wir anfangen, sorge dafür, dass Du folgende Dinge bereit hast:

• Divi 5 (aktuelle Version)
• Zugriff auf den Divi Theme Builder (Theme Builder Templates)
• Logo-Dateien (hell und dunkel optional)
• Falls Du Variablen nutzen willst: bereits definierte Farb-Variablen in Divi
• Ein kleines CSS-Snippet für den Glas-/Backdrop-Filter (siehe weiter unten)

Ich habe in meinen Projekten gelernt, dass Vorbereitung die halbe Miete ist. Auch das Logon im  transparentem PNG-Format oder SVG-Format bereit zu haben ist hilfreich.  Lade direkt saubere Dateien in die WordPress-Mediathek hoch.

Schritt-für-Schritt: Divi 5 Header erstellen

Die Anleitung hier folgt den Schritten, wie ich sie umgesetzt habe. Du kannst viele Einstellungen live anpassen — das ist das Schöne an Divi 5.

1) Globalen Header im Theme Builder anlegen

Gehe in den Divi Theme Builder und erstelle ein neues Template: „Global Header“. Das ist die Stelle, an der wir die komplette Struktur bauen. In meinem Fall hatte ich bereits ein Template — ich habe es gelöscht und neu begonnen, um jeden Schritt zu zeigen.

2) Eine einzeilige Zeile verwenden

Dank der neuen Divi 5 Flexboxfunktion, die wir in diesem Header verwenden, kannst Du eine einzeiliege Zeile verwenden. In der Header Umsetzung in Divi 4, musstest dafür zwingend eine zwei- oder dreispaltige Zeile verwenden.

Neu in Divi 5 ist die Flexbox-Unterstützung auf Layout-Ebene. Anstatt mehrere Zeilen und Tricks zu bauen, nimmst Du eine einzeilige Zeile und platzierst darin mehrere Module in einer Gruppe nebeneinander:

• Logo
• Menü
• Button (z. B. „Kontakt“)

Das spart Zeit und ist responsive viel flexibler. Also: Zeile anlegen, Gruppen-Modul auswählen und die Divi-Module hinzufügen.

3) Module hinzufügen: Menü, Button, Logo

Füge dem Gruppen-Modul ein Menü-Modul hinzu, dann ein Button-Modul. Das Logo kannst Du als „Site-Logo“ in den Divi Theme-Optionen oder direkt im Logo-Modul einfügen — ich bevorzuge das dynamische Laden über die neuen Divi 5 Variablen, falls ich ein helles/dunkles Logo austauschen möchte.

Das Menü-Modul und der Button liegen jetzt innerhaln einer Divi 5 Gruppe und werden aktuell noch untereinander dargestellt.

4) Flexbox: Nebeneinander anordnen und zentrieren

Der wichtigste Schritt: Öffne die Einstellungen der Gruppe (in defr die Module liegen). Unter Design → Layout findest Du die neue Flexbox-Funktion. Standardmäßig steht die Direction auf „down“. Ändere das auf „right“, damit die Module nebeneinander liegen.

Danach kannst Du die Ausrichtung (Align Items) auf „Center“ stellen — das zentriert Menüeinträge und Button vertikal zueinander, sodass alles schön auf einer Linie sitzt.

Mit der Flexbox-Einstellung Layout Direction right werden das Menü und der Call to Action Button nebeneinander angezeigt.

Mit der Flexbox-Einstellung align items center werden das Menü und der Button zentriert zueinander ausgerichtet.

Tipp aus der Praxis: Wenn der Button optisch versetzt wirkt, musst Du selten mit margin/padding spielen; oft reicht das „Align Items: Center“. Divi-Layouts bleiben stabiler, wenn Du Flexbox-Settings benutzt statt manueller Abstände.

5) Button stylen: Farben über Variablen

So setzt Du das Branding (Corporade Design) um: Vergib dem Button eine Hintergrundfarbe über Deine Divi-Variablen. Das ist neu und super praktisch in Divi 5 — einmal die Primärfarbe in den Divi-Variablen setzen und überall wiederverwenden.

• Design → Button Styles → Background: Variable auswählen
• Textfarbe: Helle Farb-Variable für Kontrast
• Button-Größe / Textgröße anpassen

Ich habe den Button mit „Kontakt“ beschrieben und die Textgröße so angepasst, dass sie zur Menü-Schrift passt (z. B. Menu 16px, Button 16px).

6) Logo-Größe einstellen

Gehe in die Moduls-Settings des Logo-Moduls → Design → Sizing. Dort kannst Du die Breite in relativen Werten wie „vw“ oder Prozent einstellen. Ich habe z. B. 14 rem (relativer Wert) genutzt und dann feinjustiert.

7) Menü-Breite und rechtseitige Ausrichtung

Damit Menü und Button optisch getrennt sind, setze im Menü-Modul unter Sizing eine Breite (z. B. 80–90%). Dann kannst Du die Textausrichtung auf „Right“ stellen. Das erreicht, dass das Menü die verbleibende Breite nutzt und der Button rechts sitzt.

Der Divi 5 Flexbox Header im Fromtend und in der neuen Divi-Preview, die Du nach dem Speichern einfach aufrufen kannst.

Wenn Du „Divi 5 Header erstellen“ willst, achte besonders auf diese Mischung aus Sizing und Alignment (Flexbox-Einstellungen des Menüs) — beides zusammen ergibt die gewünschte Positionierung.

8) Responsive Anpassungen: Tablet & Smartphone

Der Header muss auf Tablet und Smartphone sauber aussehen. Divi ermöglicht Einstellungen pro Breakpoint. Wechsel in die Tablet-Ansicht, prüfe Abstände und Ausrichtung, und dann in die Mobile-Ansicht.

• Im Smartphone-Bereich habe ich die Menü-Breite reduziert (z. B. 70%).
• Falls der Button zu groß ist: Textgröße auf 16px oder kleiner reduzieren.
• Teste außerdem im jeweiligen Icon der responsiven Einstellung und stelle sicher, dass nichts rechts oder links übersteht.

Mein Tipp: Mach die Anpassungen direkt im jeweiligen Icon (Desktop/Tablet/Mobile). Das erspart spätere Feinarbeit.

Der Divi 5 Header in der mobilen Ansicht des Smartphones, hier mit der reduzierten Menü-Breite von 70%.

9) Spacing & Padding in Sektion/Zeile

Um beim Scrollen zu erreichen, das die Breite des Headers kleiner wird, gehe in die Sektion-Einstellungen → Design → Spacing und nutze relative Werte für Top/Bottom, z. B. 0.6rem oder ähnliches. Du musst vorher unbededingt das Stecknadel-Icon (Steaky-Mode) aktivieren. Im Desktopn Icon stellst Du 1 rem ein.

In der Zeile selbst setze das Padding oben und unten auf 0px, sowohl im Steaky, als auch im Desktop-Mode.

Das macht den Header insgesamt kompakter und sieht besser aus, wenn er sticky ist (scrollt).

Der Divi 5 Header verkleinert sich beim Scrollen und bleibt dabei an der oberen sichtbaren Position der Website.

10) Sticky Header aktivieren

Um den Header beim Scrollen an der Seite zu halten, aktiviere unter Advanced → Scroll Effects die Option „Sticky“ bzw. „Anheften oben“. In Divi 5 gibt es eine Neuerung: der Sticky Mode kann global für alle Optionen gelten. Das bedeutet, einmal eingestellt gilt es für den gesamten Header und Du musst nicht jede einzelne Einstellung doppelt pflegen.

Kleiner Stolperstein in Divi 5: Vergiss nicht, Sticky auch im richtigen Modus (Desktop/Tablet/Mobile) zu aktivieren. In Divi 5 setzt Du den jeweiligen Modus immer global für alle Einstellunge und nicht mehr pro einzelner Einstellung, wie in Divi 4.

Die Option „Stick to top“ ist auch in Divi 5 im „Advanced-Tab“ unter Scroll-Effects zu finden.

11) Glas-Effekt (Backdrop Blur) per Custom CSS

Der Glas-Effekt lässt sich in Divi 5 nicht im Satndard erzeugen — wir ergänzen deshalb ein kurzes CSS-Snippet (Cascading Style Sheets). Füge das CSS in den Custom CSS Bereich des Header-Sektion-Hauptelements ein (Modulelement → Main Element):

background-color: rgba(255, 255, 255, 0.5); /* semi-transparent */
backdrop-filter: blur(10px); /* blur background */
-webkit-backdrop-filter: blur(10px); /* Safari support */
transition: all 0.3s ease-in-out;

Der erforderliche CSS-Code für den Glas-Effekt in den Divi – CSS-Einstellingen der Sektion (wichtig: vorher das Sticky Icon aktivieren)

Beachte: Setze vorher die Hintergrundfarbe des Menü-Moduls auf „transparent“, sonst überdeckt ein weißer Hintergrund den Blur-Effekt des Divi 5 Headers.

Feinabstimmung des Divi 5 Header: Meine persönlichen Learnings

Ich habe viele Header gebaut und dabei ein paar typische Fehler gemacht. Hier meine Erfahrungen.

• Fehler: Weißer Hintergrund im Menü-Modul. Ergebnis: Kein Blur. Lösung: Transparenz setzen und CSS im Main Element einfügen.
• Fehler: Sticky nur im Desktop aktiviert. Ergebnis: Mobile Header hat falsches Verhalten. Lösung: Breakpoint-spezifisch testen (Tablet und Smartphone) und Sticky ggf. für Mobile separat anpassen.
• Frustration: Wenn Du im Modus bleibst und Änderungen speicherst, überschreiben die Breakpoint-Einstellungen manchmal die Desktop-Ansicht. Tipp: Nach Anpassungen immer in die Desktop-Ansicht zurückspringen (über das Desktop-Icon) und final speichern.
• Triumph: Ein sauber gestylter, sticky Glas-Header wirkt oft hochwertiger in Verbindug mit einer schöne Herp-Sektion (Kopfbereich Deiner Website). Es kostet weniger Ladezeit und macht zudem einen guten Eindruck auf Deine Website-Besucher.

Download & Inspiration

Wenn Du direkt fertige Flexbox-Header anschauen oder herunterladen möchtest, schau bei Elegant Themes rein. Dort gibt es mehrere Beispiel-Header, die auf Flexbox basieren. Ich habe mir dort Ideen geholt und für eigene Projekte angepasst. Falls Du meinen Workflow nachbauen willst: probiere dort ein Template als Ausgangspunkt.

Häufige Fragen (FAQ)

Bonus: Checkliste vor dem Go-Live

1. Alle Breakpoints prüfen (Desktop / Tablet / Mobile).
2. Sticky-Verhalten testen (Scroll, Back-to-top, Überlappungen).
3. Kontraste der Farben und Accessibility prüfen (Kontraste für Button-Text & Menü).
4. Performance: Test auf mobilen Geräten und ggf. Blur reduzieren.
5. Logo in verschiedenen Varianten prüfen (hell/dunkel) und bei Bedarf dynamisch wechseln.
6. Final speichern und Seite im Frontend prüfen.

Divi 5 Header erstellen – Fazit

Wenn Du einen Divi 5 Header erstellen willst, fang mit einer sauberen Struktur an (Logo, Menü, Button in einer Zeile), nutze die Flexbox-Optionen zum Ausrichten, achte auf die responsive Einstellungen, aktiviere Sticky und füge das CSS-Snippet für den Glas-Effekt hinzu. Mit diesen Schritten hast Du in unter 10 Minuten ein professionelles Ergebnis.

Wenn Dir diese Anleitung geholfen hat, dann probier es direkt aus und sag mir gerne in den Kommentaren, welche Werte Du für blur, Farben und Shrinking gewählt hast. Viel Erfolg mit Deinem neuen Header!