loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

Wie man Bilder in WordPress nebeneinander stellt (einfach)

Möchten Sie Bilder in Ihrem WordPress-Inhalt nebeneinander stellen?

Oft kämpfen Anfänger damit, herauszufinden, wie sie zwei Bilder nebeneinander in ihre WordPress-Beiträge und -Seiten setzen können.

In dieser Schritt-für-Schritt-Anleitung zeigen wir, wie Sie ganz einfach Bilder nebeneinander in WordPress einfügen können (ohne Code zu schreiben).

Putting images side by side in WordPress

Verwenden des Block-Editors, um Bilder nebeneinander zu platzieren

Der einfachste Weg, Ihre Bilder nebeneinander zu platzieren, ist die Verwendung des WordPress-Blockeditors.

Der Block-Editor hat einen speziellen „Galerie“-Block, mit dem Sie Bilder in Zeilen und Spalten anzeigen können.

Zunächst müssen Sie einen neuen Beitrag / eine neue Seite erstellen oder einen bestehenden Beitrag bearbeiten, um den Inhaltseditor zu öffnen. Klicken Sie darin auf das (+)-Symbol, um einen neuen Block hinzuzufügen.

Creating a post and adding a block to it

Als Nächstes müssen Sie den Block „Galerie“ auswählen und ihn zu Ihrer Seite hinzufügen. Sie finden den Galerie-Block im Abschnitt Allgemeine Blöcke oder Sie können die Suchleiste verwenden, um ihn schnell zu finden.

Selecting the Gallery block to add to your post

Jetzt können Sie ganz einfach Bilder zu Ihrem Galerie-Block hinzufügen, indem Sie sie in den Block ziehen oder die Schaltfläche Hochladen verwenden. Sie können auch Bilder aus Ihrer WordPress-Medienbibliothek auswählen.

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

Two images in the gallery (butterflies and apple)

Was aber, wenn Sie 3 Bilder nebeneinander haben möchten? Hier ist, was passiert, wenn wir ein drittes Bild hinzufügen. WordPress passt einfach die Größe der anderen an, damit alle 3 nebeneinander passen:

Three images in the gallery (butterflies, apple, and blue flowers)

Wenn Sie ein viertes Bild hochladen, dann platziert WordPress es unter den anderen.

Four images in the gallery (butterflies, apple, blue flowers, and robin)

Sie können die Anzahl der Bilder ändern, die WordPress nebeneinander in einer einzelnen Spalte einfügen soll.

Klicken Sie zunächst auf den Galerie-Block, wenn er nicht bereits ausgewählt ist. Auf der rechten Seite des Bildschirms sehen Sie die Blockeinstellungen der Galerie.

Changing the settings for the gallery block

Hier können Sie die Anzahl der Spalten auf eine beliebige Zahl zwischen 1 und 4 einstellen. Wenn Sie zum Beispiel zwei Bilder nebeneinander und zwei weitere darunter haben möchten, können Sie die Spalten auf 2 einstellen.

Setting the gallery to have 2 columns rather than 3

So einfach ist das!

Wenn Sie die Position eines Bildes in Ihrer Galerie ändern möchten, klicken Sie es einfach an. Sie sehen dann Pfeile, mit denen Sie es in der Galerie nach vorne oder hinten verschieben können.

Moving an image forward or backward in the gallery

Hier ist eine fertige Galerie-Demo aus unserem Beispielbeitrag:

The 2 column gallery in a live post

Verwendung eines Plugins, um Bilder in WordPress nebeneinander zu stellen

Wenn Sie den alten, klassischen WordPress-Editor verwenden, oder wenn Sie komplexere Galerien als den Standard-Galerie-Block erstellen möchten, dann benötigen Sie ein WordPress-Galerie-Plugin.

Wir empfehlen die Verwendung von Envira Gallery, weil es das beste WordPress-Galerie-Pluginist

Für dieses Tutorial werden wir die kostenlose Version von Envira verwenden, aber Sie möchten vielleicht die Pro-Version erwerben, um leistungsstarke Funktionen wie Alben, Bild-Diashows usw. zu erhalten.

Zuerst müssen Sie das Envira Gallery Plugin installieren und aktivieren. Wenn Sie nicht sicher sind, wie das geht, schauen Sie sich einfach unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins an.

Als nächstes können Sie in Ihrem WordPress-Dashboard zu Envira Gallery “ Add New gehen.

Add a new gallery in Envira Gallery

Sie müssen Ihrer Galerie einen Titel geben. Wir haben unsere „Beispiel-Galerie“ genannt. Als nächstes laden Sie die Bilder hoch, die Sie verwenden möchten.

Sie können sie entweder per Drag & Drop in das Hochladefeld ziehen oder eine der Schaltflächen „Dateien auswählen“ verwenden.

Give your new gallery a name

So sehen die Bilder aus, nachdem sie hochgeladen wurden:

Images uploaded to Envira Gallery

Hier können Sie Ihren Bildern einen Titel und einen Alt-Text geben. Der Titel erscheint unter Ihrem Bild, wenn der Benutzer mit dem Mauszeiger darüber fährt.

Der Titel erscheint auch unterhalb des Bildes im Leuchtkasten-Popup-Modus, den wir uns gleich ansehen werden.

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

Click the Edit button to edit an image in your gallery

Sie können dann den Titel für Ihr Bild ändern. Standardmäßig ist dies der Dateiname des Bildes.

Sie sollten auch einen Alt-Text eingeben, da dieser für die SEO Ihrer WordPress-Seite hilfreich ist. Wenn Ihr Titel das Bild beschreibt, dann können Sie ihn einfach für den Alt-Text wiederholen.

Setting the title and the alt text for the image

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

Click the Save Metadata button to save your changes

Um Ihre Galerie auf der Website hinzuzufügen, müssen Sie sie zunächst veröffentlichen. Klicken Sie dazu auf die Schaltfläche „Veröffentlichen“ auf der rechten Seite des Bildschirms.

Click the Publish button to publish your gallery, so you can use it on your site

Bearbeiten Sie nun einen Beitrag oder eine Seite, oder erstellen Sie einen neuen Beitrag. Klicken Sie im Inhaltseditor auf (+), um einen Block zu Ihrem Beitrag hinzuzufügen, und wählen Sie den Envira Gallery-Block aus. Sie finden ihn im Abschnitt Allgemeine Blöcke oder Sie können die Suchleiste verwenden.

Add the Envira Gallery block to your post or page

Sie müssen dann auf das Dropdown klicken, um Ihre Galerie auszuwählen.

Select your gallery from the Envira Gallery block

Sie sollten Ihre Galerie an der richtigen Stelle in Ihrem Beitrag sehen.

Sie können die Einstellungen auf der rechten Seite des Bildschirms anpassen. So können Sie z. B. das Spaltenlayout oder die Größe des Randes zwischen den Bildern ändern.

The Envira Gallery shown in the post editor

Wir haben uns entschieden, unsere Galerie so einzustellen, dass sie immer in zwei Spalten angezeigt wird. Wir haben auch einen breiteren Rand zwischen den Bildern hinzugefügt.

Der Benutzer kann auf ein Bild klicken, um die Version in voller Größe in einer Lightbox zu sehen. Über das Leuchtpult kann er auch durch die Bilder blättern.

Viewing an image from the Envira gallery in a lightbox

Wenn Sie weitere Bilder zu Ihrer Galerie hinzufügen möchten, können Sie zu ihr zurückkehren, indem Sie Envira Gallery “ Alle Galerien in Ihrem WordPress-Dashboard aufrufen. Klicken Sie einfach auf den Namen Ihrer Galerie, um sie zu bearbeiten.

<img title=“Eine Galerie bearbeiten, die Sie bereits in der Envira Gallery erstellt haben“ src=“https://www.wpbeginner.com/wp-content/uploads/2021/05/edit-envira-gallery.png“ alt=“Eine Galerie bearbeiten, die Sie bereits in der Envira Gallery erstellt haben“ width=“550″ height=“424″ class=“alignnone size-full wp-image-78134″>

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

Tipp: Wenn Sie den klassischen Editor statt des Block-Editors verwenden, können Sie die Envira Galerie trotzdem nutzen.

Oberhalb des klassischen Editors sehen Sie eine Schaltfläche „Galerie hinzufügen“, mit der Sie eine bestehende Galerie zu Ihrem Beitrag hinzufügen können.

Adding an Envira gallery in the classic editor

Sie können auch eine neue Galerie erstellen, indem Sie auf die Schaltfläche „Medien hinzufügen“ und dann auf „Galerie erstellen“ klicken.

Creating a new gallery using the Media Library in the Classic Editor

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat zu lernen, wie man Bilder in WordPress nebeneinander anordnet. Vielleicht möchten Sie auch unsere Anleitung zum Ausrichten von Bildern im WordPress-Block-Editor und unsere umfassende Liste der wichtigsten WordPress-Plugins (Auswahl durch Experten) durchlesen.

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

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner