Wie du mit Divi einfach einen Farbverlauf in deine Headline integrierst

Heute möchte ich eine stylische Möglichkeit mit dir teilen, wie du deine Website oder Landingpage aufpeppen kannst. Hast du schon mal darüber nachgedacht, deine Headline mit einem Farbverlauf zu versehen? Wenn nicht, wird es höchste Zeit!

Eine Headline ist oft das Erste, was Besucher auf deiner Website oder Landingpage sehen. Nicht umsonst setzt man dort auch kurz und knackig die wichtigste Message hin. Mit einem kreativen Farbverlauf kannst du nicht nur Aufmerksamkeit erregen, sondern auch deinem Inhalt eine zusätzliche Dimension verleihen. Farbverläufe sind nicht nur optisch ansprechend, sondern können auch Emotionen und Stimmungen transportieren.

In diesem Tutorial zeige ich dir, wie du mit Divi mühelos einen Farbverlauf in deine Headline integrierst, um einen bleibenden Eindruck zu hinterlassen.

Keine Lust zu lesen? Schaue dir das Tutorial als Video an:

Video auf YouTube ansehen (öffnet in neuem Tab)

Mit Divi 5 geht es jetzt ganz einfach

Update September 2026: Seit Divi 5 brauchst du den Trick unten nicht mehr. Divi 5 kann Farbverläufe direkt in Text:

1. Füge ein Überschrift-Modul (Heading) ein und schreib deine Headline.
2. Öffne den Reiter „Design“ und dort die Einstellungen für den Überschriftentext.
3. Stell die Füllart („Fill Type“) auf „Farbverlauf“.
4. Wähle deine Farben und die Richtung des Verlaufs. Wenn du deine Markenfarben als Variablen angelegt hast, kannst du sie hier direkt auswählen.

Fertig. Der Verlauf passt sich automatisch an, auch wenn die Headline auf dem Handy umbricht.

So geht es in Divi 4

Du arbeitest noch mit Divi 4? Dann klappt es mit diesem kleinen Trick, den du auch im Video siehst.

Schritt 1: Zeile und Textmodul hinzufügen

Falls du noch keine Headline hast, beginne damit, eine neue Zeile zu erstellen, gefolgt von einem Textmodul. Hier kannst du deine Headline nach Belieben gestalten und anpassen. Achte darauf, dass die Schrift nicht zu fein ist, da der Effekt sonst nicht so gut zu sehen ist.

Schritt 2: Hintergrundfarbverlauf einstellen

Gehe zurück zur erstellten Zeile und öffne die Einstellungen der Spalte. Im Bereich Hintergrund wählst du den gewünschten Farbverlauf aus.

Schritt 3: Textmodul-Hintergrund anpassen

Kehre dann zum Textmodul zurück und setze dort die Hintergrundfarbe auf Weiß. Dadurch verschwindet erstmal der Farbverlauf aus dem Hintergrund der Spalte.

Schritt 4: Filter für den Wow-Effekt

Im Design-Bereich des Textmoduls findest du den Punkt "Filter". Hier stellst du den Überblendmodus auf "Aufhellen" ein, um deinem Farbverlauf den letzten Schliff zu geben.

Fertig! Du hast jetzt nicht nur eine Headline, sondern ein echtes Highlight auf deiner Website oder Landingpage.

Schau dir auch gerne das passende Video dazu an, um jeden Schritt in Aktion zu sehen:

https://youtu.be/_8dkI9bYjuE

Probier es selbst aus!

Du hast Fragen oder brauchst Hilfe bei deiner Divi-Website? Schreib mir über das Kontaktformular oder buch dir ein kostenloses Erstgespräch.