Beitrag

 
Titel Text-Widget mit Bild in der Ansicht

Bilder in das Text-Widget von WordPress einfügen

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="http://elbnetz.com"><img src="Bild.png" /></a>

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

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Torsten Schrimper

    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

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

    Antworten
  • Steven

    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
  • Lutz

    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
  • Marvin

    Lassen sich auch zwei kleine Bilder nebeneinander platzieren ?

    Antworten
  • Heike

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

    Antworten
    • Elbnetz Redaktion

      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=“http://elbnetz.com/“ target=“_blank“ rel=“nofollow“>Elbnetz.com</a>

      Schönes Wochenende,
      Das Elbnetz-Team

      Antworten
      • Heike

        Vielen herzlichen Dank. Werde es gleich ausprobieren!
        Ich wünsche einen tollen Wochenstart.

        Antworten
      • Patrick

        Sehr hilfreicher Tipp, vor allem hat sich somit meine Frage des nofollow-links geklärt, danke euch!!

        Antworten
  • Markus

    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
    • Elbnetz Redaktion

      Hallo Markus,

      wir sind nicht sicher, ob die gewünschte Funktion in einer der nächsten WordPress Versionen implementiert wird.
      Bis dahin können Sie ja Ihr WordPress mit Hilfe eines der folgenden Plug-ins erweitern:

      Herzliche Grüße nach Irland,
      Ihre Elbnetz-Redaktion

      Antworten
  • Kristina Cerny

    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

      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
  • Ralf

    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

      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
  • Jörg

    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
  • Peter

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

    Antworten
  • Frau Käferin

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

    Antworten
  • Stathis

    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
  • Susi

    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

      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
  • Susi

    super, hat geklappt ! Danke !

    Antworten
  • Susi

    …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

      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

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?