# Trenner

> Feature der Pro Version

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FiB6dnHBUCKn4VhJywLa0%2Fdocs-de-shopping-experiences-elements-divider.png?alt=media&#x26;token=006a9cd6-7405-4986-8124-eb007c6be603" alt=""><figcaption></figcaption></figure>

Das **Divider-Element (1)** befindet sich in der Liste der auswählbaren Elemente des Themes. Mit diesem Element können verschiedene Elemente / Blöcke voneinander getrennt werden. Der Teiler kann in den Einstellungen verschiedene Stile haben.

## Einstellungen

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FcS99jjjIjl8l6j65oDsS%2Fdocs-de-config-shopping-experiences-elements-divider-content.png?alt=media&#x26;token=b0a88839-1ace-4475-bb75-7a7cb1572fad" alt=""><figcaption></figcaption></figure>

Im Tab **Inhalt (1)** kann das grundlegende **Trenner Aussehen (2)** definiert und ein optionaler **Trenner Text (3)** festgelegt werden. Über die Einstellung **H-Tag (SEO) (4)** lässt sich der Text auch optional als Überschrift auszeichnen, wodurch sich auch semantisch suchmaschinenoptimiert Zwischenüberschriften setzen lassen.&#x20;

***

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FiVJwppk8e56pV9zwnrpJ%2Fdocs-de-config-shopping-experiences-elements-divider-settings.png?alt=media&#x26;token=eaf6d016-ddcb-48ae-bba5-7311be9db2fa" alt=""><figcaption></figcaption></figure>

Der Reiter „Einstellungen“ enthält die erweiterten Einstellungen für den **Trenner (1)** und die **Typografie (7)** des optionalen Textes.&#x20;

**Trenner:** \
Definiere die **Farbe (2)**, **Weite (3)** und **Höhe (4)** des Trenners. Breite und Höhe können in beliebigen Einheiten angegeben werden. Die **Vertikale Ausrichtung (5)** kommt zum Tragen, wenn der Separator gegenüber anderen, höheren Elementen in einem mehrspaltigen Block platziert wird. Die **Horizontale Ausrichtung (6)** kommt zum Tragen, wenn der Trenner geringere Breite als 100% hat.&#x20;

**Typografie:** \
Diese Einstellungen sind sichtbar, wenn im Reiter **Inhalt** ein **Trenner Text (optional)** vorhanden ist. Hier können die **Farbe (8)** und die globale **Schriftart (9)** definiert werden. Die **Text Ausrichtung (10)** definiert, an welcher Position der Text auf dem Trenner angezeigt wird. Du kannst den Text links von der Trennlinie, zwischen den Trennlinien oder rechts von der Trennlinie platzieren. Lege  die **Schriftgröße (11)** und die **Schriftstärke (12)** des Trenner Textes fest.