> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/cms-erweiterungen/cms-elemente/produktseite/galerie-grid.md).

# Galerie (Grid)

{% hint style="info" %}
**Hinweis**: Dieses Element sowie dieser Artikel sind in Arbeit.
{% endhint %}

Das **ThemeWare® "Galerie (Grid)"** ist eine Variante der "Galerie" von Shopware. In diesem Element werden die Produktbilder in einem Grid oder untereinander (als Scroller) darstellt.

<figure><img src="/files/Zp5UyOUk9UmYtTdcKEkC" alt=""><figcaption><p>ThemeWare® CMS-Erweiterung "Galerie (Grid)"</p></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Dieses CMS-Element hat keinen individuellen CMS-Block. Tausche einfach ein "Galerie" Element in einem bestehenden CMS-Block aus.
{% endhint %}

{% hint style="success" %}
**Beta**: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein [Feedback](https://service.themeware.design/verbesserungsvorschlag).
{% endhint %}

{% hint style="warning" %}
**Wichtig**: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
{% endhint %}

***

## Element hinzufügen (ersetzen des „Galerie“-Elements)

Du kannst das ThemeWare® "Galerie (Grid)" verwenden, indem du eine vorhandene "Galerie" ersetzt:

1. Fahre mit der Maus über den CMS-Block (1)
2. Klicke auf auf das ![](/files/5ZVJpN4nqquzK3gXOAo6) "Austauschen"-Icon (2)
3. Es öffnet sich das Pop-up "Element austauschen"
4. Wähle hier das gewünschte CMS-Element aus (3)

<div><figure><img src="/files/sNKoDmxYP1MEA1tbfahH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GGoolggevS0FqjkWSQrF" alt="" width="521"><figcaption></figcaption></figure></div>

***

## Element konfigurieren

Das ThemeWare® "Galerie (Grid)" kannst du wie folgt konfigurieren:

1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
2. Fahre mit der Maus über das entsprechende CMS-Element
3. Klicke auf das ![](/files/5URCkVnh55QbNfBAp6e7) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
4. Es öffnet sich das Pop-up "Element-Einstellungen"
5. Nehme die gewünschten Änderungen vor
6. Speichere deine Änderungen

Du hast das CMS-Element nun konfiguriert.

<figure><img src="/files/vFkeof7GFZeSHfQou296" alt=""><figcaption><p>ThemeWare® "Galerie (Grid)" konfigurieren</p></figcaption></figure>

***

## Konfiguration

Die Konfiguration vom "Galerie (Grid)" ist recht selbsterklärend. Die **Galerie-Bilder** sind ein Pflichtfeld. Mehr brauchst du genau genommen nicht konfigurieren.

### Allgemein

Im Tab "Allgemein" konfigurierst du die Bilder und die Darstellung der Galerie.

> **Galerie**
>
> Im Abschnitt "Galerie" wählst du die **Bilder** aus, die in der Galerie angezeigt werden sollen. Dies ist ein Pflichtfeld. Zudem kannst du den **Anzeigemodus**, die **Minimale Höhe** (Standard: `430px`, für den mobilen Galerie-Slider), die **Minimale Höhe (>=992px)** (für das Grid ab Desktop) und die **Vertikale Ausrichtung** konfigurieren.

### Layout

Im Tab "Layout" konfigurierst du das Grid-Layout und die Galerie-Navigation.

> **Allgemein**
>
> Im Abschnitt "Allgemein" kannst du den **Layout-Typ** auswählen. Es stehen drei Layouts zur Verfügung: "Bilder untereinander", "Bilder untereinander (1x 100%, rest 50%)" und "Bilder untereinander (alle 50%)".
>
> **Galerie-Slider**
>
> Im Abschnitt "Galerie-Slider" kannst du die **Pfeil-Navigation**, die **Punkt-Navigation** und die **Vorschau-Navigation** des mobilen Galerie-Sliders konfigurieren.
>
> **Galerie-Grid (>=992px)**
>
> Im Abschnitt "Galerie-Grid" kannst du die **Vorschau-Navigation** des Galerie-Grids (ab Desktop) ein- oder ausblenden. Zudem kannst du die **Vollbild-Galerie** aktivieren.

***

## Beispiele

<figure><img src="/files/Zp5UyOUk9UmYtTdcKEkC" alt=""><figcaption><p>ThemeWare® CMS-Erweiterung "Galerie (Grid)"</p></figcaption></figure>

<figure><img src="/files/58MTvq9trq3jh7FgwhA5" alt=""><figcaption><p>ThemeWare® CMS-Erweiterung "Galerie (Grid)" (als Galerie-Scroller)</p></figcaption></figure>