Elementor Farbverläufe mit 3 Farben – CSS Trick

elementor farbverläufe mit 3 farben

Standardmäßig kannst du mit Elementor ja nur Farbverläufe mit 2 Farben erstellen. Hier zeige ich dir, wie du mit einem einfachen CSS-Generator auch Farbverläufe mit 3 Farben erstellen kannst.

Diesen CSS Farbverlauf kannst du dann einfach als Hintergrund einfügen (bei Abschnitten, Spalten und Widgets – wo du möchtest). Das funktioniert auch mit der kostenlosen Version von Elementor.

In diesem Video zeige ich dir, wie das funktioniert:

Und hier noch mal eine kleine Schritt für Schritt Anleitung:

#1 CSS Farbverlauf Generator

Hier findest du den CSS Farbverlauf Generator:

https://cssgradient.io/

Damit kannst du nach belieben Farbverläufe generieren und diese anpassen (auch Farbverläufe mit mehr als 3 Farben sind möglich). Darunter wird dir dann der CSS-Code ausgegeben.

Elementor Farbverlauf mit 3 Farben (CSS)
Mit diesem Generator kannst du einen Farbverlauf mit mehreren Farben erstellen und anpassen. Unten wird dann der passende CSS-Code generiert.

#2 CSS Farbverlauf in Elementor einfügen (für PRO-Nutzer)

Wenn du die Pro-Version* von Elementor nutzt, dann kannst du das CSS ganz bequem direkt bei jedem Element einfügen.

Klicke dazu einfach auf den Abschnitt (oder auf die Spalte oder das Widget – wo du den Farbverlauf eben einfügen möchtest) und wähle den Tab ErweitertEigenes CSS.

Dort kannst du das CSS einfügen – musst es aber noch mit zwei Klammern und dem Wort selector (ohne Punkt) ergänzen:

selector
{

background: rgb(77,249,136);
background: linear-gradient(151deg, rgba(77,249,136,1) 6%, rgba(40,183,208,1) 50%, rgba(241,0,225,1) 92%);
    
}

Alternative: CSS Farbverlauf über Customizer einfügen

Wenn du Elementor in der kostenlosen Version nutzt, dann kannst du den Code über den WordPress Customizer einfügen.

Hinweis:
Die Pro-Version von Elementor bietet wirklich geniale Features, wie z.B. einen Theme Builder, einen Pop-Up Builder, Motion-Effekte und geniale Widgets. Dabei ist die Lizenz für eine Webseite noch nicht mal teuer!
Hier kannst du dir die aktuellen Preise ansehen*.

WordPress Customizer öffnen

Im Customizer klickst du einfach auf Zusätzliches CSS – hier kannst du jetzt den Code reinkopieren.

Wichtig: Ändere selector in ein anderes Wort (mit Punkt davor). In meinem Beispiel habe ich .verlauf (statt selector) genommen.

CSS in WordPress Customizer einfügen

Der Code sieht jetzt also so aus:

.verlauf
{

background: rgb(77,249,136);
background: linear-gradient(151deg, rgba(77,249,136,1) 6%, rgba(40,183,208,1) 50%, rgba(241,0,225,1) 92%);
    
}

Wenn du diesen CSS-Farbverlauf nun bei einem Abschnitt/Spalte/Widget einfügen möchtest, dann füge einfach bei dem jeweiligen Element die Klasse verlauf hinzu.

Klicke dazu einfach auf Erweitert – dort kannst du eine CSS-Klasse hinzufügen.
Wichtig: Füge die Klasse (verlauf) hier ohne Punkt hinzu!

CSS Klasse in Elementor hinzufügen
Füge die Klasse bei dem Abschnitt (oder auch Spalte / Widget ein), wo du den Farbverlauf hinzufügen möchtest. Klassen in Elementor immer ohne Punkt definieren!
🎉 Insider-Tipps zu den Themen künstliche Intelligenz, WordPress, SEO & Online Business
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen, etc.)

Double-Opt-In und DSGVO (du erhältst im Anschluss noch eine E-Mail, um die Anmeldung zu bestätigen). Mit dem Absenden dieses Formulars stimmen Sie der Verarbeitung der hier eingegebenen Daten zu. Mehr Informationen dazu in der Datenschutzerklärung.

Robert Leitinger - Experte für Online Marketing, KI und SEO
Über den Autor
Robert Leitinger

In den letzten 10 Jahren habe ich mehrere erfolgreiche Online-Projekte umgesetzt. Im Jahr 2018 folgte die Gründung meiner eigenen Webdesign und Online Marketing Agentur. Ergänzend zu diesem Blog betreibe ich auch einen YouTube Kanal.

Mehr über mich erfahren ➔

Weitere Beiträge lesen:

*Kennzeichnung & Information: Affiliate Links / Partnerlinks
Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erfährst du mehr über die Pro-Version zu Elementor