Akkordeon-Blöcke

Zeige große Textmengen in zusammenklappbaren Abschnitten an, um Besuchern die Navigation bei textlastigen Inhalten zu erleichtern.

Zuletzt aktualisiert: 10. April 2024

Verwende Akkordeon-Blöcke, um Textinhalte in einklappbaren Abschnitten anzuzeigen. Dies ist eine großartige Option für strukturierte, textlastige Seiten wie FAQs oder Produktangebote. Akkordeon-Blöcke helfen dabei, deine Seite kurz zu halten und das Scrollen für deine Besucher zu reduzieren.

Video ansehen

So funktionieren Akkordeon-Blöcke

Besucher deiner Website sehen den Akkordeon-Block als eine Liste von Titeln zusammen mit Erweiterungssymbolen. Abhängig von deinen Design-Einstellungen kann das erste Element standardmäßig erweitert sein.

Besucher klicken auf jeden Titel, um den Beschreibungstext zu öffnen. Für jeden Akkordeon-Block kann jeweils nur ein Element erweitert werden. Wenn deine Besucher auf ein erweitertes Element klicken, wird es eingeklappt. Wenn sie auf ein Element klicken, während ein anderes Element bereits erweitert ist, wird das zuvor erweiterte Element geschlossen.

Accordion_block.png

Einen Akkordeon-Block hinzufügen

So fügst du einen Akkordeon-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und wähle dann Akkordeon aus dem Menü. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
  3. Füge im Tab Inhalt Elemente im Akkordeon-Block hinzu und bearbeite sie. Jedes Element enthält einen Titeltext, der immer angezeigt wird, und einen Beschreibungstext, der angezeigt wird, wenn das Element erweitert wird.
  4. Gestalte im Tab Design das Erscheinungsbild des Akkordeon-Blocks.
  5. Klicke außerhalb des Block-Editors, wenn du fertig bist. Deine Änderungen werden automatisch gespeichert.

Elemente hinzufügen und bearbeiten

Im Tab „Inhalt“:

  • Klicke auf ein Element in der Liste, um den Titel und die Beschreibung zu bearbeiten
  • Klicke auf Element hinzufügen, um ein neues Element hinzuzufügen
  • Klicke und halte ein Element gedrückt, um es neu anzuordnen
  • Fahre mit der Maus über ein Element und klicke auf das Papierkorb-Symbol, um es zu löschen

Wenn du ein Element öffnest, siehst du weitere Optionen:

  • Bearbeite den Titeltext im Feld Titel
  • Bearbeite den Beschreibungstext im Feld Beschreibung
  • Klicke auf Duplizieren, um eine Kopie des Elements zu erstellen
  • Klicke auf Löschen, um das Element zu löschen

Den Akkordeon-Block gestalten

Im Design-Tab kannst du den Text, das Layout, das Erscheinungsbild und das Symbol des Blocks formatieren:

  • Klicke auf Titel, um das Format und die Ausrichtung des Titeltexts festzulegen.
  • Klicke auf Beschreibung, um das Format und die Ausrichtung der Beschreibung festzulegen, zusammen mit anderen Optionen wie:
    • Breite, um die Breite des Textes festzulegen.
    • Padding, um den Leerraum um den Text herum festzulegen.
    • Ausrichtung, um festzulegen, in welche Richtung der Text ausgerichtet wird.
    • Platzierung, um festzulegen, wo der Text im Block platziert wird.
  • Aktiviere Erstes Element erweitern, damit das erste Element standardmäßig erweitert wird.
  • Aktiviere Mehrere offene Elemente zulassen um zu verhindern, dass ein Element geschlossen wird, wenn ein anderes geöffnet wird.
  • Klicke auf Teiler, um die Linien, die jedes Element trennen, zu gestalten oder zu deaktivieren.
  • Klicke auf Symbol, um das Erweiterungssymbol als Pfeil oder Pluszeichen festzulegen.
  • Lege unter „Symbol“ die Symbolgröße, die Symbolstärke und die Symbolplatzierung fest.
  • Lege das Reihen-Padding fest, um den Leerraum um jedes Element herum zu ändern.
  • Aktiviere auf Websites der Version 7.1 den Schalter Hintergrundfarbe, um einen Farbhintergrund zum Block hinzuzufügen, Eckenradien festzulegen und das Hintergrund-Padding zu ändern. Block-Hintergrundfarben werden in Version 7.0 nicht unterstützt.
  • Aktiviere neben Strich eine durchgezogene oder gepunktete Linie, die den Block umranden soll. Lege sowohl für durchgezogene als auch für gepunktete Linien die Farbe und Stärke des Strichs fest. 
  • Klicke auf das Drop-down-Menü Mischmodus, um eine Transparenzeinstellung auszuwählen. Diese Effekte sind ideal, wenn du einen Akkordeon-Block vor einem Bild oder anderen visuellen Inhalten überlagerst.
  • Um entweder das Element oder den Hintergrund unscharf zu machen, aktiviere den Schalter neben Unschärfe und verwende den Schieberegler, um den Unschärfegrad anzupassen.

So erlangst du Zugriff auf diese Funktion

Die Anpassungen für Strich, Mischmodus und Unschärfe sind für die Abschnitte Kreativer Editor verfügbar. Für Abschnitte, die den Klassischen Editor verwenden, ist nur Strich verfügbar.

Schriftart und Farbe des Textes

Die Schriftart und -farbe des Textes entsprechen den Einstellungen der Website-Stile. Beachte, dass sich das Ändern dieser Einstellungen auf alle Elemente auf deiner Website mit denselben Einstellungen auswirkt:

  • Im Menü „Schriftarten“ folgen Akkordeon-Block-Titel den Einstellungen für Überschriften und der Größe von Überschrift 4. Akkordeon-Block-Beschreibungen folgen den Einstellungen für Absätze und der Größe von Absatz 2.
  • Im Menü „Farben“ folgen Akkordeon-Block-Titel der Anpassung Überschrift (klein) für das Farbschema. Akkordeon-Block-Beschreibungen folgen der Anpassung Absatz (mittelgroß).

Andere Farben

Verwende im Menü „Farben“ die Anpassungen unter Akkordeon-Block, um die Teilerfarbe, die Symbolfarbe und die Standard-Hintergrundfarbe zu ändern.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.