Blog

TitelText WidgetmitBildinderAnsicht

Bilder in das Text-Widget von WordPress einfügen

Update Juni 2017: Dank des neuen „Foto-Widgets“ in WordPress 4.8, ist es deutlich einfacher geworden, Bilder in Seitenleisten und in der Fußzeile zu platzieren. Die hier beschreibende Methode ist nicht mehr zwingend nötig.

Wir nennen WordPress den ‚größten Website-Baukasten der Welt‘. Den Möglichkeiten sind quasi keine Grenzen gesetzt und mit der Erstellung einer eigenen Website holt man sich diese Möglichkeiten nach Hause oder ins Büro. WordPress bietet als Content-Management-System (oder auch ‚Redaktionssystem‘) in Kombination mit einem guten Theme (Das Design der Website) und ein paar ausgewählten Zusatzfunktionen in Form von Plugins, die perfekte Grundlage für Websites, die jedem Anspruch gerecht werden. Bei all den Funktionen übersieht man aber schon mal etwas. Nachfolgend zeigen wir, wie man bei dem von WordPress mitgelieferten ‚Text-Widget‘ ein Bild einfügt.

Das WordPress Text-Widget

Mit der Installation von WordPress erhält man automatisch einige Widgets zum Befüllen der Sidebars (Seitenleisten). Beispiele hierfür sind das Suchformular, ein Kalender, die letzten Blogbeiträge, ein individuelles Menü und das Text-Widget. Letzteres kann man mit Text versehen, welcher durch HTML-Elemente optisch anpassbar ist. Naheliegend ist, dass ebenfalls Bilder eingefügt werden können. Wie das geht? Bitteschön:

Um einfach nur ein Bild in das Text-Widget einzufügen ist lediglich folgender Code nötig

<img src="Bild.png" />

Das Bild muss nicht alleine stehen, es kann überhalb, unterhalb oder innerhalb eines ebenfalls mit HTML formatierten Textes stehen.
Bild in WordPress Text-Widget einfügen
Das Bild sollte man vorher in der Mediathek hochgeladen haben. Dabei erhält man die Datei-URL die man an Stelle von „Bild.png“ einfügt.
Datei-URL eines Bildes aus der Mediathek
Das Bild wird dann automatisch in die Breite des Widgets angepasst. Sollte das aber mal nicht klappen oder möchte man das Bild kleiner anzeigen, fügt man dem Code Folgendes hinzu:

 width="100px"

Soll das Bild anklickbar sein und zu einer Seite oder einem Artikel führen, ist folgender Code nötig

 <a href="https://elbnetz.com"><img src="Bild.png" /></a>

Das Ergebnis sieht dann so aus:
Text-Widget mit Bild in der Ansicht

30 Kommentare. Hinterlasse eine Antwort

  • Torsten Schrimper
    22. Februar 2013 11:32

    Vielen Dank für diesen guten Beitrag. Besonder gut geholfen hat der Hinweis für die Bildgröße. Beste Grüße aus Essen. Torsten Schrimper

    Antworten
  • marketingadvisors
    7. Mai 2013 16:18

    Klasse Anweisung, genau so, dass jeder es schaffen kann, auch wenn er keine ausgeprägten IT-Kenntnisse hat.
    Weiter so Elbnetz!

    Antworten
  • Da ich absolut kein Wissen über HTML besitze, habt ihr mir sehr weitergeholfen, denn ich möchte in meiner Sidebar Fotos einfügen. Auch die Angabe über Änderung der Größe ist wehr wertvoll.
    Ich probiere das jetzt direkt aus.

    Antworten
  • Endlich mal ein Kommentar, wo es auf Anhieb klappt! Danke!
    Bin über 50 und WP-Neuling. Komme mir manchmal vor wie in der
    Linux-Anfangs-Zeit. Nicht einfach!
    Wo findet man einen ebenso klaren Artikel zum Einbetten von Bildern in den Textfluss?
    LG
    L.

    Antworten
  • Lassen sich auch zwei kleine Bilder nebeneinander platzieren ?

    Antworten
  • Super Hilfe, aber was muss ich noch eintragen, damit der Link (hinter dem Bild) sich in einem neuen Fenster öffnet?

    Antworten
    • Elbnetz Redaktion
      30. Januar 2015 17:39

      Hallo Heike,

      damit sich der Link in einem neuen Fenster oder Tab öffnet, musst du dem Link die Zielvorgabe target=“_blank“ hinzufügen, also in etwa so: <a href=“//elbnetz.com/“ target=“_blank“ rel=“nofollow“>Elbnetz.com</a>

      Schönes Wochenende,
      Das Elbnetz-Team

      Antworten
  • Vielen Dank für diesen ausführlichen und dennoch einfachen Beitrag. Gerade diese simplen Dinge vergisst man in Zeiten von WYSIWYG Editoren mal schnell. Was natrürlich die Frage aufwirft „Warum lässt sich das text Widget nicht per Editor mit Informationen füllen?“. Vielleicht kommt dies ja in einer zukünftigen WordPress version. Nochmals Danke und liebe Grüße aus Irland

    Antworten
  • Kristina Cerny
    31. März 2015 17:48

    Vielen herzlichen Dank für Eure klare Anweisung, sogar bei mir hats funktioniert;). Ist es eigentlich möglich die Schriftgrösse im Textwidget auch zu verändern?
    Würde ich in Hamburg leben, würde ich euren Workshop besuchen, Wien ist leider zu weit weg, aber danke für Eure Blogs!

    Antworten
    • Elbnetz Redaktion
      1. April 2015 8:38

      Es freut uns, dass wir Dir helfen konnten. Die Schriftgröße kannst Du auch ganz einfach anpassen, in dem Du den folgenden Code verwendest:

      <span style="font-size:20px;">Hier kommt Dein Text hin</span>

      Jetzt musst Du nur noch die passende Größe unter fortrisse eintragen.

      PS.: Wien ist ein sehr schöne Stadt, aber auch Hamburg ist immer eine Reise wert.

      Liebe Grüße,

      Dein Elbnetz-Team

      Antworten
  • Hallo, mir ist ein Unglück passiert. Hatten auf der Homepage ein Text Widget. Den Text habe ich leider versehentlich gelöscht. Habe noch ein Backup der WP Installation. Wo kann ich den ursprünglichen Text wiederfinden?
    Vielen Dank Ralf

    Antworten
    • Elbnetz Redaktion
      28. April 2015 8:41

      Guten Morgen Ralf,

      die einzig praktikable Chance das Widget zu retten ist, das Backup wieder einzuspielen. Anders als Seiten und Beiträge landen die Widgets nicht in einem Papierkorb.

      Sonnige Grüße
      Ihre Elbnetz-Redaktion

      Antworten
  • Besten Dank für die kurze aber verständliche Erklärung. Hat uns viel geholfen und die Bilder machen so richtig was her. Werden uns auch mal weitere Tipps von euch anschauen.

    Antworten
  • Hallo!
    Danke für die Hilfe. Eigentlich ganz einfach aber mit einer kurzen Anleitung klappt`s problemlos.

    Antworten
  • Frau Käferin
    27. April 2016 21:59

    Sehr hilfreich, ganz herzlichen Dank!!!
    Gruß Frau Käferin

    Antworten
  • Liebe Elbnetzter,

    nach diversen anderen Anleitungen bin ich etwas verzweifelt und leicht verwirrt auf euren kurzen und leicht verständlichen Beitrag gestoßen. Keine 5 Minuten später war mein Problem gelöst und die Anpassung vorgenommen.

    Herzlichen Dank für euren tollen support!

    Beste Grüße aus Colonia und ein schönes WE
    Stathis

    Antworten
  • Hallo und zunächst schon mal danke für die wertvollen gefunden Tipps.
    Ich hätte im Widget-Bereich gerne nicht nur ein Bild, sondern eine kleine Gallery. Ist das denn auch möglich ?
    Viele Grüße
    Susanne

    Antworten
    • Elbnetz Redaktion
      6. September 2016 10:48

      Halo Susi,

      ja, das ist möglich. Erstelle einfach eine Galerie über die Option „Datei hinzufügen“ auf einer Seite oder einem Beitrag, wechsle zum Text-Editor und kopiere den für die Galerie erstellten Shortcode. Diesen führst Du in das gewünschte Text-Widget ein.

      Viel Erfolg!
      Die Elbnetz-Redaktion

      Antworten
  • super, hat geklappt ! Danke !

    Antworten
  • …da das so prima funktioniert, ergibt sich für mich aber eine weitere Frage: ich verwende die Standard Gallery von WP zusammen mit dem Polaroid Gallery Plugin (finde ich superschön!).
    Jetzt möchte ich aber in der Gallery nicht ALLE Bilder anzeigen, sondern nur drei, die anderen sollen dann erst beim Blättern sichtbar werden. Wie stelle ich das an ?

    LG, Susi

    PS: Ab wann gibt es die Schulungstermine für Dezember?

    Antworten
    • Elbnetz Redaktion
      6. September 2016 14:52

      Liebe Susi,

      bitte habe Verständnis, das wir nicht jedes Plug-in kennen und entsprechend – wie in diesem Fall – nicht in jedem Fall weiterhelfen können. Frag doch am besten im Supportforum des Plug-ins nach.

      Sonnige Grüße,
      Die Elbnetz-Redaktion

      Antworten
  • Dieser Beitrag rettet mir mein Leben, vielen vielen Dank dafür! :)
    Und super gut und einfach erklärt, tolle Anleitung! Echt, ich wäre darauf ohne diesen Beitrag hier nie gekommen ;)

    Antworten
  • Tausend Dank!
    Endlich mal ein kurzer, gut dargestellter und hilfreicher Tipp!

    Antworten
  • Man macht das so selten, dass ich immer wieder nachgucken muß, wie es geht, danke für das Bereitstellen :-)

    Antworten
  • Danke dir! Du hast mir unglaublich geholfen!
    Am meisten der Part mit dem Verändern der Größe. Das ist Gold Wert. Danke

    Antworten

Schreiben Sie einen Kommentar

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

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.

Menü