Kuhlware Parallax Banner Element
● Läuft live in diesem ShopParallax-Banner für die Erlebniswelten: Hintergrundbild, zwei Bild-Ebenen mit eigener Scroll-Geschwindigkeit und Textbox mit Button, mobil separat einstellbar.
- Version 2.1.0
- Shopware 6.6.x – 6.7.x
- Hersteller Kuhlware
- Parallax-Effekt mit Hintergrundbild und zwei Bild-Ebenen
- Eigene Scroll-Geschwindigkeit für jede Ebene
- Größe und Position der Ebenen getrennt für Desktop und Mobil
- Textbox mit Titel, Beschreibung und Button über dem Banner
- Als Block in den Erlebniswelten, ganz ohne Programmieren
Mit einem Parallax-Banner bekommt deine Startseite oder Kampagnenseite Tiefe: Bilder bewegen sich beim Scrollen unterschiedlich schnell und lenken den Blick auf deine Botschaft.
Das Kuhlware Parallax Banner Element fügt den Shopware-Erlebniswelten einen eigenen Block hinzu. Du wählst ein Hintergrundbild, legst bis zu zwei Bild-Ebenen darüber und ergänzt optional eine Textbox mit Titel, Beschreibung und Button. Jede Ebene bewegt sich mit ihrer eigenen Scroll-Geschwindigkeit.
Das bringt dir das Plugin
- Ein auffälliger Einstieg für Kampagnen, Kategorien und die Startseite.
- Volle Kontrolle über Größe und Position jeder Ebene, getrennt für Desktop und Mobil.
- Kein Programmieren: Alles wird im Layout-Editor der Erlebniswelten eingestellt.
So funktioniert es
Im Layout-Editor fügst du den Block „Kuhlware Parallax Banner“ ein. Die Einstellungen sind auf vier Tabs verteilt: Allgemein (Höhe des Banners), Bilder (Hintergrundbild und Bilder der beiden Ebenen), Layer (Aktivierung, Größe, Position, Scroll-Geschwindigkeit und Bildanpassung) und Banner (Textbox mit Texten, Farben, Button und Position).
Mobil gut aussehen
Breite, Höhe und Abstände der Ebenen sowie die Position der Textbox hast du für die Mobilansicht als eigene Werte. Ob eine Ebene auf dem Smartphone überhaupt gezeigt wird, entscheidest du pro Ebene mit dem Schalter „Mobil anzeigen“.
Voraussetzungen und Kompatibilität
Das Plugin ist für Shopware 6.6 und 6.7 ausgelegt. Der Scroll-Effekt nutzt die Bibliothek Locomotive Scroll, die im Plugin enthalten ist. Es werden keine Skripte von fremden Servern nachgeladen.
Externe Services: Keine externen Services. Das Plugin sendet keine Daten an Dritte.
Funktionen
- Eigener CMS-Block „Kuhlware Parallax Banner“ für die Erlebniswelten
- Hintergrundbild mit frei wählbarer Höhe in px, rem oder Prozent
- Zwei optionale Bild-Ebenen, jede einzeln aktivierbar
- Scroll-Geschwindigkeit pro Ebene einstellbar
- Breite, Höhe sowie Abstand oben und links pro Ebene in px, rem oder Prozent
- Eigene Werte für die Mobilansicht (Breite, Höhe, Abstände)
- Ebenen auf Mobilgeräten wahlweise ein- oder ausblendbar
- Bildanpassung pro Ebene: fill, contain oder cover
- Textbox mit Titel, Beschreibung und Button
- Farben für Titel, Text und Hintergrund der Textbox, Position der Textbox mobil separat
- Button-Link als externer oder interner Link
- Bildauswahl und Upload direkt über die Medienverwaltung
- Scroll-Effekt über die im Plugin enthaltene Bibliothek Locomotive Scroll, ohne externe Ressourcen
Installation
- Plugin im Plugin-Manager installieren und aktivieren.
- Cache leeren und das Theme neu kompilieren.
- Unter Inhalte > Erlebniswelten ein Layout öffnen oder neu anlegen und den Block „Kuhlware Parallax Banner“ hinzufügen.
- Im Tab „Allgemein“ die Höhe festlegen, im Tab „Bilder“ das Hintergrundbild und die Bilder der Ebenen auswählen.
- Im Tab „Layer“ die Ebenen aktivieren und Größe, Position, Scroll-Geschwindigkeit und Bildanpassung einstellen. Mit „Mobil anzeigen“ legst du fest, ob eine Ebene auch auf dem Smartphone erscheint.
- Im Tab „Banner“ die Textbox aktivieren, Titel, Beschreibung, Button und Farben eintragen.
- Layout speichern, einer Kategorie oder Landingpage zuweisen und die Darstellung auf Desktop und Smartphone prüfen.
FAQ
Wo finde ich das Element in den Erlebniswelten?
Im Layout-Editor fügst du einen neuen Block hinzu und wählst „Kuhlware Parallax Banner“. Der Block enthält ein Element, das du über die Einstellungen konfigurierst.
Wie viele Bild-Ebenen kann ich verwenden?
Zusätzlich zum Hintergrundbild stehen zwei Ebenen zur Verfügung. Jede Ebene lässt sich einzeln aktivieren und hat ein eigenes Bild und eine eigene Scroll-Geschwindigkeit.
Werden die Ebenen auf dem Smartphone angezeigt?
Das entscheidest du pro Ebene mit dem Schalter „Mobil anzeigen“. Für die Mobilansicht gibt es eigene Werte für Breite, Höhe und Abstände.
Welche Einheiten kann ich für Größen und Abstände nutzen?
Pixel (px), rem und Prozent. Die Einheit wählst du pro Wert aus.
Lädt das Plugin Skripte von externen Servern nach?
Nein. Die Bibliothek für den Scroll-Effekt ist im Plugin enthalten. Die Bilder stammen aus deiner Shopware-Medienverwaltung.
Kann ich die Textbox auch weglassen?
Ja. Die Textbox ist optional und wird nur angezeigt, wenn du sie im Tab „Banner“ aktivierst.
Changelog
2.1.0 18.06.2025 Shopware 6.6.x – 6.7.x
Changed
- Kompatibilität mit Shopware 6.7
2.0.1 08.05.2025
- Behebung von Problemen bei der Medienauswahl per Modal
2.0.0 05.04.2024
- Kompatibilität für Shopware 6.6
1.0.3
- Object fit zur Layer Anpassung hinzugefügt
1.0.2
- Breite und Offset links zur Layer Anpassung hinzugefügt
- Übersetzungen angepasst
1.0.1
- Fehlende breit im container hinzugefügt
1.0.0
- Erste Version des Parallax Banner Element Plugins für Shopware 6
