> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/kategorie-erlebniswelten-der-demoshops-nachbauen.md).
# Kategorie-Erlebniswelten der Demoshops nachbauen
Diese Anleitung ist in 4 Abschnitte unterteilt, diese entsprechen den Kategorien in unseren Demoshops: [Höhenluft & Abenteuer](#hoehenluft), [Kochlust & Provence](#kochlust) und [Handwerk & Tradition](#handwerk).
## Höhenluft & Abenteuer
### Element "Banner mit Text"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
* Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein.
#### Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
* **Sektionsname**: Teaser
* **CSS-Klassen**: `twt-custom-cms-element-overlay-primary twt-mt-n2`
* **Größenmodus**: Volle Breite
* **Hintergrundbild**: Hinterlege dein gewünschtes Motiv mit einer Breite von mind. 1920px
* **Bildmodus**: Füllen
> **Tipp**: Je nach Theme kannst du die CSS-Klasse "twt-custom-cms-element-overlay-primary" druch "twt-custom-cms-element-overlay-secondary" in der Sektion ersetzen.
{% hint style="info" %}
**Hinweis**: Die Textfarbe wird mit der SCSS-Funktion [color-contrast](https://getbootstrap.com/docs/5.2/helpers/color-background/) automatisch anhand der Hintergrundfarbe generiert. Ist das Ergebnis nicht ideal, ändere die Textfarbe einfach manuell.
{% endhint %}
{% hint style="info" %}
**Hinweis**: Weitere ThemeWare® CSS-Klassen findest du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}
#### Schritt 1.2: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* **Block-Name**: Kategorie-Text
* **CSS-Klassen**: `container h1`
* **Oberer Abstand**: 50px
* **Unterer Abstand**: 0px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld
* Wähle im Dropdown die Option "**category.name**" aus
#### Schritt 1.4: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* **Block-Name**: Kategorie-Beschreibung
* **CSS-Klassen**: `container h4`
* **Oberer Abstand**: 0px
* **Unterer Abstand**: 100px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.5: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld
* Wähle im Dropdown die Option "**category.description**" aus
#### Schritt 1.6: Einstellungen der Sektion
Um das Listing jetzt etwas über den Banner zu verschieben konfiguriere nun die Sektion mit dem Listing-Element.
* **CSS-Klassen**: `twt-mt-n9 position-relative`
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
### Element "Highlights-Slider"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
* Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein.
#### Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
* **Sektionsname**: Highlights-Slider
* **CSS-Klassen**: `twt-mt-n7 twt-pt-9 bg-primary`
* **Größenmodus**: Zentrierter Inhalt
> **Tipp**: Je nach Theme kannst du die CSS-Klasse "bg-primary" druch "bg-secondary" in der Sektion ersetzen.
#### Schritt 1.2: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
* **Block-Name**: Überschrift
* **Hintergrundfarbe**: transparent oder rgba(0, 0, 0, 0)
* **CSS-Klassen**: `container twt-cms-block-reset`
* **Oberer Abstand**: 20px
* **Unterer Abstand**: 20px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Füge über den Text-Editor deine gewünschte Überschrift (z.B. "Aktuelle Highlights") hinzu.
* Wähle eine zentrierte Textausrichtung
#### Schritt 1.4: Block anlegen
* Wähle als Block-Kategorie "**Commerce**" und füge dann den Block mit dem Namen "**Produkt-Slider**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
* **Block-Name**: Produkt-Slider
* **Hintergrundfarbe**: transparent oder rgba(0, 0, 0, 0)
* **CSS-Klasse**: `twt-cms-block-reset`
* **Oberer Abstand**: 10px
* **Unterer Abstand**: 50px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.5: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* **Produkt-Zuweisung**: Manuell
* **Produkte**: Selektiere hier die gewünschten Produkte
### Element "SEO-Text"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
* Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein.
#### Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
* **Sektionsname**: SEO-Text
* **Größenmodus**: Zentrierter Inhalt
* **Hintergrundfarbe**: #fff
#### Schritt 1.2: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* **Block-Name**: SEO-Text
* **Hintergrundfarbe**: #fff
* **CSS-Klasse**: `twt-cms-block-reset`
* **Oberer Abstand**: 50px
* **Unterer Abstand**: 50px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
## Kochlust & Provence
### Element "Headline über Sidebar-Navigation"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
#### Schritt 1.1: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur bestehenden Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* Allgemein
* **Block-Name**: Headline
* Layout (Bereich unten aufklappen)
* **CSS-Klassen**: `twt-cms-element-sidebar-headline twt-mt-2 twt-mb-n2`
* **Oberer Abstand**: 0px
* **Unterer Abstand**: 0px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun jedes einzelne Element in diesem Block.
* Füge über den Text-Editor den Text Navigation hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
### Element "SEO-Text"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
#### Schritt 1.1: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur bestehenden Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* Allgemein
* **Block-Name**: SEO-Text
* **Hintergrundfarbe**: #fff
* Layout (Bereich unten aufklappen)
* **CSS-Klassen**: `container`
* **Oberer Abstand**: 30px
* **Unterer Abstand**: 30px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
## Handwerk & Tradition
### Element "Kategorie Text/Bild"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
#### Schritt 1.1: Block anlegen
* Wähle als Block-Kategorie "**Text & Bild**" und füge dann den Block mit dem Namen "**Zwei Spalten, zentriertes Bild & Text**" per Drag & Drop zur bestehenden Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* Allgemein
* **Block-Name**: Kategorie-Text
* Layout (Bereich unten aufklappen)
* **Oberer Abstand**: 20px
* **Unterer Abstand**: 20px
* **Linker Abstand**: 0px
* **Rechter Abstand**: 0px
#### Schritt 1.2: Element(e) des Blocks konfigurieren
Konfiguriere nun jedes einzelne Element in diesem Block.
* Element links, Bild
* Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld
* Wähle im Dropdown die Option "**category.media**" aus
* **Anzeigemodus**: Füllen
* **Minimale Höhe**: 190px
* Element rechts, Text
* Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld
* Wähle im Dropdown die Option "**category.description**" aus
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
### Element "SEO-Text"
#### Schritt 1: Erlebniswelt bearbeiten
* Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
* Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
* Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein.
#### Schritt 1.1: Einstellungen der Sektion
Konfiguriere nun die neue Sektion für das Banner-Element.
* **Sektionsname**: SEO-Text
* **Größenmodus**: Zentrierter Inhalt
#### Schritt 1.2: Block anlegen
* Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu.
* Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
* **Block-Name**: SEO-Text
#### Schritt 1.3: Element(e) des Blocks konfigurieren
Konfiguriere nun das Element in diesem Block.
* Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
\[Tags: Nachbau]