So zeigen Sie Bilder in WordPress mit Elementor an: Die kreativen Möglichkeiten

Es ist kein Geheimnis, dass Bilder ein wichtiger Bestandteil jeder Website sind. Es verbessert die visuelle Attraktivität der Website sowie das Engagement. In WordPress ist das Einfügen von Bildern in Ihre Beiträge und Seiten ganz einfach. 

Eine Möglichkeit, Bilder anzuzeigen, besteht darin, einfach Medien im klassischen Editor hinzuzufügen. Eine andere Möglichkeit ist die Verwendung der Bildblöcke im Gutenberg-Editor. In beiden Fällen sind Stile im Theme vordefiniert.

Elementor bietet jedoch Flexibilität bei der Anzeige von Bildern in WordPress. Es bietet eine Vielzahl kreativer Möglichkeiten, Bilder auf Ihrer Website anzuzeigen. Noch wichtiger ist, dass jedes Bildelement individuell anpassbar ist.

Mit Elementen wie Bildboxen, Bildergalerien, Bildmaskierung
Sie können atemberaubend aussehende Bildausschnitte erstellen.

Mit ein wenig Kreativität und Liebe zum Detail können Sie Ihre Website mithilfe dieser Elemente von der Masse abheben.

In diesem Artikel erfahren Sie, wie Sie Bilder in WordPress mit Elementor anzeigen, um eine intuitive und benutzerfreundliche Oberfläche für die Anzeige von Bildern auf Ihrer Website zu entwerfen.

Warum Bilder für Ihren Webinhalt wichtig sind

Wenn wir ein Bild sehen, beginnt das menschliche Gehirn automatisch, die empfangenen visuellen Informationen ohne bewusste Anstrengung zu analysieren und zu kategorisieren. Dieser Vorgang erleichtert das Merken und Erinnern an den Inhalt.

Darüber hinaus können Bilder Ihre Inhalte für Besucher ansprechender und einprägsamer machen, indem sie die visuelle Attraktivität einer Website steigern. 

Hier sind einige Gründe, warum Bilder für Webinhalte wichtig sind:

• Fängt leicht die Aufmerksamkeit auf sich: Mit Bildern können Sie die Aufmerksamkeit eines Besuchers erregen und ihn in Ihre Inhalte einbeziehen. Dies ist besonders wichtig für Websites, die darauf abzielen, Produkte oder Dienstleistungen zu verkaufen.
• Informationen schnell vermitteln: Manchmal kann ein Bild Informationen schneller und effektiver vermitteln als Text. Beispielsweise kann eine Infografik komplexe Informationen einfach vermitteln.
• Durchbricht die Monotonie: Das Lesen großer Textblöcke kann ermüdend und eintönig sein. Bilder können dabei helfen, den langen Text aufzulockern und die Aufmerksamkeit wieder auf Ihren Inhalt zu lenken.
• Hinterlässt bleibende Spuren im Gedächtnis: Das menschliche Gehirn kann visuelle Informationen viel schneller verarbeiten als Text- oder verbale Informationen und kann diese über einen längeren Zeitraum speichern.
• Macht Ihre Inhalte besser teilbar: Social-Media-Plattformen wie Facebook und Instagram sind sehr visuell geprägt und Fotos lassen sich oft besser teilen als Text allein. Durch die Einbindung hochwertiger Bilder auf Ihrer Website erhöhen Sie die Wahrscheinlichkeit, dass Besucher Ihre Inhalte in sozialen Medien teilen.
• Markenbekanntheit: Bilder können dazu beitragen, Ihr Branding zu verbessern, indem sie Ihr Logo oder andere mit Ihrer Marke verbundene visuelle Elemente zeigen.

So fügen Sie Bilder in WordPress hinzu (einfache Methode)

Die einfachste Möglichkeit, Bilder in WordPress anzuzeigen, besteht darin, ein Bild zur Medienbibliothek hinzuzufügen und es mit Standardstilen anzuzeigen.

So fügen Sie ein Bild zur WordPress-Medienbibliothek hinzu:

Melden Sie sich bei Ihrem WordPress an und gehen Sie zu Medien > Neu hinzufügenund wählen Sie das Bild auf Ihrem Computer aus, um es in die Medienbibliothek hochzuladen.

Nun hängt die Anzeige von Bildern in WordPress davon ab, welchen Standardeditor Sie verwenden.

Gutenberg-Herausgeber:

Im WordPress-Standard Gutenberg, auch Blockeditor genanntkönnen Sie Bilder mithilfe von Bildblöcken anzeigen. Öffnen Sie dazu den Editor und fügen Sie den Bildblock an der gewünschten Position zur Anzeige des Bildes ein. Laden Sie dann ein Bild hoch oder wählen Sie es aus der Medienbibliothek aus.

Klassischer Herausgeber:

Wenn Sie einen alten klassischen Editor verwenden, öffnen Sie eine Seite oder einen Beitrag im Editor und platzieren Sie dann den Mauszeiger auf dem Beitrag/der Seite, auf der Sie das Bild anzeigen möchten. Klicken Sie anschließend auf die Schaltfläche „Medien hinzufügen“ und wählen Sie ein Bild aus der Medienbibliothek aus.

So zeigen Sie Bilder in WordPress mit Elementor an (erweiterte Methoden)

Wenn Sie nun erweiterte Möglichkeiten zur Anzeige von visuellen Elementen wünschen, können Sie zum Elementor-Seitenersteller wechseln. Mit Elementor können Sie die Bild-Widgets verwenden, um Website-Bilder kreativ zu präsentieren. 

Das ElementsKit Elementor-Add-on bringt die Dinge auf die nächste Ebene und verfügt über eine Reihe von Widgets, mit denen Sie Bilder mit den anpassbarsten Funktionen stilvoll anzeigen können. ElementsKit enthält Widgets wie Elementor Image Box, Image Gallery, Image Swap und so weiter. Diese Widgets bieten Ihnen vielfältige Möglichkeiten, Bilder stilvoll darzustellen. 

Im Folgenden wird gezeigt, wie Sie diese Widgets verwenden können, um Bilder in WordPress anzuzeigen und Ihre Website lebendiger zu gestalten.

Installieren Sie ElementsKit

Um die erweiterten Bildfunktionen nutzen zu können, müssen Sie die Plugins ElementsKit Lite und ElementsKit Pro auf Ihrer WordPress-Site installieren.

Hier ist die Dokumentation zur Installation der ElementsKit-Plugins

Nach der Installation der Plugins können Sie mit den Widgets fortfahren, um Bilder in WordPress anzuzeigen.

Methode 1: Bilder in einer stilvollen Image Box anzeigen

Mit dem ElementsKit-Bildbox-Widget können Sie einen Abschnitt mit einer Kombination aus Bild und Text hervorheben. Damit können Sie ein Bild mit Text wie einer Überschrift und einer Beschreibung anzeigen. Diese Stile werden häufig verwendet, um ein Flaggschiffprodukt, eine Flaggschiff-Dienstleistung oder eine Flaggschiff-Funktion hervorzuheben.

Um die Funktion zu verwenden: Aktivieren Sie das Image Box-Widget unter ElementsKit > Widget

So verwenden Sie das ElementsKit Image Box-Widget für Elementor:

Bild

Im Bildbereich können Sie das Bild und sein Aussehen anpassen.

1. Bild auswählen: Wählen Sie ein Bild aus der Medienbibliothek aus oder laden Sie eines hoch.
2. Bildgröße: Legen Sie die Größe des Bildes fest.
3. Inhaltsbereich: Sie können den Stil des Inhaltsbereichs aus den angegebenen Optionen auswählen.
4. Gleiche Höhe: Aktivieren oder deaktivieren Sie die gleiche Höhe für Bild- und Inhaltsbereich.
5. Link aktivieren: Sie können das Bild als Ankerabschnitt verwenden, indem Sie den Link aktivieren. Wenn aktiviert, fügen Sie den Link zum Bild hinzu.

Körper

Im Textbereich können Sie den gesamten Text zum Elementor-Bildfeld hinzufügen. Dazu gehören eine Überschrift, eine Beschreibung, ein Titel-HTML-Tag und eine Textausrichtung.

1. Titel: Fügen Sie den Überschriftentext in dieses Feld ein.
2. Titel-HTML-Tag: Wählen Sie das gewünschte HTML-Tag für die Überschrift aus (H1, H2, H3, div, span, Absatz usw.).
3. Beschreibung: Fügen Sie in diesem Feld eine kurze Beschreibung des Inhalts ein.
4. Ausrichtung: Legen Sie die Textausrichtung für Bild, Überschrift, Beschreibung und Schaltfläche fest.

Taste

Sie haben die Möglichkeit, dem Elementor-Bildfeld eine CTA-Schaltfläche hinzuzufügen. Dafür,

1. Schaltfläche „Aktivieren“: Aktivieren Sie diese Option, um dem Bildfeld eine Schaltfläche hinzuzufügen.
2. Etikett: Fügen Sie eine Schaltflächenbeschriftung (Text) hinzu, die den Zweck des CTA angibt.
3. URL: Geben Sie den Seitenlink ein, zu dem Sie den Besucher umleiten möchten, sobald er darauf klickt.
4. Symbol hinzufügen: Wenn Sie ein Symbol mit der Schaltflächenbeschriftung anzeigen möchten, aktivieren Sie diese Funktion.
5. Symbol: Wählen Sie ein Symbol aus der Elementor-Symbolbibliothek.
6. Symbolposition: Wählen Sie aus, ob das Symbol vor oder nach dem Schaltflächentext angezeigt werden soll.

Als Nächstes können Sie auf der Registerkarte „Stil“ das Erscheinungsbild des Elementor-Bildfelds anpassen, einschließlich Farben, Hintergrund, Typografie usw.

Im Klassische Kurven Im Abschnitt können Sie die Breite und den Rand des Inhaltsbereichs anpassen. Gestalten Sie dann das Bild, indem Sie den Abstand und die Deckkraft ändern. 

Darüber hinaus können Sie das Erscheinungsbild des Überschriften- und Beschreibungstextes anpassen, indem Sie Farbe, Typografie, Hintergrundfarbe usw. ändern. Darüber hinaus können Sie Schaltflächenstile und ihr Symbol mit ihren Attributen anpassen.

Sehen Sie sich das Video an, um detailliertere Informationen zum ElementsKit Image Box-Widget zu erhalten.

Methode 2: Zwei Bilder mit Swap-Animationen anzeigen

Der Bildaustausch ist eine stilvolle Möglichkeit, zwei alternative Bilder an einem Ort anzuzeigen, die ausgetauscht werden, wenn Besucher mit der Maus über das Bild fahren oder darauf klicken. Das ElementsKit Image Swap-Widget verfügt über ein paar Dutzend atemberaubende Effekte, die Ihre Website optisch noch ansprechender machen.

Sie können diese Funktion nutzen, indem Sie beispielsweise das erste Bild als Titelbild verwenden, das die Aufmerksamkeit erregt, und das zweite Bild, um die erforderlichen Informationen bereitzustellen.

Um die Funktion zu verwenden: Aktivieren Sie das Bildaustausch-Widget unter ElementsKit > Widget

So verwenden Sie das ElementsKit Image Swap-Widget für Elementor:

1. Bild vorne: Dies ist das Bild, das standardmäßig angezeigt wird, wenn die Seite im Webbrowser geladen wird.
2. Zurück Bild: Dies ist das Bild, das angezeigt wird, wenn die Aktion ausgeführt wird, dh ein Besucher bewegt sich mit der Maus über das Bild oder klickt darauf.
3. Bildgröße: Legen Sie die Bildgröße für beide Bilder fest.
4. Stil tauschen: Mit dem ElementsKit Image Swap-Widget stehen Ihnen 21 verschiedene Swap-Effekte zur Verfügung, mit denen Sie Ihr Webdesign für Besucher attraktiver gestalten können.

5. Tigger: Hier können Sie zwischen einer Hover- oder Click-Aktion wählen, um den Bildwechsel auszulösen.
6. Indikatoren: Dies fungiert als Navigator, der anzeigt, welches Bild in der Show ist und welches der Hintergrund ist.
7. Verknüpfung: Wenn Sie möchten, können Sie die Bilder mit einer Seite verknüpfen.

Auf der Registerkarte „Stil“ können Sie die Bildhöhe und die Dauer der Swap-Animation anpassen. Und wenn Sie den Indikator aktivieren, können Sie seine Position ändern und seine Größe und Farben anpassen.

Methode 3: Geben Sie den Website-Bildern durch Bildmaskierung einzigartige Formen

Dies ist eine einzigartige Möglichkeit, Ihre Website mit einzigartig geformten Bildern lebendig zu machen. Die Bildmaskierungsfunktionen verwandeln die traditionell geformten Bilder in ansprechendere. In WordPress ist das Maskieren mit Elementor ganz einfach.

Das ElementsKit für Elementor enthält ein Maskierungsmodul für Bilder. Das Modul ist für alle Elemente in Elementor verfügbar, die ein Bild beinhalten. Im Elementor-Editor Aktivieren Sie die ElementsKit-Maskierung und wählen Sie eine der vorinstallierten Formen aus. Sie können den Bildern auch eine benutzerdefinierte Form hinzufügen.

Methode 4: Bilder in einer Galerie präsentieren

Elementor bietet eine großartige Möglichkeit, mehrere Bilder in einer eleganten Galerie zu präsentieren. Das Basic Gallery-Widget von Elemntor arbeitet mit einem traditionellen Ansatz, bei dem Sie Bilder hinzufügen, die Bildgröße festlegen und grundlegende Dinge wie Abstände und Ränder des Bildes anpassen können.

Das ElementsKit-Bildergalerie-Widget bietet jedoch flexiblere Optionen. Mit dem Widget können Sie das Layout mit Beschreibungen anpassen, Filter zur Galerie hinzufügen und jeden Aspekt der Miniaturansicht, des Overlays, des Bildes und der Filter individuell anpassen.

Erfahren Sie in unserem Blog mehr über das Bildergalerie-Widget und wie es Ihr Website-Design verbessern kann.

Einpacken

Insgesamt bietet Elementor mehrere Möglichkeiten, Bilder in WordPress anzuzeigen. Um die Funktionen von Elementor optimal zu nutzen, kann ElementsKit eine großartige Ergänzung sein.

ElementsKit bietet verschiedene Möglichkeiten und Stile: Bildfeld zum Anzeigen eines Bildes mit Überschrift und Beschreibung; Bildwechsel zur abwechselnden Anzeige zweier Bilder; Außerdem gibt es die Widgets „Bildergalerie“ und „Bildmaskierung“, die Ihnen mehr Optionen bieten.

Jedes dieser Elemente bietet einzigartige Funktionen und Anpassungsoptionen, sodass Sie ansprechende und optisch ansprechende Inhalte für Ihre Website erstellen können.

Wenn Sie dies nützlich finden, gibt es mit ElementsKit noch mehr für Sie. Das Elementor-Addons enthält Dutzende weitere Elemente, die Ihnen bei der Erstellung und Gestaltung einer Website mit der größtmöglichen Anzahl an Funktionen und Optionen helfen können.