Text mit Hintergrundbild in Elementor

Teilen auf:

Facebook
LinkedIn
Email

Hier möchte ich euch zeigen, wie ihr mit ein wenig CSS in Elementor, einen schönen Hintergrundbild Effekt auf euren Text bekommt.

Alles, was ihr dazu benötigt ist, ein Hintergrundbild und Elementor Page Builder.

Ihr erstellt zuerst eine normale Überschrift in Schwarz. Denkt daran, dass der Effekt mit einer Fetten Schrift am besten funktioniert.

Jetzt schreiben wir ein wenig Custom CSS.

Dazu öffnet ihr bei Elementor unter „Erweitert“ den „Eigeness CSS“ Tab

Hier tragen wir nun unser Custom CSS ein.

Wichtig ist hier nur, dass ihr den Pfad zu eurem Bild einträgt in den beiden Klammern unter „background-image: url();

selector .elementor-heading-title {
    background-image: url(HIERDENPFADZUEURENBILDEINTRAGEN.jpg);
    background-position: center;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    
}

Damit ihr jetzt das Bild in euren Text seht, müsst ihr noch die Transparenz von der Text Farbe auf „0“ stellen

Fertig

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links.
Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.

Schreibe einen Kommentar

Ähnliche Artikel

Elementor Snippets

Hier eine kleine Übersicht über Code Snippets die euch das Arbeiten mit Elementor erleichtern. Zum Einfügen der Codes am besten das Plugin „Code Snippets“ benutzen: