Der Block „Vorgestellte Produkte“ zeigt Ihre WooCommerce-Vorgestellten Produkte in einem übersichtlichen, durchsuchbaren Raster an. Er wurde entwickelt, um Artikel hervorzuheben, die Sie in WooCommerce als vorgestellt markiert haben. So können Sie Ihre besten oder am meisten beworbenen Produkte auf jeder Seite leicht anzeigen, ohne dass eine manuelle Kuratierung auf Seitenebene erforderlich ist.
Stellen Sie sicher, dass Sie die relevanten Produkte in Ihren WooCommerce-Produkteinstellungen als vorgestellte Artikel gekennzeichnet haben, bevor Sie diesen Block verwenden. Sobald dies geschehen ist, können Sie die Abfrage-Steuerelemente des Blocks verwenden, um zu filtern, zu sortieren und zu begrenzen, welche vorgestellten Produkte angezeigt werden, und die Typografie, Schaltflächenstile und die Darstellung der Produktbilder des Rasters im Tab „Erweitert“ anpassen.
Hinzufügen des Blocks „Vorgestellte Produkte“ zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Vorgestellte Produkte“ zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce den Block Vorgestellte Produkte in den gewünschten Bereich Ihrer Seite.
Schritt 2: Einstellungen konfigurieren
Sobald der Block hinzugefügt wurde, klicken Sie darauf, um seine Einstellungen zu öffnen. Im Tab 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: Legt die maximale Anzahl der anzuzeigenden Produkte fest. Verwenden Sie
-1, um alle passenden vorgestellten Produkte anzuzeigen (Standard).
Abfrage:
- Typ: Wählen Sie aus, welche Produkte angezeigt werden sollen – Alle Produkte, Vorgestellte Produkte, Angebote, Bestseller, Neueste Produkte oder Top-Bewertete Produkte. Dieser Block zeigt standardmäßig Vorgestellte Produkte an.
- 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
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Blocks „Vorgestellte Produkte“ 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
Sobald Sie die Konfiguration des Blocks „Vorgestellte Produkte“ abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Block „Vorgestellte Produkte“ zu Ihrer Seite hinzugefügt! Indem Sie Ihre handverlesenen vorgestellten Artikel in einem gestylten, konfigurierbaren Raster präsentieren, können Sie die Aufmerksamkeit auf Ihre wichtigsten Produkte lenken, ohne zusätzlichen manuellen Aufwand auf jeder Seite. Experimentieren Sie mit Spaltenanzahlen, Schaltflächenstilen und Bildeinstellungen, um eine Produktpräsentation zu erstellen, die gut aussieht und Konversionen fördert.