Arbeiten mit Bildern

Bilder steigern die visuelle Anziehungskraft deiner Website, vermitteln effektiv Informationen und verbessern das Erlebnis deiner Besucher. In diesem Ratgeber lernst du die vielen verschiedenen Methoden zum Hinzufügen von Bildern zu deiner WordPress-Website kennen.

Was du mit Bildern alles machen kannst, ist ein weites Feld. Deshalb haben wir das Thema auf mehrere Seiten aufgeteilt:

• Informationen zu Bilddateitypen, die du auf WordPress.com hochladen kannst, findest du im Ratgeber Akzeptierte Dateitypen.
• Lade mit dem Bildblock ein Bild auf deine Website hoch.
• Lade mit dem Galerieblock oder dem Block „Gekachelte Galerie“ eine Galerie hoch.
• Lade mit dem Diashow-Block eine Diashow hoch.
• Lade mit dem Cover-Block ein Header- oder Banner-ähnliches Bild hoch.
• Füge ein Bild neben Text hinzu, indem du den Block „Medien und Text“ verwendest, oder vergleiche zwei Bilder mit dem Block „Bildervergleich“.
• In diesen Quellen kannst du kostenlose Bilder finden, die du für deine Website verwenden kannst.

• Mit den Blockeinstellungen im WordPress-Editor kannst du Bilder zuschneiden, ändern, drehen, ausrichten und untertiteln.
  • Weitere Informationen zu diesen Einstellungen findest du im Ratgeber zum Bildblock. Du kannst dir auch unsere anderen Medien-Blöcke ansehen.
• Im Abschnitt Medien deines Dashboards kannst du Bilder auf deiner Website anzeigen und löschen.
• Du kannst Bilder in Medien auch drehen, zuschneiden und spiegeln. Weitere Informationen findest du unter Bearbeiten eines Bilds in „Medien“.
• Optimiere deine Bilder, um sicherzustellen, dass sie schnell geladen werden und nur minimalen Speicherplatz belegen.

• Problembehandlung beim Hochladen von Bildern: Lassen sich deine Bilder nicht hochladen? Hier findest du einige Tipps, wie du Bilder erfolgreich hochladen kannst.
• Problembehandlung bei verschwommenen Bildern: Erfahre, warum Bilder auf deiner Website verschwommen wirken, selbst wenn das hochgeladene Original eine gute Qualität hat.

Hier sind einige Beispiele dafür, wie du deine Bilder im WordPress-Editor anzeigen kannst. Die Bilder werden je nach verwendetem Theme unterschiedlich dargestellt, probiere sie also auf deiner Website aus!

Alle Bilder stammen aus der kostenlosen Fotobibliothek von Pexels.

Verwende den Bildblock, um einzelne Bilder hinzuzufügen.

Standardstil:

Gerundeter Stil:

Um zwei Bilder nebeneinander anzuzeigen, kannst du den Galerieblock verwenden:

Wenn du bereits ein einzelnes Bild eingefügt hast, kannst du per Drag-and-drop schnell ein zweites Bild daneben einfügen. Wenn du die Bilddatei von deinem Computer ziehst, halte sie gedrückt, bis neben deinem ersten Bild eine vertikale Linie angezeigt wird, und lasse sie dann los. Hier ist eine Videodemo dazu, wie du ein neues Bild per Drag-and-drop neben einem bestehenden Bild platzierst:

Mit dem Block „Medien und Text“ kannst du ein Bild oder Video direkt neben deinem Text einfügen. Er verfügt über eine praktische Option zum Stapeln von Medien und Text auf Mobilgeräten:

Weitere Optionen dafür, wie du Text um Bilder fließen lassen kannst, findest du in unserem Ratgeber Bilder am Text ausrichten.

Verwende einen Cover-Block für Header mit voller Breite und Bilder im Banner-Stil. Du kannst das Bild auf einen fixierten Hintergrund (auch als „Parallax-Effekt“ oder „Parallax-Scrollen“ bezeichnet) einstellen, ein Farb-Overlay und sogar Text und andere Inhalte über dem Bild hinzufügen.

Fixierter Hintergrund mit Parallax-Effekt:

Nicht fixierter Hintergrund:

Verwende den Galerieblock, um mehrere Fotos ansprechend angeordnet anzuzeigen.

Verwende den Diashow-Block, um viele Bilder zu teilen, ohne zu viel Platz auf einer Seite oder in einem Beitrag zu beanspruchen.

Der Block „Gekachelte Galerie“ ist in vier verschiedenen Stilarten verfügbar:

• Gekacheltes Mosaik
• Kreisraster
• Quadratische Kacheln
• Gekachelte Spalten

Gekacheltes Mosaik

Kreisraster

Quadratische Kacheln mit optional gerundeten Ecken

Gekachelte Spalten

Platziere mit dem Bildvergleichsblock zwei Bilder nebeneinander (oder übereinander) und verwende einen Slider, um Unterschiede zwischen den Bildern aufzuzeigen.