Alle Seiten
Bereitgestellt von GitBook
1 von 65

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Hero-Slider (3x)

Der ThemeWare® CMS-Block "Hero-Slider (3x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

Der "Hero-Slider (3x)" bietet dir die Möglichkeit 3 Slides zu nutzen – nicht mehr und nicht weniger.

Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.


Verfügbare CMS-Elemente

  • Call-to-Action-Slide (Hero-Slider)


Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

Hero-Slider

Die ThemeWare® "Hero-Slider"-Blöcke sind CMS-Blöcke die mit den entsprechenden Slider CMS-Elementen befüllt werden müssen. Andere CMS-Elemente funktionieren nicht im Hero-Slider.

Die Slider-Blöcke haben daher spezielle CMS-Elemente.


Verfügbare "Hero-Slider"-Blöcke

  • Hero-Slider (2x)


Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

Hinweis: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® Allgemein" [Pro]


Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Du kannst diese Funktion über die Theme-Konfiguration aktivieren.


In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel () basiert, sind folgende CSS-Klassen besonders interessant:

Füge die CSS-Klasse carousel-fade dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.

Füge die CSS-Klasse carousel-dark dem Block hinzu, um Steuerelemente dunkler zu gestalten.

Für eine optimale Sichtbarkeit haben die Bedienelemente vom "Hero-Slider" einen Schlagschatten. Dies hilft besonders, wenn die Farbigkeit der Bilder im Slider stark variiert. Möchtest du diese Schlagschatten nicht, füge dem entsprechenden Block einfach die CSS-Klasse flat-controls hinzu.


Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

CMS-Blöcke

In diesem Bereich findest du alles über die ThemeWare® CMS-Blöcke welche du in den "Block-Kategorien" auswählen und deiner Erlebniswelt hinzufügen kannst.

Mit ThemeWare® erhältst du eine umfangreiche und wachsende Auswahl an CMS-Blöcken um deinen Shop zu individualisieren. Die ThemeWare® CMS-Blöcke sind ab Version 0.5.0 in der Pro-Edition und teilweise in der Cloud-Edition verfügbar.

Weitere CMS-Blöcke sind sowohl für die Pro-Edition als auch für die Cloud-Edition in Arbeit und folgen mit kommenden Updates. Sei gespannt!


  1. Klicke auf das Plus-Icon um einen CMS-Block auszuwählen.

Grid 'Two'

Grid 'Three' (swapped)

Grid 'Three'

ThemeWare® CMS-Block Grid 'Two'

Hinweis: Dieser Artikel ist in Arbeit.

Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

ThemeWare® CMS-Block Grid 'Three' (swapped)

Hinweis: Dieser Artikel ist in Arbeit.

Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

ThemeWare® CMS-Block Grid 'Three'

Hinweis: Dieser Artikel ist in Arbeit.

Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

  • Wähle im Dropdown "Block-Kategorie" den gewünschten CMS-Block aus.

  • Ziehe den CMS-Block per Drag'n'Drop in deine Erlebniswelt.

  • ThemeWare® CMS-Block hinzufügen

    In der ThemeWare® Pro-Edition haben die ThemeWare® CMS-Blöcke eigene Kategorien und sind nach dem folgenden Muster gegliedert:

    • ThemeWare® Allgemein

      • Enthält grundlegende Gestaltungsblöcke wir Slider, Teaser und Banner.

    • ThemeWare® Spalten

      • Enthält Spalten-Blöcke die beliebig befüllt werden können.

    • ThemeWare® Grids

      • Enthält Grid-Blöcke die mit Bildelementen befüllt werden können.

    • ThemeWare® Kategorieseite

      • Enthält CMS-Blöcke für Kategorieseiten.

    • ThemeWare® Produktseite

      • Enthält CMS-Blöcke für Produktseiten.

    • ThemeWare® Sidebar

      • Enthält CMS-Blöcke für die Sidebar.

    • ThemeWare® Verschiedenes

      • Enthält weitere seitenübergreifende CMS-Blöcke.

    ThemeWare® Pro-Edition

    In der ThemeWare® Cloud-Edition findest du die ThemeWare® CMS-Blöcke in den Standard-Kategorien von Shopware (siehe "Text & Bild").

    ThemeWare® Cloud-Edition

    Die CMS-Blöcke in Shopware 6 verfügen über verschiedene Konfigurationsfelder. Im Abschnitt "Layout" findest du beispielsweise die Möglichkeit "CSS-Klassen" zu ergänzen und das Padding des Blocks zu definieren.

    Block-Einstellungen

    In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren. ThemeWare® bietet dir eine Reihe von CSS-Klassen, die du in deinen Erlebniswelten nutzen kannst.

    Für alle CMS-Blöcke sind folgende CSS-Klassen interessant:

    Weitere Klassen findest du im Bereich "Anleitungen > Erlebniswelten" in der ThemeWare® Wissensdatenbank:


    Du kannst einen bestimmten CMS-Block individuell stylen, indem du ihm in den Block-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst.


    Du kannst die CMS-Elemente in den meisten CMS-Blöcken austauschen. Mehr dazu erfährst du im Bereich CMS-Elemente.


    Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Blöcken" findest du in der ThemeWare® Wissensdatenbank:

    ThemeWare® CMS-Blöcke

    Tipp: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Blöcken hast, sende uns gerne Verbesserungsvorschläge über unser Service Portal.

    ThemeWare® CMS-Block hinzufügen

    Pro-Edition

    Cloud-Edition

    Block-Einstellungen

    CSS-Klassen

    CMS-Block individuell stylen

    CMS-Element austauschen

    Weiterführende Informationen

    Text-Slide (Hero-Slider)
    Image-Slide (Hero-Slider)

    Demo

    Hero-Slider (3x)
    Hero-Slider (4x)
    Dokumentation
    "Hero-Slider" CMS-Block hinzufügen

    "Hero-Slider"-Block hinzufügen

    Autoplay und Barrierefreiheit

    Bedenken hinsichtlich der Barrierefreiheit: Das Aktivieren dieser Funktion kann dazu führen, dass Teile Deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in Deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit).

    Bitte beachte: Mit dem Aktivieren erkennst du dieses Risiko an und übernimmst die volle Verantwortung.

    CSS-Klassen

    Überblenden (Crossfade)

    Dunkle Bedienelemente (Controls)

    Flache Bedienelemente (Controls)

    Demos

    Vier Spalten

    Der ThemeWare® CMS-Block "Vier Spalten" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Vier Spalten" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Vier Spalten"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Zwei Spalten, 5-7

    Der ThemeWare® CMS-Block "Zwei Spalten, 5-7" (ca. 41.667% | ca. 58.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten, 5-7" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten, 5-7"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Zwei Spalten, 8-4

    Der ThemeWare® CMS-Block "Zwei Spalten, 8-4" (ca. 66.667% | ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten, 8-4" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten, 8-4"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Kategorie-Teaser

    Die ThemeWare® Kategorie-Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

    Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

    Hinweis: Mehr Informationen zu den ThemeWare® Kategorie-Teaser-Elementen findest du hier:


    Verfügbare Kategorie-Teaser-Blöcke

    • Kategorie-Teaser

    • Kategorie-Teaser (Advanced)

    • Kategorie-Teaser (Modern)


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Kategorie-Teaser-Blöcke findest du in der Rubrik "ThemeWare® Kategorie-Teaser" [Pro]

    Zwei Spalten, 3-9

    Der ThemeWare® CMS-Block "Zwei Spalten, 3-9" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten, 3-9" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten, 3-9"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'One' (getauscht)

    Der ThemeWare® CMS-Block "Grid 'One' (getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Grid 'One' (getauscht)"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Standard-Einstellungen

    • Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

    • Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.

    • Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. 640 px).

    • Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. 20px) einem Element zu addieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Block-Konfiguration

    ThemeWare® erweitert ausgewählte CMS-Blöcke um eine Block-Konfiguration in der CMS-Sidebar (2). Die Block-Konfiguration ermöglicht es dir, das responsive Verhalten deiner CMS-Blöcke komfortabel zu steuern - ohne CSS-Klassen manuell eingeben zu müssen.

    Die Konfiguration gliedert sich in zwei Bereiche: das Responsive Block-Layout (3 – Spaltenabstand und Ausrichtung) und das Responsive Spalten-Layout (4 – Spaltenanordnung, Sichtbarkeit und Experten-Modus).

    Dies ist die erste Iteration dieser Funktion. Wir haben bereits weitere Ideen für zusätzliche Konfigurationen, möchten uns zunächst aber auf dein Feedback zur aktuellen Umsetzung konzentrieren.

    Tipp: Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das ThemeWare Service Portal:

    Wichtig: Diese Funktion ist nur in der ThemeWare® Pro Edition verfügbar.


    Responsive Block-Layout

    Im Bereich "Responsive Block-Layout" (3) konfigurierst du den Spaltenabstand (Gutter) und die Ausrichtung der Spalten innerhalb des Blocks.

    Spaltenabstand (Gutter)

    Legt den horizontalen und vertikalen Abstand zwischen den Spalten fest. Du kannst aus verschiedenen vordefinierten Abstandswerten oder "Standard" wählen.

    Ausrichtung

    Wähle die horizontale Ausrichtung der Spalten innerhalb der Zeile:

    • Standard (links) - Standardausrichtung

    • Zentriert - Spalten werden zentriert

    • Rechts - Spalten werden rechtsbündig ausgerichtet

    Mit dem Schalter "Erweiterte Konfiguration" kannst du Gutter und Ausrichtung für jeden Viewport einzeln konfigurieren. Folgende Viewports stehen zur Verfügung:

    • Desktop Groß (≥1200px)

    • Desktop (≥992px)

    • Tablet (≥768px)


    Im Bereich "Responsive Spalten-Layout"(4) konfigurierst du die Spaltenanordnung und Sichtbarkeit der einzelnen Spalten.

    Spaltenanordnung

    Legt fest, wie viele Spalten in einem bestimmten Viewport nebeneinander statt untereinander dargestellt werden. So kannst du z.B. auf einem Tablet drei Spalten auf zwei reduzieren.

    Sichtbarkeit

    Steuert, ob eine Spalte in einem bestimmten Viewport sichtbar oder ausgeblendet ist.

    Asymmetrisch ab

    Nur verfügbar bei asymmetrischen Spalten-Blöcken (z.B. Zwei Spalten 3-9, Drei Spalten 3-3-6). Legt fest, ab welchem Viewport die Spalten in der vordefinierten asymmetrischen Aufteilung des Blocks dargestellt werden. Unterhalb dieses Viewports werden die Spalten gleichmäßig oder untereinander angeordnet.

    Experten-Modus

    Mit dem Schalter "Erweiterte Konfiguration" kannst du Spaltenanordnung und Sichtbarkeit für jeden Viewport einzeln festlegen.


    Nicht alle CMS-Blöcke unterstützen alle Bereiche der Block-Konfiguration. Die folgende Übersicht zeigt, welche Block-Typen welche Konfigurationsbereiche bieten:

    Symmetrische Spalten-Blöcke wie "Zwei Spalten", "Drei Spalten", "Vier Spalten" und "Sechs Spalten" unterstützen:

    • Responsive Block-Layout (Gutter + Ausrichtung)

    • Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit)

    Asymmetrische Spalten-Blöcke wie "Zwei Spalten 3-9", "Zwei Spalten 4-8", "Drei Spalten 3-3-6" usw. unterstützen:

    • Responsive Block-Layout (Gutter + Ausrichtung)

    • Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit + Asymmetrisch ab)

    Grid-Blöcke wie "Grid One", "Grid Two", "Grid Modern" usw. unterstützen:

    • Responsive Block-Layout (nur Gutter, keine Ausrichtung)

    Der Block "Eine Spalte" unterstützt:

    • Responsive Spalten-Layout (Spaltenanordnung + Sichtbarkeit, kein Gutter, keine Ausrichtung)

    Hero-Slider (4x)

    Der ThemeWare® CMS-Block "Hero-Slider (4x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

    Der "Hero-Slider (4x)" bietet dir die Möglichkeit 4 Slides zu nutzen – nicht mehr und nicht weniger.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.


    Verfügbare CMS-Elemente

    • Call-to-Action-Slide (Hero-Slider)


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'Five'

    Hinweis: Dieser Artikel ist in Arbeit.

    ThemeWare® CMS-Block Grid 'Five'

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Kategorieseite

    Die ThemeWare® CMS-Blöcke für Kategorieseiten selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

    Hinweis: Mehr zu den ThemeWare® Elementen für Kategorien findest du hier:


    Verfügbare Blöcke

    • Unterkategorien im Listing

    • Unterkategorien im Listing (Modern)

    Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.


    Block hinzufügen

    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Kategorieseite" [Pro]

    Zwei Spalten

    Der ThemeWare® CMS-Block "Zwei Spalten" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'Modern' (getauscht)

    Der ThemeWare® CMS-Block "Grid 'Modern '(getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Grid 'Modern' (getauscht)"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Standard-Einstellungen

    • Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

    • Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.

    • Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.

    • Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.

    Verschiedenes

    Hinweis: Dieser Artikel ist in Arbeit.

    Weitere ThemeWare® CMS-Blöcke.

    ...


    Verfügbare Blöcke

    • Breadcrumb-Navigation

    • Testimonial (Kundenrezension)

    Countdown-Banner (kompakt)

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Countdown-Banner (kompakt)" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    ThemeWare® "Countdown-Banner (kompakt)"

    ...

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zum CMS-Element findest du hier:

    Countdown-Banner (kompakt)

    Demo

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Produktbeschreibung und -bewertungen (Accordion)

    Hinweis: Dieser Artikel ist in Arbeit.

    ThemeWare® CMS-Block "Produktbeschreibung und -bewertungen (Accordion)"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zum CMS-Element findest du hier:

    Produktbeschreibung und -bewertungen (Accordion)

    Drei Spalten, 3-3-6

    Der ThemeWare® CMS-Block "Drei Spalten, 3-3-6" (25% | 25% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Drei Spalten, 3-3-6" [Pro}

    Beispiel

    ThemeWare® CMS-Block "Drei Spalten, 3-3-6"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Hero-Slider (2x)

    Der ThemeWare® CMS-Block "Hero-Slider (2x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.

    Der "Hero-Slider (2x)" bietet dir die Möglichkeit 2 Slides zu nutzen – nicht mehr und nicht weniger.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.


    Verfügbare CMS-Elemente

    • Call-to-Action-Slide (Hero-Slider)


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Discount-Banner

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Discount-Banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    ThemeWare® "Discount-Banner"

    ...

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zum CMS-Element findest du hier:

    Discount-Banner

    Demo

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Grid 'Four' (swapped)

    Hinweis: Dieser Artikel ist in Arbeit.

    ThemeWare® CMS-Block Grid 'Four' (swapped)

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Zwei Spalten, 9-3

    Der ThemeWare® CMS-Block "Zwei Spalten, 9-3" (75% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten, 9-3" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten, 9-3"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Sidebar

    Hinweis: Dieser Artikel ist in Arbeit.

    Die ThemeWare® CMS-Blöcke für die Sidebar.

    ...


    Verfügbare Sidebar-Blöcke

    • Unterkategorie-Navigation (Sidebar)


    Sidebar-Block hinzufügen

    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in die Sidebar-Sektion deiner Erlebniswelt.

    Hinweis: Sidebar-Blöcke findest du in der Rubrik "ThemeWare® Sidebar" [Pro]

    Countdown-Banner

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Countdown-Banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    ThemeWare® "Countdown-Banner"

    ...

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zum CMS-Element findest du hier:

    Countdown-Banner

    Demo

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Zwei Spalten, 4-8

    Der ThemeWare® CMS-Block "Zwei Spalten, 4-8" (ca. 33.333% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Banner

    Die ThemeWare® Banner-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.


    • Image-Banner

    • Parallax-Banner

    Eine Spalte

    Der ThemeWare® CMS-Block "Eine Spalte" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Drei Spalten

    Der ThemeWare® CMS-Block "Drei Spalten" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Teaser

    Die ThemeWare® Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

    Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.


    • Text-Teaser

    Testimonial (Kundenrezension)

    Der ThemeWare® CMS-Block "Testimonial (Kundenrezension)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

    Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    Mehr Informationen zum CMS-Element findest du hier:


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis

    Drei Spalten, 6-3-3

    Der ThemeWare® CMS-Block "Drei Spalten, 6-3-3" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Drei Spalten, 8-2-2

    Der ThemeWare® CMS-Block "Drei Spalten, 8-2-2" (ca. 66.667% | ca. 16.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Hero-Countdown

    Der ThemeWare® CMS-Block "Hero-Countdown" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    Der CMS-Block "Hero-Countdown" besteht aus zwei CMS-Elementen:

    Breadcrumb-Navigation

    Der ThemeWare® CMS-Block "Breadcrumb-Navigation" ist eine Variante vom Shopware CMS-Block "Breadcrumb-Navigation".

    Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    Mehr Informationen zum CMS-Element findest du hier:


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]

    Grid 'Six'

    Grid 'Four'

    Testimonials (Vier Spalten)

    Der ThemeWare® CMS-Block "Testimonials (Vier Spalten)" hat keine spezielle Funktion. Der Block symbolisiert die Flexibilität des CMS-Elementes "Testimonial (Kundenrezension)", welches in verschiedenen (Spalten-) Blöcken genutzt werden kann.

    Mehr Informationen zum CMS-Element findest du hier:


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]


    Grid 'Five' (swapped)

    Grid 'Two' (swapped)

    Grid 'Six' (swapped)

    Bild & Text überlagernd

    Mehr Informationen zum CMS-Element findest du hier:

    Unterkategorie-Navigation (Sidebar)

    Der ThemeWare® CMS-Block "Unterkategorie-Navigation (Sidebar)" ist eine Variante vom Shopware CMS-Block "Kategorie-Navigation".

    Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.


    Mehr Informationen zum CMS-Element findest du hier:

    Text & Bild

    Die ThemeWare® "Text & Bild"-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.



    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: "Text & Bild"-Blöcke findest du in der Rubrik "ThemeWare® Text & Bild" [Pro]

    Individueller Code (HTML/CSS/JS)

    Der ThemeWare® CMS-Block "Individueller Code (HTML/CSS/JS)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.

    Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.

    Mehr Informationen zum CMS-Element findest du hier:


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]


    Testimonials (Vier Spalten)
    Individueller Code (HTML/CSS/JS)
    Kategorieseite
    CMS-Block hinzufügen
    Sidebar CMS-Block hinzufügen
    Kategorie-Teaser

    Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.

    Kategorie-Teaser-Block hinzufügen

    ThemeWare® CMS-Block Grid 'Six'

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    ThemeWare® CMS-Block Grid 'Four'

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    ThemeWare® CMS-Block Grid 'Five' (swapped)

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    ThemeWare® CMS-Block Grid 'Two' (swapped)

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    ThemeWare® CMS-Block Grid 'Six' (swapped)

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Bild & Text überlagernd

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Unterkategorie-Navigation

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Weiterführende Informationen

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Individueller Code (HTML/CSS/JS)
    CMS-Block "Individueller Code (HTML/CSS/JS)" hinzufügen

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Block hinzufügen

    Demo

    Gleichverteilt (between) - Gleichmäßiger Abstand zwischen den Spalten
  • Gleichverteilt (around) - Gleichmäßiger Abstand um die Spalten

  • Gleichverteilt (evenly) - Vollständig gleichmäßig verteilter Abstand

  • Mobil Querformat (≥576px)
  • Mobil Hochformat (<576px)

  • Ermöglicht die manuelle Eingabe von CSS-Klassen pro Spalte (z.B. col-12 col-md-6). Der Experten-Modus überschreibt die Spaltenanordnung und die Sichtbarkeits-Konfiguration.
    Verbesserungsvorschlag (Feature-Request)

    Erweiterte Konfiguration

    Hinweis: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.

    Responsive Spalten-Layout

    Erweiterte Konfiguration

    Hinweis: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.

    Unterstützte Blöcke

    Spalten-Blöcke (symmetrisch)

    Asymmetrische Spalten-Blöcke

    Grid-Blöcke

    Eine Spalte

    Tipp: Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das ThemeWare Service Portal:

    • Verbesserungsvorschlag (Feature-Request)

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Countdown-Banner

    ...


    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Hero-Countdown (Überschrift)
    ThemeWare® "Hero-Countdown"

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Demo

    Hero-Banner
  • Advanced-Banner


  • Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" [Pro]

    Banner CMS-Block hinzufügen

    Hinweis: Mehr zu den ThemeWare® Banner-Elementen findest du hier: Banner

    Verfügbare Banner-Blöcke

    Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.

    Banner-Block hinzufügen

    Text-Teaser (verziert)
  • Button-Teaser

  • Call-to-Action

  • Hover-Box

  • Image-Teaser

  • Hero-Teaser

  • Advanced-Teaser

  • Classic-Teaser

  • Modern-Teaser

  • Runder Teaser


  • Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" [Pro]

    Teaser CMS-Block hinzufügen

    In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

    Für die ThemeWare® Teaser-Blöcke sind folgende CSS-Klassen besonders interessant:

    Hinweis: Mehr Informationen zu den ThemeWare® Teaser-Elementen findest du hier: Teaser

    Verfügbare Teaser-Blöcke

    Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.

    Teaser-Block hinzufügen

    CSS-Klassen

    : Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
    CMS-Block "Testimonial (Kundenrezension)" hinzufügen

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Testimonial (Kundenrezension)
    ThemeWare® CMS-Block "Testimonial (Kundenrezension)"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Block hinzufügen

    Demo

    CMS-Block "Breadcrumb-Navigation" hinzufügen

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Demo folgt...

    Breadcrumb-Navigation

    Hinweis: Dieser Artikel ist in Arbeit.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Block hinzufügen

    Demo

    Eine Anwendungsbeispiel findest du in unseren Demoshops:

    Testimonial (Kundenrezension)
    ThemeWare® CMS-Block "Testimonials (Vier Spalten)"
    CMS-Block "Testimonials (Vier Spalten)" hinzufügen

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Block hinzufügen

    Demo

    "Text & Bild" CMS-Block hinzufügen
    Bild & Text überlagernd

    Hinweis: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier: Text & Bild

    Verfügbare Blöcke

    Block hinzufügen

    Text-Slide (Hero-Slider)
    Image-Slide (Hero-Slider)

    Demo

    Text-Slide (Hero-Slider)
    Image-Slide (Hero-Slider)

    Demo

    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    ThemeWare® CMS-Block "Zwei Spalten, 4-8" [Pro]
    ThemeWare® CMS-Block "Zwei Spalten, 4-8"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    ThemeWare® CMS-Block "Eine Spalte" [Pro]
    ThemeWare® CMS-Block "Eine Spalte"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    ThemeWare® CMS-Block "Drei Spalten" [Pro]
    ThemeWare® CMS-Block "Drei Spalten"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    ThemeWare® CMS-Block "Drei Spalten, 6-3-3" [Pro]
    ThemeWare® CMS-Block "Drei Spalten, 6-3-3"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    ThemeWare® CMS-Block "Drei Spalten, 8-2-2" [Pro]
    ThemeWare® CMS-Block "Drei Spalten, 8-2-2"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    Produktname (ohne Hersteller-Logo)

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.

    ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)"

    Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

    Beispiel


    Demo

    Anwendungsbeispiele findest du in unseren Demoshops:

    Demo folgt...

    Drei Spalten, 2-8-2

    Der ThemeWare® CMS-Block "Drei Spalten, 2-8-2" (ca. 16.667% | ca. 66.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Drei Spalten, 2-8-2" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Drei Spalten, 2-8-2"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'One'

    Der ThemeWare® CMS-Block "Grid 'One'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Grid 'One'"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Standard-Einstellungen

    • Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

    • Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.

    • Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. 640 px).

    • Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. 20px) einem Element zu addieren.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'Modern'

    Der ThemeWare® CMS-Block "Grid 'Modern'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Grid 'Modern'"

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Standard-Einstellungen

    • Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".

    • Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.

    • Die beiden großen Bild-Element haben eine minimale Höhe von 640 px.

    • Tipp: Achte darauf, dass die Summe minimalen Höhen auf beiden Seiten gleich sind.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Sechs Spalten

    Der ThemeWare® CMS-Block "Sechs Spalten" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Sechs Spalten" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Sechs Spalten"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Sale

    Die ThemeWare® "Sale"-CMS-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

    Hinweis: Mehr zu den ThemeWare® "Sale"-Elementen findest du hier:


    Verfügbare "Sale"-Blöcke

    • Hero-Countdown

    • Countdown-Banner


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: "Sale"-CMS-Blöcke findest du in der Rubrik "ThemeWare® Sale" [Pro]

    Produktseite

    Hinweis: Dieser Artikel ist in Arbeit.

    Die ThemeWare® CMS-Blöcke für Produktseiten haben keine spezielle Funktion. Du kannst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.

    Hinweis: Mehr zu den ThemeWare® Elementen für Produktseiten findest du hier:


    Verfügbare Blöcke

    • Produktname (ohne Hersteller-Logo)

    • Galerie und Buybox (mit Produktname)


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Produktseite" [Pro]

    Fünf Spalten

    Der ThemeWare® CMS-Block "Fünf Spalten" (jeweils 20%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Fünf Spalten" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Fünf Spalten"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Galerie und Buybox (mit Produktname & Hersteller-Logo)

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen samt Hersteller-Logo über der Buybox dar.

    ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & Hersteller-Logo)"

    Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

    Beispiel


    Demo

    Anwendungsbeispiele findest du in unseren Demoshops:

    Demo folgt...

    Drei Spalten, 2-2-8

    Der ThemeWare® CMS-Block "Drei Spalten, 2-2-8" (ca. 16.667% | ca. 16.667% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Drei Spalten, 2-2-8" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Drei Spalten, 2-2-8"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Zwei Spalten, 7-5

    Der ThemeWare® CMS-Block "Zwei Spalten, 7-5" (ca. 58.333% | ca. 41.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Zwei Spalten, 7-5" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Zwei Spalten, 7-5"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Galerie und Buybox (mit Produktname)

    Hinweis: Dieser Artikel ist in Arbeit.

    Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen über der Buybox dar.

    ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)"

    Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.

    Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.

    Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.

    Beispiel


    Demo

    Anwendungsbeispiele findest du in unseren Demoshops:

    Demo folgt...

    Drei Spalten, 3-6-3

    Der ThemeWare® CMS-Block "Drei Spalten, 3-6-3" (25% | 50% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    ThemeWare® CMS-Block "Drei Spalten, 3-6-3" [Pro]

    Beispiel

    ThemeWare® CMS-Block "Drei Spalten, 3-6-3"

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.


    Demo

    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grids

    Die ThemeWare® Grid-Blöcke sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.

    Die Grid-Blöcke haben daher keine speziellen CMS-Elemente.


    Zwei Spalten (auf Handys getauscht)

    Der ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe ). Hier unterscheidet sich lediglich die Anordnung der beiden Spalten in mobilen Viewports. In dieser Variante wird die zweite Spalte oberhalb der ersten Spalte angeordnet und nicht darunter.


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Countdown-Banner (kompakt)
    Discount-Banner
    Sale
    "Sale" CMS-Block hinzufügen

    "Sale"-Block hinzufügen

    Galerie und Buybox (mit Produktname & Hersteller-Logo)
    Produktbeschreibung und -bewertungen (Accordion)
    Produktseite
    CMS-Block hinzufügen

    Block hinzufügen

    Grid 'One'

  • Grid 'One' (getauscht)

  • Grid 'Two'

  • Grid 'Two' (swapped)

  • Grid 'Three'

  • Grid 'Three' (swapped)

  • Grid 'Four'

  • Grid 'Four' (swapped)

  • Grid 'Five'

  • Grid 'Five' (swapped)

  • Grid 'Six'

  • Grid 'Six' (swapped)


  • Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Grids" [Pro]

    Grid CMS-Block hinzufügen

    Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.

    Wir empfehlen daher für Bild-Elemente in Grid-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Die Größe der Elemente selber kannst du über die Konfiguration "Minimale Höhe" definieren, mehr Informationen dazu findest du im folgenden Abschnitt.


    Als Bild-Elemente kannst du die Teaser von ThemeWare® in den Grids nutzen. (Das Bild-Element von Shopware funktioniert ebenfalls.)

    Die Größe der Elemente definierst du über die Konfiguration "Minimale Höhe" im Modus "Füllen" der entsprechenden Elemente. Damit Grids gut funktionieren ist hier etwas Mathematik nötig: Die "Minimale Höhe" der Elemente auf der linken Seite sollte in Summe dieselbe Höhe haben wie die Summe der "Minimale Höhe" aller Elemente auf der rechten Seite. Addiere etwaige Lücken (Standard: 40px) zwischen den Elementen noch dazu.


    In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.

    Für die ThemeWare® Grid-Blöcke sind folgende CSS-Klassen für die Abstände der Elemente im Block interessant:


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Grid 'Modern'
    Grid 'Modern' (getauscht)

    Verfügbare Grid-Blöcke

    Grid-Block hinzufügen

    Bildgrößen

    Bild-Elemente

    Hinweis: Ohne "vertikale" und "horizontale" Ausrichtung werden die ThemeWare® Teaser auf die volle Höhe gestreckt. Dadurch kannst du für einzelne Elemente in asymmetrischen Grids (z.B. "Grid 'One'") auch von der oben genannten Rechnung abweichen und musst nicht auf eine identische Höhe beider Spalten achten.

    CSS-Klassen

    Demos

    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Spaltenabstände in CMS-Blöcken anpassen
    Zwei Spalten
    ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)" [Pro]
    ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)"
    Links: "Zwei Spalten" | Rechts: "Zwei Spalten (auf Handys getauscht)"

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe Spaltenabstände in CMS-Blöcken anpassen) modifizieren.

    Demo

    Spalten

    Die ThemeWare® Spalten-Blöcke sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.

    Die Spalten-Blöcke haben daher keine speziellen CMS-Elemente.


    Verfügbare Spalten-Blöcke

    • Eine Spalte


    Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.

    Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Spalten" [Pro] bzw. in der Rubrik "Text & Bild" [Cloud]


    Die ThemeWare® Spalten-Blöcke sind mit Platzhalter-Elementen befüllt. Du kannst diese Elemente durch beliebige CMS-Elemente austauschen:

    1. Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren

    2. Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen

    3. Es öffnet sich das Pop-up "Element auswählen"

    Du hast nun das CMS-Element ausgetauscht.


    Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.

    Wir empfehlen daher für Bild-Elemente in Spalten-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Alternativ funktioniert auch der Darstellungsmodus "Strecken" recht gut, wenn alle Bilder einer Spalte die selbe Größe/Proportion haben.


    In den Block-Einstellungen hast du die Möglichkeit CSS-Klasssen für den entsprechenden CMS-Block zu definieren.

    Für die ThemeWare® Spalten-Blöcke sind folgende CSS-Klassen besonders interessant:


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Wähle das gewünschte CMS-Element aus (3)
    Zwei Spalten
    Zwei Spalten (auf Handys getauscht)
    Zwei Spalten, 3-9
    Zwei Spalten, 4-8
    Zwei Spalten, 5-7
    Zwei Spalten, 7-5
    Zwei Spalten, 8-4
    Zwei Spalten, 9-3
    Drei Spalten
    Drei Spalten, 2-2-8
    Drei Spalten, 2-8-2
    Drei Spalten, 3-3-6
    Drei Spalten, 3-6-3
    Drei Spalten, 6-3-3
    Drei Spalten, 8-2-2
    Vier Spalten
    Fünf Spalten
    Sechs Spalten
    Pro Edition
    Cloud Edition
    ThemeWare® Spalten-Blöcke: Element austauschen

    Spalten-Block hinzufügen

    Elemente austauschen

    Bildgrößen

    CSS-Klassen

    Demos

    Hero-SliderDemostore
    ThemeWare® Demoshop => "Hero-Slider"
    Hero-SliderDemostore
    ThemeWare® Demoshop
    Hero-SliderDemostore
    ThemeWare® Demoshop => "Hero-Slider"
    Hero-SliderDemostore
    ThemeWare® Demoshop => "Hero-Slider"
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke
    Spalten-BlöckeDemostore
    ThemeWare® Demoshop => Spalten-Blöcke

    Sechs Spalten (Individuell)

    Der ThemeWare® CMS-Block "Sechs Spalten (Individuell)" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.

    Dieser Block kann die Experten-Konfiguration "CSS-Klasse (Spalte)" bestimmter CMS-Elemente berücksichtigen.

    Mehr Informationen zu den CSS-Klassen findest du in der ThemeWare® Wissensdatenbank:


    Anwendungsbeispiele findest du in den ThemeWare® Demoshops:

    Folgt...

    ThemeWare® CMS-Block "Sechs Spalten (Individuell)" [Pro]
    ThemeWare® CMS-Block "Sechs Spalten (Individuell)"

    Hinweis: Dieser Block richtet sich an Experten die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen und mit diesem Block umfangreiche individuelle Anpassungen umgehen können.

    Wichtig: Bitte beachte, dass sich dieser Block derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.

    Individuelle Spaltenbreiten

    Beispiel

    Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.

    Demo

    Spaltenabstände in CMS-Blöcken anpassen
    CSS-Abstandsklassen für CMS-Sektionen/-Blöcke | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank => CSS-Abstandsklassen für Erlebniswelten
    Logo
    Logo
    Erlebniswelten | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank => Erlebniswelten
    Logo
    Logo
    Logo
    CMS-Block | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank
    Logo
    Logo
    Logo
    Logo
    Grid-BlöckeDemostore
    ThemeWare® Demoshop => Grid-Blöcke
    Grid-BlöckeDemostore
    ThemeWare® Demoshop => Grid-Blöcke
    Grid-BlöckeDemostore
    ThemeWare® Demoshop => Grid-Blöcke
    Grid-BlöckeDemostore
    ThemeWare® Demoshop => Grid-Blöcke
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Bilder in CMS-Blöcken dekorieren | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank => Bilder in CMS-Blöcken verschönern
    Logo
    Logo
    Spaltenabstände in CMS-Blöcken anpassen | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank => Spaltenabstände in CMS-Blöcken anpassen
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    Logo
    TestimonialsDemostore
    ThemeWare® Demoshop => Testimonials
    TestimonialsDemostore
    ThemeWare® Demoshop => Testimonials
    Logo
    Logo
    Spalten-CSS-Klassen in ThemeWare® CMS-Elementen | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank
    Logo
    Abstände in CMS-Blöcken anpassen | ThemeWare® Wissensdatenbankwiki.themeware.design
    ThemeWare® Wissensdatenbank => Abstände in CMS-Blöcken anpassen
    Logo