Der Block „Produktdaten-Registerkarten“ zeigt Ihre WooCommerce-Produktbeschreibung, zusätzliche Informationen und Kundenbewertungen in einem Registerkartenlayout in Ihren Einzelproduktvorlagen an. Anstatt alle Produktinformationen in einem einzigen Scrollblock darzustellen, organisiert die Registerkartenoberfläche diese in klar gekennzeichnete Abschnitte, zwischen denen Käufer mit einem einzigen Klick navigieren können.
Dieser Block ist ausschließlich für die Verwendung in Einzelproduktvorlagen vorgesehen und erfordert die Installation von WooCommerce. Sie können das Erscheinungsbild sowohl der Registerkarten als auch ihrer Inhaltsbereiche vollständig an das Design Ihres Shops anpassen – einschließlich Farben, Schriftarten, Rahmen, Abstände und Schatten.
Hinzufügen des Blocks „Produktdaten-Registerkarten“ zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Produktdaten-Registerkarten“ zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design > Blöcke > WooCommerce-Vorlagen-Tags“ den Block „Produktdaten-Registerkarten“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Produktdaten-Registerkarten“, um dessen Einstellungen zu öffnen. Die Registerkarte „Inhalt“ ist in zwei ausblendbare Abschnitte unterteilt – „Registerkarten“ und „Bedienfeld“ –, in denen Sie die Registerkarten-Schaltflächen und den darunter liegenden Inhaltsbereich gestalten können.
Registerkarten:
- Normal: Aktivieren Sie diese Option, um die Farbeinstellungen für Registerkarten in ihrem Standardzustand (nicht ausgewählt) anzuzeigen. Legen Sie die Textfarbe, Hintergrundfarbe und Rahmenfarbe für inaktive Registerkarten fest.
- Aktiv: Aktivieren Sie diese Option, um die Farbeinstellungen für die aktuell ausgewählte Registerkarte anzuzeigen. Legen Sie die Textfarbe, Hintergrundfarbe und Rahmenfarbe für den aktiven Registerkartenstatus fest, damit sich diese deutlich von den inaktiven Registerkarten abhebt.
- Registerkartentypografie: Legen Sie die Schriftart, Größe, Schriftstärke, Zeilenhöhe und den Buchstabenabstand für den Text der Registerkartenbeschriftung fest.
- Border Radius: Legt die Eckenrundung (0–100px) für die Registerkarten-Schaltflächen fest. Erhöhen Sie diesen Wert, um pillenförmige oder abgerundete Registerkarten zu erstellen.
Panel:
- Textfarbe: Legen Sie die Standardtextfarbe für Inhalte fest, die im Bereich des Bedienfelds angezeigt werden.
- Panel-Typografie: Legen Sie die Schriftfamilie, Größe, Stärke und den Stil für den Fließtext innerhalb jedes Panels fest.
- Überschriftenfarbe: Legen Sie die Farbe für alle Überschriftenelemente (h2, h3 usw.) fest, die innerhalb des Panel-Inhalts angezeigt werden.
- Überschrift-Typografie: Legen Sie die Schriftart, Größe, Schriftstärke und den Stil für den Text der Panel-Überschrift fest.
- Panel-Abstand: Legen Sie den inneren Abstand um den Inhalt innerhalb des Panelbereichs fest.
- Panel Shadow: Fügen Sie einen Schatteneffekt zum Panelbereich hinzu – wählen Sie aus voreingestellten Schattengrößen, um dem Panel Tiefe zu verleihen und es vom Seitenhintergrund abzuheben.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Ränder, Abstände und Sichtbarkeit Ihres Produktdaten-Registerkartenblocks verfeinern.
Rahmenrand:
- Panel-Eckenradius: Legen Sie die Eckenrundung für den Inhaltsbereich des Panels fest.
- Rahmenbreite: Legen Sie die Rahmenstärke für jede Seite des Rahmens fest (oben, rechts, unten, links).
- Rahmenstil und -farbe: Wählen Sie einen Rahmenstil (durchgehend, gepunktet oder gestrichelt) und legen Sie eine Rahmenfarbe für den Bereich des Fensters fest.
Blockrand:
- Eckenradius: Legen Sie die allgemeine Eckenrundung für den gesamten Block „Produktdaten-Registerkarten“ fest.
- Rahmenbreite: Legen Sie die Rahmenstärke pro Seite für den äußeren Block-Wrapper fest.
- Rahmenstil und Farbe: Wählen Sie einen Rahmenstil und eine Farbe für den äußeren Blockrahmen.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Produktdaten-Registerkartenblock (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen den Registerkarten und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Produktdaten-Registerkartenblocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand zwischen dem Inhalt der Registerkarten und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produktdaten-Registerkartenblock 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 Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-section|tabs).
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Block „Produktdaten-Registerkarten“ auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Block „Produktdaten-Registerkarten“ auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Block „Produktdaten-Registerkarten“ auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Block „Produktdaten-Registerkarten“ in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Produktdaten-Registerkarten“ abgeschlossen und dessen Darstellung angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Produktdaten-Registerkartenblock zu Ihrer Einzelproduktvorlage hinzugefügt! Der Block ruft automatisch die Produktbeschreibung, zusätzliche Informationen und Kundenbewertungen aus WooCommerce ab und organisiert sie in einer übersichtlichen Registerkartenoberfläche. Verwenden Sie die Registerkartenfarbeneinstellungen, um aktive und inaktive Zustände zu unterscheiden, und passen Sie die Typografie und Rahmen des Panels an, um ein einheitliches Produktseitenerlebnis zu schaffen, das die Käufer fesselt.