In dieser Anleitung erfährst du, wie du die Kategorie-Erlebniswelten der ThemeWare® Demoshops nachbauen kannst.
Last updated
© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH
Diese Anleitung ist in 4 Abschnitte unterteilt, diese entsprechen den Kategorien in unseren Demoshops: Höhenluft & Abenteuer, Kochlust & Provence und Handwerk & Tradition.
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.
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 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
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 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
Konfiguriere nun das Element in diesem Block.
Produkt-Zuweisung: Manuell
Produkte: Selektiere hier die gewünschten Produkte
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.
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.
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.
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.
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]