# Dynamische Unterkategorien

Das Element der dynamischen Unterkategorien im CMS Bundle ist eine leistungsstarke Funktion, die es dir ermöglicht, Unterkategorien der aktuellen Kategorie automatisch in deinem Shop aufzulisten. Die Darstellung kann sowohl im Grid-Format als auch als Slider dargestellt werden und trägt dazu bei, die Navigation und Benutzererfahrung zu verbessern.

{% hint style="success" %}
**Spare wertvolle Zeit und Ressourcen**

Dieses Element kann Kategorieübergreifend genutzt werden. Somit hast du die Möglichkeit, es bspw. im generellen Kategorielisting zu positionieren. Somit brauchst du nur eine Erlebniswelt für alle deine Kategorien anzulegen und es werden immer die nachfolgenden Unterkategorien als Strukturelemente dargestellt.
{% endhint %}

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2F44c7g6wWVkbITX3SUbFP%2FBildschirmfoto%202024-10-05%20um%2019.48.05.png?alt=media&#x26;token=27e3dcdd-4a9a-4476-9b08-a195f9643ece" alt=""><figcaption></figcaption></figure>

### Beispiel

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FEGL5IYbpN8iWvFGZgQ1q%2FBildschirmfoto%202024-10-05%20um%2020.59.09.png?alt=media&#x26;token=44880f7b-50b5-4066-8a60-19bb0bfd0ef4" alt=""><figcaption><p>Beispiel als Grid ohne Bild und ohne Button</p></figcaption></figure>

### Grundeinstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FR7sIvdRcdiTuiOaxyPPG%2FBildschirmfoto%202024-10-05%20um%2020.12.37.png?alt=media&#x26;token=1890ffca-5930-4a8d-ae19-d4fac55c70e0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="303">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Darstellung (1)</td><td>Hier kannst du den Darstellungstypen wählen. Zur Auswahl stehen <strong>Kacheln / Grid / Slider</strong></td></tr><tr><td>Kategorie Ebenen (2)</td><td>Hier definierst du, wie viele Unterkategorien der Unterkategorien dargestellt werden sollen.</td></tr></tbody></table>

### Layout - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FKXAuiCyef1t0auFoW2y5%2FBildschirmfoto%202024-10-05%20um%2020.24.39.png?alt=media&#x26;token=484cf3cc-ae13-4978-b53a-94e820e05b73" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="303">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Kategoriebeschreibung (1)</td><td>Zusätzlich zu den Unterkategorien kannst du auch einen Auszug der entsprechenden Beschreibung / Teaser darstellen.</td></tr><tr><td>Button anzeigen (2)</td><td>Die einzelnen Kategorien sind jeweils über die Titel verlinkt, der Button ist optional.</td></tr><tr><td>Kategoriebilder aktivieren (3)</td><td>Wenn der Kategorie jeweils ein Bild zugewiesen ist, kann dieses ebenfalls ausgegeben werden.</td></tr><tr><td>Passform der Kategoriebilder (4)</td><td>Hier hast du die Möglichkeit, zwischen <strong>Cover</strong> und <strong>Beinhalten</strong> zu wählen.</td></tr><tr><td>Höhe der Kategoriebilder (5)</td><td>Für ein einheitliches Layout wird die Höhe der Bilder festgesetzt.</td></tr><tr><td>Button Einstellungen (6)</td><td><a data-mention href="../konfigurationsbausteine/button">button</a></td></tr></tbody></table>

***

### Farbeinstellungen&#x20;

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FYAFTkdB2PoZoflGvkmz1%2FBildschirmfoto%202024-10-05%20um%2020.32.17.png?alt=media&#x26;token=9b7c4616-7562-4ffd-a0ab-e613c185b275" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Bootstrap Variablen**

Die Standardwerte bestehen aus Variablen, die sich je nach Theme in der Storefront anders darstellen. Du kannst diese Werte nutzen, oder deine eigenen Werte setzen. \
\
Die Variable **var(--bs-body-bg)** ist beispielsweise die generelle Hintergrundfarbe des Shops, die im Theme eingestellt ist.
{% endhint %}

### Responsive - Einstellungen

{% content-ref url="../konfigurationsbausteine/elemente-pro-reihe" %}
[elemente-pro-reihe](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/elemente-pro-reihe)
{% endcontent-ref %}

### SEO - Einstellungen

{% content-ref url="../konfigurationsbausteine/seo" %}
[seo](https://docs.rh-webdesign.com/cms-bundle/elemente/konfigurationsbausteine/seo)
{% endcontent-ref %}