Wie man Bilder in WordPress nebeneinander stellt (3 Wege)

Visuelle Inhalte spielen eine entscheidende Rolle, wenn es darum geht, die Aufmerksamkeit der Online-Nutzer zu gewinnen. Was ein einziges Bild vermitteln kann, erfordert oft Hunderte von Worten. Außerdem können Bilder Emotionen hervorrufen und die Gesamtästhetik verbessern.

Eine effektive Möglichkeit, Bilder zu präsentieren, ist, sie nebeneinander zu stellen. Diese Technik ist besonders hilfreich, um mehrere Produkte zu vergleichen, Vorher-Nachher-Bilder zu präsentieren und eine Geschichte zu erzählen.

In diesem Artikel zeigen wir Ihnen drei einfache Möglichkeiten, wie Sie Bilder in WordPress nebeneinander stellen können.

Schöne Tische erstellen
Mit Block-Editor

WordPress wird mit dem Standard-Galerie-Block geliefert. Sie können Bilder auf die folgenden Arten neben dem Block präsentieren.

Öffnen Sie einfach einen Beitrag oder eine Seite. Finden Sie die Galerie-Block in der Gutenberg-Blockbibliothek durch Drücken der Taste Plus-Taste (+). Fügen Sie es dem Editor hinzu.

Finden Sie den Gutenberg-Galerie-Block und fügen Sie ihn zu WordPress hinzu

Klicken Sie auf die Schaltfläche "Hochladen um neue Bilder aus Ihrem lokalen Speicher auf der Seite hinzuzufügen. Oder Sie können sie aus Ihren vorhandenen Dateien hochladen, indem Sie auf die Schaltfläche Mediathek Taste.

Hochladen von Bildern aus dem lokalen Speicher oder der Medienbibliothek

In diesem Tutorial werden wir Bilder aus der Mediathek hochladen. Wählen Sie die Bilder aus, die Sie hinzufügen möchten. Drücken Sie die Eine neue Galerie erstellen Schaltfläche am Ende.

Eine neue Galerie erstellen

Sobald die Bilder dem Editor hinzugefügt wurden, werden sie nebeneinander angezeigt. Anschließend können Sie die Einstellungen und Stilisierungen des Galerie-Blocks mithilfe der entsprechenden Optionen in der rechten Seitenleiste anpassen.

Nebeneinander angezeigte Bilder mit dem Gutenberg-Galerie-Block

Anmerkung: Wenn Ihre Bilder nicht standardmäßig nebeneinander angezeigt werden, wählen Sie den gesamten Block aus, indem Sie auf das Symbol Galerie-Symbol in der Symbolleiste. Geben Sie die Spaltennummern in der rechten Seitenleiste an.

Spaltennummer für den Galerie-Block festlegen

Methode zwei: Verwendung des Spaltenblocks

Der Spaltenblock ermöglicht es Ihnen, Ihren Inhalt in mehrere Spalten zu unterteilen. Sie können andere Blöcke hinzufügen, um verschiedene Arten von Inhalten innerhalb jeder Spalte hinzuzufügen.

Schritt 01: Hinzufügen des Spaltenblocks zu Ihrer Website

Fügen Sie die Säulenblock in Ihren Editor ein, und zwar nach der oben beschriebenen Methode.

Hinzufügen des Spaltenblocks zu Ihrer Website

Wählen Sie das Spaltenlayout nach Belieben. Sie können die gleiche Anzahl von Bildern nebeneinander anzeigen, entsprechend der Anzahl der Spalten, die Sie hinzufügen. Wir haben das zweispaltige Layout für den Block gewählt.

Wählen Sie ein Spaltenlayout

Fügen Sie die Bildblock durch Drücken der Taste Plus-Taste (+) innerhalb der Säulenblock.

Hinzufügen des Bildblocks zum Spaltenblock

Laden Sie ein Bild auf dieselbe Weise hoch, wie wir es Ihnen oben gezeigt haben.

Anmerkung: Da dies der Image-Block ist, können Sie nur ein Bild hinzufügenim Gegensatz zum Galerie-Block.

Bild in den Spaltenblock hochladen

Fügen Sie auf die gleiche Weise die Bildblock wieder in die zweite Spalte.

Mehrere Bilder zum Spaltenblock hinzufügen

Sie sehen, dass das zweite Bild neben dem ersten erschienen ist. Sie können nun alternative Texte und andere Einstellungen für die einzelnen Bilder hinzufügen.

Mehrere Bilder werden mit Hilfe des Spaltenblocks angezeigt

Method Three: Using the Tableberg Block

Tischberg ist ein blockbasiertes Plugin für die Tabellenerstellung. Mit ihm können Sie auch Spalten erstellen und Bilder nebeneinander anzeigen. Folgen Sie den unten beschriebenen Schritten nach Installation von und Aktivieren von das Plugin.

Installieren und aktivieren Sie das TableBerg Plugin

Schritt 01: Hinzufügen des TableBerg-Blocks

Das Plugin wird mit einem TableBerg-Block. Fügen Sie es zu Ihrem Editor hinzu.

Fügen Sie den TableBerg-Block zu Ihrem Beitrag oder Ihrer Seite hinzu

Sie können auch mehrere Zeilen auswählen, wenn Sie möchten. Aber wir werden das heutige Tutorial mit einer einzigen Zeile und mehreren Spalten erklären.

Wählen Sie eine Zeile und Spalten für die Tabelle aus

TableBerg ermöglicht es Ihnen, verschiedene Arten von Blöcken zu den Zellen der Tabelle hinzuzufügen. Hinzufügen der Bildblock zu den Tabellenzellen.

Fügen Sie den Bildblock zu den TableBerg-Zellen hinzu

Ein Bild hochladen in die Tabellenzelle einfügen, so wie wir es in den beiden obigen Methoden gezeigt haben.

Bild in die Tabelle hochladen

Fügen Sie weiterhin Bilder zu anderen Spalten der Tabelle hinzu, indem Sie die Bildblock. Ich hoffe, du schaffst es allein.

Weitere Bilder zu anderen Spalten der Tabelle hinzufügen

Siehe das Bild unten. Wir haben drei Bilder nebeneinander in der mit dem TableBerg-Block erstellten Tabelle angezeigt.

Bilder, die neben der TableBerg Tabelle angezeigt werden

# Entfernen Sie den Tabellenrand

Sie sehen einen Rahmen um die Tabelle. Um ihn zu entfernen, klicken Sie auf das TableBerg-Symbol dreimal auf der Symbolleiste. Gehe zu Registerkarte "Stile" > Rahmen in der rechten Seitenleiste. Setzen Sie die Wert Null (0) um die Größe des Tabellenrahmens festzulegen.

Entfernen Sie den Tabellenrand

So können Sie Bilder auf WordPress-Websites nebeneinander anzeigen.


Schlussfolgerung

Es ist sehr vorteilhaft, Bilder nebeneinander zu zeigen, während ein visueller Vergleich zwischen verschiedenen Produkten, Optionen, Merkmalen und Varianten unerlässlich ist. Ich hoffe, Sie können es heute mit diesem Tutorial allein schaffen.

Sie können mehr auf Ihrer Website tun, indem Sie verschiedene Arten von Tabellen mit dem TableBerg-Plugin erstellen. Werfen Sie einen Blick auf wie man eine Amazon Produktvergleichstabelle in WordPress erstellt.



Das Tischberg-Team

Das Frühbucherangebot ist jetzt verfügbar!
Dies ist der Standardtext für die Benachrichtigungsleiste