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)

Der folgende Inhalt steht f├╝r meine Newsletter Abonnenten zur Verf├╝gung. Registriere dich jetzt kostenlos um den Freischaltcode f├╝r diesen und weitere Beitr├Ąge mit exklusiven Inhalten zu erhalten:

Inhalt freischalten (kostenlos)

In meinem kostenlosen Newsletter erh├Ąltst du exklusive Inhalte, Elementor Tricks und CSS Codes.

Einfach kostenlos abonnieren und ich schicke dir das Passwort zum Freischalten des folgenden Inhalts.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerkl├Ąrung.
CSS Code jetzt freischalten
Nutze das Passwort, dass ich dir zugeschickt habe

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*

Newsletter abonnieren und keinen Beitrag mehr verpassen!
Ich schicke dir eine E-Mail, wenn ein neuer Beitrag ver├Âffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerkl├Ąrung.

Inhaltsverzeichnis
Weitere Beitr├Ąge lesen:
├ť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

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.

├ťber robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag ver├Âffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: Datenschutzerkl├Ąrung.

TEILEN ist wie TRINKGELD f├╝r mich : -)
Vielen Dank!

Inhaltsverzeichnis (scroll down)

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erf├Ąhrst du mehr ├╝ber die Pro-Version zu Elementor

├ťber robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag ver├Âffentlicht wird.

Mit dem Absenden dieses Formulars erteilst Du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Weitere Infos findest du in der Datenschutzerkl├Ąrung.