Elementor Tricks: Image Masking mit Custom CSS

Manchmal möchte man dem eigenen Website Design das gewisse Etwas verleihen. Eine Möglichkeit, das zu tun, ist z. B. die Bilder zu maskieren (engl. Image Masking). In diesem Beitrag und im dazugehörigen Video Tutorial zeige ich dir 4 verschiedene Wege, wie du die Maskierung der Bilder auf deiner Website umsetzen kannst. Darüber hinaus zeigt dir dieser Artikel, wie du mit der Elementor Einstellung „Eigenes CSS“ (Custom CSS) arbeiten kannst. In diesem Zusammenhang werden wir auch die Frage beantworten: Was ist eigentlich der „Selector“?

Elementor CSS Tricks – Image Masking durch Eigenes CSS

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Elementor Tutorial über die Anwendung von Image Masking durch Eigenes CSS (Custom CSS)

4 Wege, Image Masking umzusetzen

Im Folgenden werden 3 kostenlose und eine Premium Option vorgestellt, wie du Bilder auf deiner Seite maskieren kannst. Los geht’s mit der Premium Variante:

1. Image Masking mit HappyAddons

Die einfachste Art, das Image Masking Feature einzusetzen, ist mit Hilfe der Elementor Erweiterung HappyAddons (Affiliate Partner Link). Meiner Meinung nach handelt es sich bei HappyAddons um eins der besten Elementor Addons überhaupt. Es ist, wie ich finde, das Addon mit den meisten einzigartigen Funktionen.

Um das Image Masking Feature verwenden zu können, benötigst du die Pro Version des Plugins. Nach der Installation der Pro Version findest du unter dem Bild die entsprechende Einstellung.

Du kannst die Maskierung deiner Bilder aber auch kostenlos umsetzen, wie die folgenden 3 Optionen zeigen.

2. Bilder maskieren mit eigenem CSS und Blobmaker.app

Bei diesem Elementor Tutorial habe ich versucht, einen Webdesign Trend 2020 aufzugreifen: Die Rede ist von runden, eleganten Formen (Shapes). Genauer gesagt, handelt es sich um sogenannte Blobs. Ein tolles Web-Tool, mit dem du ganz einfach und kostenlos solche Blobs erstellen kannst, ist blobmaker.app.

Einfach ein paar mal klicken, bis die gewünschte Blob-Form erscheint, die SVG-Datei (Scalable Vector Graphics) herunterladen und auf die eigene Website hochladen. Nun musst du nur noch den folgenden CSS-Code in das Feld „Eigenes CSS“ im Tab „Erweitert“ des Bild-Elementes kopieren:

selector {
 -webkit-mask: url(http://test.el-mentor.de/wp-content/uploads/2020/03/blob-shape.svg); 
 -webkit-mask-size: 88%;
 -webkit-mask-position: top center;
 -webkit-mask-repeat: no-repeat;
   mask: url(http://test.el-mentor.de/wp-content/uploads/2020/03/blob-shape.svg); 
   mask-size: 88%;
   mask-position: top center;
   mask-repeat: no-repeat;
}

Denk daran, die URL in der CSS Anweisung „mask“ durch die URL deines Blobs auszutauschen.

Falls du mehr vom eigenen CSS Code schreibst, würde ich dir empfehlen, den Code an einer zentralen Stelle zu pflegen. Als Elementor User steht dir hier das Custom CSS bei den Theme Style zur Verfügung. Alle anderen WordPress User können ihren CSS Code entweder im Customizer oder in der style.css Datei ihres Child Themes einsetzen. Durch die zentrale Pflege können Konflikte in den Anweisungen leichter gefunden und behoben werden.

Was ist eigentlich der Selector?

Wenn du dich bereits ein wenig mit CSS auskennst, fragst du dich vielleicht, welches Website Element mit dem „Selector“ angesprochen wird? Der Selector ist eine einfach Art für alle Elementor User, das ausgewählte Element über CSS anzusprechen. Anderenfalls müsste man erst einmal eine CSS Klasse oder eine CSS ID vergeben und diese Klasse bzw. ID über Custom CSS ansprechen.

Um die verschiedenen Styling-Optionen des Users hinzuzufügen, wird jedes Elementor Widget in mehrere div-Container „eingepackt“. Der äußerste div-Container wird auch als Wrapper Element bezeichnet. Dieses Wrapper Element wird mit dem Selector angesprochen. Das Video Tutorial zeigt noch genauer, was der Selector ist und was man unter einem Wrapper Element versteht.

3. Bilder Maskierung mit Custom CSS und Nucleo

Anstelle von Blob Shapes kannst du natürlich auch handelsübliche Icons für die Maskierung deiner Bilder verwenden. Zwei hilfreiche und kostenlose Web-Tools sind Nucleo und The Noun Project. Bei Letzterem muss jedoch die Quelle der Icons angegeben werden.

Welches ist der ideale Dateityp für Image Masking?

Bei der Nucleo App können die Icons in SVG, PNG oder PDF heruntergeladen werden. Welcher Typ sollte also für die Bilder Maskierung verwendet werden? Für das Image Masking eignet sich am besten das SVG-Format. Dieses Format lässt sich beliebig skalieren und das ohne Qualitätsverlust. Du kannst aber auch gerne eine PNG-Datei ohne Hintergrund verwenden. Damit jedoch das Bild bzw. das Icon beim Hochskalieren nicht pixelig wird, solltest du auf entsprechend großes Datei-Format achten.

Im nächsten Schritt musst du das Icon auf deine Website hochladen. Nun kannst du genauso wie vorher beim Blob die URL des Icons kopieren und in die CSS Anweisung „mask“ einsetzen. Der übrige CSS Code ist gleich wie beim Beispiel mit dem Blobmaker.

4. Image Masking (Clipping) mit Text (Bild im Text)

Was für Formen und Icons gilt, gilt auch für ganz normalen Text. Wir können mit Hilfe der CSS Anweisung „background-clip: text“ auch ein Bild in einem Text darstellen.

Der CSS Code, der dafür benötigt wird, lautet wie folgt:

selector .elementor-heading-title{
    background: url("http://test.el-mentor.de/wp-content/uploads/2020/03/f2.jpg");
    background-position: 0 0;
    background-size: 80%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
    transition: background-position 1.5s;
}

selector .elementor-heading-title:hover{
    background-position: 0 50%;
}

Auch hier kommt der Selector zum Einsatz. Da wir aber in diesem Fall das Child-Element ansprechen möchten (die Überschrift H2 innerhalb des Elementor Heading Widgets), müssen wir die CSS-Klasse „elementor-heading-title“ hinzufügen. Auch hier solltest du die URL des Hintergrundes (background) durch die URL deines Bildes ersetzen. Außerdem solltest du nicht vergessen, die Text-Farbe im Style-Tab auf transparent zu setzen.

Fazit

Wie du sehen kannst, gibt es verschiedene Möglichkeiten, die Bilder zu maskieren und dem Design auf deiner Website einen professionellen Touch zu verpassen. Das schöne daran ist, dass man mit ein wenig CSS bzw. mit ein wenig Copy und Paste die tollen Effekte auch kostenlos umsetzen kann. Unterstützt wird das durch tolle kostenlose Web-Tools, die auch in diesem Beitrag gezeigt wurden. Alle Elementor Pro User können die CSS Anweisungen bequem in das Custom CSS Feld eingeben und sparen sich durch Verwendung des Selectors, die Vergabe von weiteren CSS-Klassen und IDs.