> 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-bloecke/block-konfiguration.md).

# Block-Konfiguration

ThemeWare® erweitert ausgewählte CMS-Blöcke um eine **Block-Konfiguration** in der CMS-Sidebar (2). Die Block-Konfiguration ermöglicht es dir, das responsive Verhalten deiner CMS-Blöcke komfortabel zu steuern - ohne CSS-Klassen manuell eingeben zu müssen.

<figure><img src="/files/evxZwTEr3BkV2KfVTzcZ" alt=""><figcaption></figcaption></figure>

Die Konfiguration gliedert sich in zwei Bereiche: das **Responsive Block-Layout** (3 – Spaltenabstand und Ausrichtung) und das **Responsive Spalten-Layout** (4 – Spaltenanordnung, Sichtbarkeit und Experten-Modus).

{% hint style="success" %}
Dies ist die erste Iteration dieser Funktion. Wir haben bereits weitere Ideen für zusätzliche Konfigurationen, möchten uns zunächst aber auf dein Feedback zur aktuellen Umsetzung konzentrieren.

**Tipp:** Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das **ThemeWare Service Portal:**

* [Verbesserungsvorschlag (Feature-Request)](https://service.themeware.design/verbesserungsvorschlag)
  {% endhint %}

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

***

## Responsive Block-Layout

Im Bereich "Responsive Block-Layout" (3) konfigurierst du den Spaltenabstand (Gutter) und die Ausrichtung der Spalten innerhalb des Blocks.

> **Spaltenabstand (Gutter)**
>
> Legt den horizontalen und vertikalen Abstand zwischen den Spalten fest. Du kannst aus verschiedenen vordefinierten Abstandswerten oder "Standard" wählen.
>
> **Ausrichtung**
>
> Wähle die horizontale Ausrichtung der Spalten innerhalb der Zeile:
>
> * **Standard (links)** - Standardausrichtung
> * **Zentriert** - Spalten werden zentriert
> * **Rechts** - Spalten werden rechtsbündig ausgerichtet
> * **Gleichverteilt (between)** - Gleichmäßiger Abstand zwischen den Spalten
> * **Gleichverteilt (around)** - Gleichmäßiger Abstand um die Spalten
> * **Gleichverteilt (evenly)** - Vollständig gleichmäßig verteilter Abstand

### Erweiterte Konfiguration

Mit dem Schalter "Erweiterte Konfiguration" kannst du Gutter und Ausrichtung für jeden Viewport einzeln konfigurieren. Folgende Viewports stehen zur Verfügung:

* **Desktop Groß** (≥1200px)
* **Desktop** (≥992px)
* **Tablet** (≥768px)
* **Mobil Querformat** (≥576px)
* **Mobil Hochformat** (<576px)

{% hint style="info" %}
**Hinweis**: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
{% endhint %}

***

## Responsive Spalten-Layout

Im Bereich "Responsive Spalten-Layout"(4) konfigurierst du die Spaltenanordnung und Sichtbarkeit der einzelnen Spalten.

> **Spaltenanordnung**
>
> Legt fest, wie viele Spalten in einem bestimmten Viewport nebeneinander statt untereinander dargestellt werden. So kannst du z.B. auf einem Tablet drei Spalten auf zwei reduzieren.
>
> **Sichtbarkeit**
>
> Steuert, ob eine Spalte in einem bestimmten Viewport sichtbar oder ausgeblendet ist.
>
> **Asymmetrisch ab**
>
> Nur verfügbar bei asymmetrischen Spalten-Blöcken (z.B. Zwei Spalten 3-9, Drei Spalten 3-3-6). Legt fest, ab welchem Viewport die Spalten in der vordefinierten asymmetrischen Aufteilung des Blocks dargestellt werden. Unterhalb dieses Viewports werden die Spalten gleichmäßig oder untereinander angeordnet.
>
> **Experten-Modus**
>
> Ermöglicht die manuelle Eingabe von CSS-Klassen pro Spalte (z.B. `col-12 col-md-6`). Der Experten-Modus überschreibt die Spaltenanordnung und die Sichtbarkeits-Konfiguration.

### Erweiterte Konfiguration

Mit dem Schalter "Erweiterte Konfiguration" kannst du Spaltenanordnung und Sichtbarkeit für jeden Viewport einzeln festlegen.

{% hint style="info" %}
**Hinweis**: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
{% endhint %}

***

## Unterstützte Blöcke

Nicht alle CMS-Blöcke unterstützen alle Bereiche der Block-Konfiguration. Die folgende Übersicht zeigt, welche Block-Typen welche Konfigurationsbereiche bieten:

### Spalten-Blöcke (symmetrisch)

Symmetrische Spalten-Blöcke wie "Zwei Spalten", "Drei Spalten", "Vier Spalten" und "Sechs Spalten" unterstützen:

* Responsive Block-Layout (Gutter + Ausrichtung)
* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit)

### Asymmetrische Spalten-Blöcke

Asymmetrische Spalten-Blöcke wie "Zwei Spalten 3-9", "Zwei Spalten 4-8", "Drei Spalten 3-3-6" usw. unterstützen:

* Responsive Block-Layout (Gutter + Ausrichtung)
* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit + Asymmetrisch ab)

### Grid-Blöcke

Grid-Blöcke wie "Grid One", "Grid Two", "Grid Modern" usw. unterstützen:

* Responsive Block-Layout (nur Gutter, keine Ausrichtung)

### Eine Spalte

Der Block "Eine Spalte" unterstützt:

* Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit, kein Gutter, keine Ausrichtung)

{% hint style="success" %}
**Tipp:** Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das **ThemeWare Service Portal:**

* [Verbesserungsvorschlag (Feature-Request)](https://service.themeware.design/verbesserungsvorschlag)
  {% endhint %}