Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man WordPress-Fotos in Spalten und Zeilen anzeigt

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.

How to display WordPress photos in columns and rows

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.

Add a column block

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.

Choose column ratio and layout

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

Add image block to column

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.

Upload image to column block

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.

Select an image from media library

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.

Add more images to column block

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.

Add a gallery block in content editor

Als Nächstes müssen Sie Bilder hochladen oder aus der Mediathek auswählen.

Für dieses Lernprogramm wählen wir die Option „Medienbibliothek“.

Upload or select images from media library

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

Click the create a new gallery button

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

Insert your gallery

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.

Adjust column settings in the gallery

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.

Images in columns manually

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.

Add the Envira Gallery license key

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.

Add new gallery

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.

View images in your gallery

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.

Choose gallery layout and number of columns

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.

Publish your image gallery

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.

Add the Envira Gallery block

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.

Preview of gallery

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.

Add the Column Block in SeedProd

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

19 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

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

  3. Asad

    This was the complete beginner’s guide

    • WPBeginner Support

      Glad you think so :)

      Admin

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

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

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

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

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

  9. Cathrine

    My gallery still won’t post in multiple columns, any idea why that might be?

    • Vasilis

      That’s my problem also…
      Anybody there?

  10. Eileen

    Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.