PageBuilderAccordion — Page Builder Akkordeon¶
Extension for Magento 2¶
Bedienungsanleitung¶
CopeX GmbH
Web: https://copex.io
Email: office@copex.io
Inhaltsverzeichnis¶
| Abschnitt | Seite |
|---|---|
| 1 Voraussetzungen | 2 |
| 2 Konfiguration | 2 |
| 2.1 Akkordeon-Einstellungen | 2 |
| 3 Verwendung | 3 |
| 3.1 Akkordeon-Element im Page Builder anlegen | 3 |
| 3.2 Inhalt und Styling konfigurieren | 4 |
| 4 Frontend-Ausgabe | 4 |
1 Voraussetzungen¶
- Magento 2.3 oder höher (kompatibel mit 2.4)
- PHP 8.1 oder höher
- Magento Page Builder aktiviert
- Hyvä Theme oder Luma Theme
2 Konfiguration¶
Die Konfiguration des Moduls finden Sie im Magento 2 Backend unter Shops > Konfiguration > Inhaltsverwaltung > Page Builder.
2.1 Akkordeon-Einstellungen¶
Navigieren Sie zu Shops > Konfiguration > Inhaltsverwaltung > Page Builder.
- Akkordeon-Icon-Stil — Wählt das Symbol für den Öffnen/Schließen-Toggle des Akkordeons:
- Plus/Minus (+/-) — Klassisches Plus-Minus-Symbol
- Pfeil — Chevron/Pfeil-Symbol
3 Verwendung¶
3.1 Akkordeon-Element im Page Builder anlegen¶
Nach der Installation des Moduls steht im Magento Page Builder ein neues Inhaltselement Akkordeon zur Verfügung. Es kann in statischen Seiten, CMS-Blöcken und überall dort eingesetzt werden, wo der Page Builder verfügbar ist.
Akkordeon-Element hinzufügen:
- Öffnen Sie eine CMS-Seite oder einen CMS-Block im Backend unter Inhalt > Seiten oder Inhalt > Blöcke.
- Klicken Sie auf Bearbeiten und dann auf den Page Builder Editor.
- Ziehen Sie im linken Bereich unter dem Bereich Inhalt das Element Akkordeon auf die gewünschte Stelle im Layout.
- Das Akkordeon-Element erscheint im Editor mit einem Platzhalter-Akkordeon.
3.2 Inhalt und Styling konfigurieren¶
Nach dem Hinzufügen können Sie das Akkordeon konfigurieren:
- Akkordeon-Elemente hinzufügen — Jedes Akkordeon-Element besteht aus einem Titel und einem Inhaltsbereich. Der Inhaltsbereich kann Text, Bilder, HTML-Code, Buttons und weitere Page Builder-Elemente enthalten.
Verfügbare CSS-Einstellungen:
| Einstellung | Beschreibung |
|---|---|
| Ausrichtung | Horizontale Ausrichtung des Akkordeons |
| Rahmentyp | Rahmen um das Akkordeon (keiner, durchgehend, gestrichelt etc.) |
| Rahmenfarbe | Farbe des Rahmens |
| Rahmenbreite | Breite des Rahmens in Pixeln |
| Rahmenradius | Abrundung der Ecken in Pixeln |
| Rand | Außenabstand (Margin) |
| Innenabstand | Innenabstand (Padding) |
| CSS-Klassen | Benutzerdefinierte CSS-Klassen für individuelles Styling |
4 Frontend-Ausgabe¶
Das Akkordeon-Element wird im Frontend als aufklappbare Liste dargestellt. Jedes Element zeigt standardmäßig nur den Titel. Ein Klick auf den Titel öffnet den Inhaltsbereich darunter.
In der Frontend-Ansicht ist das Akkordeon als klar strukturierter Inhaltsblock sichtbar. Besucher können einzelne Bereiche auf- und zuklappen, um längere Inhalte platzsparend darzustellen (z.B. FAQs, technische Details, Lieferinformationen). Das konfigurierte Icon (Plus/Minus oder Pfeil) signalisiert den aktuellen Zustand der jeweiligen Sektion. Falls auf der betrachteten CMS-Seite kein Akkordeon-Content hinterlegt wurde, erscheint stattdessen nur der reguläre Seiteninhalt.
Das Icon-Symbol (Plus/Minus oder Pfeil) wird entsprechend der Konfiguration unter Shops > Konfiguration > Inhaltsverwaltung > Page Builder > Akkordeon-Icon-Stil angezeigt.
Das Modul ist vollständig kompatibel mit dem Hyvä Theme und dem Standard-Luma Theme. Für das Hyvä Theme wird ein eigenes Template (view/frontend/templates/pagebuilder/hyva/accordion.phtml) mit Alpine.js-Integration verwendet, das CSP-konform ist.
Lizenz¶
Proprietär — CopeX GmbH. Eine Lizenz pro produktiver Magento-Instanz. Test- und Entwicklungsumgebungen benötigen keine zusätzliche Lizenz.