Comment on page
Kategorie-Erlebniswelten der Demoshops nachbauen
In dieser Anleitung erfährst du, wie du die Kategorie-Erlebniswelten der ThemeWare® Demoshops nachbauen kannst.
Diese Anleitung ist in 4 Abschnitte unterteilt, diese entsprechen den Kategorien in unseren Demoshops: Höhenluft & Abenteuer, Kochlust & Provence und Handwerk & Tradition.

Standard Text-Element als Overlay-Banner
- 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.
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.
Hinweis: Die Textfarbe wird mit der SCSS-Funktion color-contrast automatisch anhand der Hintergrundfarbe generiert. Ist das Ergebnis nicht ideal, ändere die Textfarbe einfach manuell.
Hinweis: Weitere ThemeWare® CSS-Klassen findest du im Artikel ThemeWare® CSS-Klassen für Erlebniswelten.
- 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
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
- 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
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
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.

Highlights-Slider
- 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.
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.
- 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 diefolgenden 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
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
- 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 diefolgenden 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
Konfiguriere nun das Element in diesem Block.
- Produkt-Zuweisung: Manuell
- Produkte: Selektiere hier die gewünschten Produkte

CMS-Element mit individuellem SEO-Text
- 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.
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: SEO-Text
- Größenmodus: Zentrierter Inhalt
- Hintergrundfarbe: #fff
- 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
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.

Headline über Sidebar-Navigation
- Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- 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
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.

CMS-Element mit individuellem SEO-Text
- Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- 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
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.

CMS-Element mit Kategorie Text und Bild
- Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
- Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
- 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
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.

CMS-Element mit individuellem SEO-Text
- 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.
Konfiguriere nun die neue Sektion für das Banner-Element.
- Sektionsname: SEO-Text
- Größenmodus: Zentrierter Inhalt
- 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
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]