Mit WordPress können Sie Ihrer Website auf verschiedene Weise Bilder hinzufügen. Eine der effektivsten Möglichkeiten ist das Hinzufügen von Bildern in Spalten und Zeilen. Auf diese Weise können Sie Ihre Bilder in einer organisierten Weise präsentieren.

In diesem Blogbeitrag zeigen wir Ihnen mehrere Möglichkeiten, wie Sie WordPress-Bilder in Spalten und Zeilen anzeigen können.

• Methode 1: Verwendung des Spaltenblocks (Am besten für vollständige manuelle Steuerung und benutzerdefinierte Layouts)
• Methode 2: Verwendung des Galerie-Blocks (Am besten für einfache Bildraster mit minimalem Styling)
• Methode 3: Verwendung des Galleryberg Blocks (Am besten für fortgeschrittene Layouts mit Leuchtkasten und Anpassungen)
• Methode 4: Verwendung des Tableberg-Plugins (Am besten geeignet für strukturierte Bildraster wie Preise, Zeitpläne oder Produkttabellen)

Schöne Tische erstellen
Mit Block-Editor

Kostenlos ausprobieren

Profi werden

Methode 1: Verwendung des Säulenblocks

WordPress hat einen Standard-Spaltenblock. Sie können viele weitere Blöcke darin einfügen, darunter auch den Bildblock. Hier ist die Anleitung.

Schritt 01: Hinzufügen des Gutenberg-Spaltenblocks

Finden und den Block "Spalte" hinzufügen indem Sie auf das Pluszeichen (+) im Editor klicken.

Wählen Sie die Anzahl der Spaltenvarianten, die Sie dem Spaltenblock hinzufügen möchten. Für dieses Tutorial wählen wir die 50/50-Spaltenvariante.

Schritt 02: Hinzufügen des Bildblocks zum Spaltenblock

Wie bereits erwähnt, können Sie andere Gutenberg-Blöcke innerhalb des Spaltenblocks verwenden. Jetzt, Klicken Sie auf das Plus-Symbol (+) innerhalb der Spalte. Suchen und den Image-Block hinzufügen dazu.

Sie können nun Bilder aus der Medienbibliothek oder vom lokalen Laufwerk hinzufügen. Tun Sie es, wie Sie möchten.

Schritt 03: Stilisierung des Bildblocks innerhalb des Spaltenblocks

Wie Sie sehen, haben wir ein Bild hinzugefügt. Sie können es mit der Ausrichtungsoption in der Symbolleiste mittig ausrichten. Ändern Sie die Größe des Bildes mit dem Symbol des Randkreises. Schließlich können Sie das Bild mit den Optionen auf der Registerkarte "Stil" weiter stilisieren.

Fügen Sie auf dieselbe Weise auch der anderen Spalte ein Bild hinzu.

Methode 2: Verwendung des Galerie-Blocks

WordPress verfügt über einen Standard-Galerie-Block, mit dem Sie mehrere Bilder mit demselben Block-Layout hinzufügen können.

Schritt 01: Hinzufügen des Galerie-Blocks

Wie bei der obigen Methode, finden und Hinzufügen des Galerie-Blocks zum Editor.

Sie können Bilder von Ihrem Computer hochladen. lokales Laufwerk oder die Mediathek. In diesem Tutorial werden wir Bilder aus der Medienbibliothek hochladen.

Schritt 02: Bilder auswählen und hochladen

Wählen Sie die Bilder aus die Sie in den Galerie-Block hochladen möchten. Sie können so viele Bilder auswählen, wie Sie möchten. Wenn Sie fertig sind, Klicken Sie auf die Schaltfläche Eine neue Galerie erstellen.

Sie können zu jedem Bild Bildunterschriften hinzufügen, wenn Sie möchten. Es ist kein Problem, wenn Sie nichts hinzufügen. Drücken Sie die Schaltfläche Galerie einfügen am Ende.

Sie können sehen, dass der Galerie Bilder hinzugefügt wurden. Als Nächstes können Sie den Bildblock mit den Optionen aus dem Menü Einstellungen und Registerkarte "Stile in der rechten Seitenleiste.

Ich hoffe, Sie können das allein, also gehe ich nicht ins Detail.

Methode 3: Verwendung des Galleryberg-Plugins

Wenn Sie nach einer flexibleren und visuell ausgefeilteren Möglichkeit suchen, Bilder in Spalten oder Zeilen anzuzeigen, können Sie die Galerieberg Plugin ist eine fantastische Wahl. Es ist ein Gutenberg-natives Galerie-Block-Plugin, mit dem Sie mehrere Layout-Optionen - einschließlich Tiles, Masonry, Justified und Square - alle mit integrierten Lichtkasten Unterstützung.

Schritt 1: Installieren Sie das Galleryberg Plugin

Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Plugins > Neu hinzufügen. Suchen Sie dann nach "Galleryberg" und installieren und aktivieren Sie das Plugin.

Schritt 2: Hinzufügen des Galerieberg-Blocks

Öffnen Sie die Seite oder den Beitrag, auf der/dem Sie die Bilder anzeigen möchten. Klicken Sie dann auf die Schaltfläche + und suchen Sie nach dem "GaleriebergBlock". Fügen Sie ihn der Seite hinzu.

Schritt 3: Bilder hochladen oder auswählen

Verwenden Sie die Mediathek oder laden Sie neue Bilder hoch. Sie können Bilder durch Ziehen und Ablegen neu anordnen.

Schritt 4: Wählen Sie ein Layout

Wählen Sie im Bereich Blockeinstellungen das gewünschte Layout aus:

• Kacheln: Raster-Layout mit gleichen Abständen (ideal für Zeilen und Spalten)
• Gemäuer: Gestapeltes Layout im Stil von Pinterest
• Gerechtfertigt: Sauber ausgerichtete Reihen mit gleicher Höhe
• Quadratisch: Perfekte Quadrate für einheitliche Rasterdarstellung

Schritt 5: Aktivieren Sie die Leuchtkasten-Option

Schalten Sie in der Seitenleiste der Blockeinstellungen die Option Leuchtkasten einschalten Option.

Ihre Bilder öffnen sich nun in einem Popup-Fenster mit sanften Übergängen, Zoom-Effekten und Dia-Navigation.

Schritt 5: Anpassen und veröffentlichen

• Legen Sie die Anzahl der Spalten fest (von 1 bis 8). In der Seitenleiste der Blockeinstellungen blättern Sie nach unten zum Feld Leuchtkasten Abschnitt.
• Schalten Sie die Leuchtkasten einschalten Option.
• Ihre Bilder öffnen sich nun in einem Popup-Fenster mit sanften Übergängen, Zoom-Effekten und Dia-Navigation.
• Anpassen von Abständen, Beschriftungen, Rahmen und mehr
• Leuchtkasten für interaktive Bildvorschauen aktivieren

Klicken Sie auf veröffentlichen. oder Update und Ihre Galerie wird in sauberen, ansprechenden Zeilen und Spalten angezeigt.

Methode 4: Verwendung des Tableberg-Plugins

TableBerg ist ein einfach zu bedienendes Plugin zur Tabellenerstellung. Es ermöglicht Ihnen, verschiedene benutzerdefinierte Blöcke zu den Tabellenzellen hinzuzufügen, um multifunktionale Tabellen zu erstellen. In diesem Abschnitt zeigen wir Ihnen, wie Sie Bilder in WordPress hinzufügen können, indem Sie das Tischberg Plugin.

Schritt 01: Installieren und Aktivieren des Tableberg-Plugins

Gehe zu Plugins > Neues Plugin hinzufügen. Typ Tischberg in das Suchfeld ein. Installieren Sie und aktivieren. sobald das Plugin unten erscheint.

Schritt 02: Fügen Sie den Tableberg-Block zu Ihrem Beitrag/Ihrer Seite hinzu

Das Plugin kommt mit einem Gutenberg-Block namens TableBerg. Suchen und fügen Sie den TabelBerg-Block an Ihren Redakteur.

Definieren Sie die Zeilen- und Spaltennummer für die Tabelle. Das Verfahren ist ähnlich wie beim Standard-Tabellenblock. Machen Sie es selbst.

Schritt 03: Suchen und Hinzufügen des Bildblocks zur Tabelle

Ich hoffe, Ihre Tabelle ist fertig. Wählen Sie die Zelle aus, in die Sie ein Bild einfügen möchten. Sobald Sie eine Zelle ausgewählt haben, wird die Plus-Symbol (+) erscheinen wird.

Klicken Sie auf das Plus-Symbol (+). Sie erhalten den Bildblock. Klicken Sie auf den Bildblock.

Sie erhalten Optionen zum Hochladen von Bildern vom lokalen Laufwerk oder aus der Medienbibliothek. Klicken Sie auf die gewünschte Option und laden Sie das Bild hoch.

Schritt 04: Das hochgeladene Bild stilisieren

Hoffentlich ist Ihr Bild bereits in die Tabelle hochgeladen worden. Gehen Sie auf die Registerkarte "Stile" in der rechten Seitenleiste. Hier finden Sie Optionen wie Duotone, Border und Radius, mit denen Sie Ihren Bildblock stilisieren können.

So können Sie mit dem Plugin Bilder in die WordPress-Tabelle hochladen. Erkunden Sie wie man einen Bereich für Teammitglieder in WordPress erstellt mit Hilfe des Spaltenblocks.

Schlussbemerkungen!

Um eine Website erfolgreich zu pflegen, müssen Sie Ihre Inhalte auf unterschiedliche Weise hochladen und präsentieren. Manchmal muss derselbe Inhalt in verschiedenen Beiträgen und Seiten auf unterschiedliche Weise präsentiert werden. Dasselbe gilt auch für den Bildblock.

Wir hoffen, dass Sie nach der Lektüre dieses Tutorials in der Lage sind, Ihren Bildblock auf verschiedene Arten in WordPress einzufügen und Variationen in den Inhalt zu bringen.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

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.

• Methode 1: Verwendung des Galerie-Blocks
• Methode 2: Verwendung des Spaltenblocks
• Methode 3: Verwendung des Tableberg-Blocks

Schöne Tische erstellen
Mit Block-Editor

Kostenlos ausprobieren

Profi werden

Methode eins: Verwendung des Galerie-Blocks

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

Schritt 01: Hinzufügen des Galerie-Blocks zu WordPress

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

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.

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.

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.

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.

Methode zwei: Verwendung des Spaltenblocks

Mit dem Spaltenblock können Sie Ihren Inhalt in mehrere Spalten unterteilen. Sie können weitere 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.

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.

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

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.

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

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.

Dritte Methode: Verwendung des Tableberg-Blocks

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.

Schritt 01: Hinzufügen des TableBerg-Blocks

Das Plugin wird mit einem TableBerg-Block. Fügen Sie es zu Ihrem Editor 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.

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

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

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

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

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

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.

<p>The post How to Put Images Side by Side in WordPress (Three Ways) first appeared on Tableberg.</p>