Bilder sollen auf einer Website oft nebeneinander gesetzt werden. WordPress hatte dafür lange Zeit kein echtes Standard-Werkzeug parat, doch seit Version 5.0 gibt es eine einfache Lösung auf die Frage:

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

Zwei oder mehrere Bilder können in WordPress im Gutenberg-Editor durch einfügen eines Spalten-Blocks mit der gewünschten Anzahl von Spalten nebeneinander angeordnet werden. Die Bilder werden mittels Bild-Blocks in die einzelnen Spalten gesetzt. Ohne Gutenberg kann man auf Tabellen, Pagebuilder oder Galerien zurückgreifen.

So geht‘s: In WordPress 2 oder mehrere Bilder nebeneinander anordnen

Wer noch nicht mit Gutenberg gearbeitet hat, für den zeige ich im Folgenden alle Schritte im Detail mit Screenshots. Für alle die nicht mit Gutenberg arbeiten wollen, beschreibe ich auch die Alternativen im Detail

Vorbereitende Schritte: Die Bilder in WordPress vorbereiten

Ich könnte hier grundsätzlich davon ausgehen, dass die Bilder, die nebeneinander angeordnet werden sollen, bereits vorhanden sind und jeder weiß, wie man mit Bildern in WordPress umgeht, aber sicher ist sicher und besser ist besser.

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. Wer sich nicht sicher ist, wie Bilder in WordPress eigentlich genau funktionieren oder einfach mehr erfahren will, sollte sich diesen Artikel auf jeden Fall auch durchlesen.

Schritt 1: Die Bilder in WordPress hochladen

Zunächst muss man die Bilder in WordPress hochladen. Dort sind sie dann über die Medienübersicht 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 Datei 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.

So geht‘s: In WordPress 2 oder mehrere Bilder nebeneinander anordnen

So geht‘s: In WordPress 2 oder mehrere Bilder nebeneinander anordnen

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.

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 Medienübersicht ändern.

Die unmittelbare Variante in WordPress Gutenberg

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

Einer der Blocks ist in unserer Situation besonders hilfreich, nämlich der Spalten-Block. Die Funktionalität, Spalten beim Schreiben eines Beitrags in WordPress einfach so einzubinden, gab es bis zu Gutenberg nicht. Nur durch die unten gelisteten Alternativen konnte man sich dahingehend behelfen. Dazu aber weiter unten mehr. Jetzt gehen wir die einzelnen Schritte in Gutenberg durch.

Schritt 1: Navigieren zu jener Stelle, an der die Bilder (nebeneinander) eingefügt werden sollen

Zunächst navigiert man zu jener Stelle im Text, an der man die Bilder nebeneinander einfügen möchte. Wenn man sie einfach an das Geschriebene unten anhängen will, ist die Situation am einfachsten und man klickt auf den Block-hinzufügen Button, markiert durch das Plus links oben in der Ecke des Arbeitsbereichs.

Einen neuen Block im WordPress-Editor Gutenberg hinzufügen

Ansonsten hat man an jedem Block in der Mitte des unteren Randes ebenfalls ein kleines Plus, das sich zeigt, wenn man sich mit dem Mauszeiger über der Grenze zwischen zwei Blöcken befindet. Durch Klicken dieses kleinen Plus wird der neue Block an genau dieser Grenze zwischen den bereits vorhandenen Blöcken eingefügt.

Schritt 2: Einen neuen Spalten-Block einfügen

Beim Einfügen des neuen Blocks erscheint nach dem Klick auf eins der Plus-Symbole das Auswahlmenü für neue Blöcke.

Die Gruppe Meistgenutzt von Blöcken im WordPress Editor Gutenberg

Dort sucht man nach dem Block Spalten. Dieser befindet sich eventuell bei den meistgenutzten Blöcken, so wie hier im Screenshot, oder man findet ihn in den Blockgruppen Formatierung oder Layout-Elemente. Ein Klick auf das Symbol Spalten fügt den Spalten-Block an der jeweiligen Stelle ein. Das sieht zunächst so aus:

Ein neuer Spalten-Block in WordPress Gutenberg ohne den eingeblendeten Rand

und wenn man mit dem Mauszeiger am linken Rand des Blocks bleibt, erscheint die gepunktete kleine Fläche, mit der man den Block verschieben kann. Zugleich erscheint am rechten oberen Eck des Blocks der Typ als Einblendung:

Ein neuer Spalten-Block in WordPress Gutenberg mit dem eingeblendeten Rand

Schritt 3: Die Anzahl der Spalten wie gewünscht anpassen

Als nächstes sollte man direkt die Anzahl der Spalten wie gewünscht einstellen (im frisch eingefügten Spalten-Block sind es zwei). Dazu klickt man auf den kleinen gepunkteten Bereich am linken Rand des Blockes und dadurch wird der Block aktiviert.

In der rechten Spalte sind daraufhin die Optionen und Einstellungen für den aktivierten Block zugänglich:

Die Eigenschaften eines Spalten-Blocks in WordPress Gutenberg: Anzahl der Spalten einstellen

Sollte von den beiden im Screenshot sichtbaren Registerkarten Dokument und Block zunächst noch Dokument aktiv (d.h. unterstrichen) sein, dann klickt man zunächst auf Block. Dann erscheint die Ansicht, so wie der Screenshot sie zeigt.

Der Spaltenblock hat als solcher nur eine wesentliche Einstellung, und das ist die Anzahl der Spalten. Am Anfang steht sie auf 2, kann aber ganz einfach durch den Schieberegler erhöht werden. Der Schieberegler erlaubt allerdings nur eine Erhöhung der Anzahl auf bis zu 6 Spalten.

Auch die kleinen Pfeilchen, die neben der Anzahl der Spalten eingeblendet werden, wenn man mit dem Mauszeiger über das kleine Anzeigefenster geht, können die Anzahl der Spalten nicht über 6 erhöhen. Um eine höhere Anzahl zu erreichen, muss man die gewünschte Anzahl der Spalten direkt eintippen und bestätigen.

Man sollte jedoch bedenken, was an Spalten mit Inhalt sinnvollerweise dargestellt werden kann bzw. ausprobieren, wie das viel-spaltige Design-Element dann auf der Website tatsächlich aussieht. Bitte vergessen Sie in solchen Fällen nicht, auch auf mobilen Geräten zu überprüfen, ob die mehrspaltige Variante auch tatsächlich den von Ihnen gewünschten Effekt hat.

Schritt 4: In der ersten Spalte einen neuen Bild-Block einfügen und dort Bild 1 platzieren

Als nächsten Schritt muss man in der ersten Spalte einen neuen Bild-Block einfügen. Um das zu tun, geht man mit dem Mauszeiger über die erste Spalte. Dadurch erscheint, wie hier im Screenshot gezeigt, ein kleines Plus.

Ein neuer Block soll in eine der Spalten eines vorhandenen Spalten-Blocks in WordPress Gutenberg eingefügt werden

Durch einen Klick auf das Plus öffnet sich das Auswahl-Menü für einen neuen Block. In diesem Beispiel habe ich tatsächlich 6 Spalten im Spalten-Block eingestellt. Man sieht hier bereits, dass dies etwas unübersichtlich werden kann.

Hier wählt man den Block vom Typ Bild aus. Der befindet sich entweder in der Gruppe der Meistgenutzten Blöcke, oder man findet ihn in der Gruppe Allgemeine Blöcke. Nach der Auswahl des Bild-Blocks durch einen Klick auf das Bild-Symbol wird der Block eingefügt und fordert den Benutzer auf, ein Bild hochzuladen, aus der Medienübersicht einzufügen oder von einer URL einzufügen.

Ein Bild-Block ist gerade in eine Spalte eines Spalten-Blocks in WordPress-Gutenberg eingefügt worden

Im hier gezeigten Screenshot habe ich zunächst die Anzahl der Spalten wieder auf 3 reduziert, um die Darstellung zu verbessern. Je mehr Spalten vorhanden sind, desto schmäler wird auch die Darstellung der eingefügten Blöcke. Dadurch kann bereits die Anleitung zum weiteren Arbeiten mit dem eingefügten Block ziemlich unleserlich werden.

Das Bild kann nun ganz bequem aus der Medienübersicht eingefügt werden, wenn man es bereits vorbereitet hat, so wie oben beschrieben. Alternativ kann man es direkt an dieser Stelle hochladen.

Schritt 5: In der zweiten Spalte einen neuen Bild-Block einfügen und dort Bild 2 platzieren

Danach wiederholt man Schritt 4 für die zweite Spalte. Zunächst geht man also mit dem Mauszeiger über die zweite Spalte, klickt auf das kleine Plus und wählt dann einen Bild-Block zum Einfügen in der zweiten Spalte aus. Dadurch ergibt sich folgende Ansicht

In WordPress Gutenberg sind in einem Spalten-Block zwei Bilder nebeneinander angeordnet

wobei in der ersten Spalte anstatt des Bild-Platzhalters mit den Hochlade-Varianten bereits jenes Bild zu sehen sein sollte, das man in Schritt 4 dort platziert hat. Dann lädt man auch das zweite Bild hoch, fügt es aus der Medienübersicht ein, oder zieht es direkt in den Hochladebereich, der dafür eingeblendet ist.

Alternativ kann man auch beide Bild-Blöcke so vorbereiten, wie sie hier im Screenshot gezeigt sind und dann erst die Bilder selbst einfügen.

Schritt 6: Schritt 5 für die restlichen Spalten wiederholen, bis alle Bilder platziert sind

Wenn man mehr als nur zwei Bilder nebeneinander anordnen möchte, muss man Schritt 4 noch so lange bzw. so oft wieder holen, bis alle Spalten des Spalten-Blocks mit Bild-Blocks und danach auch den vorgesehenen Bildern gefüllt sind. Bei einer Gesamtzahl von drei Spalten bzw. drei Bildern nebeneinander sieht das so aus:

In WordPress Gutenberg sind in einem Spalten-Block drei Bilder nebeneinander angeordnet

und ist am Ende mit den gewünschten drei Bildern gefüllt.

Schritt 7 (optional): Die Dimensionen der Bilder anpassen, falls nötig

Der nächste Schritt ist optional, weil er nicht immer nötig sein wird. Wenn man die Bilder von der Größe in Pixel her bereits so vorbereitet hat, wie sie gut zusammenpassen bzw. wie sie nebeneinander erscheinen sollen, dann braucht man an dieser Stelle nichts weiter zu tun.

Wenn allerdings etwas mit der Größe eines Bildes nicht gut ins Nebeneinander passt, dann kann man die Größe der einzelnen Bilder noch einstellen, indem man z.B. direkt nach dem Einfügen des Bildes an den eingeblendeten Punkten zieht, die im Screenshot gut zu sehen sind:

Ein Bild wurde in einem Bild-Block in WordPress Gutenberg eingefügt und kann mit Hilfe der Punkte in Höhe oder Breite angepasst werden

Alternativ kann man auch den zu verändernden Bild-Block markieren, indem man auf das Bild klickt, und dann bei den Einstellungen für den Block, die rechts eingeblendet werden, die Abmessungen verändern:

Die Einstellungen für einen aktiven Bild-Block in WordPress Gutenberg: Bildgröße

Schritt 8 (optional): Was sollen die Bilder machen, wenn man darauf klickt?

Eine andere Möglichkeit, die Bilder in WordPress grundsätzlich haben, ist, sie mit einem Link zu versehen. Dorthin wird man dann auf der Website weitergeleitet, wenn man auf das Bild klickt. Auch diese Einstellungsmöglichkeit befindet sich im Einstellungsbereich rechts für einen aktiven Bild-Block, und zwar fast ganz unten:

Die Einstellungen für einen aktiven Bild-Block in WordPress Gutenberg: Link

Hier kann man über ein Dropdown-Menü auswählen, ob ein Link gesetzt werden soll oder nicht, und wenn ja, worauf.

Damit ist die Anordnung mehrerer Bilder nebeneinander in WordPress Gutenberg abgeschlossen.

Alternative Möglichkeiten ohne WordPress Gutenberg

Ich kann aus eigener Erfahrung sagen, dass man sich aus vielen Gründen bei der Arbeit mit WordPress gegen Gutenberg als Editor entscheiden kann. Wenn man diesen Editor nicht aktivieren will, aber trotzdem mehrere Bilder auf der eigenen WordPress-Website nebeneinander haben möchte, dann gibt es noch ein paar Alternativen, die ich im Folgenden beschreibe.

Einbinden einer einzeiligen Tabelle mit Bildern in den Spalten

Eine Möglichkeit, mehrere Bilder in WordPress nebeneinander anzuordnen, die der Variante in Gutenberg 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 Gutenberg (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.

Eine neue Tabelle im WordPress-Dashboard mit TablePress erstellen

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:

Eine neue Tabelle in WordPress mit Tablepress anlegen: Die Tabelle hat eine Zeile und drei Spalten

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 Add Table erzeugt und man landet in der Bearbeitungsansicht für die Tabelle. Der relevante Ausschnitt ist:

Ein Bild in WordPress in eine Zelle einer von TablePress erzeugten Tabelle einfügen

Hier fügt man die Bilder der Reihe nach in die (in diesem Fall drei) Felder der Tabelle ein. Dazu benutzt man den Button Insert Image, wie er hier im Screenshot zu sehen ist.

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, Preview und Save changes, 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.

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 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.

Nutzen einer WordPress-Bildergalerie

Eine Variante möchte ich noch erwähnen, die zwar funktioniert, aber vermutlich nicht das gewünschte Ergebnis hat: Die Verwendung einer Bildergalerie in WordPress. Das Hauptproblem dabei ist nämlich, dass in der Galerie die Bilder zwar nebeneinander angezeigt werden, aber meistens eine nicht-originale Größe der Bilder als Vorschau angezeigt wird.

Die Bildergalerie zeigt zunächst Vorschaubilder an, die dann meistens beim Klick darauf in einer größeren Ansicht geöffnet werden. Das ist hier eindeutig nicht Ziel dieses Artikels und deshalb möchte ich mich auch gar nicht länger damit aufhalten. Die bereits beschriebenen Möglichkeiten sind diesem Workaround eindeutig überlegen.

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? 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.

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? Ich wünsche viel Vergnügen!

Pin It on Pinterest