Die WordPress Bildblock is super helpful when inserting and showcasing a single image on your website. But if you want to display multiple photos at once, the Gallery block is the right choice.
Therefore, you must learn how to use the gallery block in WordPress. Once you master the gallery block’s features, you can use it to enhance your website’s visuals, making it more professional and appealing.
Heute werden wir in diesem Tutorial den WordPress-Galerie-Block, die Funktionen der Symbolleiste, die Anpassungsoptionen und die richtige Verwendung besprechen. Folgen Sie uns bitte von Anfang bis Ende.
Was ist der WordPress-Galerie-Block?
Der WordPress-Galerie-Block is a core block in the WordPress block editor. It lets you create and display a collection of images in a Gitter format. It is perfect for displaying event photos, organizing images into an attractive layout, or presenting images with minimal effort.
Bestimmte Funktionen kommen Ihnen zugute, wenn Sie den Block verwenden. Sehen Sie sich diese Funktionen unten an.
- Personalisierung: Passen Sie Spalten, Abstände und Beschriftungen an Ihr Design an. Sie können auch verschiedene Auflösungen für einzelne Bilder in der Galerie einstellen.
- Reaktionsfähiges Design: Die Bilder passen sich automatisch an unterschiedliche Bildschirmgrößen an und sorgen so für ein nahtloses Erlebnis auf Handy, Tablet und Desktop.
- Eingebaute Integration: Sie benötigen keine zusätzlichen Plugins; der Block funktioniert nativ in WordPress.
- SEO-freundlich: Alt text and captions can improve your content’s accessibility and search engine ranking. You can also set ALT text for separate images within the gallery.
Funktionen der Symbolleiste des Galerieblocks
Wenn Sie den Galerie-Block einfügen, erscheint am oberen Rand des Galerie-Blocks eine Symbolleiste mit verschiedenen Funktionen zum Anpassen Ihrer Galerie. Diese Funktionen finden Sie unten.
- Verwandeln: Sie können diesen Block in einen Bild-, Spalten-, Detail- und Gruppenblock umwandeln.
- Ziehen: Ermöglicht es Ihnen, den entsprechenden Block an eine beliebige Stelle im Editor zu ziehen und dort abzulegen.
- Beweglicher Handgriff: Sie können Ihren Block nach oben und unten bewegen.
- Ausrichten: Mit der Option Ausrichten können Sie die Bildausrichtung auf Keine, Breite, Volle Breite, Links, Mitte und Rechts einstellen.
- Link: Mit dieser Option können Sie Links für ausgewählte Inhalte innerhalb des Blocks hinzufügen.
- Bildunterschrift: Sie können mit der Editor-Option für jedes Bild Beschriftungen hinzufügen.
- Hinzufügen: Mit der Option "Hinzufügen" können Sie neue Bilder zur Galerie hinzufügen oder hochladen.
- Mehr Optionen: Bietet weitere Optionen in Bezug auf den Abschnitt des Blocks, z. B. Duplizieren, Kopieren, Gruppieren usw.
Wie man den Galerie-Block in WordPress verwendet
Using the Gallery block in WordPress is simple. Just follow the below steps:
Schritt 1: Galerie-Block im Editor hinzufügen
Öffnen Sie den Beitrag oder die Seite, klicken Sie auf das Symbol "+", um einen Block hinzuzufügen, und suchen Sie nach "Galerie". Wählen Sie den Galerie-Block aus, um ihn in Ihren Beitrag oder Ihre Seite einzufügen.
Schritt 2: Hochladen Ihrer Bilder
Sie können Ihre Bilder entweder hochladen oder aus der Mediathek auswählen.
Wie man Bilder über die Upload-Option einfügt
Um Bilddateien einzufügen, klicken Sie auf die Schaltfläche Hochladen, Wählen Sie Ihre Bilder mit dem Cursor aus während Halten der CTRL-Taste Ihrer Tastatur, und klicken Sie auf Öffnen. Das war's schon. Sie können Ihre Bilder im Editor sehen.
Einfügen von Bildern über die Option Medienbibliothek
Klicken Sie auf die Schaltfläche Medienbibliothek, wählen Sie Ihre Bilder aus und klicken Sie auf die Schaltfläche Neue Galerie erstellen und Galerie einfügen, um die Bilder in den Editor einzufügen.
Wenn Sie alle Bilder in die Galerie eingefügt haben, können Sie alle Funktionen der Symbolleiste des Bildblocks sehen. Sie können sich diese Funktionen ansehen hier.
Schritt 3: Galerie-Anpassung
Um die Galerie anzupassen, navigieren Sie zu Einstellungen (1) > Block (2) > Einstellungen (3). Sie haben die Möglichkeit, Spalten, Auflösung und andere Optionen auszuwählen.
- Kolumnen: Mit Spalten können Sie festlegen, wie viele Bilder Sie in Ihrem Editor anzeigen möchten. Je mehr Bilder Sie hinzufügen, desto mehr Spalten werden in der Galerie angezeigt. (4)
- Auflösung: Sie können die Bildauflösung auf Thumbnail und Full Size einstellen. (5)
- Bilder zuschneiden: Mit dieser Funktion wird das Verhältnis der einzelnen Bilder beibehalten und ihre Größe angepasst.
- Reihenfolge zufällig festlegen: Bei dieser Funktion wird die Serie nicht beibehalten, sondern es werden Bilder in einer zufälligen Serie angezeigt.
Die Option Stile bietet die folgenden Optionen.
- Farbe: Mit der Option Farbe können Sie die Hintergrundfarbe Ihres Galerieblocks ändern.
- Abmessungen: Mit der Option Abmessungen können Sie den Blockabstand (Abstand zwischen zwei Blöcken, z. B. Bildern), den Rand und die Auffüllung ändern.
- Umrandung & Radius: Mit dieser Funktion können Sie einen Rahmen, eine Rahmenfarbe und einen Rahmenradius zu Ihrer Galerie hinzufügen.
Hier ist die vollständige Demo der Galerie, die ich erstellt habe.
Create an Interactive Gallery with Galleryberg
While the default Gallery block is excellent for simple grids, it lacks features such as a lightbox, hover effects, and diverse layouts.
If you want a more engaging gallery without writing code, the Galerieberg plugin is a free alternative that extends the block editor with extra tools. It lets you switch between tile, masonry, justified, and square layouts, and adds a built‑in lightbox for zooming and navigation.
Galleryberg also includes subtle hover effects and responsive controls so your galleries feel modern on desktop and mobile.
Now let’s see how to use the Galleryberg plugin.
Schritt 1: Installieren Sie das Galleryberg Plugin
Go to your WordPress dashboard and navigate to Plugins → Add New and search for Galleryberg. Then install and activate the plugin.
Step 2: Insert the Galleryberg Gallery Block
Create a new post/page or edit an existing one. Click the “+” button, search for Galleryberg, and add the block.
Step 3: Add Your Images
Upload new images or select them from the Media Library and click Select.
Schritt 4: Wählen Sie ein Layout
By default, the block uses a Tiles layout. In the block’s sidebar, you can switch to Gemäuer, Gerechtfertigt, oder Quadratisch to better match your design.
Each layout automatically rearranges the images, and you can adjust the columns, spacing, and borders.
Step 5: Enable the lightbox
Toggle Enable Lightbox in the block settings to let visitors click an image and view it in a pop‑up with zoom and slide navigation.
The lightbox includes keyboard and touch controls, so it works smoothly on desktops and phones.
Step 5: Explore hover effects and captions
Use the Caption settings to display text below images or as an overlay that appears on hover. Galleryberg’s hover animations (zoom in/out and overlays) make the gallery feel interactive without distracting the
Schritt 6: Vorschau und Veröffentlichung
Once satisfied, preview your gallery and publish or update the post. Your gallery will be responsive and performance‑optimised thanks to server‑side rendering.
Why Use Galleryberg Instead of the Core Block?
The core Gallery block offers basic grid layouts but lacks features such as a lightbox, hover animations, and varied layouts. Galleryberg provides four different gallery styles, a responsive lightbox with zoom and keyboard navigation, and intuitive controls for spacing, colors, and captions. It even supports responsive hover effects to add subtle animations. If you need a gallery that encourages visitors to interact with your images and fits seamlessly into the block editor, Galleryberg is a lightweight, user‑friendly solution.
Schlussgedanken!
Der Galerie-Block ist ein leistungsstarkes Tool im Gutenberg-Block-Editor. Mit ihm können Sie Ihre Bildersammlungen ohne zusätzliche Plugins anzeigen.
Es ist aufgrund seiner Flexibilität, der Anpassungsmöglichkeiten und der nahtlosen Integration in WordPress eine ausgezeichnete Wahl für alle.
Probieren Sie es aus und sehen Sie, wie Sie damit Ihre Bilder auf Ihrer Website präsentieren können.
Teilen Sie mir Ihre Meinung über das Tutorial im Kommentarbereich unten mit. Lassen Sie auch Ihre Mitmenschen über Ihre Social-Media-Plattform davon wissen.
Mehr lesen!
