Text mit Farbverlauf in Elementor ­čĹë­čĆ╗ CSS Trick (ohne Plugin)

Elementor CSS Trick: ├ťberschrift mit Farbverlauf

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:

https://cssgradient.io/

CSS Farbverlauf Generator
Mit dem Farbverlauf Generator kannst du dir den CSS Code f├╝r den Farbverlauf generieren.

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:

Nur die zweite Zeile kopieren

#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.

CSS Code anpassen
Ersetze die markierte Zeile mit dem Code aus dem Generator

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).

WordPress Customizer ├Âffnen

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*

­čÄë 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:

Schreibe einen Kommentar

*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