Der Tabs-Block ermöglicht es Ihnen, Inhalte auf mehreren umschaltbaren Bereichen auf einer einzigen SeedProd-Seite zu organisieren und anzuzeigen. Anstatt alle Ihre Informationen vertikal zu stapeln, können Besucher mit Tabs sofort zwischen den Abschnitten navigieren – so bleiben Ihre Seiten übersichtlich, fokussiert und leicht lesbar.
Der Block unterstützt sowohl horizontale als auch vertikale Tab-Layouts, Symbole pro Tab, Rich-Text-Inhalte in jedem Bereich und eine vollständige Palette von Styling-Optionen für Tab-Farben, Typografie, Rahmen und Abstände. Vorgefertigte Vorlagen ermöglichen es Ihnen, mit einem Klick ein poliertes Aussehen anzuwenden, während der erweiterte Tab Ihnen die volle Kontrolle über jedes visuelle Detail gibt.
Hinzufügen des Tabs-Blocks 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 Tabs-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Tabs-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie im Abschnitt Tabs alle Ihre Tab-Bereiche erstellen und verwalten:
- Tab-Name: Geben Sie die Beschriftung ein, die auf jedem Tab-Button angezeigt wird. Klicken Sie auf ein beliebiges vorhandenes Tab-Element, um es zu erweitern und seinen Namen, sein Symbol und seinen Inhalt zu bearbeiten.
- Symbol: Weisen Sie jedem Tab optional ein Symbol über die Symbolauswahl zu. Das Symbol wird neben der Tab-Beschriftung in der Tab-Leiste angezeigt.
- Inhalt: Geben Sie den Hauptinhalt für jeden Tab-Bereich ein. Jeder Tab hat seinen eigenen unabhängigen Inhaltsbereich.
- Neues Element hinzufügen: Klicken Sie auf diese Schaltfläche, um zusätzliche Tab-Bereiche zum Block hinzuzufügen.
- Löschen / Duplizieren: Jedes Tab-Element enthält Optionen zum Entfernen oder Erstellen einer Kopie mit denselben Einstellungen und Inhalten.
- Tab-Symbol ausblenden: Schalten Sie diese Option um, um Symbole auf allen Tabs gleichzeitig anzuzeigen oder auszublenden.
- Symbolfarbe: Legen Sie mit der Farbauswahl eine Farbe für alle Tab-Symbole fest.
- Schriftgröße: Passen Sie die Schriftgröße der Tab-Beschriftungen an.
- Abstand: Legen Sie den Abstand zwischen benachbarten Tab-Buttons fest.
- Ausrichtung: Wählen Sie die horizontale Ausrichtung der Tab-Leiste – Links, Mitte oder Rechts.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie Ihrem Tabs-Block mit einem einzigen Klick einen vorgefertigten visuellen Stil verleihen. Sieben voreingestellte Designs sind verfügbar, die von einem minimalen Standardstil bis hin zu dekorativeren Optionen mit Rahmen, Hintergründen und Symbolbehandlungen reichen. Die Auswahl einer Vorlage aktualisiert sofort die Farben, Rahmen und das Layout des Blocks, um dem gewählten Design zu entsprechen.
Schritt 3: Design anpassen
Im Tab Erweitert gibt Ihnen der Abschnitt Stile die volle Kontrolle über das Erscheinungsbild sowohl der Tab-Leiste als auch der Inhaltsbereiche:
Stile der Tab-Leiste:
- Tab-Layout: Wechseln Sie zwischen Horizontal (Tabs in einer Reihe angeordnet) und Vertikal (Tabs in einer Spalte neben dem Inhaltsbereich gestapelt).
- Tab-Typografie: Legen Sie Schriftart, Größe, Dicke, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für die Tab-Beschriftungen fest.
- Tab-Farbe: Wählen Sie die Textfarbe für inaktive Tab-Beschriftungen.
- Tab-Hintergrundfarbe: Legen Sie die Hintergrundfarbe für inaktive Tabs fest.
- Aktive Tab-Farbe: Legen Sie die Textfarbe für die aktuell ausgewählte Registerkarte fest.
- Aktiver Tab-Hintergrund: Legen Sie die Hintergrundfarbe für die aktuell ausgewählte Registerkarte fest.
- Tab-Eckenradius: Runden Sie die Ecken der Tab-Schaltflächen mit einem 0–100 Schieberegler ab.
- Rahmenstil: Wählen Sie einen Rahmenstil für Tab-Schaltflächen – durchgezogen, gepunktet oder gestrichelt.
- Rahmenbreite: Legen Sie die Rahmenstärke auf jeder Seite (Oben, Rechts, Unten, Links) der Tab-Schaltflächen fest.
- Rahmenfarbe: Wählen Sie die Rahmenfarbe für Tab-Schaltflächen.
- Tab-Innenabstand: Steuern Sie den Innenabstand (Oben, Rechts, Unten, Links) innerhalb jeder Tab-Schaltfläche.
Stile des Inhaltsbereichs:
- Inhalts-Typografie: Legen Sie Schriftart, Größe, Schriftschnitt, Stil, Zeilenhöhe, Zeichenabstand und Groß-/Kleinschreibung für den Text des Tab-Bereichs fest.
- Inhalts-Hintergrund: Legen Sie die Hintergrundfarbe des Inhaltsbereichs fest.
- Textfarbe: Legen Sie die Textfarbe im Inhaltsbereich fest.
- Inhalts-Eckenradius: Runden Sie die Ecken des Inhaltsbereichs mit einem 0–100 Schieberegler ab.
- Inhalts-Rahmenstil: Wählen Sie einen Rahmenstil für den Inhaltsbereich – durchgezogen, gepunktet oder gestrichelt.
- Inhalts-Rahmenfarbe: Wählen Sie die Rahmenfarbe des Inhaltsbereichs.
- Inhalts-Rahmenbreite: Legen Sie die Rahmenstärke auf jeder Seite (Oben, Rechts, Unten, Links) des Inhaltsbereichs fest.
- Inhalts-Innenabstand: Steuern Sie den Innenabstand innerhalb des Inhaltsbereichs.
- Textschatten: Fügen Sie dem Text des Inhaltsbereichs einen Textschatten hinzu, mit vordefinierten Größen von Keine bis 2X Groß.
Der Tab Erweitert bietet auch Steuerelemente für Abstände (Rand und Innenabstand), benutzerdefinierte CSS-Attribute, Geräte-Sichtbarkeit und Eingangs-Animationen.
Schritt 4: Speichern Sie Ihre Änderungen
Nachdem Sie den Tabs-Block konfiguriert und sein Aussehen angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Tabs-Block zu Ihrer Seite hinzugefügt! Tabs sind eine leistungsstarke Möglichkeit, viele Inhalte in einem kompakten, benutzerfreundlichen Format darzustellen – so bleiben Besucher engagiert, ohne von einer langen Scroll-Seite überfordert 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.