Auf einer Website spielen Bilder eine sehr bedeutende Rolle. Sie vermitteln dem Besucher unvermittelt eine Botschaft und wirken sehr direkt auf das Empfinden und das Verständnis des Betrachters. Nutzen Sie Elementor, stehen Ihnen eine Reihe von Möglichkeiten zur Verfügung, wie Sie Bilder auf Ihrer Website präsentieren können. Zu den grundlegenden Möglichkeiten steht Ihnen Elementor-Bild-Widget zur Verfügung.
In dem Video sowie begleitenden Artikel stelle ich Ihnen alle wesentlichen Optionen des Elementor-Bild-Widgets vor. Sie erfahren dabei auch, wie Sie Bilder auf Seiten oder Blog-Artikeln hinzufügen, bearbeiten, entfernen und löschen, die mit dem Elementor-Plugin erstellt wurden.
Ein wichtiger Punkt noch: Bevor Sie Ihre Bilder auf Ihre Seite einfügen, sollten Sie Ihre Bilder unbedingt webfähig aufbereitet haben. Ohne Aufbereitung leidet die Ladegeschwindigkeit Ihrer Website beträchtlich. In dem Kinsta-Artikel „Wie man Bilder für Web und Performance optimiert“ erfahren Sie, wie das geht.
Überarbeiteter Blogpost vom 23.11.2021
Inhaltsverzeichnis
So fügen Sie Bilder in Elementor hinzu
Öffnen Sie die betreffende Seite mit Mit Elementor bearbeiten. Jetzt sind Sie im Bearbeitungsmodus. Gehen Sie zu dem betreffenden Abschnitt und klicken Sie auf Abschnitt bearbeiten. Jetzt erscheinen auf dem linken Teil der Seite die Elementor-Widgets.
Das Bild-Widget gehört zu den Basis-Widgets und findet sich deshalb weit oben. Alternativ geben Sie einfach Bild in die Suchleiste ein und das Bild-Widget erscheint. Das Widget kann wie üblich per Drag & Drop auf die Seite in den gewünschten Abschnitt gezogen werden.
Sobald das Bild-Widget auf der Seite platziert ist, klicken Sie auf den Platzhalter für das Bild. Sie bekommen dann die Möglichkeit, auf die Funktionalitäten des Bild-Widgets im linken Teil der Seite zuzugreifen.
Wenn Sie jetzt auf den Platzhalter in der linken Menüleiste „Bild wählen“ klicken, öffnet sich automatisch die Medienbibliothek.
Wählen Sie ein bestehendes Bild aus der Mediathek oder laden Sie ein Bild von Ihrem PC hoch und klicken Sie auf „Medien einfügen“.
So bearbeiten Sie Bilder in Elementor
Es gibt drei Registerkarten zum Bearbeiten des hinzugefügten Bild-Widgets: Inhalt, Stil und Erweitert.
Inhalt
In der Registerkarte Inhalt haben Sie die Option, ein Bild aus der Medienbibliothek auszuwählen bzw. von Ihrem PC hochzuladen. Dann können Sie die Bildgröße einstellen, das Bild ausrichten, bei Bedarf eine Bildunterschrift hinzufügen und das Bild verlinken.
- Bildgröße – Hier können die Bildgröße auswählen. Es gibt vordefinierte Werte als auch Werte, die Sie individuell festlegen können.
- Ausrichtung – Hier können Sie die Bildausrichtung festlegen (links, mittig, rechts)
- Bildunterschrift – Fügen Sie bei Bedarf eine Beschriftung unterhalb des Bildes hinzu. Wählen Sie zwischen Keine, Beschriftung des Anhanges (aus der ursprünglichen Beschriftung des Bildes aus der WordPress-Medienbibliothek) oder Eigene Beschriftung.
- Link – Wenn Sie dem Bild keinen Link hinzufügen möchten, wählen Sie „Keine“. Wählen Sie „Mediendatei“, um eine Verbindung zu Ihrer Mediensammlung herzustellen. Sie haben dann auch die Option, eine Lightbox zu erstellen. Um eine Verknüpfung zu einer beliebigen Seite auf einer beliebigen Website herzustellen, wählen Sie „Individuelle URL“.
Stil
Unter der Registerkarte Stil können Sie das Bild formatieren. Sie haben kontextsituativ eine Reihe von Möglichkeiten:
- Breite – Hier können Sie die Bildbreite einstellen.
- Höchstbreite – Wenn Sie eine maximale Breite für das Bild festlegen möchten, können Sie dies hier tun.
- Höhe – Hier können Sie die Bildhöhe einstellen.
- Hover-Animation – Sie können eine Hover-Animation festlegen. Unter „Hover-Animation“ versteht man eine Animation, wenn der Cursor über das Bild streicht.
- Deckkraft – Hier können Sie die Deckkraft des Hover-Effekts einstellen.
- CSS-Filter – Verwischen, Helligkeit, Kontrast, Sättigung und Tönung sind einige der CSS-Filter, die Sie festlegen können.
- Übergangsdauer – Hier können Sie die Dauer der Hover-Animation festlegen.
- Animation bei Mausberührung – Hier können Sie diverse Effekte bei Mausberührung festlegen.
- Rahmentyp – Wenn Sie einen Rahmen im Bild hinzufügen möchten, können Sie hier verschiedene Optionen anwählen.
- Eckenradius – Hier können Sie den Rahmen abgerundet darstellen.
- Box-Schatten – Horizontal, vertikal, Unschärfe und Ausbreitung sind Ihre Optionen für den Box Schatten.
- Bildunterschrift – Ausrichtung, Textfarbe, Hintergrundfarbe, Textschatten und Typografie der Bildunterschrift können hier angepasst werden.
Erweitert
Die Registerkarte Erweitert bietet eine Vielzahl nützlicher Funktionen auf mehr fortgeschrittenem Niveau:
- Erweitert – Zu den Optionen gehören: Margin, Padding, Z-Index, CCS-ID und CSS-Klassen.
- Bewegungseffekte – Es gibt eine Reihe von Effekten, wie Scrolling-Effekte, Mauseffekte. Sie können auch auswählen, ob es sich „sticky“ verhalten soll. Auch die Eingangsanimation einschließlich etwaiger Verzögerung lässt sich hier einstellen.
- Hintergrund – Sie können den Hintergrund für Normal und für Hover auswählen und zwischen einem durchgehenden Hintergrund und einem Farbverlauf wählen.
- Rahmen – Sie können dem Element einem Rahmen als auch Box-Schatten hinzufügen.
- Maskieren – Hier können Sie das Bild maskieren. Es stehen Ihnen unterschiedliche Optionen, wie z.B. Kreis, Blume, Klecks etc. zur Verfügung.
- Positionierung – Sie können ändern, wie das Element auf der Seite positioniert wird. Für die Seitenbreite stehen Ihnen Vorgabe, Volle Breite, Inline und Individuell zur Verfügung. Für die Position gibt es die Optionen Standard, Absolut und Fixiert.
- Responsive – Mit den responsiven Optionen können Sie ausgewählte Abschnitte oder Elemente für bestimmte Bildschirmgrößen (Desktop, Tablet oder Smartphone) ausblenden. Dies kann bei der Gestaltung einer Seite für Mobilgeräte und Tablets sehr nützlich sein. Bei bestimmten Elementen können Sie auch Spalten umkehren.
- Attribute – (Pro Feature) Sie können dem Element benutzerdefinierte Attribute hinzufügen.
- Eigenes CSS – (Pro Feature) Sie können CSS zur Website oder zum Element des Abschnittes hinzufügen. Sie können „Selektor“ verwenden, um spezifische Elemente anzusprechen.
So ersetzen Sie Bilder in Elementor
Öffnen Sie die Seite oder den Blogpost, indem Sie auf Mit Elementor bearbeiten klicken. Navigieren Sie zu dem Bild, dass Sie ersetzen möchten. Sie können mit der rechten Maustaste auf das Bild-Widget klicken und Bild Bearbeiten aus der Pop-up-Liste auswählen. Alternativ können Sie mit der linken Taste auf das Bild klicken. In beiden Fällen bekommen Sie auf der linken Seite der Seite die Option, das Bild-Widget näher zu bearbeiten. Klicken Sie auf das zu ersetzende Bild unter Bild wählen. Wählen Sie dann das hinzuzufügende Bild aus der Medienbibliothek aus oder laden Sie es bei Bedarf von Ihrem PC hoch. erscheinen auf dem linken Teil der Seite die Elementor-Widgets.
So löschen Sie Bilder in Elementor
Öffnen Sie die Seite oder den Blogpost mit Mit Elementor bearbeiten und gehen Sie zu dem Abschnitt, wo Sie das Bild löschen möchten. Klicken Sie dann mit der rechten Maustaste auf das Bild und drücken Sie die Entf-Taste. Alternativ klicken Sie mit der linken Maustaste auf das Bild. Das Bild-Widget auf der linken Seite wird angezeigt. Klicken Sie dann auf das Bild in dem Bild-Widget und löschen Sie es.
Zusammenfassung
Nicht umsonst zählt das Bild-Widget zu den elementaren Basis-Widgets von Elementor. Es ist für Ihre Arbeit auf Ihrer WordPress-Website mit Elementor unerlässlich. Sie kennen jetzt die wesentlichen Bearbeitungsfunktionen des Bild-Widgets und wissen auch, wie Sie mit dem Widget Bilder hinzufügen, löschen und ersetzen können. Ich hoffe, diese Informationen helfen Ihnen weiter, um mit Bildern Ihre Website oder Ihren Blog zu bereichern.
Ein wichtiger Punkt noch: Denken Sie auch an die Bildoptimierung vor dem Hochladen der Bilder.
Spannend für Sie?
