So setzen Sie Bilder in WordPress ganz einfach nebeneinander

Als wir mit dem Bloggen anfingen, war es oft frustrierender als lustig, Bilder nebeneinander auszurichten.

Aber wir haben schnell erkannt, dass das Nebeneinanderstellen von Bildern nicht nur dazu dient, gut auszusehen – es hilft den Lesern tatsächlich, den Inhalt besser zu verstehen und zu genießen.

Im Laufe der Zeit haben wir einige einfache Techniken entwickelt, um diesen Prozess zu vereinfachen, und das Platzieren von Bildern nebeneinander ist zu einer unserer bevorzugten Methoden zum Erstellen schöner Fotogalerien geworden.

In diesem Tutorial führen wir Sie durch zwei einfache Methoden, um Bilder nebeneinander anzuzeigen – eine mit dem integrierten WordPress-Block-Editor und die andere mit dem Envira Gallery-Plugin.

Am Ende können Sie Ihr Inhaltslayout verbessern und ein ansprechenderes Erlebnis für Ihre Besucher schaffen.

Warum Bilder nebeneinander in WordPress hinzufügen?

Das nebeneinander Platzieren von Bildern kann die visuelle Attraktivität Ihrer WordPress-Website verbessern, indem ein interessanteres Layout erstellt wird.

Nebeneinander liegende Bilder können auch dazu beitragen, Ihren Website-Speicherplatz effizient zu nutzen, sodass Sie mehr Bilder in einem begrenzten Bereich unterbringen können.

Zum Beispiel, wenn Sie eine Fotografie-Website haben, hilft Ihnen die nebeneinanderliegende Anordnung von Bildern, Ihre WordPress-Seite optimal zu nutzen, indem Sie Bilder ästhetisch ansprechend darstellen.

Zusätzlich möchten Sie manchmal, dass Benutzer zwei Bilder auf Ihrem WordPress-Blog vergleichen. Wenn Sie sie nebeneinander platzieren, können die Leute die Unterschiede zwischen den Bildern leichter analysieren und verstehen.

Dennoch zeigen wir Ihnen zwei einfache Möglichkeiten, Bilder nebeneinander zu platzieren. Die beste Methode hängt davon ab, was Sie benötigen.

Für die meisten einfachen Fälle funktioniert der integrierte WordPress-Block-Editor perfekt. Wenn Sie fortgeschrittenere Fotogalerien mit zusätzlichen Funktionen erstellen möchten, ist die Verwendung eines Plugins die bessere Wahl.

Sie können die unten stehenden Links verwenden, um zur bevorzugten Methode zu springen:

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Bonus: Bilder in WordPress ausrichten
• Häufig gestellte Fragen zum Hinzufügen von Bildern nebeneinander

Methode 1: Bilder nebeneinander in WordPress mit dem Block-Editor hinzufügen

Wenn Sie nach einer einfachen Möglichkeit suchen, Bilder nebeneinander mit dem Gutenberg-Block-Editor hinzuzufügen, dann ist diese Methode genau das Richtige für Sie.

Der Block-Editor bietet eine Galerie-Block-Funktionalität, mit der Sie Bilder einfach in Zeilen und Spalten anzeigen können.

Schritt 1: Fügen Sie den Galerie-Block hinzu

Zuerst müssen Sie einen neuen Beitrag/eine neue Seite erstellen oder einen vorhandenen bearbeiten, um den Inhaltseditor zu öffnen. Dort angekommen klicken Sie auf die Schaltfläche 'Block hinzufügen' (+) in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen.

Suchen und fügen Sie von hier aus einfach den Galerie-Block zur Seite oder zum Beitrag hinzu.

Schritt 2: Laden Sie Ihre Bilder hoch

Danach können Sie ganz einfach Bilder von Ihrem Computer zu Ihrem Galerie-Block hinzufügen, indem Sie auf die Schaltfläche „Hochladen“ klicken.

Sie können auch Bilder aus Ihrer WordPress Mediathek auswählen, indem Sie auf die Schaltfläche „Mediathek“ klicken.

Wie Sie sehen, haben wir 2 Bilder zu unserem Galerie-Block hinzugefügt, und WordPress hat sie automatisch nebeneinander positioniert.

Wenn Sie ein drittes Bild hinzufügen möchten, müssen Sie auf die Schaltfläche „Hinzufügen“ in der Block-Symbolleiste oben klicken.

Dies öffnet die Mediathek, von der aus Sie ein drittes Bild zu Ihrem Galerieblock hinzufügen können. Sobald Sie dies getan haben, werden Sie feststellen, dass WordPress die Bilder einfach neu skaliert hat, um sie automatisch nebeneinander zu platzieren.

Schritt 3: Passen Sie die Spalten der Galerie an

Wenn Sie sich jedoch entscheiden, ein viertes Bild in den Galerie-Block einzufügen, wird es unter den anderen Bildern platziert.

Um dies zu beheben, können Sie die Anzahl der Spalten für Ihre Galerie ändern. Diese Einstellung bestimmt, wie viele Bilder in jeder Zeile nebeneinander angezeigt werden.

Wenn Sie beispielsweise zwei Bilder nebeneinander und zwei weitere darunter haben möchten, können Sie die Spalten auf 2 einstellen.

Sie können Bilder auch zuschneiden, damit sie ausgerichtet sind, Bildgrößen anpassen, sie mit verschiedenen Seiten verknüpfen und die Hintergrundfarbe im Block-Panel ändern.

Detaillierte Anweisungen finden Sie in unserem Leitfaden für Anfänger zur Erstellung einer Bildergalerie in WordPress.

Schritt 4: Veröffentlichen Sie Ihre Änderungen

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.

Besuchen Sie nun einfach Ihre Website, um die Bilder nebeneinander anzuzeigen.

Methode 2: Bilder in WordPress mit einem Plugin nebeneinander stellen (einfache Methode)

Während der integrierte Galerie-Block perfekt für einfache Layouts ist, benötigen Sie ein Plugin, wenn Sie fortgeschrittenere Fotogalerien mit Funktionen wie schönen Lightboxen, Alben und Social-Sharing-Optionen erstellen möchten.

Dafür empfehlen wir Envira Gallery. Es ist das beste WordPress-Galerie-Plugin auf dem Markt, und unserer Erfahrung nach ist es unglaublich einfach zu bedienen und bietet gleichzeitig leistungsstarke Funktionen.

Weitere Details zu seinen Funktionen finden Sie in unserem Envira Gallery-Testbericht.

Schritt 1: Envira Gallery installieren und aktivieren

Zuerst müssen Sie das Envira Gallery Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Schritt 2: Eine neue Galerie erstellen und Bilder hochladen

Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu Envira Gallery » Neu hinzufügen.

Dort angekommen müssen Sie Ihrer neuen Galerie einen Titel geben. Wir haben unsere 'Beispielgalerie' genannt.

Laden Sie anschließend die Bilder, die Sie verwenden möchten, vom Computer hoch, indem Sie auf die Schaltfläche „Dateien von Ihrem Computer auswählen“ klicken.

Um Bilder aus der Mediathek hochzuladen, klicken Sie auf die Schaltfläche „Dateien aus anderen Quellen auswählen“.

Schritt 3: Metadaten von Bildern bearbeiten (optional)

Nachdem Sie die Bilder hochgeladen haben, scrollen Sie nach unten zum Abschnitt Galerie, um sie anzuzeigen.

Hier können Sie Ihren Bildern einen Titel und Alternativtext geben.

Der Titel wird angezeigt, wenn ein Benutzer mit der Maus über das Bild fährt, und auch unter dem Bild in der Lightbox, der Vollbild-Pop-up-Ansicht.

Um den Titel und Alt-Text zu bearbeiten, klicken Sie auf die Schaltfläche 'Bearbeiten' bei einem Bild in der Galerie.

Sie können dann den Titel Ihres Bildes ändern und Alternativtext eingeben, was für die SEO Ihrer WordPress-Website hilfreich ist.

Wenn Ihr Titel das Bild beschreibt, können Sie ihn einfach für den Alternativtext wiederholen.

Wenn Sie fertig sind, stellen Sie bitte sicher, dass Sie auf die Schaltfläche „Metadaten speichern“ klicken, bevor Sie das Fenster schließen.

Wenn Sie dies nicht tun, werden alle von Ihnen vorgenommenen Änderungen nicht in der Galerie gespeichert.

Schritt 4: Ihre Galerie veröffentlichen

Scrollen Sie schließlich zurück zum Anfang der Seite und klicken Sie auf die Schaltfläche „Veröffentlichen“, um die gerade erstellte Bildergalerie zu speichern.

Danach gehen Sie zu der WordPress-Seite oder dem Beitrag, zu dem Sie sie hinzufügen möchten.

Schritt 5: Den Envira Gallery-Block zu einem Beitrag oder einer Seite hinzufügen

Sobald Sie dort sind, klicken Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen.

Suchen Sie von hier aus den Envira Gallery-Block und fügen Sie ihn zur Seite/zum Beitrag hinzu.

Als Nächstes müssen Sie die Galerie, die Sie erstellt haben, aus dem Dropdown-Menü im Block selbst auswählen.

Schritt 6: Layout konfigurieren und veröffentlichen

Um die Bilder in der Galerie nebeneinander anzuzeigen, gehen Sie zum Blockbereich in der rechten Ecke des Bildschirms.

Scrollen Sie von hier aus nach unten zum Abschnitt „Layout auswählen“ und wählen Sie die Anzahl der Spalten aus dem Dropdown-Menü. Ihre Bilder werden nun nebeneinander auf der WordPress-Seite angezeigt.

Sie können auch die Ränder der Galerie ändern, einen schönen animierten Filtereffekt (bekannt als Isotope) aktivieren und die Lightbox-Einstellungen im Block-Panel konfigurieren.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche 'Veröffentlichen' oder 'Aktualisieren' zu klicken, um Ihre Einstellungen zu speichern.

Jetzt können Sie Ihre Website besuchen, um die nebeneinander angezeigten Bilder zu sehen.

Der Benutzer kann nun auf ein beliebiges Bild klicken, um die Vollbildversion in einem Lightbox-Fenster anzuzeigen.

Darüber hinaus können sie die Bilder auch über die Lightbox durchscrollen.

Wenn Sie weitere Bilder zu Ihrer Galerie hinzufügen möchten, können Sie sie wieder aufrufen, indem Sie im WordPress-Dashboard die Seite Envira Gallery » Alle Galerien besuchen.

Sobald Sie dort sind, klicken Sie einfach auf den Namen Ihrer Galerie, um sie zu bearbeiten.

Alle Änderungen, die Sie an Ihrer Galerie vornehmen, werden überall dort angezeigt, wo Sie sie in Ihren Beiträgen, Seiten oder Seitenleisten platziert haben. Sie müssen sie dort nicht erneut hinzufügen.

Bonus: Bilder in WordPress ausrichten

Wenn Sie zwei Bilder nebeneinander einfügen, müssen sie zusammen ausgerichtet werden, um ein zusammenhängendes und visuell ansprechendes Erscheinungsbild zu erzielen.

Selbst wenn Sie nur ein einzelnes Bild zu Ihrem WordPress-Blog hinzufügen, möchten Sie es dennoch an Ihren Inhalt anpassen, um ein visuelles Gleichgewicht zu schaffen.

Sie können Bilder im WordPress-Blockeditor einfach ausrichten, indem Sie in der Symbolleiste über dem Block auf die Schaltfläche „Ausrichten“ klicken.

Dies öffnet einige Optionen, von denen aus Sie Ihr Bild nach rechts oder links verschieben, es auf die gleiche Breite wie der Container bringen oder die Vollbildoption verwenden können, sodass die Bildbreite der des restlichen Seiteninhalts entspricht.

Abgesehen davon können Sie auch den Spalten-Block verwenden, um Ihr Bild mit dem Inhalt auszurichten. Dazu müssen Sie die 50/50-Variante auswählen.

Sobald Sie das getan haben, können Sie einen Bildblock hinzufügen, der perfekt zu Ihrem Inhalt passt.

Zusätzlich können Sie auch Text um das Bild wickeln, den Gruppenblock verwenden, den Cover-Block hinzufügen oder so viel mehr tun, um Bilder zusammen oder getrennt auszurichten.

Weitere Informationen finden Sie in unserem Leitfaden für Anfänger, wie Sie Bilder im WordPress-Block-Editor ausrichten können.

Häufig gestellte Fragen zum Hinzufügen von Bildern nebeneinander

Hier sind einige Fragen, die unsere Leser häufig zum nebeneinanderändigen Hinzufügen von Bildern in WordPress gestellt haben:

Wie platziere ich ein Bild und Text nebeneinander in WordPress?

Der beste Weg, ein Bild neben Text zu platzieren, ist die Verwendung des Spalten-Blocks.

Fügen Sie zuerst den Spalten-Block hinzu und wählen Sie ein Layout, z. B. 50/50. Dann können Sie einen Bild-Block in eine Spalte und einen Absatz-Block in die andere einfügen. Dies ergibt ein sauberes, nebeneinanderliegendes Layout.

Was ist der beste Weg, Bilder unterschiedlicher Größe nebeneinander auszurichten?

Während der Galerie-Block großartig für einheitliche Bilder ist, bietet der Spalten-Block mehr Flexibilität für unterschiedliche Größen. Sie können ihn verwenden, um ein 70/30 oder andere benutzerdefinierte Layouts zu erstellen.

Für erweiterte Kontrolle ermöglicht ein Plugin wie Envira Gallery die Erstellung benutzerdefinierter Raster, die verschiedene Bilddimensionen elegant verarbeiten können.

Bleiben meine nebeneinander liegenden Bilder auf Mobilgeräten nebeneinander?

Normalerweise nicht. Die meisten modernen WordPress-Themes sind responsiv, was bedeutet, dass nebeneinander auf einem Desktop platzierte Bildblöcke auf kleineren Bildschirmen automatisch vertikal gestapelt werden.

Dies geschieht, um sicherzustellen, dass die Bilder groß genug sind, um auf einem Telefon klar gesehen zu werden, und bietet so ein besseres Benutzererlebnis.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Bilder in WordPress nebeneinander stellen. Möglicherweise möchten Sie auch unseren Leitfaden zum Ändern der Blockhöhe und -breite in WordPress und unseren Leitfaden zum Hinzufügen von Tabellen in WordPress-Beiträgen und -Seiten durchgehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.