Der Akkordeon-Block ermöglicht es Ihnen, erweiterbare und einklappbare Textabschnitte zu Ihren SeedProd-Seiten hinzuzufügen. Dieser Block hilft Ihnen, große Mengen an Inhalten in einem kompakten, benutzerfreundlichen Format zu organisieren, das Besucher in ihrem eigenen Tempo erkunden können.
Akkordeon-Blöcke eignen sich perfekt für FAQs, Funktionslisten, Produktbeschreibungen, Geschäftsbedingungen oder alle Inhalte, bei denen Sie Informationen klar darstellen möchten, ohne Besucher mit Textwänden zu überfordern. Indem Sie Benutzern ermöglichen, durch Klicken nur die benötigten Informationen anzuzeigen, 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 Akkordeon-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Der Akkordeon-Block wird im Block-Panel angezeigt und kann in jeden Abschnitt oder jede Spalte Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Akkordeon-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie Ihre Akkordeon-Elemente verwalten und deren Darstellung anpassen.
Akkordeon-Elemente:
- Akkordeon 1, Akkordeon 2 usw.: Klicken Sie auf jedes Akkordeon-Element, um dessen Titel und Inhalt zu bearbeiten. Jedes Element stellt einen einklappbaren Abschnitt dar, den Benutzer erweitern oder einklappen können.
- Neues Element hinzufügen: Klicken Sie auf diese Schaltfläche, um zusätzliche Akkordeon-Abschnitte zu Ihrem Block 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 innerhalb Ihres Akkordeon-Inhalts an Ihre Designvorlieben an.
- Abstand dazwischen: Steuern Sie den vertikalen Abstand zwischen den Akkordeon-Elementen (Standard ist 24 Pixel). Erhöhen Sie diesen Wert für mehr Freiraum oder verringern Sie ihn für ein kompakteres Layout.
Symbolanpassung:
- Symbolausrichtung: Wählen Sie, wo das Erweiterungs-/Einklapp-Symbol relativ zum Akkordeon-Titel angezeigt wird (typischerweise links oder rechts ausgerichtet).
- Geschlossenes Symbol: Wählen Sie, welches Symbol angezeigt wird, wenn ein Akkordeon-Abschnitt eingeklappt ist. Dies hilft Benutzern, Abschnitte zu identifizieren, die sie erweitern können.
- Farbe des geschlossenen Symbols: Wählen Sie die Farbe für das Symbol, wenn das Akkordeon im eingeklappten Zustand ist.
- Offenes Symbol: Wählen Sie, welches Symbol angezeigt wird, wenn ein Akkordeon-Abschnitt erweitert ist, um visuelles Feedback über den Zustand des Abschnitts zu geben.
- Farbe des offenen Symbols: Wählen Sie die Farbe für das Symbol, wenn das Akkordeon im erweiterten Zustand ist.
Der Tab "Inhalt" bietet Optionen zur Verwaltung von Akkordeon-Elementen, zur Anpassung der Typografie, zur Steuerung von Abständen und zur Anpassung der Erweiterungs-/Einklapp-Symbole.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Akkordeon-Blocks anpassen:
Stile:
- Typografie: Feinabstimmung der Schriftfamilie, des Schriftschnitts, des Stils und anderer Texteigenschaften für Akkordeon-Inhalte.
- Textfarbe: Legt die Farbe für den Text in den Akkordeon-Inhaltsbereichen fest
- Kopfzeilen-Typografie: Steuert die Schrifteigenschaften speziell für Akkordeon-Titel/Kopfzeilen
- Kopfzeilenfarbe: Wählt die Farbe für Akkordeon-Kopfzeilen im geschlossenen Zustand
- Kopfzeilen-Farbe (geöffnet): Legt eine andere Farbe für Kopfzeilen fest, wenn ihre Abschnitte erweitert sind, um klares visuelles Feedback zu geben
- Hintergrundfarbe: Fügt Ihren Akkordeon-Abschnitten eine Hintergrundfarbe für eine bessere visuelle Trennung hinzu
- Trennlinienfarbe: Wählt die Farbe der Linien, die Akkordeon-Elemente trennen
- Textschatten: Fügt Schatteneffekte zu Ihrem Akkordeon-Text hinzu, um Tiefe und Lesbarkeit zu verbessern
- Schatten: Wendet Schatteneffekte auf den gesamten Akkordeon-Block oder einzelne Elemente an
Abstand:
- Abstand (Außen): Steuert den äußeren Abstand um Ihren Akkordeon-Block (oben, rechts, unten, links). Dies bestimmt, wie viel Platz zwischen dem Akkordeon und den umgebenden Elementen erscheint
- Abstand (Innen): Passt den inneren Abstand innerhalb Ihrer Akkordeon-Abschnitte an (oben, rechts, unten, links). Dies schafft Freiraum zwischen dem Inhalt und den Akkordeon-Rändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Akkordeon-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder zur gezielten JavaScript-Steuerung erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Akkordeon-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. aria-label|FAQ-Bereich)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blendet den Akkordeon-Block auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blendet den Akkordeon-Block auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blendet den Akkordeon-Block auf Mobilgeräten aus
Animationseffekte:
- Erscheinungsanimation: Wählt aus verschiedenen Animationseffekten, die abgespielt werden, wenn das Akkordeon ins Sichtfeld scrollt. Dies fügt visuelles Interesse hinzu und lenkt die Aufmerksamkeit auf Ihren Inhalt
Der Tab 'Erweitert' bietet umfangreiche Styling-Optionen, einschließlich Typografie, Farben, Abstände und visuelle Effekte, die zu Ihrer Marke passen.
Schritt 4: Speichern Sie Ihre Änderungen
Sobald Sie die Konfiguration des Akkordeon-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Akkordeon-Block zu Ihrer Seite hinzugefügt! Dieser vielseitige Block hilft Ihnen, große Mengen an Informationen in einem sauberen, benutzerfreundlichen Format darzustellen, das zur Interaktion 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.