Das Accordion-Widget ist die Neuauflage des bisherigen Poker-Templates. Es unterstützt 2 bis 5 Elemente. Neben einem übergeordneten Textfeld (Hauptinhalts-Box), das frei befüllt werden kann, verfügt jedes Element über ein eigenes Textfeld.
Das Besondere am neuen Accordion-Widget: Im Vergleich zum Vorgänger stehen nun deutlich mehr Funktionen zur Verfügung:
Hauptinhaltsbox
Position: oben, mittig, unten, rechts oder links
Breite: fünf verschiedene Größen wählbar
Hintergrund: Farbe, Medium oder eine Kombination
Rundung der Box möglich
Globaler Expand-Button-Stil:
Über einen Toggle kann festgelegt werden, ob der Button für alle Elemente einheitlich sein soll. Ist der Toggle deaktiviert, lässt sich der Button pro Element individuell gestalten.
Accordion-Elemente öffnen 1 | 2 | 3
Mit einem Klick wählst du aus, welches Element geöffnet werden soll, um darin Änderungen vorzunehmen. Achte darauf, das Element anschließend per Klick wieder zu schließen, bevor du das nächste öffnest und bearbeitest.
Accordion-Elemente
Es können bis zu 5 Elemente angelegt werden. In der oberen Ebene lassen sich Elemente jederzeit mit dem Mülleimersymbol löschen, duplizieren oder per Drag & Drop in ihrer Position verschieben.
Ein Klick auf ein Element öffnet die Funktionsleiste. Zuerst erscheinen die Einstellungen zum Hintergrund. Danach kann der Expand-Button (auch Icon genannt) individuell angepasst werden – z. B. in Farbe, Position oder Größe.
Darunter befindet sich das Label, welches optional vergeben werden kann und oberhalb des Expand-Buttons angezeigt wird. Auch hier sind Anpassungen bei Schriftart, Schriftgröße, Farbe und Padding möglich.
Zum Schluss wird das Textfeld des Elements (Akkordion-Element-Content-Box) gestaltet. Hier können Position, Größe, Rundung, Padding sowie Hintergrundfarbe oder Hintergrundmedium definiert werden. Für das Hintergrundmedium stehen, analog zum Gesamtelement, weitere Optionen wie die Medienposition zur Verfügung.
In diese Element-Content-Boxen lassen sich beliebig viele Widgets (z. B. Header-, Text- oder Bild-Widget) per Drag & Drop einfügen.