Mit dem Block „Akkordeon“ können Sie erweiterbare und reduzierbare Textabschnitte zu Ihren SeedProd-Seiten hinzufügen. Dieser Block hilft Ihnen dabei, große Mengen an Inhalten in einem kompakten, benutzerfreundlichen Format zu organisieren, das Besucher in ihrem eigenen Tempo erkunden können.
Akkordeonblöcke eignen sich perfekt für FAQs, Funktionslisten, Produktspezifikationen, Geschäftsbedingungen oder andere Inhalte, bei denen Sie Informationen übersichtlich präsentieren möchten, ohne Besucher mit Textwüsten zu überfordern. Indem Sie den Benutzern die Möglichkeit geben, nur die Informationen anzuzeigen, die sie benötigen, schaffen Sie ein übersichtlicheres und ansprechenderes Seitenerlebnis.
Hinzufügen des Akkordeon-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Akkordeon-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Akkordeon“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Der Akkordeon-Block wird im Block-Bedienfeld angezeigt und kann in jeden Abschnitt oder jede Spalte Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Akkordeon-Block, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie Ihre Akkordeonelemente verwalten und deren Darstellung anpassen.
Akkordeon-Elemente:
- Akkordeon 1, Akkordeon 2 usw.: Klicken Sie auf jedes Akkordeonelement, um dessen Titel und Inhalt zu bearbeiten. Jedes Element stellt einen zusammenklappbaren Abschnitt dar, den Benutzer ein- oder ausklappen können.
- Neues Element hinzufügen: Klicken Sie auf diese Schaltfläche, um Ihrem Block weitere Akkordeon-Abschnitte hinzuzufügen. Sie können so viele Elemente hinzufügen, wie Sie benötigen, um Ihre Inhalte effektiv zu organisieren.
Typografie und Abstände:
- Schriftgröße: Passen Sie die Größe des Textes in Ihrem Akkordeon-Inhalt an Ihre Designvorlieben an.
- Abstand zwischen: Steuert den vertikalen Abstand zwischen Akkordeon-Elementen (Standardwert ist 24 Pixel). Erhöhen Sie diesen Wert für mehr Platz oder verringern Sie ihn für ein kompakteres Layout.
Anpassung von Symbolen:
- Symbol ausrichten: Wählen Sie aus, wo das Symbol zum Ein- und Ausblenden relativ zum Titel der Akkordeonansicht angezeigt werden soll (in der Regel links oder rechts ausgerichtet).
- Geschlossenes Symbol: Wählen Sie aus, welches Symbol angezeigt wird, wenn ein Akkordeonbereich ausgeblendet ist. So können Benutzer Bereiche leichter erkennen, die sie erweitern können.
- Farbe des geschlossenen Symbols: Wählen Sie die Farbe für das Symbol, wenn die Akkordeonansicht zusammengeklappt ist.
- Symbol öffnen: Wählen Sie aus, welches Symbol angezeigt wird, wenn ein Akkordeonbereich erweitert wird, um visuelles Feedback zum Status des Bereichs zu geben.
- Farbe des Symbols „Öffnen“: Wählen Sie die Farbe für das Symbol, wenn die Akkordeonansicht erweitert ist.
Die Registerkarte „Inhalt“ bietet Optionen zum Verwalten von Akkordeonelementen, Anpassen der Typografie, Steuern des Abstands und Anpassen der Symbole zum Ein- und Ausblenden.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Akkordeon-Blocks anpassen:
Stile:
- Typografie: Optimieren Sie die Schriftfamilie, Schriftstärke, den Stil und andere Texteigenschaften für Akkordeon-Inhalte.
- Textfarbe: Legen Sie die Farbe für den Text innerhalb der Akkordeon-Inhaltsabschnitte fest.
- Überschriften-Typografie: Steuern Sie die Schriftart-Eigenschaften speziell für Akkordeon-Überschriften/Kopfzeilen.
- Header-Farbe: Wählen Sie die Farbe für Akkordeon-Header, wenn diese geschlossen sind.
- Farbe für geöffnete Kopfzeilen: Legen Sie eine andere Farbe für Kopfzeilen fest, wenn deren Abschnitte erweitert sind, um ein klares visuelles Feedback zu erhalten.
- Hintergrundfarbe: Fügen Sie Ihren Akkordeon-Abschnitten eine Hintergrundfarbe hinzu, um sie optisch besser voneinander zu trennen.
- Farbtrennlinie: Wählen Sie die Farbe der Linien, die die Akkordeonelemente voneinander trennen.
- Textschatten: Fügen Sie Ihrem Akkordeontext Schatteneffekte hinzu, um Tiefe und Lesbarkeit zu erzielen.
- Schatten: Wende Schatteneffekte auf den gesamten Akkordeonblock oder einzelne Elemente an.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Akkordeonblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Akkordeon und den umgebenden Elementen angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihrer Akkordeon-Abschnitte an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Inhalt und den Akkordeon-Rändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Akkordeonblock an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Accordion-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. aria-label|FAQ-Bereich)
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Den Akkordeonblock auf Desktop-Bildschirmen ausblenden
- Auf Tablet ausblenden: Den Akkordeonblock auf Tablet-Geräten ausblenden
- Auf Mobilgeräten ausblenden: Den Akkordeonblock auf Mobilgeräten ausblenden
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Akkordeonansicht eingeblendet wird. Dies sorgt für visuelle Abwechslung und lenkt die Aufmerksamkeit auf Ihre Inhalte.
Die Registerkarte „Erweitert“ bietet umfangreiche Gestaltungsoptionen, darunter Typografie, Farben, Abstände und visuelle Effekte, die Sie an Ihre Marke anpassen können.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Akkordeon-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Akkordeon-Block zu Ihrer Seite hinzugefügt! Dieser vielseitige Block hilft Ihnen dabei, große Mengen an Informationen in einem übersichtlichen, benutzerfreundlichen Format zu präsentieren, das zum Interagieren anregt, ohne die Besucher zu überfordern. Experimentieren Sie mit verschiedenen Kopfzeilenfarben, Symbolstilen und Abstandsoptionen, um ein Akkordeon zu erstellen, das zu Ihrer Marke passt und Ihrem Publikum dient.