Das kam einen Tag zu spät!
Eben habe ich ein Projekt abgeschlossen, wo auf einer bestehenden Website Texte ausgeklappt und wieder eingeklappt werden sollten.
Was bisher nur mit etwas Code in Squarespace möglich war, geht jetzt auch im Standard. Squarespace hat diese Woche (Stand: Oktober 2021) das Akkordeon-Element eingeführt und zwar für Squarespace 7.0 und 7.1.
Diese Neuerung habe ich zum Anlass genommen, diesen Effekt etwas genauer anzuschauen und folgende Fragen zu beantworten:
-
Ein Designelement, mit dem du Texte auf- und zuklappen kannst. Damit kannst du lange Texte platzsparender, also benutzerfreundlicher darstellen.
Das hier ist ein Akkordeon life und in action.
(englisch: accordion oder auch toggle genannt)
-
Das Akkordeon Element ist jetzt in beiden Squarespace Versionen ein Standard-Block, den du über das Menü auswählen kannst.
Es ist im Prinzip eine Liste. Die Liste besteht aus einer Überschrift, einem Text, einer Trennlinie und einem Symbol, welches den Benutzer:innen klar macht: “Hier gibt’s was zum Interagieren”
Der Text wird nicht dargestellt. Erst wenn jemand auf die Überschrift klickt, wird der Text ausgeklappt.
-
Ich finde diesen neuen Block sehr durchdacht. Die Optionen sind einfach, aber doch sehr effektiv um verschiedene Designs und Funktionen zu erreichen.
Die Gestaltung findet direkt im Akkordeon-Block statt. Es gibt den Inhalt und das Design, das du anpassen kannst.
Beim Inhalt kannst du den Text wie üblich formatieren: also fett, kursiv und unterstrichen darstellen. Du kannst auch einen Link hinzufügen und die Reihenfolge der einzelnen Elemente innerhalb des Akkordeons ändern.
Du findest zwar im Formatierungs-Balken, keine Aufzählungszeichen und Nummerierung, aber das funktioniert trotzdem: Tippe einfach “Minus+Leerzeichen” oder “Zahl+Punkt+Leerzeichen”.
Im Menü-Punkt Design kannst du auch alle einzelnen Bestandteile des Akkordeons bearbeiten. Was und wie genau, kannst du im Video in diesem Beitrag anschauen.
Besonders gefällt mir die Möglichkeit, das erste Element im Akkorden offen oder geschlossen zu starten und dass man entscheiden kann, ob ein Element ausgeklappt bleibt oder geschlossen wird, sobald man ein anders anklickt.
-
Du kannst innerhalb des zugeklappten Bereichs keine Bilder (oder andere Elemente) hinzufügen.
Du kannst die Abstände zum vorherigen und nachfolgenden Element nicht ändern
außerdem wird das Styling der Links innerhalb der Beschreibung nicht von der Gesamtseite übernommen. Aber ich gehe davon aus, dass Squarespace hier noch nachbessert.
Im Video zeige ich dir wie du diesen neuen Akkordeon Block hinzufügen und bearbeiten kannst:
So jetzt weißt du was es ist und wie du es benutzen kannst. Und zum Schluss wollte ich zwei konkrete Anwendungsfälle vorstellen, bei denen der Akkordeon-Effekt seine volle Wirkung entfalten kann:
Häufig gestellte Fragen
Der wohl bekannteste Fall sind die FAQs. Wenn du auf deiner Website eine Sektion oder eine ganze Seite hast, wo du häufig gestellte Fragen deiner Kund:innen beantwortest, ist ein Akkordion super dafür!
Die Leser:innen brauchen nicht mehr so ewig Scrollen und haben eine einfache Möglichkeit, die Informationen zu sehen, die sie wirklich brauchen. Alles ist ordentlich und aufgeräumt. Herrlich :-)
“Weiterlesen” oder “Mehr erfahren”
In meinem zuletzt abgeschlossenen Projekt, haben wir eine Reihe von Events mit Hilfe von Akkordeon übersichtlicher dargestellt.
Hier ein fiktives Beispiel, wie ich das meine. “Zeigen” ist bekanntlich immer besser als “sagen” ;-)
29. Oktober 2021
Websites für lokale Kleinbetriebe und Selbstständige
Katja Scalia zeigt dir in diesem interaktiven Workshop, warum besonders die lokalen Geschäfte von einer Website profitieren und wie du deine komplett selbst in die Hand nehmen kannst. Von der Planung bis zur erfolgreichen Umsetzung und Pflege.
-
Der Workshop findet online im Zoom statt. Du kannst also bequem von deinem Wohnzimmer oder Büro teilnehmen.
Die Workshops dauern 2x 60 Minuten mit einer 15 minütigen Pause dazwischen.
Du kannst entweder Vormittags von 10 bis ca. 12:30 Uhr teilnehmen oder am Abend von 17 Uhr bis 19:30 Uhr.
05. November 2021
Konzept & Inhalte für die Website
Katja Scalia zeigt dir in diesem interaktiven Workshop,
wie du strukturiert und mit Strategie deine Website planen kannst
und wie du Fotos und Texte für deine Website vorbereitest.
-
Der Workshop findet online im Zoom statt. Du kannst also bequem von deinem Wohnzimmer oder Büro teilnehmen.
Die Workshops dauern 2x 60 Minuten mit einer 15 minütigen Pause dazwischen.
Du kannst entweder Vormittags von 10 bis ca. 12:30 Uhr teilnehmen oder am Abend von 17 Uhr bis 19:30 Uhr.
Was denkst du? Kannst du diesen Effekt auf deiner Website nutzen, um sperrige Inhalte schlanker und leserfreundlicher darzustellen?
Fallen dir weitere Anwendungsbeispiele ein? Schreib sie mir gerne in die Kommentare!
Bis bald!
Katja