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:
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.
#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 Erweitert – Eigenes 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*.
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.
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!
