# 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" ![Standard Text-Element als Overlay-Banner](/files/mpmDOvPGY9HXhvYT8omY) #### 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" ![Highlights-Slider](/files/GIxcbOkAbni5vDDSRg0F) #### 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" ![CMS-Element mit individuellem SEO-Text](/files/Mho8xL02V7a78orUrUwL) #### 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 ![Headline über Sidebar-Navigation](/files/VDisBXlwIrtOFmfKSbzj) ### 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" ![CMS-Element mit individuellem SEO-Text](/files/PS21KB1mKX3gweJqdlfx) #### 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 ![CMS-Element mit Kategorie Text und Bild](/files/waoz8dfwDbQemYQC4h0S) ### 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" ![CMS-Element mit individuellem SEO-Text](/files/PS21KB1mKX3gweJqdlfx) #### 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] --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/kategorie-erlebniswelten-der-demoshops-nachbauen.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.