Image Masking mit Custom CSS und Elementor Addon HappyAddons
WPC - Dein WordPress Blog

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

YouTube

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

Video laden

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

Kostenlose WordPress & Elementor Video Tutorials

YouTube Kanal von WPC abonnieren und keine Tutorials mehr verpassen!

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.

HappyAddons - Das beste Elementor Addon
(Werbung)

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.

Image Masking in Elementor - Einfach Bilder maskieren mit HappyAddons
Image Masking in Elementor – Einfach Bilder maskieren mit HappyAddons

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.

Blob Formen (Shapes) in SVG kostenlos erstellen mit blobmaker.app
Blob Formen (Shapes) in SVG kostenlos erstellen mit 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.

Vorsicht!

Die Funktion „Eigenes CSS“ steht nur Elementor Pro Usern zur Verfügung. Solltest du nicht die Pro Version besitzen, kannst du den CSS Code auch in das Feld „Zusätzliches CSS“ im Customizer einsetzen. Allerdings kannst du dort nicht den „Selector“ verwenden. Vielmehr solltest du dann eine CSS Klasse vergeben, um das Element über den Customizer richtig ansprechen zu können.

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.

Nucleo App - Kostenlose Icons für Image Masking
Nucleo App – Kostenlose Icons für Image Masking

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.

Image Clipping - Bild im Text in Elementor und anderen Websites
Image Clipping – Bild im Text in Elementor und anderen Websites

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.

Jetzt Elementor Pro holen und mit ein paar Klicks wunderschöne Websites erstellen!
(Werbung)
Vielen Dank fürs Teilen dieser Seite

4 Kommentare zu „Elementor Tricks: Image Masking mit Custom CSS“

  1. J

    Hallo,
    toller Tip, beim Elementor klappt das auch, aber bei der Vorschau zeigt er das Bild Original an. Hab gespeichert, Cache gelöscht, mehrere Browser versucht.
    Was mache ich falsch?

    1. D

      Hallo Jürgen,
      das Fehlerbild ergibt sich normalerweise, wenn das WordPress Theme CSS das CSS von Elementor überschreibt. Welches Theme verwendest du? Ob das wirklich der Fall ist, kannst du in den Browser-Entwicklertools überprüfen (hier ein passendes Tutorial dazu: https://youtu.be/nQU-2-hO1z8). Eine andere Möglichkeit das zu überprüfen ist, wenn du kurzzeitig ein anderes WordPress Theme (z. B. das Hello) aktivierst. Wenn es dann funktioniert, ist es die Fehlerursache wie oben beschrieben.
      Die Lösung ist dann entweder ein anderes Theme verwenden oder !important bei CSS verwenden oder den CSS Selektor so spezifizieren, dass er die CSS-Einstellungen vom Theme überschreibt. Mehr Informationen findest du in diesem Artikel: https://wpconsultant.de/wordpress-theme-anpassen-2-eigenes-css-browser-entwicklertools/
      Schöne Grüße, Danijel

Schreibe einen Kommentar zu Jörg Kommentieren abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Related Posts

Ähnliche Beiträge