CSS-Animationen für Erlebniswelten

In dieser Anleitung erfährst du, wie du Erlebniswelten mit ThemeWare® CSS-Scroll-Animationen verschönern kannst.

Animationen – CSS-Animationen für CMS-Blöcke

ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Animationen zum Verschönern deiner Erlebniswelten bereit. Nachfolgend erklären wir dir, wie du die "CSS-Scroll-Animationen" in nur 2 Schritten aktivieren und nutzen kannst.

Rechts: CSS-Scroll-Animation "Fade-in"

Tipp: Anwendungsbeispiele findest du auf den Startseiten in unseren Demoshops.

---

ThemeWare® CSS-Scroll-Animationen

1. Animationen aktivieren

1. Öffne die Administration deins Shops

2. Wechsel über die Hauptnavigation in den Theme-Manager ("Inhalte" => "Themes") Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.

3. Öffne die Konfiguration deines Themes

4. Wechsel im Tab "Erlebniswelten" in den Bereich "Alle Typen"

5. Im Abschnitt "CSS-Scroll-Animationen" findest du Konfigurationsfelder für "CMS-Blöcke" und "Überschriften in CMS-Blöcken"

6. Wähle die gewünschte Animation für CMS-Blöcke bzw. die Überschriften in CMS-Blöcken (optional).

7. Speicher diese Änderung damit diese in die Storefront übernommen wird

2. Animationen anwenden

1. Wechsel über die Hauptnavigation in die Erlebniswelt-Verwaltung ("Inhalte" => "Erlebniswelten")

2. Bearbeite die gewünschte Erlebniswelt

3. Wähle den gewünschten CMS-Block aus, welchen du animieren möchtest

4. Öffne den Bereich "Layout" in den Block-Einstellungen am rechten Bildschirmrand

5. Füge die CSS-Klasse twt-cms-animation hinzu (mehrere Klassen werden durch Leerzeichen getrennt)

6. Speicher die Erlebniswelt

Der entsprechende CMS-Block sollte nun mit der gewünschten Animation animiert werden. Wiederhole "Step 2" für alle CMS-Blöcke, die du animieren möchtest.

Sollte die Änderung nicht in der Storefront ankommen, prüfe bitte ob das Theme dem entsprechenden Verkaufskanal zugewiesen wurde. Leere bei Änderungen dieser Art auch unbedingt einmal den gesamten Shopware sowie den Browser-Cache.

Hinweis: Nutze die CSS-Animation nicht in CMS-Seiten die in Pop-ups bzw. Modals angezeigt werden. Dort funktionieren die Animationen nicht.

Hinweis: Nutze die CSS-Animation nicht in CMS-Blöcken die Pop-ups bzw. Modals beinhalten. Dann funktionieren die Modals u.U. nicht.