Der Produkt Daten Tabs Block zeigt Ihre WooCommerce-Produktbeschreibung, zusätzliche Informationen und Kundenbewertungen in einem tabellarischen Layout auf Ihren einzelnen Produktvorlagen an. Anstatt alle Produktinformationen in einem einzigen scrollenden Block darzustellen, organisiert die tabellarische Benutzeroberfläche diese in klar beschrifteten Abschnitten, die Käufer mit einem einzigen Klick durchlaufen können.
Dieser Block ist ausschließlich für die Verwendung auf einzelnen Produktvorlagen konzipiert und erfordert die Installation von WooCommerce. Sie können das Erscheinungsbild sowohl der Tabs als auch ihrer Inhaltsbereiche – einschließlich Farben, Typografie, Rahmen, Abständen und Schatten – vollständig an das Design Ihres Shops anpassen.
Hinzufügen des Produkt Daten Tabs Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produkt Daten Tabs Block zu Ihrer SeedProd Einzelproduktvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce Vorlagen-Tags den Produkt Daten Tabs Block in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Produkt Daten Tabs Block, um seine Einstellungen zu öffnen. Der Inhalt-Tab ist in zwei aufklappbare Abschnitte unterteilt – Tabs und Bereich –, in denen Sie die Tab-Schaltflächen und den darunter liegenden Inhaltsbereich gestalten können.
Tabs:
- Normal: Schalten Sie diese Option ein, um die Farbeinstellungen für Tabs in ihrem Standardzustand (nicht ausgewählt) anzuzeigen. Legen Sie die Textfarbe, Hintergrundfarbe und Rahmenfarbe für inaktive Tabs fest.
- Aktiv: Schalten Sie diese Option ein, um die Farbeinstellungen für den aktuell ausgewählten Tab anzuzeigen. Legen Sie die Textfarbe, Hintergrundfarbe und Rahmenfarbe für den aktiven Tab-Zustand fest, damit er sich deutlich von den inaktiven Tabs abhebt.
- Tab-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe und Buchstabenabstand für den Text der Tab-Beschriftung fest.
- Rahmenradius: Legen Sie die Eckabrundung (0–100px) für die Tab-Schaltflächen fest. Erhöhen Sie diesen Wert, um pillenförmige oder abgerundete Tabs zu erstellen.
Bereich:
- Textfarbe: Legen Sie die Standard-Textfarbe für Inhalte fest, die im Bereichsbereich angezeigt werden.
- Bereichs-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt und Stil für den Haupttext innerhalb jedes Bereichs fest.
- Überschriftenfarbe: Legen Sie die Farbe für alle Überschriftenelemente (h2, h3 usw.) fest, die im Bereichsinhalt angezeigt werden.
- Überschriften-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt und Stil für den Text von Bereichsüberschriften fest.
- Bereichsabstand: Legen Sie den Innenabstand um den Inhalt im Bereichsbereich fest.
- Bereichsschatten: Fügen Sie dem Bereich eine Schattenwirkung hinzu – wählen Sie aus vordefinierten Schattenstärken, um dem Bereich Tiefe und Trennung vom Seitenhintergrund zu verleihen.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie die Ränder, Abstände und Sichtbarkeit Ihres Produkt-Daten-Tabs-Blocks verfeinern.
Panel-Rand:
- Panel-Randradius: Legt die Eckabrundung für den Panel-Inhaltsbereich fest.
- Panel-Randbreite: Legt die Randdicke für jede Seite des Panels fest (Oben, Rechts, Unten, Links).
- Panel-Randstil und -farbe: Wählen Sie einen Randstil (Durchgezogen, Gepunktet oder Gestrichelt) und legen Sie eine Randfarbe für den Panelbereich fest.
Block-Rand:
- Randradius: Legt die allgemeine Eckabrundung für den gesamten Produkt-Daten-Tabs-Block fest.
- Randbreite: Legt die Randdicke pro Seite für den äußeren Block-Wrapper fest.
- Randstil und -farbe: Wählen Sie einen Randstil und eine Randfarbe für den äußeren Block-Wrapper.
Abstand:
- Abstand (Außen): Steuert den äußeren Abstand um Ihren Produkt-Daten-Tabs-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen den Tabs und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand (Innen): Passt den inneren Abstand innerhalb Ihres Produkt-Daten-Tabs-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Tab-Inhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produkt-Daten-Tabs-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 spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-section|tabs).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blendet den Produkt-Daten-Tabs-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Produkt-Daten-Tabs-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Produkt-Daten-Tabs-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produkt-Daten-Tabs-Block ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Produkt-Daten-Tabs-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Produkt-Daten-Tabs-Block zu Ihrer Single Product Template hinzugefügt! Der Block ruft automatisch die Produktbeschreibung, zusätzliche Informationen und Kundenbewertungen aus WooCommerce ab und organisiert sie in einer übersichtlichen Tab-Oberfläche. Verwenden Sie die Tab-Farbeinstellungen, um aktive und inaktive Zustände zu unterscheiden, und passen Sie die Panel-Typografie und -Ränder an, um ein zusammenhängendes Produkterlebnis zu schaffen, das Käufer fesselt.