Mit dem Block „Produktgalerie-Bilder“ können Sie Ihre WooCommerce-Produktgaleriebilder nahtlos in Einzelproduktvorlagen einfügen. Er rendert die vollständige Bildergalerie des Produkts – einschließlich Hauptbild und Miniaturansichten – und bietet Ihnen Steuerelemente, mit denen Sie die Zoom-Schaltfläche, Bildrahmen und Miniaturansichtenrahmen an Ihr Design anpassen können.
Dieser Block ist ausschließlich für die Verwendung in Vorlagen für einzelne Produkte vorgesehen. Bevor Sie beginnen, stellen Sie sicher, dass Sie WooCommerce installiert und Produkte mit zugewiesenen Galeriebildern veröffentlicht haben.
Hinzufügen des Produktgalerie-Bildblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Produktgalerie-Bilder“ zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „WooCommerce-Vorlagen-Tags“ den Block „Produktgalerie-Bilder“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Produktgalerie-Bilder“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ finden Sie die folgenden Optionen.
Zoom-Schaltfläche:
- Position oben: Legen Sie die vertikale Position der Zoom-Schaltfläche relativ zum oberen Rand des Produktbildes fest (in Pixeln).
- Position rechts: Legen Sie die horizontale Position der Zoom-Schaltfläche relativ zum rechten Rand des Produktbildes fest (in Pixeln).
- Schriftgröße: Legen Sie die Größe des Zoom-Symbols fest.
- Symbolfarbe: Legen Sie die Farbe des Zoom-Symbols fest.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Zoom-Schaltfläche fest.
- Border Radius: Passen Sie die Eckenrundung der Zoom-Schaltfläche mithilfe eines Schiebereglers an.
Bildrahmen:
- Bildrandradius: Legen Sie die Eckenrundung des Hauptproduktbildes fest.
- Bildrandbreite: Legen Sie die Dicke des Randes auf jeder Seite des Hauptproduktbildes fest.
Miniaturansichten-Rahmen:
- Thumbnails-Eckenradius: Legen Sie die Eckenrundung der Miniaturbilder unterhalb des Hauptproduktbildes fest.
- Randbreite der Miniaturansichten: Legen Sie die Randstärke auf jeder Seite der Miniaturansichten fest.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Blocks „Produktgalerie-Bilder“ weiter anpassen.
Grenze:
- Rahmenstil: Legen Sie den Rahmenstil des Block-Wrappers fest – durchgehend, gepunktet oder gestrichelt.
- Rahmenfarbe: Legt die Farbe des Blockrahmens fest.
- Rahmenbreite: Legen Sie die Rahmenstärke auf jeder Seite des Block-Wrappers fest.
- Border Radius: Legt die Eckenrundung des Block-Wrappers fest.
Abstand:
- Rand: Legen Sie den äußeren Abstand um den Block herum auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Abstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers an allen vier Seiten fest, mit gerätespezifischen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen hinzu, um ein gezieltes Styling zu erzielen.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese ID verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format Schlüssel|Wert ein.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Umschalten, um den Block bei der Anzeige auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block bei der Anzeige auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Schalten Sie diese Option ein, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scroll-Effekt: Wende eine scroll-gesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Viewport-Offset.
- Mouse Effect: Wende einen durch Mausbewegungen gesteuerten Parallax-Effekt auf den Block an.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Produktgalerie-Bilder“ und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Block „Produktgalerie-Bilder“ zu Ihrer Einzelproduktvorlage hinzugefügt! Mit Steuerelementen für die Positionierung der Zoom-Schaltfläche, die Gestaltung der Bildrahmen und die Darstellung der Miniaturbildrahmen können Sie eine ansprechende Produktgalerie erstellen, die Ihren Kunden einen umfassenden und optisch ansprechenden Überblick über alle Ihre Produkte bietet.