Der Block „Produkte-Raster“ bietet eine effiziente Möglichkeit, Ihre WooCommerce-Produkte in einem visuell organisierten Rasterlayout anzuzeigen. Sie können alle Produkte anzeigen oder nach Typ filtern – „Hervorgehoben“, „Im Angebot“, „Bestseller“, „Kürzlich hinzugefügt“ oder „Top-Bewertet“ – und Kunden die Möglichkeit geben, mehrere Artikel direkt aus dem Raster in ihren Warenkorb zu legen.
Mit flexiblen Abfrage-Steuerelementen, geräteabhängiger Ausrichtung, Gestaltung von Schaltflächen und Bildern sowie optionaler Paginierung ist dieser Block ideal für Shop-Seiten, Kategorieseiten oder jede Seite, auf der Sie eine kuratierte Auswahl von Produkten in einem übersichtlichen, durchsuchbaren Format präsentieren möchten.
Hinzufügen des Blocks „Produkte-Raster“ zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Produkte-Raster“ zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce den Block Produkte-Raster in den gewünschten Bereich Ihrer Seite.
Schritt 2: Einstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Produkte-Raster“, um seine Einstellungen zu öffnen. Auf der Registerkarte Einstellungen sind die Einstellungen in zwei Abschnitte unterteilt.
Inhalt:
- Spalten: Legen Sie die Anzahl der Produktspalten fest, die im Raster angezeigt werden sollen.
- Paginierung: Schalten Sie diese Option ein, um die Paginierung zu aktivieren und das Produkt-Raster auf mehrere Seiten aufzuteilen.
- Anzahl der Elemente anzeigen: Schalten Sie diese Option ein, um die Gesamtzahl der angezeigten Produkte anzuzeigen.
- Sortierung anzeigen: Schalten Sie diese Option ein, um ein Dropdown-Menü zur Sortierung anzuzeigen, damit Besucher Produkte nach Kriterien wie Preis, Beliebtheit oder Bewertung neu ordnen können.
- Limit: Legen Sie die maximale Anzahl der anzuzeigenden Produkte fest. Verwenden Sie
-1, um alle passenden Produkte anzuzeigen (Standard).
Abfrage:
- Typ: Wählen Sie aus, welche Produkte angezeigt werden sollen – Alle Produkte, Hervorgehobene Produkte, Produkte im Angebot, Bestseller, Aktuelle Produkte oder Top-Bewertete Produkte.
- Einbeziehen: Schränken Sie die Produktauswahl ein, indem Sie nur Produkte filtern, die bestimmten Kriterien wie IDs, SKUs, Kategorien, Tags, Attributen, Gruppen oder Sichtbarkeit entsprechen.
- Ausschließen: Schränken Sie die Produktauswahl ein, indem Sie Produkte ausschließen, die bestimmten Kriterien wie IDs, SKUs, Kategorien, Tags, Attributen, Gruppen oder Sichtbarkeit entsprechen.
- Sortieren nach: Legen Sie fest, wie Produkte sortiert werden – nach Datum, Titel, Preis, Beliebtheit, Bewertung, Zufällig oder Menüreihenfolge.
- Reihenfolge: Legen Sie die Sortierrichtung fest – ASC (aufsteigend) oder DESC (absteigend).
Schritt 3: Design anpassen
Auf der Registerkarte Erweitert können Sie das visuelle Erscheinungsbild Ihres Blocks „Produkte-Raster“ anpassen. Die Einstellungen sind in drei Abschnitte unterteilt.
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Produkt-Rasters fest – Links, Mitte oder Rechts – mit geräteabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Typografie der Beschreibung: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Text der Produktbeschreibung fest.
- Schriftart für Preise: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Produktpreis fest.
- Farbe für Preise: Legen Sie die Farbe des regulären Produktpreises fest.
- Farbe für Angebote: Legen Sie die Farbe des Angebotspreises fest, wenn ein Produkt reduziert ist.
Schaltfläche:
- Button-Stil: Wählen Sie einen visuellen Stil für die Schaltfläche „In den Warenkorb“ – Flach, 2D, Vintage, Ghost oder Link.
- Button-Farbe: Legen Sie die Hintergrundfarbe der Schaltfläche „In den Warenkorb“ fest.
- Schriftart für Buttons: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Button-Text fest.
- Button-Größe: Wählen Sie eine voreingestellte Button-Größe – Klein, Mittel, Groß, X-Groß oder XX-Groß.
- Abgerundete Ecken: Passen Sie die Rundung der Ecken der Schaltfläche „In den Warenkorb“ mit einem Schieberegler an.
Bild:
- Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie vordefinierte Größen verwenden – Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Schatten unten.
- Rahmenstil: Legen Sie den Rahmenstil von Produktbildern fest – Durchgezogen, Gepunktet oder Gestrichelt.
- Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
- Rahmenbreite des Bildes: Legen Sie die Rahmenstärke auf jeder Seite (Oben, Rechts, Unten, Links) des Produktbildes fest.
- Leerraum-Abstand des Bildes: Fügen Sie einen inneren Abstand um Produktbilder innerhalb ihres Rahmens hinzu.
Abstand:
- Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese 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 Schlüssel|Wert-Format ein.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
- Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Produktraster-Blocks fertig sind und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Produktraster-Block zu Ihrer Seite hinzugefügt! Egal, ob Sie eine vollständige Shop-Seite oder einen gezielten Werbebereich erstellen, die flexiblen Abfrageoptionen und die umfangreichen Styling-Möglichkeiten machen es einfach, genau die richtigen Produkte auf genau die richtige Weise anzuzeigen. Experimentieren Sie mit verschiedenen Produkttypen, Spaltenanzahlen und Button-Stilen, um ein Raster zu erstellen, das zum Stöbern anregt und Käufe fördert.