Mit dem Tabs-Block können Sie Inhalte auf einer einzigen SeedProd-Seite über mehrere umschaltbare Bereiche organisieren und anzeigen. Anstatt alle Informationen vertikal zu stapeln, können Besucher mit den Tabs sofort zwischen den Abschnitten navigieren – so bleiben Ihre Seiten übersichtlich, fokussiert und leicht lesbar.
Der Block unterstützt sowohl horizontale als auch vertikale Registerkartenlayouts, Symbole pro Registerkarte, Rich-Text-Inhalte in jedem Bereich und eine vollständige Palette an Stilsteuerelementen für Registerkartenfarben, Typografie, Rahmen und Abstände. Mit vorgefertigten Vorlagen können Sie mit einem Klick ein elegantes Erscheinungsbild erzielen, während Sie auf der Registerkarte „Erweitert“ jedes visuelle Detail genau steuern können.
Hinzufügen des Registerkartenblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Tabs-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Registerkarten“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Tabs“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie im Abschnitt „Tabs“ alle Ihre Registerkartenfelder erstellen und verwalten:
- Registerkartenname: Geben Sie die Bezeichnung ein, die auf jeder Registerkarte angezeigt wird. Klicken Sie auf ein vorhandenes Registerkartenelement, um es zu erweitern und seinen Namen, sein Symbol und seinen Inhalt zu bearbeiten.
- Symbol: Weisen Sie jedem Registerkarten über die Symbolauswahl optional ein Symbol zu. Das Symbol wird neben der Registerkartenbezeichnung in der Registerkartenleiste angezeigt.
- Inhalt: Geben Sie den Textinhalt für jedes Registerfeld ein. Jedes Registerfeld verfügt über einen eigenen unabhängigen Inhaltsbereich.
- Neues Element hinzufügen: Klicken Sie auf diese Schaltfläche, um dem Block weitere Registerkarten hinzuzufügen.
- Löschen/Duplizieren: Jedes Registerkartenelement enthält Optionen zum Entfernen oder zum Erstellen einer Kopie mit denselben Einstellungen und Inhalten.
- Registerkarten-Symbol ausblenden: Aktivieren Sie diese Option, um die Symbole auf allen Registerkarten gleichzeitig ein- oder auszublenden.
- Symbolfarbe: Legen Sie mithilfe der Farbauswahl eine Farbe für alle Registerkartensymbole fest.
- Schriftgröße: Passen Sie die Schriftgröße der Registerkartenbeschriftungen an.
- Abstand zwischen: Legen Sie den Abstand zwischen benachbarten Registerkarten fest.
- Ausrichtung: Wählen Sie die horizontale Ausrichtung der Registerkartenleiste – links, mittig oder rechts.
Schritt 2a: Wählen Sie einen Vorlagenstil aus.
Auf der Registerkarte „Vorlagen“ können Sie mit einem einzigen Klick einen vorgefertigten visuellen Stil auf Ihren Registerkartenblock anwenden. Es stehen sieben voreingestellte Designs zur Verfügung, die von einem minimalistischen Standardstil bis hin zu dekorativeren Optionen mit Rahmen, Hintergründen und Symbolen reichen. Durch die Auswahl einer Vorlage werden die Farben, Rahmen und das Layout des Blocks sofort an das ausgewählte Design angepasst.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie im Abschnitt „Stile“ das Erscheinungsbild der Registerkartenleiste und der Inhaltsbereiche vollständig anpassen:
Tab-Leisten-Stile:
- Tab-Layout: Wechseln Sie zwischen horizontal (Registerkarten in einer Reihe angeordnet) und vertikal (Registerkarten in einer Spalte neben dem Inhaltsbereich gestapelt).
- Registerkartentypografie: Legen Sie Schriftart, Größe, Stärke, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für die Registerkartenbeschriftungen fest.
- Registerkartenfarbe: Wählen Sie die Textfarbe für inaktive Registerkartenbeschriftungen.
- Hintergrundfarbe der Registerkarte: Legen Sie die Hintergrundfarbe für inaktive Registerkarten fest.
- Farbe der aktiven Registerkarte: Legen Sie die Textfarbe für die aktuell ausgewählte Registerkarte fest.
- Hintergrund der aktiven Registerkarte: Legen Sie die Hintergrundfarbe für die aktuell ausgewählte Registerkarte fest.
- Tab-Eckenradius: Runden Sie die Ecken der Registerkarten-Schaltflächen mit einem Schieberegler von 0 bis 100 ab.
- Rahmenstil: Wählen Sie einen Rahmenstil für Registerkarten aus – durchgehend, gepunktet oder gestrichelt.
- Rahmenbreite: Legen Sie die Rahmenstärke für jede Seite (oben, rechts, unten, links) der Registerkarten fest.
- Rahmenfarbe: Wählen Sie die Rahmenfarbe für die Registerkarten.
- Registerkartenabstand: Steuert den inneren Abstand (oben, rechts, unten, links) innerhalb jeder Registerkarte.
Inhaltsbereichsstile:
- Inhaltstypografie: Legen Sie Schriftart, Größe, Stärke, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für den Text im Registerbereich fest.
- Inhaltshintergrund: Legen Sie die Hintergrundfarbe des Inhaltsbereichs fest.
- Textfarbe: Legen Sie die Textfarbe im Inhaltsbereich fest.
- Inhaltsrandradius: Runden Sie die Ecken des Inhaltsfeldes mit einem Schieberegler von 0 bis 100 ab.
- Inhaltsrahmenstil: Wählen Sie einen Rahmenstil für das Inhaltsfeld aus – durchgehend, gepunktet oder gestrichelt.
- Inhaltsrahmenfarbe: Wählen Sie die Rahmenfarbe des Inhaltsbereichs.
- Inhaltsrahmenbreite: Legen Sie die Rahmenstärke für jede Seite (oben, rechts, unten, links) des Inhaltsbereichs fest.
- Inhaltsabstand: Steuert den inneren Abstand innerhalb des Inhaltsbereichs.
- Textschatten: Fügen Sie dem Text im Inhaltsbereich einen Textschatten hinzu, wobei die Größe von „Keine“ bis „2X Groß“ voreingestellt ist.
Die Registerkarte „Erweitert“ enthält außerdem Steuerelemente für Abstände (Rand und Innenabstand), benutzerdefinierte CSS-Attribute, Gerätesichtbarkeit und Eintrittsanimationen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Tabs-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Tab-Block zu Ihrer Seite hinzugefügt! Tabs sind eine leistungsstarke Möglichkeit, viele Inhalte in einem kompakten, benutzerfreundlichen Format zu präsentieren – so bleiben Besucher interessiert, ohne von einer langen Scroll-Seite überwältigt zu werden. Experimentieren Sie mit horizontalen und vertikalen Layouts, Vorlagenstilen und Farbkombinationen, um einen Tab-Bereich zu erstellen, der sich nahtlos in Ihr Design einfügt.