In diesem Beitrag zeige ich dir, wie du in Elementor einen Farbverlauf über eine Überschrift legen kannst. Das Funktioniert mit einem einfachen CSS Code, den du dir weiter unten einfach kopieren und bei dir einfügen kannst!
Hier im Video zeige ich dir das Ergebnis:
Überschrift mit Farbverlauf
Standardmäßig bietet Elementor nicht die Möglichkeit, einen Farberlauf über eine Überschrift zu legen. Das ist aber ganz einfach möglich, indem du einen kleinen CSS Code zu dem Überschriften-Widget hinzufügst. Den Farbverlauf kannst du dir mit diesem Farbverlauf Generator erstellen:
Nachdem du den Farbverlauf deiner Wahl im Generator erstellt hast, kannst du den CSS Code, den dir der Generator ausgibt einfach kopieren. Beim Einfügen, musst du den CSS Code aber noch anpassen – wie das Funktioniert, zeige ich dir jetzt:
CSS Code + Farbverlauf einbauen (Schritt für Schritt)
#1 Kopiere diesen Code in den CSS-Tab bei einem Überschriften-Widget
Klicke auf das Überschriften-Widget, wo du den Farbverlauf einfügen möchtest. Bei Erweitert – Eigenes CSS kannst du folgenden Code hinzufügen (die Funktion Eigenes CSS steht nur in der Pro-Version* von Elementor zur Verfügung):
selector
{
/* Diese Zeile austauschen */
background: linear-gradient(151deg, rgba(77,249,136,1) 15%, rgba(40,183,208,1) 17%, rgba(241,0,225,1) 92%);
-webkit-background-clip: text;
display: inline-block;
-webkit-text-fill-color: #0000;
}
#2 Generiere deinen Farbverlauf
Gehe auf https://cssgradient.io/ um deinen Farbverlauf zu generieren. Kopiere nicht den ganzen Code – sondern lediglich die zweite Zeile:
#3 CSS Code anpassen
Jetzt kopiere einfach den Farbverlauf in den vorhin eingefügten CSS Code! Und zwar so, dass du die Zeile mit background… einfach mit den gerade erstellten Code austauscht.
Fertig!
CSS Code über WordPress Customizer einfügen
Die praktische Funktion Eigenes CSS steht nur in der Pro-Version* von Elementor zur Verfügung. Wenn du die kostenlose Version nutzt, kannst du den Code einfach über den WordPress Customizer einfügen (bei Zusätzliches CSS).
Du musst aber eine kleine Änderung beim Code machen:
Statt Selector musst du ein anderes Wort einfügen – z.B. .farbverlauf (vergesse den Punkt davor nicht).
Dann fügst du beim beim Elementor Überschriften Widget dieses Wort (diese neue definierte CSS-Klasse) hinzu (hier OHNE Punkt).
Du findest die Funktion beim Überschriften-Widget unter Erweitert – CSS Klasse
Noch mehr zu Elementor (Tricks & Tutorials)
Nutzt du schon die Pro-Version von Elementor? Hier kannst du dir die Preise ansehen*
-
Elementor AI – lohnt sich das? Meine (kritische) Meinung
-
Premium Addons für Elementor im Test + Rabattcode
-
Text mit Farbverlauf in Elementor 👉🏻 CSS Trick (ohne Plugin)
-
Elementor Akkordeon: Erstes Tab schließen (CSS Trick)
-
Elementor Farbverläufe mit 3 Farben – CSS Trick
-
Elementor Header Effekte beim Scrollen mit CSS (copy & paste)
-
Elementor Animationen verbessern (kostenlos + ohne Plugin)
-
Kostenlose Elementor Templates – die besten Ressourcen 2022
-
WordPress Theme erstellen ohne Programmierkenntnisse – Schritt für Schritt
-
Elementor Test & Tutorial 👉🏻 bester WordPress Page Builder 2022?