CMS PowerPack: Elemente, Spalten-Layouts & Zeitsteuerung

Einleitung

Das CMS PowerPack erweitert die Erlebniswelten deines Shops um 14 neue Elemente, 13 Spalten- und Karten-Layouts und eine Zeit- und Regelsteuerung für jeden Block und jede Sektion. Du gestaltest damit Aktionsseiten, Ratgeber, FAQ-Bereiche und Startseiten direkt im Erlebniswelten-Designer – ohne Programmierung.

Was du mit diesem Plugin erreichst

• Du fügst Hinweise, Call-to-Action-Bereiche, Kundenstimmen, Tabs, Akkordeons, eine Infobar, Countdowns, Zähler, Parallax-Bilder, Aktions-Karten, Bildvergleiche, Trenner, Karten und eigenen HTML-Code in jede Erlebniswelt ein.
• Du ordnest Inhalte in zwei, drei, vier oder sechs Spalten an – in gleichen oder ungleichen Breiten – und stellst Bild und Text als Karten nebeneinander.
• Du gibst jedem Block und jeder Sektion einen Farbverlauf und eine Einblend-Animation, auch den Standard-Blöcken von Shopware.
• Du legst fest, ab wann und bis wann ein Block sichtbar ist und für welche Kundinnen und Kunden er erscheint (Regeln aus dem Rule Builder). Zu Beginn und Ende eines Zeitraums aktualisiert sich der Shop von selbst.
• Du blendest beliebige Erlebniswelten-Layouts im Header, im Footer, im Warenkorb, auf der Seite „Bestellung abschließen“ und auf der Abschlussseite ein – für jeden Verkaufskanal eigens.
• Du verwendest Textbausteine in Produktnamen, Produktbeschreibungen und Kategoriebeschreibungen.
• Deine Kundinnen und Kunden laden Karten erst nach ihrer Einwilligung; die Einwilligung verwalten sie im Cookie-Manager.

Für wen ist dieses Plugin?

Für Shop-Betreiber, Redakteurinnen und Marketing-Teams, die ihre Erlebniswelten flexibler gestalten möchten. Das Plugin ersetzt auch das Plugin NetzpPowerPack6 – Hinweise zum Umstieg findest du in Umstieg von NetzpPowerPack6.

Installation

Nach dem Kauf steht dir das Plugin direkt in deiner Administration zur Verfügung – du musst nichts herunterladen.

1. Melde dich in deiner Shopware-Administration an (DeinShop.de/admin).
2. Öffne Erweiterungen → Meine Erweiterungen und dort den Reiter Apps.
3. Klicke in der Zeile CMS PowerPack: Elemente, Spalten-Layouts & Zeitsteuerung auf Installieren.
4. Aktiviere das Plugin mit dem Schalter links in der Zeile – fertig.

Abb. 1: Das Plugin ist installiert und aktiviert. Über Konfigurieren gelangst du zu den Einstellungen.

Taucht das Plugin nicht in der Liste auf, ist dein Shopware-Account noch nicht mit dem Shop verbunden. Das erledigst du unter Erweiterungen → Meine Erweiterungen im Reiter Shopware Account.

Erste Schritte

1. Einstellungen öffnen: Klicke unter Erweiterungen → Meine Erweiterungen in der Zeile des Plugins auf Konfigurieren.

   

   Abb. 2: Ganz oben wählst du den Verkaufskanal, darunter folgen die Bereiche der Einstellungen.

2. Plugin einschalten: Der Schalter Plugin für diesen Verkaufskanal aktivieren ist nach der Installation eingeschaltet. Du musst nichts weiter einstellen, um die Elemente zu nutzen.

3. Erste Erlebniswelt gestalten: Öffne Inhalte → Erlebniswelten, wähle ein Layout aus oder lege ein neues an und füge die PowerPack-Blöcke ein. Wie das geht, zeigt Elemente und Layouts in der Erlebniswelt einfügen.

4. Ergebnis prüfen: Rufe die Seite im Shop auf, der du das Layout zugewiesen hast.

Abb. 3: So sieht das Ergebnis im Shop aus – hier mit einem Layout im Header und zwei Hinweisen.

Tipp: Über den Button Dokumentation öffnen in den Einstellungen gelangst du jederzeit zu dieser Anleitung im Internet.

Einstellungen

Die Einstellungen findest du unter Erweiterungen → Meine Erweiterungen → Konfigurieren in der Zeile des Plugins. Ganz oben wählst du unter Verkaufskanal aus, für welchen Shop die Einstellungen gelten. Mit Alle Verkaufskanäle legst du die Grundeinstellung fest; einzelne Verkaufskanäle kannst du davon abweichend einstellen. Speichere deine Änderungen mit Speichern oben rechts.

Plugin für diesen Verkaufskanal aktivieren

Mit dem Schalter Plugin für diesen Verkaufskanal aktivieren im Bereich Allgemein legst du fest, ob das Plugin in diesem Verkaufskanal wirkt. Standardmäßig ist er eingeschaltet. Schaltest du ihn aus, zeigt dieser Verkaufskanal keine PowerPack-Elemente, keine Layouts in Header, Footer und Checkout und ersetzt keine Textbaustein-Platzhalter.

Wozu das gut ist: Betreibst du zum Beispiel einen B2B- und einen B2C-Shop, nutzt du das PowerPack gezielt nur in einem davon – ohne das Plugin zu deinstallieren.

Layouts in Header, Footer und Checkout

Abb. 4: Für jede Stelle wählst du ein Layout und seine Position.

In diesem Bereich wählst du je Stelle ein Erlebniswelten-Layout aus, das zusätzlich im Shop erscheint. Zu jeder Stelle gehört eine Position:

• Layout im Header und Position im Header: Oberhalb des Headers oder Unterhalb der Hauptnavigation. Das Layout erscheint auf jeder Seite des Verkaufskanals – ideal für eine Hinweisleiste oder Vertrauenssymbole.
• Layout im Footer und Position im Footer: Oberhalb des Standard-Footers oder Unterhalb des Standard-Footers.
• Layout im Warenkorb und Position im Warenkorb: Oberhalb des Warenkorbs oder Unterhalb des Warenkorbs.
• Layout auf der Seite „Bestellung abschließen“ und die zugehörige Position: Oberhalb der Bestellübersicht oder Unterhalb der Bestellübersicht.
• Layout auf der Abschlussseite nach der Bestellung und Position auf der Abschlussseite: Oberhalb der Bestelldetails oder Unterhalb der Bestelldetails.

Lässt du ein Layout-Feld leer, erscheint an dieser Stelle nichts. Ausführlich beschreibt das Layouts in Header, Footer und Checkout.

Textbausteine in Produkten und Kategorien

Abb. 5: Drei Schalter für Produktname, Produktbeschreibung und Kategoriebeschreibung.

Mit den Schaltern Textbaustein-Platzhalter im Produktnamen ersetzen, Textbaustein-Platzhalter in der Produktbeschreibung ersetzen und Textbaustein-Platzhalter in der Kategoriebeschreibung ersetzen legst du fest, wo der Shop Platzhalter wie {{ "textbaustein.name"|trans }} durch den Text des Textbausteins ersetzt. Alle drei Schalter sind standardmäßig ausgeschaltet.

Wozu das gut ist: Du pflegst wiederkehrende Texte – etwa einen Pflegehinweis oder eine Garantieaussage – an einer Stelle und in allen Sprachen. Details findest du in Textbaustein-Platzhalter in Produkten und Kategorien.

Karten

Abb. 6: Die Einstellungen für das Element „Karte“.

• Karten-Elemente erlauben: Ist der Schalter eingeschaltet (Standard), zeigen Karten-Elemente eine Karte von OpenStreetMap oder Google Maps. Schaltest du ihn aus, zeigen sie nur den Adresstext, und der Shop stellt keine Anfrage an einen Kartenanbieter.
• Google-Maps-API-Schlüssel: Nur nötig, wenn du in einem Karten-Element den Anbieter Google Maps wählst. Schränke den Schlüssel in der Google-Cloud-Konsole auf deine Shop-Domain ein.
• Google-Maps-Karten-ID: Die Karten-ID aus der Google-Cloud-Konsole. Google verlangt sie für die Markierung auf der Karte. Ohne Angabe verwendet das Plugin die Entwicklungs-ID DEMO_MAP_ID.

Mehr dazu in Karten und Datenschutz.

Elemente und Layouts in der Erlebniswelt einfügen

Was dir das bringt: Alle PowerPack-Bausteine stehen dir im Erlebniswelten-Designer wie die Standard-Blöcke von Shopware zur Verfügung – per Klick und Ziehen.

Abb. 7: Eine Erlebniswelt mit PowerPack-Elementen im Designer.

Schritt für Schritt

1. Öffne Inhalte → Erlebniswelten und klicke auf ein Layout – oder lege mit Neues Layout anlegen ein neues an.

2. Öffne in der Seitenleiste rechts den Bereich Blöcke.

3. Wähle bei Block-Kategorie den Eintrag PowerPack Elemente für die 14 Elemente oder PowerPack Layouts für die Spalten- und Karten-Layouts.

   

   Abb. 8: Die Element-Blöcke in der Kategorie „PowerPack Elemente“.

4. Ziehe den gewünschten Block an die passende Stelle der Erlebniswelt.

5. Klicke auf den Block und anschließend auf das Zahnrad-Symbol im Element, um die Element-Einstellungen zu öffnen. Trage deine Inhalte ein und schließe das Fenster mit Fertig.

6. Speichere das Layout mit Speichern oben rechts.

Wichtig: Blöcke kannst du nur in der System-Standardsprache hinzufügen. Wechsle dazu oben rechts in die Standardsprache deines Shops. Die Texte für weitere Sprachen trägst du anschließend in der jeweiligen Sprache in den Element-Einstellungen ein.

Tipp: Mit dem Herz-Symbol an einem Block legst du ihn in deinen Favoriten ab. Über die Block-Kategorie Favoriten findest du ihn dann schneller.

Die PowerPack-Elemente

Jedes Element hat einen eigenen Block in der Kategorie PowerPack Elemente. Die Einstellungen öffnest du über das Zahnrad-Symbol im Element (siehe Elemente und Layouts in der Erlebniswelt einfügen); sie sind auf Reiter wie Inhalt, Einstellungen und Gestaltung verteilt. Lässt du ein Farbfeld leer, verwendet das Element die Farben deines Themes.

Hinweis

Was dir das bringt: Du hebst wichtige Informationen farbig hervor – zum Beispiel Lieferzeiten, Aktionen oder Betriebsferien.

Im Reiter Inhalt trägst du Überschrift und Inhalt ein. Im Reiter Einstellungen wählst du unter Art die Farbe (Info, Erfolg, Warnung, Fehler, Primär, Sekundär, Hell, Dunkel), blendest mit Icon anzeigen ein passendes Symbol ein und machst den Hinweis mit Schließbar ausblendbar: Besucher schließen ihn dann über ein Schließen-Symbol, bis sie die nächste Seite aufrufen. Wie das aussieht, zeigt Abb. 3 in Erste Schritte.

Call-to-Action

Was dir das bringt: Du baust Aktionsbanner, Teaser und Kontaktflächen aus bis zu 20 frei angeordneten Bausteinen – Texte, Buttons und Bilder – auf einer Farbfläche oder einem Hintergrundbild.

Abb. 9: Jeder Baustein lässt sich aufklappen, verschieben, duplizieren und entfernen.

• Inhalt: Mit Baustein hinzufügen legst du einen neuen Baustein an und wählst unter Art des Bausteins zwischen Text, Button und Bild. Die Reihenfolge änderst du mit den Pfeil-Symbolen Nach oben und Nach unten.
  • Für Text legst du neben dem Text das HTML-Tag fest (Absatz (p), Überschrift 1 bis Überschrift 6 oder Neutral (div)), außerdem Schriftgröße, Schriftstärke, Textfarbe und Ausrichtung. Verwende je Seite nur eine Überschrift 1 – das gliedert die Seite für Suchmaschinen und Screenreader.
  • Für Button trägst du die Button-Beschriftung und das Linkziel ein und wählst Button-Stil und Button-Größe. Mit Link in neuem Tab öffnen öffnet sich das Ziel in einem neuen Tab.
  • Für Bild wählst du das Bild, einen Alternativtext für Screenreader, die Breite (%) und auf Wunsch Rund zuschneiden.
• Layout: Unter Anordnung legst du fest, ob die Bausteine Untereinander oder Nebeneinander stehen. Auf Smartphones untereinander anordnen, Verteilung (Hauptachse), Ausrichtung (Querachse), Abstand der Bausteine (px), Innenabstand (px) und Mindesthöhe (px) bestimmen Abstände und Ausrichtung.
• Gestaltung: Hintergrundbild mit Bild-Modus (Originalgröße, Ganzes Bild, Fläche füllen) und Bild-Ausrichtung, dazu Hintergrundfarbe, Textfarbe, Überlagerungsfarbe, Deckkraft der Überlagerung (%) und Eckenradius (px).
• Einstellungen: Hinterlegst du hier einen Link, wird das gesamte Element klickbar; Buttons im Element behalten ihr eigenes Ziel. Die Beschriftung für Screenreader beschreibt das Linkziel (leer: „Mehr erfahren“). Unter Zusätzliche CSS-Klassen vergibst du eigene Klassen für deine Gestaltung per CSS.

Abb. 10: Ein Aktionsbanner und eine Versandleiste – beide mit dem Call-to-Action gebaut.

Kundenstimme

Was dir das bringt: Du zeigst Bewertungen und Empfehlungen zufriedener Kundinnen und Kunden mit Sternen.

Im Reiter Inhalt wählst du ein Foto (rund dargestellt) und trägst Zitat, Name und Zusatz ein – etwa Firma, Wohnort oder Funktion; der Zusatz wird mit einem Komma an den Namen angehängt. Unter Bewertung wählst du Keine Bewertung oder 1 bis 5 Sterne in halben Schritten. Im Reiter Einstellungen legst du Anordnung (Bild links oder Bild oben), Ausrichtung, Textfarbe, Hintergrundfarbe und Sternfarbe fest.

Abb. 11: Oben eine Kundenstimme, darunter das Element Tabs.

Tabs

Was dir das bringt: Du ordnest viele Informationen platzsparend auf Reitern an – etwa Beschreibung, Material und Versand.

Im Reiter Inhalt trägst du optional eine Überschrift über den Tabs mit ihrer Überschriften-Ebene ein. Mit Tab hinzufügen legst du bis zu 20 Tabs an, jeweils mit Tab-Titel und Inhalt. Im Reiter Einstellungen wählst du unter Darstellung zwischen Reiter und Buttons (Pills) und unter Ausrichtung zwischen Links, Zentriert, Rechts und Volle Breite.

Akkordeon

Was dir das bringt: Du baust FAQ-Bereiche, in denen Besucher nur die Antworten aufklappen, die sie interessieren – auf Wunsch mit Auszeichnung für Suchmaschinen.

Abb. 12: Überschrift, Überschriften-Ebene und die Einträge des Akkordeons.

Im Reiter Inhalt trägst du optional die Überschrift über dem Akkordeon und ihre Überschriften-Ebene ein. Mit Eintrag hinzufügen legst du bis zu 20 Einträge an, jeweils mit Titel des Eintrags und Inhalt. Im Reiter Einstellungen findest du:

• Überschriften-Ebene der Einträge – wähle für eine saubere Gliederung eine Ebene unter der Überschrift des Akkordeons.
• Ersten Eintrag geöffnet anzeigen – der erste Eintrag ist beim Aufruf der Seite aufgeklappt.
• Mehrere Einträge gleichzeitig öffnen – ist der Schalter aus, schließt das Öffnen eines Eintrags die anderen.
• Als FAQ für Suchmaschinen auszeichnen – gibt die Einträge als strukturierte Daten für Fragen und Antworten aus. Verwende das nur für echte Fragen und Antworten und höchstens einmal je Seite.

Abb. 13: Ein FAQ-Bereich mit dem Akkordeon, darunter die Infobar.

Infobar und Iconleiste

Was dir das bringt: Du zeigst Vorteile wie Versand, Rückgaberecht oder Beratung kompakt mit Symbolen – auf dem Smartphone auf Wunsch wechselnd in einer Zeile.

• Inhalt: Mit Infopunkt hinzufügen legst du bis zu 12 Infopunkte an. Jeder Infopunkt hat einen Text, ein Icon aus den Shopware-Symbolen (Auswahl über Icon wählen …) oder ein Eigenes Icon (Bild), das das gewählte Icon ersetzt, und optional einen Link mit Link in neuem Tab öffnen.
• Einstellungen: Anordnung (Nebeneinander oder Untereinander), Ausrichtung (Links, Zentriert, Rechts, Gleichmäßig verteilt) und Darstellung auf Smartphones: Umbrechen zeigt alle Infopunkte, Wechselnd anzeigen zeigt auf kleinen Bildschirmen immer einen Infopunkt und wechselt nach dem Wechselintervall (Sekunden) – ideal für den Header.
• Gestaltung: Icongröße (rem), Textgröße (rem), Iconfarbe und Textfarbe.

Abb. 14: Auf dem Smartphone zeigt die Infobar einen Infopunkt nach dem anderen.

Countdown

Was dir das bringt: Du erzeugst Zeitdruck für Aktionen, Saisonstarts oder Veranstaltungen – mit einer Restzeit, die für alle Besucher gleich ist.

Abb. 15: Enddatum, Überschrift, Darstellung und Button des Countdowns.

• Inhalt: Unter Endet am wählst du den Zeitpunkt in deiner Zeitzone; gespeichert wird er zeitzonenneutral, sodass Besucher überall dieselbe Restzeit sehen. Ohne Enddatum erscheint der Countdown im Shop nicht. Dazu kommen Überschrift und Darstellung: Kacheln mit Zahlen oder Textzeile. Für die Textzeile schreibst du unter Text einen Satz mit den Platzhaltern {days}, {hours}, {minutes} und {seconds}, zum Beispiel „Noch {days} Tage bis zum Konzert“. Bezeichnungen unter den Zahlen anzeigen blendet „Tage“, „Stunden“ usw. unter den Kacheln ein. Mit Button-Beschriftung und einem Linkziel fügst du einen Button unter dem Countdown hinzu.
• Einstellungen: Unter Nach Ablauf legst du fest, ob der Countdown verschwindet (Countdown ausblenden) oder einen Text nach Ablauf zeigt (Text anzeigen). Dazu kommt die Ausrichtung.
• Gestaltung: Zahlenfarbe, Farbe der Bezeichnungen und Hintergrund der Kacheln.

Hinweis: Liegt das Enddatum in der Vergangenheit, weist dich der Designer darauf hin; im Shop greift dann die Einstellung Nach Ablauf.

Zähler

Was dir das bringt: Du präsentierst Kennzahlen wie zufriedene Kundinnen und Kunden oder Bewertungen mit einer hochzählenden Zahl. Der Zähler startet, sobald er im sichtbaren Bereich erscheint.

• Inhalt: Überschrift, Startwert, Zielwert, Präfix (direkt vor der Zahl, z. B. „+“ oder „€“) und Suffix (direkt dahinter, z. B. „ kg“ oder „ %“). Unter Text bestimmst du den angezeigten Satz: {counter} zeigt den laufenden Zähler mit Präfix und Suffix, zusätzlich stehen {start} und {end} zur Verfügung – etwa „Schon {counter} von {end} Bäumen gepflanzt“. Dazu wählst du ein Icon oder ein Eigenes Icon (Bild).
• Einstellungen: Laufzeit (Millisekunden) – so lange zählt der Zähler vom Start- zum Zielwert, unabhängig vom Abstand der Werte –, Nachkommastellen und Ausrichtung.
• Gestaltung: Zahlenfarbe, Farbe der Überschrift und Iconfarbe.

Die Zahl erscheint im Format der Shop-Sprache, im deutschen Shop also zum Beispiel als „12.500“.

Abb. 16: Oben ein Countdown mit Kacheln und Button, darunter zwei Zähler.

Parallax-Bild

Was dir das bringt: Ein großes Bild mit Text, über das der Inhalt beim Scrollen hinweggleitet – ideal als Bühne für Kampagnen.

• Inhalt: Bild – verwende ein Bild im Querformat mit mindestens 1920 px Breite; für Smartphones lädt der Shop automatisch ein kleineres Vorschaubild. Darunter der Text über dem Bild (optional).
• Einstellungen: Höhe (px), Effekt (Feststehend (Parallax) oder Mitscrollend), Ausrichtung und Vertikale Ausrichtung des Textes. Auf Touch-Geräten und bei reduzierter Bewegung im Betriebssystem scrollt das Bild normal mit.
• Gestaltung: Textfarbe, Überlagerungsfarbe und Deckkraft der Überlagerung (%) – eine dunkle Überlagerung macht hellen Text besser lesbar.

Abb. 17: Das Parallax-Bild mit einer dunklen Überlagerung.

Aktions-Karte

Was dir das bringt: Karten mit Bild und Text, die beim Überfahren, Antippen oder per Tastatur reagieren – für Produktvorstellungen, Gutscheine oder Teaser.

Abb. 18: Die Vorderseite mit Bild, Überschrift und Text.

• Vorderseite und Rückseite: jeweils Bild, Überschrift und Text.

• Link: das Linkziel, Link in neuem Tab öffnen und die Button-Beschriftung (leer: „Mehr erfahren“). Ohne Link erscheint kein Button.

• Einstellungen: Unter Aktion wählst du, wie die Karte reagiert:

  • Umdrehen – die Karte dreht sich bei Mauskontakt, Fingertipp oder Tastaturfokus auf die Rückseite mit Button.
  • Enthüllen – die Rückseite mit Button schiebt sich über die Vorderseite.
  • Unschärfe – ohne Rückseite: die unscharfe Vorderseite wird scharf, der Button ist sofort sichtbar. Mit Text nicht unscharf darstellen bleibt der Text immer lesbar.
  • Popup – die Rückseite mit Button öffnet sich in einem Fenster.
  • Statisch (ganze Karte verlinkt) – ohne Rückseite: die ganze Vorderseite ist mit dem Link hinterlegt.

  Dazu kommen Höhe (px) und Icon unten rechts, das Besuchern zeigt, dass die Karte reagiert.

Tipp: Im Designer schaltest du mit Vorderseite zeigen und Rückseite zeigen zwischen den beiden Seiten der Vorschau um.

Abb. 19: Die fünf Aktionen im Vergleich.

Abb. 20: Beim Überfahren zeigt die linke Karte ihre Rückseite mit Button.

Bildvergleich

Was dir das bringt: Besucher vergleichen zwei Bilder mit einem Schieberegler – etwa vorher und nachher, mit und ohne Zubehör. Der Teiler lässt sich mit Maus, Finger und Tastatur bewegen.

• Inhalt: Bild 1 (vorher) und Bild 2 (nachher), jeweils mit einer Beschriftung. Verwende beide Bilder im gleichen Seitenverhältnis.
• Einstellungen: Höhe (px) (0 = die Höhe ergibt sich aus dem Seitenverhältnis von Bild 2), Startposition des Teilers (%), Farbe des Teilers, Sanfte Bewegung, Runder Anfasser und Übereinander anordnen – dann bewegt sich der Teiler von oben nach unten statt von links nach rechts.

Abb. 21: Oben der Bildvergleich, darunter der Trenner mit dem Text „oder“.

Trenner und Abstand

Was dir das bringt: Du gliederst Seiten mit einer Linie, einem kurzen Text oder einem Symbol – oder schaffst einfach Luft zwischen zwei Blöcken.

Die Einstellungen stehen auf einer Seite: Höhe (px) ist die Gesamthöhe des Elements – ohne Linie entsteht ein reiner Abstand. Unter Linie wählst du Keine (nur Abstand), Durchgezogen, Gestrichelt, Gepunktet oder Doppelt, dazu Linienstärke (px), Linienfarbe und Breite (%). Optional setzt du einen Text in die Mitte der Linie, zum Beispiel „oder“, oder ein Icon, und wählst die Textfarbe.

Karte

Was dir das bringt: Du zeigst deinen Standort auf einer Karte von OpenStreetMap oder Google Maps – datenschutzfreundlich, denn die Karte lädt erst nach Einwilligung.

Abb. 22: Kartenanbieter, Koordinaten, Überschrift und Adresse.

• Inhalt: Unter Kartenanbieter wählst du OpenStreetMap (ohne API-Schlüssel) oder Google Maps. Den Ort legst du mit Breitengrad und Längengrad in Dezimalgrad fest, zum Beispiel 51.9606649. Tipp: In OpenStreetMap zeigt ein Rechtsklick auf den Ort → Adresse anzeigen die Koordinaten. Dazu kommen Überschrift und Adresse / Popup-Inhalt: Dieser Text steht unter der Karte und bei Google Maps zusätzlich im Popup der Markierung. Ohne Einwilligung oder bei abgeschalteten Karten bleibt nur dieser Text sichtbar.
• Einstellungen: Zoomstufe (1 = Welt, 15 = Straßen, 20 = Gebäude), Höhe (px) und Erst nach Einwilligung laden (Standard: an). Bei Google Maps wählst du zusätzlich den Kartentyp: Straßenkarte, Satellit, Satellit mit Beschriftung oder Gelände.

Wichtig: Google Maps braucht einen API-Schlüssel und eine Karten-ID in den Einstellungen des Plugins (Bereich Karten). Ohne Schlüssel zeigt der Shop nur den Adresstext.

Wie die Einwilligung im Shop funktioniert, beschreibt Karten und Datenschutz.

HTML und CSS

Was dir das bringt: Du fügst eigenen Code ein – etwa ein Formular eines Dienstleisters, eine Tabelle oder eigene Gestaltung mit <style>.

Im Feld HTML- und CSS-Code trägst du den Code ein. Er wird unverändert in die Seite übernommen – auch <style>, Klassen und Attribute, die der Texteditor entfernen würde.

Wichtig: Der Code wird ohne Prüfung im Shop ausgegeben. Fehlerhaftes HTML kann das Layout der Seite zerstören, eingebundene Skripte laufen bei jedem Besucher. Füge Inhalte aus fremden Quellen nur nach Prüfung ein.

Abb. 23: Oben drei Kennzeichen aus dem HTML-Element, darunter das Layout „3 Spalten (1/4 · 1/2 · 1/4)“.

Platzhalter und Datenzuordnung in Elementen

In den Texten der Elemente Hinweis, Call-to-Action, Kundenstimme, Tabs, Akkordeon, Aktions-Karte und HTML / CSS kannst du Platzhalter wie {{ category.name }} oder {{ product.name }} verwenden. Auf Kategorie- und Produktseiten ersetzt der Shop sie durch den Namen der Kategorie bzw. des Produkts. So gestaltest du ein Layout einmal und verwendest es für viele Kategorien.

In Layouts für Kategorie- und Produktseiten kannst du außerdem – wie bei den Standard-Elementen von Shopware – Inhalte zuordnen, statt sie fest einzutragen: beim Hinweis Überschrift und Inhalt, beim Call-to-Action das Hintergrundbild, bei der Aktions-Karte die Bilder von Vorder- und Rückseite und beim Bildvergleich beide Bilder.

Spalten- und Karten-Layouts

Was dir das bringt: Du ordnest beliebige Elemente in Spalten an – in gleich oder unterschiedlich breiten Spalten – und hältst auf dem Smartphone Bild und Text als Paar zusammen.

Abb. 24: Die Layout-Blöcke in der Kategorie „PowerPack Layouts“.

In der Block-Kategorie PowerPack Layouts findest du 13 Layouts:

• 2 Spalten (1/2 · 1/2), 2 Spalten (1/3 · 2/3), 2 Spalten (2/3 · 1/3), 2 Spalten (1/4 · 3/4) und 2 Spalten (3/4 · 1/4)
• 3 Spalten (gleich breit), 3 Spalten (1/4 · 1/2 · 1/4), 3 Spalten (1/2 · 1/4 · 1/4) und 3 Spalten (1/4 · 1/4 · 1/2)
• 4 Spalten (gleich breit) und 6 Spalten (gleich breit)
• 2 Spalten, Bild & Text und 4 Spalten, Bild & Text – Karten aus je einem Bild und einem Text

Jede Spalte enthält zunächst einen Text bzw. ein Bild. Über das Austausch-Symbol im Element ersetzt du ihn durch ein beliebiges anderes Element – auch durch PowerPack-Elemente. So stehen zum Beispiel zwei Zähler oder drei Aktions-Karten nebeneinander (siehe Abb. 16 und Abb. 19).

Auf Tablets stehen zwei Spalten jeweils halb so breit nebeneinander, auf Smartphones stehen die Spalten untereinander. Bei den Bild-und-Text-Karten bleibt auf dem Smartphone jedes Bild über seinem Text.

Abb. 25: Vier Bild-und-Text-Karten, darunter ein Standard-Textblock mit Farbverlauf (siehe Kapitel 8).

Abb. 26: Auf dem Smartphone bleiben Bild und Text als Paar zusammen.

Verlauf, Animation und Sichtbarkeit für Blöcke und Sektionen

Was dir das bringt: Jeder Block und jede Sektion – auch die Standard-Blöcke von Shopware – bekommt einen Farbverlauf, eine Einblend-Animation, einen Anzeigezeitraum und auf Wunsch Regeln, für wen er sichtbar ist. So planst du Aktionen im Voraus und zeigst Inhalte gezielt bestimmten Kundengruppen.

Abb. 27: Farbverlauf und Einblend-Animation eines Textblocks.

Schritt für Schritt

1. Öffne die Erlebniswelt im Designer und klicke auf den gewünschten Block. In der Seitenleiste öffnen sich die Block-Einstellungen. Für eine Sektion klickst du auf das Symbol links neben der Sektion; dann öffnen sich die Sektion-Einstellungen.
2. Klappe den Bereich PowerPack: Verlauf, Animation & Sichtbarkeit auf.
3. Stelle die gewünschten Werte ein und speichere das Layout.

Farbverlauf

Unter Farbverlauf wählst du Startfarbe und Endfarbe und legst mit Winkel (°) die Richtung fest: von -180 bis 180, wobei 180 von oben nach unten und 90 von links nach rechts verläuft. Eine Vorschau zeigt den Verlauf sofort. Der Verlauf liegt über der Hintergrundfarbe des Blocks; ein Hintergrundbild hat Vorrang.

Einblend-Animation

Unter Einblend-Animation wählst du Keine, Einblenden, Von unten einblenden, Von oben einblenden, Von rechts einblenden, Von links einblenden oder Heranzoomen. Die Animation spielt einmal ab, sobald der Block beim Scrollen sichtbar wird. Besucher, die in ihrem Betriebssystem reduzierte Bewegung eingestellt haben, sehen den Inhalt sofort.

Anzeigezeitraum

Abb. 28: Dieser Hinweis ist nur bis zum 1. Januar 2020 sichtbar – im Shop erscheint er deshalb nicht mehr.

Mit Sichtbar ab und Sichtbar bis legst du fest, in welchem Zeitraum der Block bzw. die Sektion im Shop erscheint. Du kannst auch nur eines der beiden Felder ausfüllen. Liegt das Ende vor dem Beginn, weist dich der Designer darauf hin – der Inhalt würde dann nie angezeigt.

Gut zu wissen: Der Zwischenspeicher des Shops wird zu Beginn und Ende des Zeitraums automatisch geleert. Das erledigt eine geplante Aufgabe, die alle 5 Minuten läuft; ein Block erscheint bzw. verschwindet also spätestens wenige Minuten nach dem eingestellten Zeitpunkt. Die Einstellungen gelten für alle Sprachen.

Regeln

Unter Nur anzeigen, wenn eine dieser Regeln zutrifft wählst du Regeln aus dem Rule Builder, zum Beispiel eine Kundengruppe oder einen Warenkorbwert. Der Block erscheint dann nur, wenn mindestens eine der gewählten Regeln zutrifft. Bleibt das Feld leer, ist der Block für alle sichtbar. Neue Regeln legst du unter Einstellungen → Rule Builder an.

Wichtig: Für die Auswahl von Regeln braucht dein Benutzerkonto die Berechtigung „Rule Builder – Ansehen“. Fehlt sie, weist dich der Bereich darauf hin.

Mit PowerPack-Einstellungen zurücksetzen entfernst du Verlauf, Animation, Zeitraum und Regeln des gewählten Blocks bzw. der Sektion auf einen Schlag.

Layouts in Header, Footer und Checkout

Was dir das bringt: Du blendest eine Hinweisleiste, Vertrauenssymbole, Gutscheine oder Service-Informationen an festen Stellen deines Shops ein – gestaltet mit allen Elementen der Erlebniswelten und für jeden Verkaufskanal eigens.

Schritt für Schritt

1. Lege unter Inhalte → Erlebniswelten mit Neues Layout anlegen ein Layout an, zum Beispiel vom Layout-Typ Shopseite, und gestalte den Inhalt – etwa mit einem Hinweis oder einer Infobar.
2. Öffne die Einstellungen des Plugins und wähle oben den Verkaufskanal.
3. Wähle im Bereich Layouts in Header, Footer und Checkout das Layout für die gewünschte Stelle und die Position (siehe Einstellungen).
4. Klicke auf Speichern.

Das Layout erscheint nun an der gewählten Stelle – im Beispiel als grüne Hinweisleiste über dem Header (Abb. 3).

Tipp: Wählst du für verschiedene Verkaufskanäle unterschiedliche Layouts, zeigt jeder Shop seine eigene Leiste. Die Zuordnung gilt für alle Sprachen; die Texte übersetzt du wie gewohnt im Layout selbst.

Gut zu wissen: Löschst du ein zugeordnetes Layout, bleibt die Stelle im Shop einfach leer – es entstehen keine Fehler.

Textbaustein-Platzhalter in Produkten und Kategorien

Was dir das bringt: Wiederkehrende Texte pflegst du einmal als Textbaustein – in allen Sprachen – und setzt sie per Platzhalter in Produktnamen, Produktbeschreibungen und Kategoriebeschreibungen ein. Änderst du den Textbaustein, ändert sich der Text überall.

Schritt für Schritt

1. Lege unter Einstellungen → Textbausteine mit Neuer Textbaustein einen Textbaustein an, zum Beispiel mit dem Namen pflege.hinweis, und trage die Texte für deine Sprachen ein.

2. Schalte in den Einstellungen des Plugins im Bereich Textbausteine in Produkten und Kategorien die Schalter für die Felder ein, in denen du Platzhalter verwenden möchtest (siehe Einstellungen).

3. Schreibe den Platzhalter in das Feld, zum Beispiel in die Produktbeschreibung:

   {{ "pflege.hinweis"|trans }}

4. Speichere das Produkt bzw. die Kategorie. Im Shop erscheint an dieser Stelle der Text des Textbausteins in der Sprache des Besuchers.

Einfache und doppelte Anführungszeichen sind gleichermaßen erlaubt. In Beschreibungen gibt der Shop den Text des Textbausteins als reinen Text aus; enthält dein Textbaustein HTML, das als HTML erscheinen soll, schreibst du {{ "pflege.hinweis"|trans|raw }}.

Wichtig: Ersetzt werden ausschließlich Textbausteine. Andere Twig-Ausdrücke – etwa Bedingungen, Schleifen oder Variablen – führt das Plugin nicht aus; sie bleiben als Text stehen. Das schützt deinen Shop davor, dass über Produktdaten Programmcode ausgeführt wird.

Karten und Datenschutz

Was dir das bringt: Karten laden nichts von OpenStreetMap oder Google, bevor deine Besucher zugestimmt haben. Die Einwilligung verwalten sie im Cookie-Manager von Shopware.

Abb. 29: Vor der Einwilligung zeigt das Element einen Hinweis, einen Link zu den Datenschutzhinweisen des Anbieters und den Button „Karte laden“.

So funktioniert es im Shop:

1. Anstelle der Karte sieht der Besucher einen Hinweis, dass beim Laden Daten wie die IP-Adresse an den Kartenanbieter übertragen werden, dazu einen Link zu den Datenschutzhinweisen des Anbieters.
2. Mit Karte laden lädt die Karte für diesen Seitenaufruf. Setzt der Besucher vorher den Haken bei Karten immer laden (widerrufbar in den Cookie-Einstellungen), lädt der Shop Karten künftig ohne Rückfrage.
3. Unter der Karte stehen die Adresse und der Link Größere Karte anzeigen.

Abb. 30: Die geladene Karte mit Markierung und Adresse.

Im Cookie-Manager von Shopware erscheint in der Gruppe Komfortfunktionen der Eintrag Karten (OpenStreetMap, Google Maps). Dort erteilen oder widerrufen Besucher ihre Einwilligung dauerhaft.

Abb. 31: Der Eintrag für Karten in den Cookie-Einstellungen.

• Mit dem Schalter Erst nach Einwilligung laden im Karten-Element (Reiter Einstellungen) ist die Einwilligung standardmäßig eingeschaltet. Schalte sie nur aus, wenn ein eigenes Einwilligungs-Werkzeug die Seite absichert – sonst lädt die Karte sofort Inhalte des Anbieters.
• Mit Karten-Elemente erlauben in den Einstellungen des Plugins schaltest du Karten für einen Verkaufskanal ganz ab. Dann zeigen Karten-Elemente nur die Adresse, und der Eintrag im Cookie-Manager entfällt.

Tipp: Nenne die Kartenanbieter in deiner Datenschutzerklärung, wenn du Karten verwendest.

Umstieg von NetzpPowerPack6

Das CMS PowerPack deckt die Funktionen von NetzpPowerPack6 ab und ergänzt sie. Eine automatische Übernahme gibt es nicht: Layouts, die Elemente von NetzpPowerPack6 enthalten, stellt das Plugin nicht selbst um.

So gehst du vor:

1. Layouts neu aufbauen: Ersetze in deinen Erlebniswelten die Netzp-Blöcke durch die entsprechenden PowerPack-Blöcke (siehe Die PowerPack-Elemente und Spalten- und Karten-Layouts). Übernimm dabei Texte und Bilder in die Element-Einstellungen.
2. Header-, Footer- und Abschluss-Layouts neu zuordnen: Die Zuordnung liegt jetzt in den Einstellungen des Plugins, je Verkaufskanal und für alle Sprachen gemeinsam (siehe Layouts in Header, Footer und Checkout). Neu hinzugekommen sind der Warenkorb und die Seite „Bestellung abschließen“.
3. Zeitsteuerung und Regeln neu setzen: Trage Anzeigezeitraum und Regeln im Bereich PowerPack: Verlauf, Animation & Sichtbarkeit ein (siehe Verlauf, Animation und Sichtbarkeit für Blöcke und Sektionen). Den Zwischenspeicher musst du zum Stichtag nicht mehr selbst leeren.
4. Produkt- und Kategorietexte prüfen: Die Schreibweise {{ "textbaustein.name"|trans }} funktioniert weiter, sobald du die Schalter im Bereich Textbausteine in Produkten und Kategorien einschaltest. Andere Twig-Ausdrücke aus deinen Texten bleiben dagegen als Text stehen – ersetze sie durch Textbausteine oder festen Text (siehe Textbaustein-Platzhalter in Produkten und Kategorien).
5. Sichtbarkeit nach Geräten: Für die Anzeige auf Smartphone, Tablet oder Desktop nutzt du die Einstellung Sichtbarkeit mit Anzeigegeräte, die Shopware in den Block- und Sektion-Einstellungen mitbringt.

Tipp: Baue die Layouts zuerst in einer Testumgebung um und prüfe sie, bevor du NetzpPowerPack6 in deinem Live-Shop deaktivierst.

Fehlerbehebung

Die PowerPack-Blöcke erscheinen nicht in der Seitenleiste „Blöcke“

Woran es liegt: Das Plugin ist nicht aktiviert, oder du bearbeitest das Layout nicht in der System-Standardsprache.

So behebst du es:

1. Prüfe unter Erweiterungen → Meine Erweiterungen, ob der Schalter des Plugins eingeschaltet ist.
2. Wechsle im Designer oben rechts in die Standardsprache deines Shops – nur dort kannst du Blöcke hinzufügen.
3. Lade die Administration neu.

Ein Element erscheint im Designer, aber nicht im Shop

Woran es liegt: Das Plugin ist für diesen Verkaufskanal ausgeschaltet, der Anzeigezeitraum ist noch nicht erreicht oder abgelaufen, keine der gewählten Regeln trifft zu – oder beim Countdown fehlt das Enddatum.

So behebst du es:

1. Prüfe in den Einstellungen des Plugins für diesen Verkaufskanal den Schalter Plugin für diesen Verkaufskanal aktivieren.
2. Prüfe im Bereich PowerPack: Verlauf, Animation & Sichtbarkeit des Blocks und der Sektion die Felder Sichtbar ab, Sichtbar bis und die Regeln.
3. Leere den Zwischenspeicher: Einstellungen → Caches & Indizes → Cache löschen.

Ein Block erscheint nicht pünktlich zum Beginn des Anzeigezeitraums

Woran es liegt: Der Zwischenspeicher wird über eine geplante Aufgabe alle 5 Minuten aktualisiert. Läuft die Aufgabe in deinem Shop nicht, bleibt die alte Seite stehen.

So behebst du es: Leere den Zwischenspeicher unter Einstellungen → Caches & Indizes → Cache löschen und bitte deinen technischen Ansprechpartner, die geplanten Aufgaben zu prüfen (siehe Für Administratoren und technische Details).

Ein Block mit Regel erscheint bei allen Besuchern gleich

Woran es liegt: In Shops mit bestimmten Leistungsoptionen berücksichtigt der Zwischenspeicher nur Regeln, die Produkte betreffen (siehe Für Administratoren und technische Details).

So behebst du es: Lass deinen technischen Ansprechpartner die Zwischenspeicher-Einstellungen prüfen, oder steuere die Anzeige über einen Anzeigezeitraum statt über eine Regel.

Die Karte zeigt nur die Adresse

Woran es liegt: Karten-Elemente erlauben ist ausgeschaltet, oder du hast Google Maps gewählt, aber keinen API-Schlüssel hinterlegt.

So behebst du es: Schalte Karten-Elemente erlauben ein bzw. trage Google-Maps-API-Schlüssel und Google-Maps-Karten-ID ein – oder wähle im Element OpenStreetMap (ohne API-Schlüssel).

Ein Textbaustein-Platzhalter wird im Shop als Text angezeigt

Woran es liegt: Der Schalter für dieses Feld ist ausgeschaltet, die Schreibweise stimmt nicht, oder der Textbaustein existiert nicht.

So behebst du es:

1. Schalte im Bereich Textbausteine in Produkten und Kategorien den passenden Schalter ein.
2. Prüfe die Schreibweise: {{ "name.des.textbausteins"|trans }}.
3. Prüfe unter Einstellungen → Textbausteine, ob der Textbaustein mit genau diesem Namen existiert.

Die Regelauswahl im Bereich „PowerPack“ bleibt leer

Woran es liegt: Deinem Benutzerkonto fehlt die Berechtigung „Rule Builder – Ansehen“.

So behebst du es: Bitte einen Administrator, deiner Rolle diese Berechtigung zu geben.

FAQ

F: Funktionieren die PowerPack-Elemente in allen Sprachen meines Shops?

A: Ja. Die Texte der Elemente pflegst du je Sprache in den Element-Einstellungen. Verlauf, Animation, Anzeigezeitraum und Regeln gelten für alle Sprachen gemeinsam.

F: Kann ich die PowerPack-Einstellungen auch für die Standard-Blöcke von Shopware nutzen?

A: Ja. Farbverlauf, Einblend-Animation, Anzeigezeitraum und Regeln stehen für jeden Block und jede Sektion zur Verfügung.

F: Muss ich nach einer zeitgesteuerten Aktion den Zwischenspeicher leeren?

A: Nein. Der Shop leert ihn zu Beginn und Ende des Zeitraums automatisch über eine geplante Aufgabe, die alle 5 Minuten läuft.

F: Brauche ich für Karten einen API-Schlüssel?

A: Nur für Google Maps. OpenStreetMap funktioniert ohne Schlüssel.

F: Lädt die Karte etwas, bevor der Besucher zustimmt?

A: Nein. Solange Erst nach Einwilligung laden eingeschaltet ist, lädt die Karte erst nach dem Klick auf Karte laden oder nach der Einwilligung im Cookie-Manager.

F: Kann ich das Plugin in einem Verkaufskanal abschalten?

A: Ja, mit dem Schalter Plugin für diesen Verkaufskanal aktivieren in den Einstellungen des Plugins, nachdem du oben den Verkaufskanal gewählt hast.

F: Werden meine Inhalte von NetzpPowerPack6 übernommen?

A: Nein, es gibt keine automatische Übernahme. Wie du umsteigst, beschreibt Umstieg von NetzpPowerPack6.

F: Funktionieren die Elemente auch in einem Headless-Shop?

A: Ja. Alle Inhalte stehen über die Store API zur Verfügung; Details für Entwickler findest du in Für Administratoren und technische Details.

Für Administratoren und technische Details

Dieser Abschnitt richtet sich an technische Administratoren und Entwickler. Für die normale Nutzung brauchst du ihn nicht.

Systemanforderungen

• Shopware: 6.7.3 bis 6.7.x – das Plugin registriert die Karten-Einwilligung über ein Ereignis des Cookie-Managers, das es erst ab Shopware 6.7.3 gibt.
• PHP: 8.2 oder neuer
• Datenbank: MySQL 8.0 / MariaDB 10.11 oder neuer

Installation über die Kommandozeile

php bin/console plugin:refresh
php bin/console plugin:install SwpCmsPowerPackSix --activate
php bin/console cache:clear

Die Storefront-Styles des Plugins werden beim nächsten Theme-Kompilieren übernommen (php bin/console theme:compile).

Geplante Aufgabe für den Anzeigezeitraum

Die Aufgabe swp_cms_power_pack.visibility_cache läuft alle 300 Sekunden. Sie sucht Blöcke und Sektionen, deren Anzeigezeitraum seit dem letzten Lauf begonnen oder geendet hat, und leert gezielt den Zwischenspeicher der betroffenen Layouts. Ein verpasster Lauf wird beim nächsten Mal nachgeholt. Voraussetzung ist, dass geplante Aufgaben und die Nachrichtenwarteschlange in deinem Shop laufen (Cronjob bzw. Worker oder der Admin-Worker).

Regel-Sichtbarkeit und HTTP-Cache

Im Standard von Shopware 6.7 enthält der Schlüssel des HTTP-Caches alle aktiven Regeln des Besuchers; die Sichtbarkeit nach Regeln funktioniert dann auch für gecachte Seiten. Sind die optionalen Feature-Flags PERFORMANCE_TWEAKS oder CACHE_REWORK aktiv, berücksichtigt der Cache-Schlüssel nur noch Regeln, die Produkte betreffen. Die Regel-Sichtbarkeit ist dann nur auf Seiten zuverlässig, die nicht aus dem HTTP-Cache ausgeliefert werden.

Berechtigungen

Das Plugin bringt keinen eigenen Bereich in der Administration mit. Die Elemente und der Bereich PowerPack: Verlauf, Animation & Sichtbarkeit nutzen die Berechtigungen der Erlebniswelten. Für die Regelauswahl braucht die Rolle zusätzlich Lesezugriff auf den Rule Builder. Das Element HTML / CSS gibt Code ungeprüft aus; vergib das Schreibrecht für Erlebniswelten deshalb nur an vertrauenswürdige Benutzer.

Deinstallation

Deinstallierst du das Plugin, ohne die Daten zu behalten, entfernt es die PowerPack-Einstellungen (Verlauf, Animation, Anzeigezeitraum, Regeln) aus allen Blöcken und Sektionen. Blöcke mit PowerPack-Elementen bleiben in deinen Layouts bestehen – ersetze oder entferne sie vorher.

Composable Frontends und Store API

Alle Daten der Elemente stehen nach dem Laden im slot.data der Store API (apiAlias swp_cms_power_pack_element). Ist das Plugin im Verkaufskanal ausgeschaltet, enthält slot.data nur { "active": false } – das Frontend rendert dann nichts. Anzeigezeitraum und Regeln sind beim Laden bereits angewendet: ausgeblendete Blöcke und Sektionen fehlen in der Antwort. Verlauf und Animation stehen als Erweiterung swpPowerPack (apiAlias swp_cms_power_pack_display) am Block bzw. an der Sektion: gradient (fertiger CSS-linear-gradient(...)), animation und styleId.

Store-API-Route für die Layouts in Header, Footer und Checkout:

Route	Methode	Zweck
/store-api/swp-cms-power-pack/zone/{zone}	GET, POST	aufgelöstes Erlebniswelten-Layout einer Stelle des Verkaufskanals; zone ist header, footer, cart, confirm oder finish

Die Antwort (apiAlias swp_cms_power_pack_zone) enthält zone, position (before oder after) und cmsPage – das vollständig aufgelöste Layout wie bei /store-api/cms/{id} oder null, wenn keine Zuordnung besteht, das Layout gelöscht oder das Plugin im Verkaufskanal ausgeschaltet ist. Das Frontend rendert cmsPage mit CmsPage aus @shopware/cms-base-layer an der gemeldeten Position.

Komponentennamen für Composable Frontends (nach resolveCmsComponent):

Element	Element-Komponente	Block-Komponente
Hinweis	CmsElementSwpPpAlert	CmsBlockSwpPpAlert
Call-to-Action	CmsElementSwpPpCta	CmsBlockSwpPpCta
Kundenstimme	CmsElementSwpPpTestimonial	CmsBlockSwpPpTestimonial
Tabs	CmsElementSwpPpTabs	CmsBlockSwpPpTabs
Akkordeon	CmsElementSwpPpAccordion	CmsBlockSwpPpAccordion
HTML / CSS	CmsElementSwpPpHtml	CmsBlockSwpPpHtml
Karte	CmsElementSwpPpMap	CmsBlockSwpPpMap
Countdown	CmsElementSwpPpCountdown	CmsBlockSwpPpCountdown
Zähler	CmsElementSwpPpCounter	CmsBlockSwpPpCounter
Parallax-Bild	CmsElementSwpPpParallax	CmsBlockSwpPpParallax
Aktions-Karte	CmsElementSwpPpActionCard	CmsBlockSwpPpActionCard
Bildvergleich	CmsElementSwpPpImageCompare	CmsBlockSwpPpImageCompare
Infobar / Iconleiste	CmsElementSwpPpInfobar	CmsBlockSwpPpInfobar
Trenner / Abstand	CmsElementSwpPpDivider	CmsBlockSwpPpDivider

Die Layout-Blöcke heißen CmsBlockSwpPpGrid25050, CmsBlockSwpPpGrid23367, CmsBlockSwpPpGrid26733, CmsBlockSwpPpGrid22575, CmsBlockSwpPpGrid27525, CmsBlockSwpPpGrid3Equal, CmsBlockSwpPpGrid3255025, CmsBlockSwpPpGrid3502525, CmsBlockSwpPpGrid3252550, CmsBlockSwpPpGrid4Equal, CmsBlockSwpPpGrid6Equal, CmsBlockSwpPpImageTextCards2 und CmsBlockSwpPpImageTextCards4. Ihre Slots heißen col-1 bis col-6 bzw. image-1/text-1 bis image-4/text-4. Die Spaltenbreiten in Zwölfteln: 2-50-50 = 6/6, 2-33-67 = 4/8, 2-67-33 = 8/4, 2-25-75 = 3/9, 2-75-25 = 9/3, 3-equal = 4/4/4, 3-25-50-25 = 3/6/3, 3-50-25-25 = 6/3/3, 3-25-25-50 = 3/3/6, 4-equal = 3 je Spalte, 6-equal = 2 je Spalte. Auf Tablets stehen zwei Spalten je 6/12, auf Smartphones untereinander.

Hat ein Frontend für ein Element noch keine eigene Komponente, zeigt Composable Frontends im Entwicklungsmodus einen Platzhalter mit dem gesuchten Komponentennamen.

---

Diese Anleitung wurde für CMS PowerPack: Elemente, Spalten-Layouts & Zeitsteuerung Version 6.7.0 erstellt.