Ein Textbeitrag ohne Bilder erzielt zwei- bis dreimal weniger Engagement als ein Artikel mit visuellen Inhalten. Bilder lockern Textwüsten auf, halten die Aufmerksamkeit und helfen, Sachverhalte zu erklären, die sich mit Worten nur schwer vermitteln lassen. Zudem bringen Bilder über Alt-Texte und Dateinamen Suchtraffic von Google Images, für einen technischen Blog sind das Hunderte zusätzliche Besuche pro Monat.

Der Gutenberg-Editor (der Block-Editor in WordPress) arbeitet ohne ein einziges Plugin mit Bildern. Fünf integrierte Blöcke decken alle grundlegenden Szenarien ab: vom Einzelbild über Galerien bis hin zu vollflächigen Covern mit Textebenen. Dennoch haben Einsteiger Fragen: Welchen Block wählt man, wie richtet man ein Bild aus, ohne dass der Text zerrissen wird, wie platziert man zwei Bilder nebeneinander oder wozu braucht man einen Duoton-Filter.

Nachfolgend eine schrittweise Aufschlüsselung jedes Blocks mit Einstellungen, die Kurzanleitungen nicht erwähnen. Keine Plugins, nur die bordmittelfähigen Gutenberg-Werkzeuge.

💡 Kurzüberblick:

• Ein einzelnes Bild fügen Sie mit dem Block „Bild" ein und konfigurieren die Ausrichtung über die Werkzeugleiste, für ein Bild genügt das
• Ein Bild neben Text platzieren Sie mit dem Block „Medien & Text", er hält die Proportionen starr ein, Text überlappt nicht
• Zwei oder mehr Bilder in einer Reihe bringen Sie mit dem Block „Galerie" unter und geben die Spaltenanzahl vor, das Raster richtet sich automatisch aus
• Text auf ein Foto legen Sie mit dem Block „Cover", samt Filtern, Überlagerung und optionalem Parallax-Effekt
• Die Lightbox aktivieren Sie in den Einstellungen des Blocks „Bild", das Bild öffnet sich bildschirmfüllend, ohne die Seite neu zu laden

Welche Gutenberg-Blöcke mit Bildern arbeiten

WordPress liefert von Haus aus fünf Blöcke mit Bildbezug. Jeder löst eine eigene Aufgabe, man sollte sie nicht verwechseln.

• Bild (Image), ein Einzelbild mit Ausrichtung, Bildunterschrift, Verlinkung, Duoton-Filter und Lightbox-Einstellungen. Der Grundbaustein für jeden Beitrag. Dokumentation
• Galerie (Gallery), ein Raster aus mehreren Bildern mit Spalteneinstellungen. Ersetzt klassische Galerien aus dem alten Editor und den [gallery]-Shortcode. Dokumentation
• Medien & Text (Media & Text), ein zweispaltiger Block: Bild links (oder rechts), Text daneben. Eine starre Verbindung ohne Versatz bei Auflösungswechseln. Dokumentation
• Cover (Cover), ein Hintergrundbild mit Textebene und Schaltflächen darüber. Sie können Farbüberlagerung, Deckkraft und fixierten Hintergrund konfigurieren. Dokumentation
• Datei (File), ein Download-Link mit Karte. Für PDF-Anleitungen und Archive, nicht für die Anzeige eines Bildes auf der Seite.

Die ersten vier sind Ihr Hauptarsenal. Der Block „Datei" wird nicht für die Bebilderung von Inhalten genutzt, daher behandeln wir im Folgenden nur die visuellen Blöcke.

So fügen Sie ein Einzelbild ein und konfigurieren die Ausrichtung

Das häufigste Szenario: ein Bild in den Text einfügen und seine Position relativ zu den Absätzen anpassen.

Klicken Sie in der Editor-Oberfläche auf die Schaltfläche „+" (Block hinzufügen) und wählen Sie „Bild". Es erscheint ein Upload-Fenster, Sie können eine Datei von Ihrem Rechner ziehen, aus der WordPress-Mediathek auswählen oder eine URL einfügen. Nach dem Upload erscheint das Bild sofort im Editor und darüber eine Werkzeugleiste mit Ausrichtungsschaltflächen.

Verfügbare Ausrichtungsoptionen:

• Links ausrichten, Bild wird nach links geschoben, Text umfließt es rechts
• Zentrieren, Bild in der Mitte, Text oberhalb und unterhalb
• Rechts ausrichten, spiegelbildliche Version der linken Ausrichtung
• Breite Breite, Bild ragt über die Textblockgrenzen hinaus, aber nicht über die volle Bildschirmbreite
• Volle Breite, Bild erstreckt sich von Rand zu Rand des Inhaltsbereichs

Blaue Punkte an den Bildecken erlauben die Größenänderung per Ziehen, ohne Pixel in CSS berechnen zu müssen. In der rechten Seitenleiste (Tab „Block") konfigurieren Sie den Alternativtext für SEO und einen Link, dem Nutzer beim Klick auf das Bild folgen.

Zwei Tipps, die Zeit sparen. Erstens: Aktivieren Sie die Lightbox (die Option „Beim Klicken vergrößern" in den Link-Einstellungen des Blocks), dann öffnet sich das Bild bildschirmfüllend, der Nutzer verlässt die Seite nicht. Zweitens: Der Duoton-Filter (Kreissymbol in der Block-Werkzeugleiste) ändert das Farbschema des Bildes ohne Photoshop, nützlich, wenn Screenshots aus verschiedenen Quellen visuell kollidieren. Der Filter verändert die Quelldatei in der Mediathek nicht, Sie können ihn jederzeit zurücksetzen.

Allerdings gibt es einen Haken: „Links ausrichten" und „Rechts ausrichten" funktionieren nur gut, wenn der Text lang genug ist. Ist der Absatz kurz, „fällt" das Bild aus dem Fluss und die nächste Überschrift überlappt es. In solchen Fällen nutzt man besser den Block „Medien & Text".

Block „Medien & Text": Bild und Absatz in einem Verbund

Der Block Medien & Text fixiert das Verhältnis starr: halbe Breite für Bild, halbe für Text. Kein Versatz bei Änderung der Bildschirmauflösung.

Wird auf dieselbe Weise hinzugefügt: Schaltfläche „+", nach „Medien & Text" suchen. Wählen Sie ein Bild und schreiben Sie den Text in die angrenzende Spalte. In der Seitenleiste stehen folgende Umschalter zur Verfügung:

• Plätze tauschen (Bild links oder rechts)
• Vollbildmodus (auf volle verfügbare Breite strecken)
• Hintergrundfarbe für die Texthälfte

Der Block ist besonders praktisch für Schritt-für-Schritt-Anleitungen: Screenshot einer Einstellung links, Beschreibung des Vorgangs rechts. Der Leser verliert beim Scrollen nicht den Zusammenhang zwischen Text und Bild.

In der Praxis hilft Medien & Text auch in bodenständigeren Situationen. Beispiel: Sie haben einen Screenshot mit linker Ausrichtung eingefügt und die nächste H2 ist ins Bild „gelaufen". Die Absatzstruktur zu ändern ist zu spät, wickeln Sie Bild und Text in Medien & Text ein, das Problem ist in 10 Sekunden behoben.

So platzieren Sie zwei oder mehr Bilder nebeneinander mit dem Galerie-Block

Wenn Sie eine Reihe von Screenshots zeigen oder eine Fotosammlung anlegen möchten, nutzen Sie den Block „Galerie". Anders als im alten klassischen Editor, wo die Galerie als separater [gallery]-Shortcode lebte, verwaltet Gutenberg sie visuell.

Fügen Sie den Block „Galerie" hinzu, laden Sie die gewünschten Bilder hoch, sie ordnen sich automatisch in einem Raster an. In den Blockeinstellungen (rechtes Panel) wählen Sie die Spaltenanzahl: 2, 3, 4 oder mehr. Für zwei Bilder nebeneinander setzen Sie „2 Spalten", Sie erhalten eine saubere Reihe ohne manuelle Größenanpassung.

Weitere Funktionen des Galerie-Blocks:

• Zuschneiden der Vorschaubilder, alle Bilder werden auf dieselbe Größe gebracht, das Raster wirkt gleichmäßig
• Abstand zwischen den Bildern konfigurieren
• Jedem Bild einzeln einen Link zuweisen

Verlangt das Projekt ein nicht standardmäßiges Layout (Bilder unterschiedlicher Größe in einem Raster), könnten die Möglichkeiten der integrierten Galerie nicht ausreichen. Dann kommt der Block „Spalten" (Columns) zur Hilfe, in den separate „Bild"-Blöcke mit unabhängigen Einstellungen verschachtelt werden. Für typische Szenarien genügen jedoch die Bordmittel-Galerien.

Hinweis: Verwechseln Sie den Block „Galerie" nicht mit mehreren, in Spalten angeordneten „Bild"-Blöcken. Die Galerie beschneidet Vorschaubilder automatisch, alle Bilder erscheinen unabhängig von den ursprünglichen Proportionen gleich hoch. Spalten führen diese Anpassung nicht durch: Ein Bild wird höher als das andere, und die Reihe „schwimmt". Für eine schnelle Fotosammlung nehmen Sie die Galerie, für pixelgenaues Layout die Spalten.

So legen Sie Text mit dem „Cover"-Block über ein Bild

Der Block „Cover" ist ein Hintergrundbild mit einer Textebene. Im Wesentlichen ein Banner innerhalb des Beitrags. Wird zur Formatierung von Artikelabschnitten, Zitaten oder Kernaussagen genutzt.

Wählen Sie den Block „Cover", laden Sie ein Bild hoch und geben Sie direkt darauf Text ein. In der Seitenleiste konfigurieren Sie:

• Überlagerungsfarbe, halbtransparente Füllung über dem Bild, macht Text auf jedem Hintergrund lesbar
• Deckkraft, Intensität der Überlagerung von kaum wahrnehmbar bis nahezu deckend
• Fixierter Hintergrund, beim Scrollen der Seite bleibt das Bild an Ort und Stelle (Parallax-Effekt)
• Hintergrundwiederholung, den Block mit einem sich wiederholenden Muster kacheln, für Texturen und Ornamente

Der fixierte Hintergrund ist eine beliebte Technik bei Landingpages und WordPress-Portfolios. Sieht eindrucksvoll aus, wird aber auf Mobilgeräten vom Browser oft aus Performancegründen deaktiviert. Verlassen Sie sich nicht darauf als Haupttechnik für Smartphones.

Der „Cover"-Block verschachtelt sich in andere Blöcke: in Spalten, Gruppen oder Zeilen. Und Sie können auf dem Cover nicht nur Text platzieren, sondern auch eine Schaltfläche: Fügen Sie einen „Buttons"-Block innerhalb des Covers hinzu, und Sie erhalten ein fertiges CTA-Banner mit Hintergrund. Alle Werkzeuge, kein CSS oder zusätzliche Plugins.

Wenn das Cover das Laden auf Mobilgeräten verlangsamt, deaktivieren Sie den fixierten Hintergrund und komprimieren Sie das Bild auf 200-250 KB. WordPress konvertiert ab Version 5.8 PNG und JPEG beim Upload automatisch in WebP, besser ist es jedoch, die Quelle vorab durch TinyPNG oder Konvertierung in AVIF vorzubereiten.

⁉️🤔 Häufig gestellte Fragen

Warum „springt" Text und läuft in angrenzende Blöcke, nachdem ein Bild hinzugefügt wurde?

Das passiert, wenn das Bild links oder rechts ausgerichtet ist und zu wenig Text darum herumsteht. Gutenberg „stützt" die Blockhöhe unter dem Bild nicht automatisch ab, es verlässt sich auf das Volumen des umgebenden Texts. Lösung: Wickeln Sie Bild und Text in einen „Medien & Text"-Block, der hält die Proportionen starr ein. Oder fügen Sie 2-3 weitere Textzeilen hinzu, damit der Umbruch korrekt funktioniert.

Worin unterscheidet sich der Block „Galerie" von mehreren, in Spalten platzierten „Bild"-Blöcken?

Die Galerie liefert ein einheitliches Raster mit automatischem Zuschnitt der Vorschaubilder, alle Bilder erscheinen unabhängig von den ursprünglichen Proportionen gleich groß. Spalten mit separaten Bildern führen diese Anpassung nicht durch: Ein Bild kann höher ausfallen als ein anderes, und die Reihe „schwimmt". Für eine schnelle Fotosammlung nehmen Sie die Galerie, für präzises, pixelgenaues Layout die Spalten.

Kann ich Alt-Texte für mehrere Bilder in einer Galerie auf einmal vergeben?

Nein, der Block „Galerie" unterstützt keine Massenbearbeitung von Alt-Texten. Jedes Bild in der Galerie ist eine eigene Mediendatei, der Alt-Text wird individuell gesetzt: Klicken Sie auf ein bestimmtes Bild in der Galerie, gehen Sie in die Seitenleiste und füllen Sie das Feld „Alternativtext" aus. Oder schreiben Sie den Alt-Text vorab in der WordPress-Mediathek, dann wird er beim Einfügen automatisch übernommen.

Der „Cover"-Block verlangsamt das Laden der Seite auf Mobilgeräten. Wie behebe ich das?

Der fixierte Hintergrund (Parallax) ist der Hauptverursacher. Deaktivieren Sie die Option „Fixierter Hintergrund" in den Blockeinstellungen, und der Browser rendert den aufwändigen Effekt beim Scrollen nicht mehr. Zweiter Schritt: Komprimieren Sie das Cover-Bild auf 200-250 KB: Dienste wie TinyPNG oder die Konvertierung in WebP/AVIF reduzieren die Größe ohne sichtbaren Qualitätsverlust. WordPress 5.8+ konvertiert PNG und JPEG beim Upload automatisch in WebP, besser ist es jedoch, die Quelle vorab vorzubereiten.

Ergibt der Block „Datei" Sinn, wenn ich lediglich ein Bild zeigen möchte?

Nein. Der Block „Datei" zeigt eine Download-Schaltfläche und einen Dateinamen an, nicht das Bild selbst. Er wird für PDF-Anleitungen, ZIP-Archive, CSV-Dateien und andere Dokumente benötigt, die der Nutzer auf seinem Gerät speichern soll. Um ein Bild zu zeigen, verwenden Sie stets den Block „Bild".

Worin unterscheidet sich die Gutenberg-Lightbox von Lightbox-Plugins wie FooBox oder Meow Lightbox?

Die integrierte Lightbox (die Option „Beim Klicken vergrößern" in den Link-Einstellungen des „Bild"-Blocks) arbeitet ohne zusätzlichen Code und kollidiert nicht mit Themes, sie erschien Ende 2023 in WordPress 6.4. Plugins bieten mehr Einstellungen: Galerieansicht mit Wischen, Abdunklungseffekte, Bildzähler. Wenn Sie 2-3 Bilder pro Beitrag platzieren, genügt die integrierte. Für Fotogalerien und Portfolios installieren Sie ein Plugin.

Welchen Block Sie für Ihre Aufgabe nehmen: Kurzzusammenfassung

Gutenberg deckt alle grundlegenden Arbeitsszenarien mit Bildern ohne ein einziges Plugin ab. Fügen Sie ein Einzelbild mit dem Block „Bild" ein und vergessen Sie den Alt-Text nicht, das ist Ihr wichtigstes SEO-Asset für Google Images. Aktivieren Sie die Lightbox: Die Funktion ist kostenlos, und mobile Leser werden es Ihnen danken.

Brauchen Sie einen starren Verbund „Bild + Text", nehmen Sie „Medien & Text", er fällt auf keinem Bildschirm auseinander. Bildserien: „Galerie" mit Spalteneinstellung, der automatische Zuschnitt richtet alles in einer Linie aus. Text über Foto: „Cover" mit Überlagerung und optionalem Parallax, und Sie können innen eine Schaltfläche hinzufügen und erhalten ein CTA-Banner.

Diese vier Blöcke zu beherrschen ist realistisch in 10-15 Minuten in einem Testbeitrag. Öffnen Sie einen Entwurf, ziehen Sie Blöcke über die Arbeitsfläche, die Gutenberg-Oberfläche ist für visuelles Arbeiten konzipiert, nicht für Code. Wenn der nächste Beitrag mit Bildern statt einer Textwüste erscheint, sind Sie bereits einen Schritt voraus.