Der Block „Produktraster“ bietet eine effiziente Möglichkeit, Ihre WooCommerce-Produkte in einem übersichtlichen Rasterlayout anzuzeigen. Sie können alle Produkte anzeigen oder nach Typ filtern – empfohlen, im Angebot, meistverkauft, kürzlich hinzugefügt oder am besten bewertet – und Ihren Kunden die Möglichkeit geben, mehrere Artikel direkt aus dem Raster in ihren Warenkorb zu legen.

Mit flexiblen Abfragesteuerungen, gerätespezifischer Ausrichtung, Schaltflächen- und Bildgestaltung sowie optionaler Paginierung eignet sich dieser Block ideal für Shop-Seiten, Kategorie-Landingpages oder jede andere Seite, auf der Sie eine kuratierte Auswahl an Produkten in einem übersichtlichen, leicht zu durchsuchenden Format präsentieren möchten.

Anforderungen:Der Produktraster-Block ist im Elite-Lizenzplan verfügbar.

---

Hinzufügen des Produktrasterblocks zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Produktraster-Block zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter „Design > Blöcke > WooCommerce“ den Block „Produktraster“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.

Schritt 2: Einstellungen konfigurieren

Klicken Sie nach dem Hinzufügen auf den Block „Produktraster“, um dessen 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: Aktivieren Sie diese Option, um die Paginierung zu aktivieren und das Produktraster auf mehrere Seiten aufzuteilen.
• Anzahl der angezeigten Artikel: Aktivieren Sie diese Option, um die Gesamtzahl der angezeigten Produkte anzuzeigen.
• Sortierreihenfolge anzeigen: Aktivieren Sie diese Option, um ein Sortier-Dropdown-Menü anzuzeigen, über das Besucher Produkte nach Kriterien wie Preis, Beliebtheit oder Bewertung neu sortieren können.
• Begrenzung: Legen Sie die maximale Anzahl der anzuzeigenden Produkte fest. Verwenden Sie -1 Alle passenden Produkte anzeigen (Standard).

Abfrage:

• Typ: Wählen Sie aus, welche Produkte angezeigt werden sollen – Alle Produkte, Ausgewählte Produkte, Sonderangebote, Bestseller, Neueste Produkte oder Bestbewertete Produkte.
• Einbeziehen: Grenzen Sie die Produktauswahl ein, indem Sie nur Produkte einbeziehen, die bestimmten Kriterien wie IDs, SKUs, Kategorien, Tags, Attributen, Gruppen oder Sichtbarkeit entsprechen.
• Ausschließen: Grenzen 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 sollen – nach Datum, Titel, Preis, Beliebtheit, Bewertung, Zufall oder Menüordnung.
• Reihenfolge: Legen Sie die Sortierreihenfolge fest – ASC (aufsteigend) oder DESC (absteigend).

Schritt 3: Design anpassen

Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Produktrasterblocks anpassen. Die Einstellungen sind in drei Abschnitte unterteilt.

Stile:

• Ausrichtung: Legen Sie die horizontale Ausrichtung des Produktrasters fest – links, mittig oder rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
• Beschreibung Typografie: Legen Sie die Schriftart, Größe, Zeilenhöhe, Zeichenabstand, Schriftstärke, Stil und Groß-/Kleinschreibung für den Produktbeschreibungstext fest.
• Preistypografie: Legen Sie die Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftstärke, Stil und Groß-/Kleinschreibung für den Produktpreistext fest.
• Preis Farbe: Legen Sie die Farbe des regulären Produktpreises fest.
• Verkaufsfarbe: Legen Sie die Farbe des Verkaufspreises fest, wenn ein Produkt rabattiert ist.

Schaltfläche:

• Schaltflächenstil: Wählen Sie einen visuellen Stil für die Schaltfläche „Zum Warenkorb hinzufügen“ – Flach, 2D, Vintage, Ghost oder Link.
• Schaltflächenfarbe: Legen Sie die Hintergrundfarbe der Schaltfläche „Zum Warenkorb hinzufügen“ fest.
• Schaltflächentypografie: Legen Sie die Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftstärke, Schriftstil und Groß-/Kleinschreibung für den Schaltflächentext fest.
• Schaltflächengröße: Wählen Sie eine voreingestellte Schaltflächengröße – Klein, Mittel, Groß, Sehr groß oder 2X Groß.
• Border Radius: Passen Sie die Eckenrundung der Schaltfläche „Zum Warenkorb hinzufügen” mithilfe eines Schiebereglers an.

Bild:

• Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie voreingestellte Größen verwenden – Keine, Haarlinie, Klein, Mittel, Groß, X Groß, 2X Groß oder Unterer Schlagschatten.
• Rahmenstil: Legen Sie den Rahmenstil für Produktbilder fest – durchgehend, gepunktet oder gestrichelt.
• Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
• Bildrandbreite: Legen Sie die Randstärke auf jeder Seite (oben, rechts, unten, links) des Produktbildes fest.
• Bild-Weißraum-Abstand: Fügen Sie einen inneren Abstand um Produktbilder innerhalb ihres Rahmens hinzu.

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 Produktrasterblocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.

---

Sie haben erfolgreich einen Produktraster-Block zu Ihrer Seite hinzugefügt! Ganz gleich, ob Sie eine vollständige Shop-Seite oder einen gezielten Werbebereich erstellen möchten – dank der flexiblen Abfrageoptionen und umfangreichen Gestaltungsmöglichkeiten können Sie ganz einfach genau die richtigen Produkte auf genau die richtige Weise anzeigen. Experimentieren Sie mit verschiedenen Produkttypen, Spaltenanzahlen und Schaltflächenstilen, um ein Raster zu erstellen, das zum Stöbern einlädt und zum Kauf anregt.