Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie ein Bild in ein WordPress-Seitenleisten-Widget ein

Als wir WPBeginner starteten, erkannten wir schnell, wie wertvoll die Seitenleiste für die Verbindung mit unseren Besuchern sein könnte.

Wir haben angefangen, Bilder in unserer Seitenleiste zu verwenden, um sie visuell ansprechender zu gestalten, und die Ergebnisse waren beeindruckend.

Bilder halfen uns, unsere kostenlosen Kurse zu bewerben, Gutscheinangebote hervorzuheben, beliebte Artikel zu präsentieren und Leser zu verschiedenen Artikeltypen und Toolkits zu leiten.

Mit nur wenigen visuellen Anpassungen wurde die Seitenleiste zu einem der effektivsten Teile unserer Website, um Engagement und Klicks zu fördern.

In dieser Anleitung zeigen wir Ihnen, wie Sie ganz einfach Bilder zu Seitenleisten-Widgets auf Ihrer WordPress-Website hinzufügen – unabhängig davon, welches Theme Sie verwenden oder welche technischen Kenntnisse Sie haben.

Wie füge ich ein Bild in die WordPress-Seitenleiste ein

Warum Bilder zur WordPress-Seitenleiste hinzufügen?

Bilder hinzufügen zu Ihrer WordPress-Seitenleiste kann die visuelle Attraktivität und Funktionalität Ihrer Website erheblich verbessern.

Im Gegensatz zu einfachem Text können Bilder effektiv die Aufmerksamkeit der Menschen auf sich ziehen und sie dazu anregen, sich mit dem Inhalt zu beschäftigen. Dies kann nützlich sein, um wichtige Anleitungen, Werbeaktionen oder Ressourcen hervorzuheben, die Ihre Besucher bemerken sollen.

Darüber hinaus tragen Bilder zur Gesamtästhetik Ihrer Website bei und machen sie optisch ansprechender und benutzerfreundlicher.

Eine gut gestaltete Seitenleiste mit Bildern kann die Benutzererfahrung verbessern, was zu längeren Besuchen auf der Website und reduzierten Absprungraten führt. Dies kann auch den Ruf und die Glaubwürdigkeit Ihrer Website verbessern.

Nachdem dies gesagt ist, schauen wir uns an, wie Sie ganz einfach Bilder zu Ihrer WordPress-Seitenleiste hinzufügen können.

Klicken Sie einfach auf die unten stehenden Links, um zu Ihrem bevorzugten Abschnitt zu springen:

Option 1: Verwendung des WordPress-Bild-Widget-Blocks

Sie können einen Bild-Widget-Block verwenden, um Bilder zur Seitenleiste Ihrer Website hinzuzufügen.

Der Widgets-Block-Editor wurde in WordPress 5.8 eingeführt und repliziert die Erfahrung der Verwendung des WordPress-Inhaltseditors. Sie können verschiedene Blöcke verwenden, um Formulare, verwandte Beiträge, Bilder und andere Elemente mit Blöcken zum Widget-Bereich hinzuzufügen.

Um zu beginnen, müssen Sie die Seite Darstellung » Widgets in Ihrem WordPress-Dashboard aufrufen. Klicken Sie danach einfach auf die Schaltfläche '+' und fügen Sie einen Bild-Widget-Block hinzu.

Hinzufügen eines Bild-Widgets-Blocks

Als Nächstes können Sie ein Bild mit 3 Methoden in den Widget-Block einfügen.

Zum Beispiel laden Sie ein Bild hoch, wählen ein vorhandenes Bild aus Ihrer WordPress-Mediathek aus oder fügen das Bild von einer URL ein.

Bild im Widget-Block hochladen

Im Widget-Block-Editor erhalten Sie auch Optionen, um den Stil zu ändern, einen Alternativtext hinzuzufügen und die Bildgröße zu bearbeiten.

Es gibt Einstellungen, um den Bildrand und andere erweiterte Einstellungen zu ändern.

Widget-Blockeinstellungen für Bilder bearbeiten

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ zu klicken.

Als Nächstes können Sie Ihre Website besuchen und das Bild in der Seitenleiste sehen.

Bild in der Seitenleiste anzeigen

🔎 Möchten Sie Ihre Bilder interaktiver gestalten? Versuchen Sie, Hotspots zu Ihren Bildern hinzuzufügen, um bestimmte Merkmale Ihrer Bilder hervorzuheben!

Option 2: Verwendung des Bild-Widget-Plugins

Eine weitere Möglichkeit, Bilder zu Ihrer WordPress-Seitenleiste hinzuzufügen, ist die Verwendung eines Plugins. Dies gibt Ihnen ein paar weitere Optionen und eine einfache Benutzeroberfläche, die für einige Anfänger einfacher sein kann als das Standard-Widget „Bild“.

Zuerst müssen Sie das Image Widget Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung gehen Sie einfach zur Seite Darstellung » Widgets und fügen den Block 'Bild-Widget' hinzu.

Bild-Widget-Block hinzufügen

Klicken Sie als Nächstes auf die Schaltfläche „Bild auswählen“, um ein Bild hochzuladen oder eines aus der Mediathek auszuwählen.

Danach müssen Sie auf die Schaltfläche „In Widget einfügen“ klicken, und Sie sehen die Bildvorschau unter den Widget-Einstellungen.

Bild aus Bibliothek auswählen

Sie können einen Titel oder Alternativtext sowie einen Link und eine Beschriftung für das Bild hinzufügen.

Sie können auch eine Bildgröße aus der Liste der verfügbaren Optionen auswählen, die Ausrichtung bearbeiten und mehr.

Titel und Alternativtext hinzufügen

Sobald Sie zufrieden sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um das Bild-Widget zu speichern. Das ist alles. Sie können nun Ihre Website besuchen und das Bild in Ihrer Seitenleiste sehen.

Wenn Sie mehrere Bilder anzeigen möchten, können Sie stattdessen das Galerie-Widget anstelle des Bild-Widgets verwenden.

Gehen Sie wieder einfach zur Seite Design » Widgets und klicken Sie dann auf die Option „Galerie“.

Auswahl des Galerie-Widgets

Von hier aus können Sie die Bilder in Ihrer Galerie anpassen. Sie können beispielsweise die Ecken der Bilder abrunden.

Wenn Sie mit dem Aussehen der Galerie zufrieden sind, klicken Sie einfach auf „Aktualisieren“.

Anpassen des Galerie-Widgets

Wenn Sie mehr Anpassungsoptionen wünschen, empfehlen wir die Verwendung eines Bildgalerie-Plugins wie Envira Gallery.

Es bietet viele weitere Funktionen, wie z. B. mehrere Galerievorlagen, die das Standard-Galerie-Widget nicht bietet. Außerdem können Sie Alben erstellen und Ihre Bilder mit einem Wasserzeichen versehen.

Weitere Informationen finden Sie in unserem Leitfaden zum einfachen Erstellen responsiver WordPress-Bildergalerien mit Envira.

Sobald Sie das Plugin installiert und einige Galerien eingerichtet haben, sehen Sie das Widget 'Envira Gallery' in Ihrem Block-basierten Widget-Editor.

Hinzufügen des Envira Gallery Widgets

Alles, was Sie als Nächstes tun müssen, ist, die Galerie auszuwählen, die Sie anzeigen möchten.

Klicken Sie auf das Dropdown-Menü, um dies zu tun.

Auswahl einer Galerie zur Anzeige mit dem Envira Gallery Widget

Sobald Sie fertig sind, können Sie die Galerie noch weiter anpassen. Sie können beispielsweise das Spaltenlayout ändern und den Lightbox-Modus aktivieren, wenn auf ein Bild geklickt wird.

Wenn Sie zufrieden sind, klicken Sie einfach auf „Aktualisieren“.

Anpassen des Envira Gallery Widgets

Option 4: Bild im klassischen Widget-Bereich hinzufügen

Wenn Sie eine ältere Version von WordPress verwenden oder Widget-Blöcke deaktiviert haben, können Sie auch problemlos ein Bild zur Seitenleiste hinzufügen.

Gehen Sie einfach zur Seite Darstellung » Widgets in Ihrem WordPress-Admin-Panel und fügen Sie das 'Bild'-Widget zu Ihrer Seitenleiste hinzu. Wenn Sie Widgets noch nie verwendet haben, lesen Sie unseren Leitfaden zur Verwendung von Widgets in WordPress.

Bild-Widget hinzufügen

Das Widget wird erweitert und Sie können seine Einstellungen sehen.

Die erste Option ist, dem Bild-Widget einen Titel hinzuzufügen. Klicken Sie danach auf die Schaltfläche „Bild hinzufügen“, um fortzufahren.

Dies öffnet den WordPress-Medien-Uploader, wo Sie auf die Schaltfläche „Dateien hochladen“ klicken können, um Ihr Bild hochzuladen, oder ein Bild auswählen, das Sie zuvor hochgeladen haben.

Bild-Einstellungen

Nach dem Hochladen des Bildes sehen Sie die Bildeinstellungen in der rechten Spalte. Von hier aus können Sie einen Titel oder Alternativtext für das Bild angeben, eine Beschreibung hinzufügen, die Größe auswählen oder sogar einen Link hinzufügen.

Wenn Sie fertig sind, können Sie auf die Schaltfläche „Zum Widget hinzufügen“ klicken, um Ihre Änderungen zu speichern. Sie sehen nun eine Vorschau des Bildes im Bereich der Widget-Einstellungen.

Widget-Vorschau

Vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken, um Ihr Bild-Widget zu speichern.

Sie können nun Ihre Website besuchen, um das Bild in der Seitenleiste Ihres WordPress-Blogs anzuzeigen.

Seitenleisten-Bildvorschau

Option 5: Verwendung des benutzerdefinierten HTML-Widget-Blocks

In einigen Fällen müssen Sie möglicherweise zusätzlichen HTML-Code zu Ihrem Bild hinzufügen. Das Standard-Text-Widget erlaubt sehr einfaches HTML, aber es funktioniert möglicherweise nicht mit fortgeschrittenem HTML oder Formatierungen. In diesem Fall müssen Sie manuell ein Bild zu Ihrer Seitenleiste hinzufügen.

Zuerst müssen Sie das Bild auf Ihre WordPress-Website hochladen. Gehen Sie einfach zu Medien » Neu hinzufügen und laden Sie Ihre Bilddatei hoch.

Nach dem Hochladen des Bildes müssen Sie auf den Link Bearbeiten neben dem Bild klicken.

Hochgeladenes Bild bearbeiten

WordPress bringt Sie nun zur Seite „Medien bearbeiten“, wo Sie auf der rechten Seite des Bildschirms die URL der Bilddatei sehen.

Sie müssen diese URL kopieren und in einen Texteditor wie Notepad einfügen.

URL der Bilddatei kopieren

Als Nächstes müssen Sie zum Bildschirm Darstellung » Widgets in Ihrem WordPress-Dashboard gehen.

Danach können Sie den 'Benutzerdefiniertes HTML'-Widget-Block zu Ihrer Seitenleiste hinzufügen, wo Sie das Bild anzeigen möchten.

Benutzerdefinierten HTML-Widget-Block hinzufügen

Im Textfeld des Widgets müssen Sie Ihr Bild mit diesem Code hinzufügen:

<img src="Paste The File URL Here" alt="Strawberries" />

Das img-Tag wird in HTML verwendet, um Bilder anzuzeigen. Es benötigt zwei Attribute. Das erste ist src, das den Speicherort der Bilddatei definiert. Hier fügen Sie die zuvor kopierte URL ein.

Die zweite ist alt, die verwendet wird, um einen alternativen Text für das Bild bereitzustellen. Ihr endgültiges Bild-Tag wird ungefähr so aussehen:

<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

Sie müssen auf die Schaltfläche „Aktualisieren“ klicken, um Ihre Widget-Einstellungen zu speichern, und dann Ihre Website in der Vorschau anzeigen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, ein Bild zum WordPress-Seitenleisten-Widget hinzuzufügen. Möglicherweise möchten Sie auch unsere Expertenauswahl der besten Drag-and-Drop-Seitenersteller in WordPress und wie Sie die Seitenleistenseite in WordPress ändern. überprüfen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

50 CommentsLeave a Reply

  1. Hallo,

    Ich habe gerade eine Frage zu meinem Bild eingereicht, das nur auf der Startseite und nicht auf anderen Seiten der Website angezeigt wird. Ich habe mein Problem gelöst und wollte die Lösung teilen, falls sie jemand anderem hilft. Ich habe versucht, das benutzerdefinierte HTML-Widget zu verwenden, um ein paar Bilder in meiner Inhaltsseitenleiste anzuzeigen, und als ich speziell die Seiten konfigurierte, auf denen ich sie anzeigen wollte (wobei „Alle abgleichen“ NICHT aktiviert war), wurden die Bilder nur auf der Startseite angezeigt.

    The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages. :-)

    Danke,
    Holly

  2. Hallo,

    Ich habe das benutzerdefinierte HTML-Widget auf der Startseite zum Laufen gebracht, aber die Bilder werden auf den anderen statischen Seiten nicht angezeigt. Ich habe die Einstellungen so konfiguriert, dass sie „angezeigt werden, wenn“ meine gewünschten Seiten ausgewählt sind, aber das Bild wird nur auf der Startseite angezeigt. Ich habe versucht, das Widget zu löschen und neu hinzuzufügen und Seiten zu entfernen und neu hinzuzufügen. Irgendwelche Ideen?

    Danke!
    Holly

    • Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show :)

      Admin

  3. Hallo, ich versuche, das Bild hinzuzufügen und es in der oberen linken Ecke des Beitrags anzeigen zu lassen. Wenn ich es hinzufüge und eine Vorschau ansehe, ist alles da, aber wenn ich veröffentliche, ist es nicht da. Irgendwelche Ideen?

  4. Ich habe ein Bild in meine Fußzeile eingefügt und in Chrome auf einem Desktop erscheint es und verschwindet sofort wieder. Ich habe die Größe reduziert, ich habe versucht, es als Bild in HTML hinzuzufügen, aber nichts löst das Problem. Auf Chrome auf meinem Handy ist es in Ordnung. Ich habe keinen Adblock auf meinem Desktop. Das Problem tritt auch mit Firefox auf, aber Microsoft Edge funktioniert einwandfrei. Irgendwelche Ideen?

  5. Hallo, ich habe einen Blog in WordPress erstellt, aber die Sprache des geposteten Inhalts ist Telugu. Wie kann ich den Schriftstil des Telugu-Posts ändern?

  6. Hallo,

    Ich habe beide im Video gezeigten Methoden ausprobiert, und das Bild in der Seitenleiste wird immer noch überhaupt nicht angezeigt.

    Haben Sie Ideen, wie ich das beheben könnte?

    Danke!

  7. Gibt es eine Möglichkeit, das Bild so einzustellen, dass es nur auf der Startseite / Homepage angezeigt wird?

  8. Danke, dass Sie immer an der Spitze zufälliger Suchen für Wordpress-Sachen sind – und danke für die nützlichen Informationen, die für normale Leute, die WP benutzen, geeignet sind!

  9. Danke, dass Sie dies so detailliert beschrieben haben. Ich möchte meine Anzeigen im Widget-Bereich schalten. Diese Methode passt perfekt zu meinen Anforderungen. Aber ich habe nur ein Problem. Wie füge ich für verschiedene Blogbeiträge unterschiedliche Bilder hinzu? Gibt es dafür eine Möglichkeit?

  10. Ich glaube, das Video sagte „Alt-Tag“. Das wäre nicht die korrekte Terminologie – es wäre das Alt-Attribut des Tags.

  11. Ich liebe dieses Tutorial, bin aber skeptisch, das Bild-Widget herunterzuladen, da es heißt, es sei mit meiner WordPress-Version nicht getestet. Kommen bald Updates oder wie wird es mit meiner WordPress-Version getestet?

  12. Hallo, ich hoffe, ich habe es nicht irgendwo in den Kommentaren übersehen, aber wie fügt man ein kreisförmiges oder ovales statt eines quadratischen Bildes für das "Über mich" in der Seitenleiste ein? Ich benutze Divi von Elegant Themes.

  13. Hallo,

    Irgendeine Idee, warum Aufzählungspunkte in den Sidebar-Widgets nicht angezeigt werden, obwohl ich „list-style-type: none“ aus der CSS-Datei entfernt und durch den folgenden Code ersetzt habe und es immer noch nicht funktioniert:

    .widget ul li { list-style: circle }

  14. Wow! Genau richtig. Der visuelle Text ist zu viel Arbeit für ein einfaches Bild. Ich habe nach einem Plugin gesucht, das genau das tut. Vielen Dank

  15. Hallo,
    Ich habe ein paar Fragen. Erstens habe ich aus irgendeinem Grund Probleme bei der Installation des Widget Image Plugins. Ich habe schon Plugins installiert, aber dieses hier scheint mir nicht zu gelingen. Zugegeben, ich bin Anfänger und habe sie vor fast einem Jahr hinzugefügt, vielleicht habe ich etwas vergessen. Können Sie mir Tipps geben?

    Außerdem, ob Sie es glauben oder nicht, ich habe ein Bild auf meinem Widget mit HTML-Code erhalten! (Überrascht, dass ich programmieren konnte, aber Sie haben es sehr einfach und verständlich gemacht) Das einzige Problem, das ich habe, ist, dass es die volle Größe hat und ich hoffe, Thumbnails zu haben. Gibt es dafür Code? Wenn ja, muss ich das Plugin nicht installieren.
    Danke!

  16. Ich habe das gelesen, um zu versuchen, das Bild zu aktualisieren, das ich in einem Widget auf meinem Blog habe.

    Seid ihr auf demselben Planeten wie der Rest von uns? Lest mal, was ihr geschrieben habt – man müsste ein Anwalt aus Philadelphia sein, der mit Steve Jobs gekreuzt wurde, um die Anweisungen zu verstehen.

    Jedenfalls – zurück zum Versuch, das Bild zu ändern, ich bin sicher, der Trick steckt irgendwo da drin.

  17. Vielen Dank für diese Informationen. Aber ich muss wirklich wissen, wie ich Google-Anzeigen in meinen Beiträgen und auch in der Seitenleiste anzeigen kann. Ich habe bereits ein genehmigtes AdSense-Konto und den Anzeigencode generiert. Aber der nächste Schritt ist, was ich nicht verstehe. Ich brauche bitte Hilfe.

  18. Entweder habe ich viele Dinge, über die Sie gesprochen haben, übersehen, oder die Website hat sich geändert. Ich sehe eine Option für ein Bild-Widget, das Ihrer Aussage nach nicht existiert. Ich sehe keine Medien oder Galerien, in die ich eine Bilddatei hochladen kann.

    Wo lade ich die Datei hoch, damit ich eine URL erhalte, die ich an der richtigen Stelle im Formular eingeben kann, um das Bild-Widget einzurichten?

  19. Hallo. Ich weiß, wie man die Bilder in der Seitenleiste bekommt, aber sie nehmen zu viel Platz ein, daher versuche ich hier, eine Klick-Galerie zu erstellen. Ich bekomme das kleine Klick-Fenster, aber es werden keine Bilder angezeigt. Ich konnte auch eine automatische Diashow erstellen, aber das ist sehr ablenkend, also möchte ich das nicht. Ich möchte nur die Fotogalerie, bei der man zum nächsten Bild klickt, aber ich finde hier nichts, wie man das beheben kann.

  20. Hallo,

    Ich habe ein Problem beim Hinzufügen von Bild-Widgets. Wenn ich versuche, ein neues hinzuzufügen (nachdem ich auch eines gelöscht habe), werden die Änderungen nicht gespeichert, die Seite lädt nicht mehr und wenn ich versuche, auf die Website zuzugreifen (Admin und normal), wird angezeigt, dass keine Verbindung zum Server hergestellt werden kann – meine Website ist also im Grunde offline. Ich habe meinen Computer neu gestartet und Updates installiert, und das hat es beim ersten Mal gelöst, aber als ich versuchte, das Widget erneut hinzuzufügen, geschah dasselbe, außer dass Neustarten nicht mehr zu helfen scheint!

    Bitte helfen Sie! Ich würde es sehr zu schätzen wissen!

    Danke im Voraus!

  21. Hallo, danke dafür, es funktioniert hervorragend. Ich habe eine Frage; Ich möchte nicht, dass dasselbe Bild auf jeder Seite erscheint, also wie kann ich es auf eine bestimmte Seite beschränken, damit ich auf nachfolgenden Seiten ein anderes Bild verwenden kann.

    Mit freundlichen Grüßen,

    Gregor

  22. Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful. :-)

  23. Ich habe das Bild im Widget – was ich wissen möchte ist, wie ich dieses Widget auf ein Opt-in-Formular verweise – wie fügt man diesen Code hinzu?

Hinterlasse eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.