Bilder sollen auf einer Website oft nebeneinander gesetzt werden. WordPress hatte dafür lange Zeit kein echtes Standard-Werkzeug parat, doch seit dem Block-Editor gibt es gleich zwei einfache Lösungen für die Frage:

Wie kann ich in WordPress zwei oder mehrere Bilder nebeneinander anordnen?

Zwei oder mehrere Bilder ordnen Sie in WordPress am schnellsten mit dem Galerie-Block nebeneinander an: Bilder auswählen, Anzahl der Spalten einstellen, fertig. Mehr Kontrolle über jedes einzelne Bild gibt der Spalten-Block mit je einem Bild-Block pro Spalte. Auf dem Smartphone verhalten sich die beiden verschieden: Spalten werden standardmäßig untereinander gestapelt, eine Galerie zeigt zwei Bilder pro Zeile. Im Classic Editor erledigt eine Galerie dieselbe Aufgabe, außerdem gibt es Pagebuilder wie Divi.

Wer noch nicht mit dem Block-Editor (früher Gutenberg genannt) gearbeitet hat, für den zeige ich im Folgenden alle Schritte im Detail. Für alle, die nicht mit dem Block-Editor arbeiten wollen, beschreibe ich auch die Alternativen im Detail.

Vorbereitende Schritte: Die Bilder in WordPress vorbereiten

Bevor irgendwelche Bilder nebeneinander angeordnet werden können, müssen sie in WordPress vorhanden sein. Wenn Sie das schon erledigt haben (also Bilder ausgewählt und in die Mediathek hochgeladen), perfekt.

Falls nicht: Ich habe in meinem Leitfaden zur kompletten Erstellung einer WordPress-Website einen Schritt, der sich in allen Details um das Thema Bilder in WordPress dreht. Der zweite Link öffnet sich in einem neuen Fenster/Tab. Lesen Sie dort alles Nötige nach und danach hier weiter. Auch hier geht es allerdings mit dem Schritt des Bilder-Hochladens los.

Schritt 1: Die Bilder in WordPress hochladen

Zunächst muss man die Bilder in WordPress hochladen. Dort sind sie dann über die Mediathek im WordPress-Dashboard zugänglich und können von dort aus ganz einfach überall auf der WordPress-Website eingesetzt werden. Diesen Schritt kann man bereits im Vorfeld erledigen, indem man im Dashboard direkt zu Medien und Mediendatei hinzufügen geht.

Man kann die Bilder aber auch erst dann hochladen, wenn man sie gerade braucht und einfügen will. Das hat einen zusätzlichen Effekt auf das Bild: Es ist dann als zum jeweils gerade bearbeiteten Artikel hochgeladen gekennzeichnet. Wenn man gerne solche Zuordnungen für seine Bilder hat, dann sollte man am besten direkt beim Editieren des Artikels auch die Bilder hochladen.

Schritt 2: Geeignete Meta-Informationen für Bilder setzen

Meta-Informationen bzw. Meta-Daten für Bilder in WordPress werden oft unterschätzt, allerdings zu Unrecht. Man kann und sollte für ein Bild natürlich zunächst einen vernünftigen Dateinamen wählen. Das sollte nur dann so etwas wie DSC002394.jpg sein, wenn man nicht möchte, dass Suchmaschinen verstehen, was das Bild darstellt.

Aber auch abgesehen vom Dateinamen kann man das Bild in WordPress mit einem Titel und anderen Informationen versehen. Die Beschriftung zum Beispiel wird verwendet, wenn ein Bild mit einer Unterschrift ausgestattet angezeigt werden soll. Hier nochmal das Titelbild dieses Beitrags, diesmal mit Bildunterschrift, als Beispiel. Am wichtigsten ist allerdings der Alternativtext: Er beschreibt das Bild für Menschen, die es nicht sehen können, und laut Google ist er auch für die Bildersuche das wichtigste Attribut eines Bildes.

Möchte man also bei den Bildern, wenn und wo sie dann nebeneinander dargestellt werden sollen, auch Bild-Unterschriften verwenden, so kann man die jeweiligen Unterschriften beim Hochladen gleich als Beschriftungen der Bilder eintragen. Alternativ kann man die Beschriftung und die anderen Meta-Daten der Bilder jederzeit in der Mediathek ändern.

Die unmittelbare Variante im WordPress Block-Editor

Der Block-Editor (früher auch Gutenberg genannt) ist seit Ende 2018 der Standard-Editor in WordPress. Der Wechsel vom bis-damals-Standard Classic Editor zum Block-Editor bringt vor allem beim Schreiben selbst einige Änderungen mit sich. Vor allem der neue Workflow mit den eingeführten Blocks ist anfangs gewöhnungsbedürftig, lässt sich aber rasch meistern.

Zwei der Blocks sind in unserer Situation besonders hilfreich: der Galerie-Block und der Spalten-Block. Die Galerie ist der schnellere Weg, die Spalten geben mehr Kontrolle über jedes einzelne Bild. Beides gab es vor dem Block-Editor nicht; nur durch die unten gelisteten Alternativen konnte man sich behelfen.

Der schnellste Weg: der Galerie-Block

Seit WordPress 5.9 besteht eine Galerie aus lauter einzelnen Bild-Blöcken, die nebeneinander angeordnet werden. Damit ist sie heute der schnellste Weg zu Bildern nebeneinander:

1. Klicken Sie links oben auf das Plus (den Block-Inserter) und suchen Sie nach Galerie. Schneller geht es, wenn Sie in einen leeren Absatz /galerie tippen und die Eingabetaste drücken.
2. Wählen Sie über Hochladen oder Mediathek die Bilder aus, die nebeneinander stehen sollen, und bestätigen Sie die Auswahl.
3. In der rechten Seitenleiste stellen Sie unter Einstellungen bei Spalten ein, wie viele Bilder in einer Reihe stehen sollen (bis zu acht).
4. Sollen die Bilder vollständig und nicht zugeschnitten erscheinen, schalten Sie Bilder zuschneiden und einpassen aus.

Was bei einem Klick auf ein Bild passiert, legen Sie in der Werkzeugleiste über dem Block mit Link fest, zum Beispiel Vergrößern bei Klick: Dann öffnet sich das Bild groß über der Seite.

Auf dem Smartphone (unter 600 Pixel Breite) zeigt die Galerie immer zwei Bilder pro Zeile. Bei drei Bildern rückt das dritte in die nächste Zeile und nimmt dort die ganze Breite ein.

Mehr Kontrolle: der Spalten-Block

Mit dem Spalten-Block bekommt jedes Bild seine eigene Spalte und seinen eigenen Bild-Block. Das lohnt sich, wenn die Bilder verschieden groß sein, eigene Bildunterschriften oder Links bekommen oder auf dem Smartphone untereinander stehen sollen.

1. Stelle wählen: Klicken Sie auf den Block, nach dem die Bilder stehen sollen. Ein neuer Block wird immer nach dem gerade ausgewählten eingefügt.
2. Spalten-Block einfügen: Über das Plus links oben (oder /spalten in einem leeren Absatz) fügen Sie den Block Spalten ein. WordPress fragt dann nach dem Aufbau („Wähle eine Variante, mit der du beginnen möchtest“): 50/50 für zwei gleich breite Bilder, 33/33/33 für drei.
3. Anzahl der Spalten anpassen: Ist der Spalten-Block ausgewählt, finden Sie in der rechten Seitenleiste unter Einstellungen den Regler Spalten, der bis zu sechs Spalten erlaubt. Den Spalten-Block selbst wählen Sie am einfachsten über die Dokumentenübersicht links oben (Reiter Listenansicht) aus.
4. In jede Spalte ein Bild setzen: Klicken Sie in der ersten Spalte auf das kleine Plus, wählen Sie den Block Bild und dann Hochladen, Mediathek oder Von URL einfügen. Sie können eine Bilddatei auch direkt vom Computer in die Spalte ziehen. Das Gleiche wiederholen Sie für jede weitere Spalte.
5. Bilder gleich hoch machen (optional): Sind die Bilder unterschiedlich geformt, wählen Sie für jeden Bild-Block in der Seitenleiste dasselbe Seitenverhältnis, etwa Klassisch – 3:2. Dann werden alle Bilder gleich zugeschnitten und stehen in einer Linie.
6. Klick-Verhalten festlegen (optional): Über Link in der Werkzeugleiste des Bild-Blocks wählen Sie Link zur Bilddatei, Link zur Anhangseite, Vergrößern bei Klick oder eine beliebige Adresse.

Und auf dem Smartphone? Unter 782 Pixel Bildschirmbreite stellt WordPress die Spalten standardmäßig untereinander. Sollen die Bilder auch dort nebeneinander bleiben, schalten Sie am Spalten-Block die Einstellung Auf Mobilgeräten stapeln aus. Dann werden sie auf dem Handy eben entsprechend kleiner. Bitte prüfen Sie das Ergebnis immer auch auf einem Smartphone.

Den Abstand zwischen den Bildern stellen Sie am Spalten- oder am Galerie-Block ein, nicht an den Bildern: im Reiter Stile unter Maße bei Block-Abstände. Ob Ihr Theme diese Einstellung anbietet, hängt allerdings vom Theme ab.

Bild und Text nebeneinander, oder beliebige Blöcke

Soll neben einem Bild Text stehen, ist der Block Medien und Text die richtige Wahl. Mit Medien rechts anzeigen wechseln Bild und Text die Seiten, und auch hier gibt es Auf Mobilgeräten stapeln. Ganz beliebige Blöcke, etwa ein Bild und eine Schaltfläche, stellt der Block Zeile nebeneinander.

Wollen Sie eigentlich auch Text über den Bildern einfügen? Dann habe ich gleich den Artikel für Sie, den Sie nach diesem als nächstes lesen müssen: So geht’s: In WordPress Text über ein Bild legen (oder über mehrere).

Hat Ihnen dieser Artikel bereits geholfen? Wenn ja, perfekt, dann freue ich mich über kurzes Feedback in den Kommentaren darüber, was genau der Knackpunkt war, das ist für mich sehr interessant zu wissen! Wenn nein, lesen Sie weiter.

Alternative Möglichkeiten ohne den WordPress Block-Editor

Ich kann aus eigener Erfahrung sagen, dass man sich aus vielen Gründen bei der Arbeit mit WordPress gegen den Block-Editor entscheiden kann. Wer weiterhin mit dem Classic Editor arbeitet (zum Beispiel über das offizielle Plugin Classic Editor), aber trotzdem mehrere Bilder auf der eigenen WordPress-Website nebeneinander haben möchte, hat noch ein paar Alternativen, die ich im Folgenden beschreibe.

Eine Galerie im Classic Editor

Auch im Classic Editor ist eine Galerie der einfachste Weg:

1. Klicken Sie über dem Textfeld auf Medien hinzufügen und links auf Galerie erstellen.
2. Haken Sie die Bilder an (oder laden Sie sie über Dateien hochladen hoch) und klicken Sie auf Neue Galerie erstellen.
3. Unter Galerie-Einstellungen stellen Sie Spalten auf die Anzahl der Bilder, Größe auf Mittel oder Groß und Link zu auf das, was bei einem Klick passieren soll. Dann Galerie einfügen.

Anders als Spalten bleibt diese klassische Galerie in der Grundeinstellung von WordPress auch auf dem Smartphone nebeneinander: Drei Bilder sind dort eben jeweils nur noch etwa 100 Pixel breit.

Einbinden einer einzeiligen Tabelle mit Bildern in den Spalten

Eine weitere Möglichkeit, mehrere Bilder in WordPress nebeneinander anzuordnen, die der Variante im Block-Editor sehr ähnlich ist, ist die Nutzung einer Tabelle mit einer Zeile und so vielen Spalten, wie man Bilder nebeneinander anordnen will.

Eine Tabelle kann man in WordPress vor der Einführung des Block-Editors (dort gibt es nämlich auch einen Tabellen-Block) direkt eigentlich nur als HTML schreiben. Davor werden die meisten dann aber doch zurückschrecken. Üblicherweise verwendet man bei der Arbeit mit dem Classic Editor ein WordPress-Plugin wie z.B. TablePress, um mit Tabellen zu arbeiten.

Wie man TablePress als Plugin installiert, aktiviert und somit zur weiteren Verwendung bereit macht, habe ich in meinem Artikel Tabellen in WordPress, einfach erklärt genau beschrieben.

Wenn TablePress installiert und aktiviert ist, erstellt man zunächst die Tabelle mit einer Zeile und der gewünschten Anzahl von Spalten über den Menüpunkt TablePress und Neue Tabelle im linken Seitenmenü des WordPress-Dashboards. Das könnte in etwa so aussehen:

Hier gibt man einen Namen für die Tabelle ein und stellt die Anzahl der Zeilen auf eins und die Anzahl der Spalten auf drei (oder die gewünschte Zahl von Bildern, die nebeneinander angeordnet werden sollen). Die Tabelle wird mit einem Klick auf den Button Tabelle hinzufügen erzeugt und man landet in der Bearbeitungsansicht für die Tabelle. Der relevante Ausschnitt ist:

Hier fügt man die Bilder der Reihe nach in die (in diesem Fall drei) Felder der Tabelle ein. Dazu benutzt man den Button Bild einfügen in der Werkzeugleiste des Tabellen-Editors.

Diesen Schritt wiederholt man noch so oft, bis alle Bilder angeordnet sind. Wenn man mit dem Editieren fertig ist, muss man die Änderungen speichern oder man kann sich auch noch eine Vorschau der Tabelle ansehen. Diese beiden Buttons, Vorschau und Änderungen speichern, findet man ganz unten in der Bearbeitungsansicht für die Tabelle.

Die Besprechung der gesamten Funktionalität von TablePress würde hier zu weit führen, ich widme diesem Thema aber in meinem Artikel Tabellen in WordPress, einfach erklärt die nötige Zeit und Aufmerksamkeit.

Ehrlich gesagt ist die Tabelle heute aber nur noch die zweitbeste Lösung: Eine Tabelle ist für Daten gedacht, Screenreader lesen sie auch als Tabelle vor, und auf schmalen Bildschirmen passt sie sich schlechter an. Die Galerie oben ist meistens die bessere Wahl.

War dieser Teil des Artikels die für Sie wesentliche Information? Wenn ja, perfekt, dann freue ich mich über kurzes Feedback in den Kommentaren darüber, was genau der springende Punkt war, das interessiert mich sehr! Wenn nein, lesen Sie weiter.

Benutzen eines WordPress-Pagebuilders

Ein WordPress-Pagebuilder ist im Prinzip so etwas wie ein Website-Baukasten für WordPress. Dabei bekommt man die Möglichkeit, über eine drag-and-drop-Benutzeroberfläche einzelne Elemente auf einer Seite (oder natürlich auch in einem Beitrag) relativ beliebig anzuordnen.

Ich sage deshalb relativ beliebig, weil man in HTML grundsätzlich in verschachtelten Zeilen und Spalten denkt. Aber solange das geplante Layout sich zumindest auf diese Weise ausdenken lässt, kann man es mit einem Pagebuilder auch realisieren.

Wenn jemand immer schon gerne mal mehr Gestaltungsfreiheiten in WordPress haben wollte, was das Layout betrifft, dann ist das hier beschriebene Problem vielleicht ein guter Anlass, mit einem Pagebuilder sein Glück zu versuchen. Wenn man das aber eigentlich für zu kompliziert und unnötig hält, dann rate ich davon ab.

Ich selbst benutze übrigens das Divi-Theme (auch hier auf WebsiteBerater.com), das ebenfalls einen Pagebuilder zur Verfügung stellt, den sogenannten Divi-Builder. Dieser ist zwar sehr mächtig und flexibel, kostet aber auch etwas Geld. Andererseits gibt es auch gratis Page-Builder als Alternativen.

In diese Richtung nenne ich einfach mal den Page Builder by SiteOrigin als Beispiel, aber man findet auch da mehrere Möglichkeiten. Wie man die Lösung für die nebeneinander anzuordnenden Bilder dann im jeweiligen Builder findet, würde hier zwar zu weit führen, ist aber garantiert intuitiv und einfach, wenn man sich mit einem Pagebuilder einmal vertraut gemacht hat.

Das Divi-Theme (oder der Divi-Builder als Plugin) ist übrigens eine gute Sache für Sie, wenn Sie gerne eine etwas peppigere/flexiblere Website hätten, aber mit keinem der unzähligen gratis-Themes richtig zufrieden sind. Schauen Sie sich in diesem Fall unbedingt meine Informationen zu Divi an!

Hat diese Information Ihnen etwas gebracht? Wenn ja, perfekt, dann freue ich mich über kurzes Feedback in den Kommentaren darüber, was Ihnen geholfen hat! Wenn nein, lesen Sie weiter.

Spezialfall: Zwei Bilder (oder auch mehrere) vorher zu einem zusammensetzen

Mit der Beschreibung all dieser Möglichkeiten sind wir auch schon fast am Ende dieses Artikels. Es gibt aber einen Spezialfall, nämlich den, dass die zwei, drei oder mehreren Bilder, die man auf der Website nebeneinander platzieren will, diese Position zueinander auf keinen Fall verändern dürfen.

Die Gegenfrage lautet hier sofort, warum die Bilder auf der Website ihre Anordnungen zueinander überhaupt verändern sollten oder dürfen. Die Antwort ist, dass bei responsivem Webdesign einzelne Elemente je nach Bildschirmgröße verschieden angeordnet werden, um eine optimale Darstellung jedes Elements zu gewährleisten.

Was also tun, wenn man das verhindern möchte? Eine Galerie oder ein Spalten-Block ohne Auf Mobilgeräten stapeln hält die Bilder zwar nebeneinander, Abstände und Zuschnitt ändern sich aber mit der Bildschirmbreite. Die einzig wirklich sichere Variante, die mir hier einfällt, ist, die Bilder bereits vor dem Hochladen in einem Grafikprogramm zu einem einzigen Bild zusammenzustückeln. Das Resultat wird dann als ein Bild exportiert, in dem man die nebeneinander anzuordnenden Bilder genau so nebeneinander sieht, wie sie dann auch auf der Website sein sollen.

Dann lädt man dieses Bild in WordPress hoch und platziert es einfach als ein Bild (das geht einfach und überall) genau dorthin, wo es hinsoll. Wird die Website dann auf verschiedenen Bildschirmgrößen angezeigt, wird das Bild zwar entsprechend der eingestellten Breite eventuell verkleinert, aber die darin enthaltenen Bilder sind immer exakt gleich nebeneinander angeordnet, wie sie sein sollen. Geben Sie so einem Bild einen Alternativtext, der alle enthaltenen Bilder beschreibt.

Apropos responsive Webdesign: Wenn Sie nicht sicher sind, ob Ihre Website responsiv ist oder wenn Sie bereits wissen, dass sie es nicht ist, dann interessiert Sie vielleicht auch mein Artikel Wie erreiche ich responsive Webdesign?

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich, z.B. welche der vorgestellten Methoden Sie ausgewählt haben, was Ihr Ziel war und ob alles nach Wunsch geklappt hat, ob mit Hilfe dieses Artikels oder ohne. Falls Ihnen der Artikel nicht geholfen hat, kommentieren Sie bitte unbedingt ein paar Zeilen zu Ihrem konkreten Problem. Ich werde versuchen, der Sache auf den Grund zu gehen.

Oder lassen Sie einfach unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Noch mehr Informationen zu Bildern in WordPress

Auf meinem Artikel Bilder in WordPress, einfach erklärt habe ich bereits hingewiesen. Dort finden Sie alles im Detail, was es zu Bildern in WordPress erstmal zu sagen gibt. Ein anderer interessanter Spezialfall ist die Frage, wie man in WordPress Text über einem Bild platzieren kann. Informationen dazu finden Sie in meinem Artikel So geht’s: In WordPress Text über ein Bild legen (oder über mehrere).