WordPress-Tutorial: Text-Widgets

Wie kannst du Bilder in Widgets einfügen?

Bilder und pdf-Links in Text-Widgets einfügen

Es ist leider nicht so einfach, in Text-Widgets Bilder einzufügen, wie du das von Seiten oder Beiträgen kennst.

Hinweis: Seit der Version 4.8 von WordPress kannst du direkt in den Text-Widgets Links einfügen und den Text formatieren! Bis dahin war das Erstellen von Links ein bisschen kompliziert.

Ich zeige dir hier den Trick, wie du Links zu pdf-Dateien und Bilder einfügen kannst.

  1. Öffne im Browser zwei Fenster und öffne in beiden die Start-Seite von WordPress (Dashboard) (s. Anleitung „WP_Login-Anmelden“). Mit zwei parallelen Fenstern lässt es sich besser arbeiten, weil du schneller hin und her wechseln kannst.
    1. In Fenster 1 wählst du über „Design“ die „Widgets“ (siehe auch das Tutorial „WP Widgets I“).
    2. In Fenster 2 erstellst du eine neue Seite (siehe auch das Tutorial „Neue Seite erstellen“). Diese Seite kannst du nachher löschen oder als „Entwurf“ für ähnliche Zwecke oder zum Ausprobieren speichern.

 

Bild in Text-Widget einfügen

  1. Erstelle im Browser-Fenster 2 eine neue Seite. Wähle die Ansicht „Visuell“ und klicke dann auf „Dateien hinzufügen“, um ein Bild einzufügen. Siehe dazu auch mein Tutorial „Fotos einfügen“.

Screenshot Links und Bilder in Widgets 6

  1. Wähle in der Mediathek das gewünschte Bild aus (oder lade ein neues Bild hoch) (1). Füge einen Alternativtext (= Kurze Bildbeschreibung) hinzu (2). Bei „Ausrichtung“ wählst du jene Position, an der das Bild im Text-Widget stehen soll (Links, Rechts oder Zentriert). Bei „Link zur“ am besten „Keine“ wählen, es sei denn, vom Bild soll auf eine andere Seite verlinkt werden. Als „Größe“ wählst du die Option „Miniaturbild“ bzw. „Vorschaubild“ (3). Die anderen Größen sind für die Seitenleiste zu groß. Am Ende klicke auf „In die Seite einfügen“ (4).

Screenshot Links und Bilder in Widgets 7

  1. Wechsle im Browser-Fenster 2 zur Ansicht „Text“. Markiere und kopiere den gesamten Text (<img … />).

Screenshot Links und Bilder in Widgets 8

  1. Wechsle im Browser-Fenster 1 ebenfalls zur Ansicht „Text“. Füge dann den kopierten Text in das Text-Widget an der gewünschten Stelle ein. Vergiss nicht, am Ende auf „Speichern“ zu klicken!

Screenshot: Bild in Text-Widget einfügen

Fertig!
Jetzt hast du das Bild im Text-Widget in der Seitenleiste (oder auch im Footer) der Webseite:

Screenshot: Bild in Text-Widget eingefügt

 

Link zu pdf-Datei in Text-Widget einfügen

Wie schon oben beschrieben, öffnest du wieder im Browser zwei Fenster und in beiden die Start-Seite von WordPress (Dashboard). Mit zwei parallelen Fenstern funktioniert es viel besser!

  1. Wähle in Fenster 1 über „Design“ die „Widgets“ aus (siehe auch das Tutorial „Widgets I“).
  2. Erstelle in Fenster 2 eine neue Seite (siehe auch das Tutorial „Neue Seite erstellen“).

 

Schritt 1: pdf-Datei in Mediathek hochladen

  1. Bewege die Maus über „Medien“ und klicke dann auf „Datei hinzufügen“.

Screenshot pdf-Datei einfügen 2

  1. Klicke auf „Dateien hinzufügen“.

Screenshot pdf-Datei einfügen 3

  1. Wähle die pdf-Datei aus. Dann klicke auf „Öffnen“.

Screenshot pdf-Datei einfügen 4

Die Datei befindet sich nun in der Mediathek.

 

Schritt 2: Link zur pdf-Datei im Text-Widget erstellen

  1. Klicke dafür im Browser-Fenster 2 in der neuen Seite den Button „Dateien hinzufügen“. (siehe auch das Tutorial „pdf-Dateien einfügen“).

Screenshot Links und Bilder in Widgets 11

  1. Wähle die gewünschte pdf-Datei aus (1). Klicke dann auf den Button „In den Beitrag einfügen“ (2).

Screenshot pdf-Datei einfügen 6

  1. Nun ist der Link in die Seite eingefügt:

Screenshot Links und Bilder in Widgets 12

  1. Den Text (= Dateiname der pdf-Datei) kannst du auch noch beliebig überschreiben. Der Link bleibt trotzdem bestehen.

Screenshot Links und Bilder in Widgets 13

  1. Klicke anschließend auf die Ansicht „Text“. Markiere und kopiere dann den gesamten Text (von <a title=…> bis </a>).

Screenshot Links und Bilder in Widgets 14

 

  1. Wechsle zum Browser-Fenster 1, in dem du das entsprechende Text-Widget geöffnet hast. Wechsle dort auf die Ansicht „Text“ und füge dort den kopierten Text an der passenden Stelle ein. Klicke danach auf „Speichern“.

Screenshot: Link zu pdf in Text-Widget einfügen

Fertig!
Der Link zur pdf-Datei befindet sich nun im Text-Widget in der Seitenleiste der Webseite:

Screenshot: Link zu pdf in Text-Widget eingefügt