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

Kommentar verfassen

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

Table of Contents

QUIZ: Teste dein WordPress Wissen!

0%

Wann erschien die erste Version von WordPress?

Correct! Wrong!

Die erste Version von WordPress erschien am 27.03.2003. Damit ist WordPress älter als Facebook und Twitter.

Welches der genannten Optionen ist kein WordPress Page-Builder?

Correct! Wrong!

Gravity Forms ist eins der beliebtesten Premium Formular Plugins.

In welcher Datei befinden sich die Sicherheitsschlüssel?

Correct! Wrong!

In der wp-config.php Datei.

Wie werden WordPress Themes wie Genesis und Beans noch genannt?

Correct! Wrong!

Ein Theme Framework ist ein vorprogrammiertes Set an Funktionen und Features, um die (Child) Theme Entwicklung zu beschleunigen.

Um den Adminbereich aufzurufen, muss die eigene Domain wie folgt erweitert werden:

Correct! Wrong!

Um beispielsweise von der Domain https://wpconsultant.de den Adminbereich aufzurufen, muss die Domain wie folgt ergänzt werden: https://wpconsultant.de/wp-admin. Möglich ist auch die URL-Endung https://deine-domain.de/wp-login.php

Welche Dateien braucht ein WordPress Theme mindestens, um zu funktionieren?

Correct! Wrong!

Damit ein WordPress Theme richtig funktioniert, benötigt es mindestens 2 Dateien: index.php und style.css. Die index.php Datei ist das Standard Template für das Theme und im Header der style.css Datei werden die notwendigen Informationen über das Theme eingetragen wie z. B. Name, Autor etc.

Was ist kein typischer Anwendungsfall für eine WordPress Multisite?

Correct! Wrong!

Um eine Landing Page zu erstellen, benötigt man nicht die Multisite Installation. Dafür reicht entweder ein wenig HTML und CSS oder eins der vielen Landing Page Plugins. Mein Tipp: Mit dem kostenlosen Plugin Elementor kannst du professionelle Landing Pages schnell erstellen. Hier erfährst du mehr über WordPress Multisite - Anwendung & Installation.

Welche Sprache spricht die WordPress Software nicht?

Correct! Wrong!

Die WordPress Software basiert auf den Sprachen PHP und MySQL. 10% der Software besteht mittlerweile aus Javascript (Tendenz steigend).

Was ist kein typischer Anwendungsfall für ein Child-Theme?

Correct! Wrong!

Eine Kopie der gesamten Website erstellt man z. B. mit dem Plugin Duplicator. Die verschiedenen Anwendungsfälle eines Child Themes und die richtige Erstellung erfährst du in dem Artikel WordPress Child Theme erstellen 2020.

Was ist ein WordPress Loop?

Correct! Wrong!

Eine Funktion, die Daten aus der Datenbank holt und sie verändert, bevor sie im Browser angezeigt werden, nennt man in WordPress einen Filter bzw. einen Filter-Hook. Eine Aktion, die an einer bestimmten Stelle im Programmablauf ausgeführt wird nennt man Action oder Action-Hook. Ein Loop ist ein PHP Code, der vordefinierte Beiträge (oder Custom Post Types) aus der Datenbank holt, um sie auf speziellen Template Dateien innerhalb eines Themes anzuzeigen.

In welchen Ordner (Verzeichnis) werden Medien wie z. B. Bilder hochgeladen?

Correct! Wrong!

In der Regel besteht der uploads-Ordner aus den einzelnen Jahres-Ordnern, die wiederum aus mehreren Monats-Ordnern bestehen.

Welches Feature ist keine Empfehlung für das WordPress Hosting (gemäß wordpress.org)?

Correct! Wrong!

Auf wordpress.org unter Requirements findest du die Empfehlung für das WordPress Hosting. Hier auf WPC findest du auch meine Hosting Empfehlung für 2020.

Welche Einstellungen gehören nicht in die wp-config.php Datei?

Correct! Wrong!

Die Integration von Javascript- und CSS-Dateien in das jeweilige Theme erfolgt in der functions.php Datei und zwar mittels wp_enqueue_scripts bzw. wp_enqueue_style.

Welche Rolle gehört nicht zu den 6 Standard User-Rollen?

Correct! Wrong!

Die 6 User Rollen in WordPress sind: Super Admin, Administrator, Editor, Author, Contributor und Subscriber.

Was kann man unter dem Menüpunkt "Einstellungen" im Adminbereich nicht tun?

Correct! Wrong!

Website Daten exportieren erfolgt unter dem Menüpunkt "Werkzeuge".

WordPress Quiz
Kein Grund zur Sorge!

Schau doch öfters mal hier auf WPC vorbei und melde dich am besten gleich für unseren Newsletter an! Du kannst auch den WPC YouTube Kanal abonnieren mit vielen kostenlosen WordPress und Elementor Tutorials. Und falls es ein bisschen mehr sein darf, gibt es da noch den WordPress Kurs von WPC ;-)
Gar nicht so schlecht!

Du weißt schon einiges über WordPress! Um dein Wissen noch weiter auszubauen, empfehle ich dir die Beiträge hier auf WPC, meinen YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinen WordPress Kurs von WPC :-)
Wow! Das kann sich sehen lassen!

Herzlichen Glückwunsch! Du bist auf dem besten Weg, ein WordPress Experte zu werden. Bleib am Ball, am besten mit den Beiträgen hier auf WPC, meinem YouTube Kanal mit vielen kostenlosen WordPress und Elementor Tutorials und natürlich meinem WordPress Kurs von WPC :-)
Hast du dich gerade ein wenig gelangweilt? :-)

Aber keine Sorge, bald erscheint hier auf WPC ein Quiz für Fortgeschrittene WordPress User. Am besten du meldest dich gleich für den Newsletter an, damit du es nicht verpasst! ;-) In der Zwischenzeit kannst du ja mal dein Datenschutz-Wissen mit dem DSGVO Quiz testen.
Related Posts

Ähnliche Beiträge