Möchten Sie WordPress-Fotos in Spalten und Zeilen anzeigen?
Standardmäßig fügt WordPress Bilder in einer vertikalen Spalte übereinander ein. Wenn Sie jedoch mehrere Fotos zu einem Blogbeitrag hinzufügen, sieht dies nicht sehr sauber aus und erfordert ein langes Scrollen für Ihre Nutzer.
In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Fotos ganz einfach in Spalten und Zeilen anzeigen können.

Warum Sie WordPress-Fotos in Spalten und Zeilen benötigen
Wenn Sie einem WordPress-Blogbeitrag mehrere Bilder hinzufügen, werden diese standardmäßig direkt nebeneinander oder übereinander angezeigt.
Das sieht nicht sehr gut aus, und Ihre Nutzer müssen viel scrollen, um mehrere Bilder und Fotos zu sehen.
Sie können dieses Problem leicht lösen, indem Sie Fotos in Zeilen und Spalten in einem rasterbasierten Layout anzeigen. Auf diese Weise erscheinen die Bilder in einem kompakten Layout und verbessern die Nutzererfahrung auf Ihrer Website.
Wenn Sie eine Fotografie-Website haben, können Sie Ihr Portfolio auf eine ansprechendere Weise zeigen. Oder Sie können in einem Online-Shop mehr Produktbilder zeigen, indem Sie sie in Reihen und Spalten anordnen.
Schauen wir uns nun an, wie Sie WordPress-Fotos in Spalten und Zeilen manuell oder mit einem WordPress-Plugin anzeigen können. Klicken Sie einfach auf die Links unten, um zum gewünschten Abschnitt zu springen.
1. Fotos in Spalten und Zeilen ohne Plugins anzeigen
Bei dieser Methode ist es nicht erforderlich, ein Plugin auf Ihrer WordPress-Website zu installieren. Wenn Sie nicht allzu oft mehrere Fotos hinzufügen, ist diese Methode genau richtig für Sie.
Sie können Bilder manuell zu einem Spaltenblock hinzufügen oder den Standard-Galerieblock in WordPress verwenden.
Hinzufügen von Bildern zu einem Spaltenblock
Zunächst müssen Sie einen neuen Beitrag erstellen oder einen bestehenden Beitrag bearbeiten, in dem Sie Ihre Fotos anzeigen möchten. Sobald Sie sich im Inhaltseditor befinden, klicken Sie auf die Schaltfläche „+“, um einen Spaltenblock hinzuzufügen.

Als Nächstes können Sie die Anzahl der gewünschten Spalten und das Layout auswählen.
Sie können zum Beispiel ein 50/50-Verhältnis, ein 33/66-Verhältnis, ein 25/50/25-Verhältnis und mehr wählen.

Danach können Sie zu jeder Spalte einen Bildblock hinzufügen.
Klicken Sie einfach auf die Schaltfläche „+“ und wählen Sie den Block „Bild“.

Als nächstes müssen Sie dem Block ein Bild hinzufügen.
Sie können auf die Schaltfläche „Hochladen“ klicken, um ein Bild von Ihrem Computer hinzuzufügen, oder die Option „Medienbibliothek“ wählen, um ein vorhandenes Bild zu verwenden.

Sobald sich die Mediathek öffnet, wählen Sie einfach das gewünschte Bild aus und klicken auf die Schaltfläche „Auswählen“.
Eine der besten Praktiken zur Bildoptimierung besteht darin, einen Alt-Text zu Ihrem Bild hinzuzufügen. Dadurch können Suchmaschinen-Bots Ihr Bild verstehen und es in den Suchergebnissen anzeigen.

Sie sollten nun Ihr Bild in einem der Spaltenblöcke sehen.
Nun können Sie das Gleiche für andere Blöcke in der Spalte tun und weitere Bilder hinzufügen.

Hinzufügen von Bildern in einem Galerieblock
WordPress bietet auch einen Standard-Galerie-Block, mit dem Sie Bilder in Spalten und Zeilen anzeigen können.
Um zu beginnen, klicken Sie auf die Schaltfläche „+“ und fügen Sie im Inhaltseditor einen Galerie-Block hinzu.

Als Nächstes müssen Sie Bilder hochladen oder aus der Mediathek auswählen.
Für dieses Lernprogramm wählen wir die Option „Medienbibliothek“.

Wählen Sie einfach die Bilder aus, die Sie zu Ihrer Galerie hinzufügen möchten, und zeigen Sie sie in Zeilen und Spalten an.
Sobald Sie die Bilder ausgewählt haben, klicken Sie auf die Schaltfläche „Eine neue Galerie erstellen“.

Als Nächstes werden Sie von WordPress aufgefordert, Bildunterschriften für jedes Bild einzugeben und die Reihenfolge der Bilder neu zu ordnen.
Klicken Sie dann einfach auf die Schaltfläche „Galerie einfügen“.

Sie sollten nun Ihre Bilder im Galerieblock sehen.
Sie können die Anzahl der Zeilen anpassen, indem Sie auf den Schieberegler im Einstellungsbereich auf der rechten Seite klicken.

Wenn Sie fertig sind, veröffentlichen Sie einfach Ihren Beitrag, um die Bilder in Spalten und Zeilen anzuzeigen.
Besuchen Sie einfach Ihre Website, um sie in Aktion zu sehen.

Diese Methode ist für die meisten Anfänger geeignet. Wenn Sie jedoch einen Fotografie-Blog betreiben oder häufig Fotos auf Ihrer Website veröffentlichen, fehlen bei dieser Methode einige wichtige Funktionen.
Zum Beispiel hängt das Aussehen von Fotos von Ihrem WordPress-Theme ab, und Sie sind auf ein bestimmtes Layout und einen bestimmten Stil beschränkt.
Ihre Bilder werden nicht in einem Leuchtkasten-Popup geöffnet und die Nutzer müssen sie als neue Seite laden und dann auf die Schaltfläche „Zurück“ klicken, um zur ursprünglichen Seite zurückzukehren.
Für eine professionellere und schönere Benutzererfahrung sollten Sie die Plugin-Methode ausprobieren.
2. Anzeige von Fotos in Spalten und Zeilen mit einem Plugin
Das beste Plugin zum Hinzufügen von Fotos in Spalten und Zeilen ist Envira Gallery. Es ist das beliebteste WordPress-Galerie-Plugin, das super einfach zu bedienen ist und viele Funktionen bietet.
Zunächst müssen Sie das Envira Gallery Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Envira Gallery “ Einstellungen besuchen, um Ihren Lizenzschlüssel einzugeben. Sie können diesen Schlüssel über Ihr Konto auf der Envira Gallery-Website abrufen.

Jetzt sind Sie bereit, schöne Bildergalerien zu erstellen.
Gehen Sie einfach im WordPress-Dashboard auf Envira Gallery “ Add New, um Ihre erste Galerie zu erstellen.

Zunächst müssen Sie oben einen Namen für Ihre Galerie eingeben. Von hier aus können Sie Dateien von Ihrem Computer auswählen und hochladen oder aus der WordPress-Medienbibliothek auswählen.
Nachdem Sie Ihre Fotos hochgeladen haben, werden sie in den Galerieeinstellungen unten angezeigt.

Als Nächstes müssen Sie auf die Registerkarte „Konfiguration“ klicken, um festzulegen, wie Sie Ihre Fotos anzeigen möchten.
In Envira Gallery können Sie verschiedene Galerie-Layouts wählen. Um Bilder in Zeilen und Spalten anzuzeigen, können Sie die Layouts Raster, Maurer und Quadrat auswählen.

Nachdem Sie das Layout ausgewählt haben, können Sie auf das Dropdown-Menü „Anzahl der Galeriespalten“ klicken und auswählen, wie viele Spalten Sie anzeigen möchten.
Wenn Sie nach unten scrollen, sehen Sie weitere Optionen zum Anpassen Ihrer Galerie. Zum Beispiel gibt es Einstellungen, um die Abmessungen und Größe Ihrer Galerie zu bearbeiten.

Danach können Sie auf die Schaltfläche „Veröffentlichen“ klicken, um Ihre Fotogalerie in Ihre WordPress-Website einzubinden.
Nun müssen Sie einen Beitrag bearbeiten oder einen neuen Beitrag erstellen. Sobald Sie im Inhaltseditor sind, klicken Sie einfach auf die Schaltfläche „+“, um den Block „Envira Gallery“ hinzuzufügen.

Von hier aus können Sie auf das Dropdown-Menü klicken und die zuvor erstellte Galerie auswählen.
Sie können Ihren Beitrag jetzt speichern und in einer Vorschau anzeigen, um Ihre Fotos in Spalten und Reihen in einer schönen, auf Mobilgeräte reagierenden Fotogalerie zu sehen.

Wenn Ihre Nutzer jetzt auf ein Miniaturbild klicken, öffnet es sich in einem schönen Popup-Fenster. Sie können auch Bilder durchsuchen, ohne die Seite zu verlassen.
Bonus: Erstellen Sie ein benutzerdefiniertes Design mit Bildspalten und -zeilen
Sie können auch benutzerdefinierte WordPress-Themen erstellen, die einen Platzhalter für das Hinzufügen von Bildern in Spalten und Zeilen haben.
Der beste Weg, ein benutzerdefiniertes Thema zu erstellen, ist die Verwendung von SeedProd. Es ist der beste Drag-and-Drop-Website-Builder, der vorgefertigte Designs und viele Anpassungsoptionen bietet.
Sie können mit SeedProd einen Spaltenblock zu Ihren Landing Page Designs hinzufügen und Bilder in Zeilen und Spalten einfügen. SeedProd verfügt sogar über einen integrierten Galerie-Block, den Sie dafür verwenden können.

Weitere Informationen finden Sie in unserem Leitfaden zur Erstellung eines benutzerdefinierten WordPress-Themes ohne Code.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie WordPress-Fotos in Spalten und Zeilen anzeigen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Behebung häufiger Bildprobleme in WordPress und die beste Design-Software für kleine Unternehmen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Muhammad Hammad
I believe custom theme creation is time taking and the EnviraGallery plugin is a more favorable option.
However, I am wondering if you can create custom layouts within the EnviraGallery plugin or just select from the pre-installed gallery templates?
WPBeginner Support
Envira Gallery does not have a custom placement of images if that is what you are wanting from the plugin but there are many different gallery options that would scale to the user’s browser.
Admin
Asad
This was the complete beginner’s guide
WPBeginner Support
Glad you think so
Admin
Chris Thom
Using the default gallery is there a way to control the margin/padding between images?
WPBeginner Support
You would need to manually modify the CSS for your content.
Admin
Chris Thom
Good information but on the stock WP galley how can I adjust the padding between images? Right now they’re butted right up against each other.
WPBeginner Support
You would need some knowledge of CSS, for a better understanding, we would recommend taking a look at our article below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
gedi
problem is u can’t put url behind image – wp won’t give option – can’t be edited execpt in html which is drawn out… good though if you dont want someone to cliick thru
WPBeginner Support
At the moment WordPress does not have the option to add individual links by default to the gallery which is why we show Envira Gallery which does have that option
Admin
Agnieszka
Hi!
I tried to set up a gallery and even though I set the number of columns when I eventually update and preview my page all images show in just 1 column..no matter what I do!!
I tried to change the layout and number of columns but every time it is just 1 column and I have no idea how to fix it. Could you please help?
Shannon Ball
I would like to have a grid of images so that when a reader clicks on an image it takes them to an external url with more info. (like a grid of ads/sponsors) at the bottom of a post…
Any suggestions?
Isaiah Hammons
I want the same exact thing you’re talking about..
sean sewell
I am desperately after the same thing! If you ever find out please let me know!
Michelle
Just curious… I am sure you have already tried this, but on the media tab inside of wordpress have you clicked on the photo and under the information there is a spot to put a URL so someone can click on it. I know it is kind of hidden and not that intuitive, but that might work for you.
Cathrine
My gallery still won’t post in multiple columns, any idea why that might be?
Vasilis
That’s my problem also…
Anybody there?
Eileen
Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.