Wie man einen Sticky Divi Theme Builder Header mit CTA-Button erstellt

In diesem umfassenden Leitfaden zeige ich dir Schritt für Schritt, wie du mit dem Divi Theme Builder ein modernes, responsives Header-Menü erstellst, das nicht nur optisch ansprechend ist, sondern auch funktional überzeugt.

Das Highlight: Ein Call-to-Action (CTA) Button auf der rechten Seite, der sofort ins Auge fällt, und ein Sticky-Effekt, der das Menü beim Scrollen am oberen Bildschirmrand fixiert und dabei elegant verkleinert. Dieses Tutorial basiert auf bewährten Methoden und ist ideal für alle, die mit Divi arbeiten und ihre Website professionell gestalten wollen.

Einführung: Warum ein Sticky Header mit CTA-Button?

Ein Header ist das erste, was Besucher auf deiner Website sehen. Er dient nicht nur der Navigation, sondern auch als strategischer Ort, um wichtige Aktionen zu fördern. Ein sogenannter Call-to-Action Button kann Besucher gezielt lenken, sei es zur Kontaktaufnahme, zum Kauf oder zu einer besonderen Service-Seite.

Ein Sticky Header, der beim Scrollen am oberen Rand kleben bleibt, sorgt dafür, dass die Navigation immer griffbereit ist, ohne den Inhalt zu verdecken. Die Verkleinerung beim Scrollen schafft zudem mehr Platz und lenkt den Fokus auf die Inhalte, ohne die Navigation zu verlieren.

Diese Kombination verbessert die Nutzererfahrung erheblich und kann die Conversion-Rate steigern. Mit Divi, einem der beliebtesten WordPress-Builder, lässt sich das ganz einfach umsetzen.

Menü erstellen: Die Grundlage für den Header

Bevor wir mit dem eigentlichen Header beginnen, müssen wir zunächst ein Menü im WordPress-Dashboard anlegen. Hierfür habe ich eine neue Website eingerichtet und bereits einige Seiten erstellt: Home, About, Blog, Contact und Services.

Standardmäßig zeigt Divi ein einfaches WordPress-Menü, das zwar beim Scrollen verkleinert wird, aber keine erweiterten Funktionen wie einen CTA-Button bietet. Daher starten wir mit dem Aufbau eines eigenen Menüs.

1. Gehe im WordPress-Dashboard zu Design > Menüs.
2. Erstelle ein neues Menü und nenne es Main Menu.
3. Setze die Position des Menüs auf Primary, damit es als Hauptmenü angezeigt wird.
4. Füge alle erstellten Seiten hinzu: Home, About, Contact, Blog und Services.
5. Ordne die Menüeinträge in der gewünschten Reihenfolge: Home, About, Contact, Blog, Services.

Call-to-Action Button als Menüpunkt hinzufügen

Der CTA-Button wird als eigener Menüpunkt hinzugefügt, der nicht auf eine Seite verweist, sondern später per CSS als Button gestaltet wird.

1. Wähle im Menü-Editor den Punkt Custom Links.
2. Gib als URL vorerst ein # ein (Platzhalter, kann später angepasst werden, z.B. Telefonnummer, E-Mail oder andere URL).
3. Trage als Linktext Breakdown Help ein.
4. Füge den Menüpunkt hinzu und platziere ihn ans Ende des Menüs.

CSS-Klasse für den CTA-Button vergeben

Um den CTA-Button später gezielt stylen zu können, braucht er eine eigene CSS-Klasse. Diese Option ist standardmäßig in WordPress-Menüs oft ausgeblendet.

1. Oben rechts im Menü-Editor findest du Screen Options.
2. Aktiviere dort die Option CSS Classes.
3. Jetzt erscheint unter jedem Menüpunkt ein Feld für CSS-Klassen.
4. Füge bei deinem CTA-Menüpunkt die Klasse DC-CTA hinzu.
5. Speichere das Menü.

Damit ist das Menü vorbereitet. Du kannst nun im Frontend die Änderungen sehen, allerdings ist das Menü noch das standardmäßige WordPress-Menü, und der CTA-Button ist noch nicht als solcher hervorgehoben.

Globalen Header mit Divi Theme Builder erstellen

Nun wechseln wir in den Divi Theme Builder, um einen globalen Header zu erstellen, der unser neues Menü mit Logo und CTA-Button enthält.

1. Gehe im Dashboard zu Divi > Theme Builder.
2. Erstelle einen neuen globalen Header von Grund auf.
3. Füge eine neue Zeile mit einer einzelnen Spalte hinzu.
4. Füge ein Menü-Modul in diese Spalte ein.
5. Wähle dein zuvor erstelltes Menü aus.

Logo hinzufügen und Menü anpassen

Für das Logo habe ich einfach eines der automatisch importierten Site-Icons verwendet, um den Prozess zu vereinfachen.

1. Klicke im Menü-Modul auf das Logo-Bild und lade dein gewünschtes Logo hoch oder wähle eines aus der Mediathek.
2. Wähle als Schriftart für das Menü Bebas Neue, um eine moderne und klare Typografie zu gewährleisten.
3. Setze die Menüausrichtung auf rechts, damit die Links am rechten Rand erscheinen.
4. Erhöhe die Schriftgröße auf etwa 20 Pixel für bessere Lesbarkeit.
5. Füge einen Buchstabenabstand von ca. 3 Pixel hinzu, um die Lesbarkeit und das Design aufzuwerten.

Abstand im Header optimieren

Der Standardabstand über und unter dem Menü ist oft zu groß. Dank Divis Drag-and-Drop-Builder kannst du das Padding einfach anpassen:

• Hover über den Bereich, bis der Pfeil zum Verkleinern erscheint.
• Ziehe das Padding nach oben oder unten, bis der Abstand deinen Vorstellungen entspricht.

Alternativ kannst du im Design-Tab unter Spacing exakte Werte eintragen.

Menübreite anpassen und Sticky-Effekt aktivieren

Um den Header optisch besser an das Seitenlayout anzupassen, habe ich die Breite des Menüs vergrößert:

1. Bearbeite im Visual Builder den Header direkt über „Edit Header Template“.
2. Gehe in die Zeilen-Einstellungen unter Design > Sizing.
3. Ändere die Maximalbreite von 1366 Pixel auf 80 Prozent, sodass das Menü flexibler und harmonischer wirkt.

Als nächstes aktivieren wir den Sticky-Effekt, damit das Menü beim Scrollen stets sichtbar bleibt:

1. Wähle die Sektion aus, in der sich das Menü befindet.
2. Gehe zu Advanced > Scroll Effects.
3. Aktiviere die Option Stick to Top.

Jetzt bleibt der Header beim Scrollen am oberen Bildschirmrand haften.

Unterteilung des Menüs mit einem Schatten

Ohne eine visuelle Trennung wirkt ein weißer Header leicht verloren. Statt eines klassischen Rahmens habe ich einen dezenten Box-Shadow verwendet:

1. Gehe in die Sektionseinstellungen unter Design > Box Shadow.
2. Wähle einen Schatten aus, der nur unten sichtbar ist.
3. Reduziere die Deckkraft, um einen subtilen Effekt zu erzielen.

Verkleinerung des Headers beim Scrollen

Eine wichtige optische Verbesserung ist, dass sich der Header beim Scrollen verkleinert, um mehr Platz für den Inhalt zu schaffen. Divi bietet hier eine praktische Option:

1. Öffne die Zeileneinstellungen und navigiere zu Design > Spacing.
2. Du siehst zwei Optionen: Normal und Sticky (für den Zustand beim Scrollen).
3. Setze für den normalen Zustand ein Padding von 1% oben und unten.
4. Für den Sticky-Zustand entferne das Padding komplett (0%), damit der Header kompakter wird.

Zusätzlich habe ich die Schriftgröße des Menüs beim Sticky-Zustand reduziert:

1. Gehe zum Menü-Modul unter Design > Menu Text.
2. Aktiviere die Sticky-Option für die Schriftgröße.
3. Setze die Größe auf 16 Pixel für den Sticky-Zustand.

Den Call-to-Action Button stylen mit benutzerdefiniertem CSS

Der CTA-Button, den wir als Menüpunkt mit der Klasse DC-CTA angelegt haben, wird nun mit etwas CSS zum auffälligen Button.

Da Divi keine direkte Styling-Option für einzelne Menüelemente bietet, fügen wir den CSS-Code über den WordPress Customizer hinzu:

1. Gehe zu Design > Customizer > Zusätzliches CSS.
2. Füge den bereitgestellten CSS-Code ein (im Video als Downloadlink verfügbar).
3. Speichere und veröffentliche die Änderungen.

CSS-Anpassungen im Detail

Der CSS-Code beinhaltet folgende wichtige Anpassungen:

• Hintergrundfarbe: Ich habe die Theme-Farbe #ea3900 gewählt, passend zum Design.
• Border-Radius: Für eine moderne, abgerundete Button-Form habe ich 8px vertikal und 20px horizontal eingestellt, was eine lozenzartige Form ergibt.
• Padding: Ursprünglich in Pixeln angegeben, habe ich das Padding auf 1.2em umgestellt, sodass es sich proportional zur Schriftgröße anpasst und beim Scrollen mitverkleinert.
• Textfarbe: Weiß, um einen guten Kontrast zum orangen Hintergrund zu gewährleisten. Das !important Attribut stellt sicher, dass der Stil auch auf allen Bildschirmgrößen greift.

Dank dieser Einstellungen schrumpft der Button beim Scrollen harmonisch mit und bleibt immer gut lesbar und ansprechend.

Responsive Darstellung prüfen

Ein wichtiger Schritt ist die Kontrolle der Darstellung auf Tablet und Smartphone:

• Im Tablet-Layout erscheint der CTA-Button am unteren Ende des Menüs – das sieht ordentlich und übersichtlich aus.
• Auch auf dem Smartphone ist der Button gut sichtbar und einfach zu bedienen.

Zusammenfassung und Ausblick

Mit wenigen Schritten hast du nun einen eleganten, funktionalen Header erstellt, der:

• Ein übersichtliches, rechtsbündiges Menü mit klarer Typografie zeigt.
• Ein auffälliges Call-to-Action-Element als Button integriert.
• Beim Scrollen am oberen Bildschirmrand klebt und dabei dezent verkleinert wird.
• Eine dezente visuelle Trennung durch Schatten erhält.
• Auf allen Geräten responsiv und benutzerfreundlich bleibt.

Dieser Aufbau ist nicht nur ein optischer Gewinn, sondern verbessert auch die Nutzerführung und steigert potenziell die Conversion deiner Website. Nutze die Flexibilität des Divi Theme Builders, um das Design weiter an deine individuellen Bedürfnisse anzupassen.

Ich hoffe, diese Anleitung inspiriert dich, deine Website mit Divi noch professioneller zu gestalten. Viel Erfolg beim Umsetzen!