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.

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.

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 & profitieren
Hier bekommst du Zugang zu exklusiven Inhalten und profitierst von weiteren Vorteilen (z.B. spezielle Rabattaktionen rund um WordPress und SEO Tools, 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
├ť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

├ť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.
├ť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.