Zenit Design - Themes
Theme kaufenThemesSupport
DE
DE
  • Erste Schritte
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tipps
    • Dashboard
    • Theme Konfiguration
    • Lexikon
    • Mehrere Verkaufskanäle
  • Vorlagen
  • Support
    • Error auslesen
    • Ursache finden
  • 🎨Styling
    • Allgemein
      • Grundlayout
      • Produktbilder
      • Produkt Layout-Typ
      • Globales Hintergrundbild
      • Preloader
      • Akzentlinie
      • Scroll Animation
    • Typografie & Farben
      • Theme-Farben
      • Status-Ausgaben
      • Schriftarten
      • Typografie
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Suche
      • Top Bar
      • Shop Navigation
      • Main Navigation
      • Flyout Navigation
      • Dropdown Navigation
    • Footer
      • Footer
      • Inhalte
      • Spalten
      • Spalten Styling
      • Unterer Footer
    • Elemente
      • Sidebar
      • Sidebar Navigation
      • Formulare
      • Bild- & Galerie-Slider
      • Produkt Slider
      • Kategorie Listing Slider
      • Paginierung
      • Breadcrumbs
      • Cookie Banner
      • Offcanvas
      • Backdrop
      • Scroll-Up Button
    • Kategorie
      • Kategorie-Header
      • Hero Sektion
      • Filter
      • Listing Actions
      • Produkt-Boxen
      • Quickview
    • Produkt
      • Details
      • Galerie
      • Beschreibung
      • Beschreibung Navigation
      • Beschreibung Inhalt
    • Kasse
      • Warenkorb
      • Kasse
  • ⚙️Einstellungen
    • Grundeinstellungen
    • Zusatzfeld Zuweisung
      • Zusatzfelder für Details auf der Produktseite
      • Zusatzfelder für Produkt-Datenblätter
    • Social Media Icons
    • Marketing Text Slider
    • Custom Tab Detailseite
    • Custom Spalten (Footer)
    • Eigener Code
  • 📂Inhalte
    • Erlebniswelten
      • Sektionen
      • Blöcke
        • Elemente
          • Bild Text Slider
          • Suche Banner
          • Text Banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Trenner
          • Kategorie-Navigation
          • Footer-Navigation
          • Platzhalter
        • Commerce
          • Galerie und Buybox mit Produktname & Hersteller-Logo
          • Galerie und Buybox mit Produktname & Hersteller-Logo & Beschreibung
          • Galerie und Buybox mit Beschreibung
          • Galerie mit Beschreibung und Buybox mit Produktname & Hersteller-Logo
        • Kategorie
          • Kategorie Listing
        • Spalten
        • Layouts
      • Block Innen-Abstände
      • Block Außen-Abstände
      • Animation
      • Erlebniswelt Beispiel
      • CSS-Variablen
    • Kategorieseite
      • Hero Sektion
      • Kategorie Header
      • CSS-Klassen
      • Kategorie Labels
      • Kategorie Icons
      • Produkte pro Zeile
    • Produktseite
      • Layouts
      • Standardlayout
      • Galerie Modus
      • Custom Tabs
      • Videos Tab
      • Datenblätter
    • Produktbilder
      • Bildgrößen
      • Bildformat
      • Dateiformat
      • Produktbilder Hintergrund
    • Layout-Typ
    • Responsive Tabellen
    • Mehrsprachigkeit
  • 🎓Tutorials
    • Demodaten importieren
    • Demo-Themekonfiguration importieren
    • Child-Theme duplizieren
    • Individuelle Anpassungen
    • Konfiguration export/import
    • Zusatzfelder export/import
    • Schriften lokal einbinden
    • Schriften lokal einbinden mit Child-Theme
  • 🛠️Update Guides
    • Child-Theme Update
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Shopware 6.4.8.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Übersicht
    • Barrierefreiheit
      • Typografie
      • Farben
      • Bilder
      • Video
      • Checker-Tools und Ressourcen
    • Allgemein
      • Copyright-Hinweis
      • Merkzettel
    • Produkt Layout
    • Lizenzen
      • Testversion vs Vollversion
      • Lizenzdomain ändern
    • Ableitungen
      • Child-Theme
      • Theme-Duplikat
      • Child-Theme vs Theme-Duplikat
    • Updates
      • Theme wird als inkompatibel angezeigt
      • Update wird nicht angezeigt
    • Fehler
      • Child-Theme kann nicht zugewiesen werden
      • Textbausteine zeigen technischen Namen
      • Theme Speichern Fehler
      • SVG Logo wird nicht angezeigt
      • Suche / Input mobile Zoom
      • Text ist nicht sichtbar / lesbar
Powered by GitBook
On this page
  • Konfiguration pro Kategorie
  • 1. Einstellungen in der Kategorie
  • 2. Ein Bild hinterlegen
  • Konfiguration für alle Kategorien
  • Erlebniswelt konfigurieren
  • Fallback: Hintergrundbild der Sektion einrichten

Was this helpful?

  1. Inhalte
  2. Kategorieseite

Hero Sektion

Diese Einstellung befindet sich unter: Kataloge > Kategorien > [Kategorie auswählen]

Last updated 1 year ago

Was this helpful?

In unseren Themes kannst Du auf Kategorie-Seiten die Kategorie-Bilder in der ersten Sektion einer Erlebniswelt darstellen - automatisiert. Dabei wird das in der Kategorie hinterlegte Bild automatisch in der ersten Sektion der Erlebniswelt als Hintergrundbild eingesetzt. Darüber können dan CMS-Elemente gesetzt werden.

So kannst Du mit einer Erlebniswelt automatisch für jede Kategorie das passende Bild ausspielen, ohne für jede Kategorie einzelne Erlebniswelten anlegen zu müssen.

Konfiguration pro Kategorie

1. Einstellungen in der Kategorie

Möchtest Du diesen Effekt für jede Kategorie einzeln steuern, haben wir zusätzliche Felder in der Kategorie implementiert:

  • Erste Sektion des Kategorie Layouts als "Hero Sektion" verwenden (1) [ Vererbt | Ja | Nein ]

  • Text Kontrast (2) [ Vererbt | Heller Text | Dunkler Text ]

  • Hintergrundfarbe (3) [ Farbfeld ]

  • Sichtbarkeit (4) [ Prozentwert ] - Sichtbarkeit des Bildes auf der Hintergrundfarbe in Prozent

  • Position (6) [ Auswahl ] - Ausrichtung des Bildes im Container, in welchem es sich ausdehnt.

  • Bildmodus (7) [ Auswahl ]

    • Auto: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Ist die Breite des Bildes geringer als die Breite des Elements wird das Bild nicht auf die Breite des Elements gestreckt.

    • Füllen: Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.

    • Strecken: Das Bild wird komplett angezeigt. Die Höhe des Elements ist dynamisch und passt sich automatisch dem Seitenverhältnis des Bildes an. Im Gegensatz zum Modus Standard wird das Bild auf die volle Verfügbare Breite des Elementes gestreckt.

2. Ein Bild hinterlegen

Klar, die Kategorie benötigt ein hinterlegtes Bild, welches Du direkt in der Kategorie hinterlegen kannst.

Wird kein Bild in der Kategorie hinterlegt, greift das Hintergrundbild aus der Erlebniswelt-Sektion! Die Einstellung dazu findest Du weiter untern in der Doku.

Konfiguration für alle Kategorien

Über die Theme-Konfiguration können die Einstellungen zur Darstellung des Kategorie-Bildes auch global für alle Kategorien gesetzt und partiell in der jeweiligen Kategorie überschrieben werden.

Die Zusatzfelder in der Kategorie erben im Standard diese Einstellung und können diese auch wieder überschreiben, sollte die in der Theme-Konfiguration getroffene Einstellung für die jeweilige Kategorie optimiert werden. Damit ist es auch möglich, einzelne Kategorien von diesen Einstellungen auszuschließen.

Willst Du auf allen Kategorien bis auf wenige Ausnahmen ein Kategorie-Bild darstellen, musst Du dann nicht in jeder Kategorie Deine Einstellungen wiederholen.

  • Kategoriebild anzeigen [ Ja | Nein ]

  • Text Kontrast [ Heller Text | Dunkler Text ]

  • Hintergrundfarbe - wird in der Erlebniswelt gesetzt

  • Sichtbarkeit [ Prozentwert ] - Sichtbarkeit des Bildes auf der Hintergrundfarbe in Prozent

  • Position [ Auswahl ] - Ausrichtung des Bildes im Container, in welchem es sich ausdehnt.

Danach musst Du nur noch eine Erlebniswelt erstellen und für die Anzeige des Bildes vorbereiten. Wie das geht, zeigen wir Dir im nachfolgenden Abschnitt.

Erlebniswelt konfigurieren

Damit das Kategoriebild nicht unkontrolliert in der ersten Sektion irgendeiner Erlebniswelt angezeigt wird, benötigst Du noch eine Erlebniswelt, die für die Anzeige des Kategorie-Bildes vorbereitet ist.

Wechsel dazu in den Bereich der Erlebniswelten unter Inhalte > Erlebniswelten. Da es sich hierbei um Erlebniswelten für die Kategorien handelt, wähle den Reiter Kategorieseiten aus.

Im Standard von Shopware 6 befinden sich hier zwei Standard Kategorie-Layouts, welche sich nicht bearbeiten lassen. Diese müssen über das Kontextmenü (1) zunächst dupliziert (2) werden. Das Duplikat kann dann bearbeitet werden:

Erstelle eine neue Sektion (1) für das Kategorie-Bild. In der ersten Sektion kannst Du dann beispielsweise den Bild-Text Block (1) und unsere Breadcrumbs-Element* (3) platzieren. Das Breadcrumbs-Element ermöglicht es Dir die Breadcrumbs auf dem Kategorie-Bild zu platzieren. Die unnötigen Elemente (4) in der zweiten Sektion kannst Du entfernen.

Die Erlebniswelt besteht in diesem Beispiel aus zwei Layout Sektionen. In der ersten Sektion wird das Kategorie-Bild aus der Kategorie dargestellt.

Fallback: Hintergrundbild der Sektion einrichten

Du kannst in der Erlebniswelt Sektion ein Fallback-Bild (2) und eine Fallback-Farbe (1) einbinden, welche dargestellt werden, wenn der Kategorie kein Kategorie-Bild und / oder eine Hintergrundfarbe zugewiesen wurde.

___________________

* Das Breadcrumb-Element ist aus technischen Gründen nicht in der Cloud-Variante von Shopware 6 verfügbar.

Fixieren (5) [ Vererbt | Fixiert | Mitscrollend ] - Fixierte Bilder strecken sich auf den gesamten Viewport und bleiben beim Herunterscrollen der Seite stehen.

Danach musst Du nur noch eine Erlebniswelt erstellen und für die Anzeige des Bildes vorbereiten. Wie das geht, zeigen wir Dir im nachfolgenden Abschnitt .

Fixieren [ Fixiert | Mitscrollend ] - Fixierte Bilder strecken sich auf den gesamten Viewport und bleiben beim Herunterscrollen der Seite stehen.

Durch die Datenzuordnung kannst Du automatisch die Kategorie-Beschreibung in Erlebeniswelten-Blöcken zuordnen.

📂
Mehr Informationen
"Erlebniswelt konfigurieren"
Mehr Informationen
Mehr erfahren
Erlebniswelten - Kategorieseiten Standard Layouts