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.