v6.5.0
SucheService PortalHandbuchSonstigesSupport anfordern
Search
⌃K
Links
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.

Höhenluft & Abenteuer

Element "Banner mit Text"

Standard Text-Element als Overlay-Banner

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.
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.

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

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

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

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

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

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

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]
Previous
Erlebniswelten mit CSS-Animationen verschönern
Next
Markiere CMS-Blöcke als Favoriten um sie schneller zu finden
Last modified 2mo ago