SeedProd-Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

Meistverkaufte Produkte

Mit dem Block „Bestseller-Produkte“ können Sie Ihre beliebtesten WooCommerce-Produkte in einem übersichtlichen Raster präsentieren. Indem Sie Ihre Top-Seller hervorheben, geben Sie neuen Besuchern sofort ein soziales Signal – dies sind die Produkte, die Ihre Kunden bereits lieben und am häufigsten kaufen.

Mit den Abfrage-Steuerelementen können Sie festlegen, wie viele Produkte angezeigt werden und wie sie sortiert werden. Auf der Registerkarte „Erweitert“ haben Sie die volle Kontrolle über die Typografie des Rasters, die Schaltflächenstile und die Darstellung der Produktbilder, um sie an das Branding Ihres Shops anzupassen.

Anforderungen:Der Block „Bestseller-Produkte“ ist im Elite-Lizenzplan verfügbar.

Block „Bestseller-Produkte“, der die meistverkauften WooCommerce-Produkte in einem Rasterlayout anzeigt

Hinzufügen des Blocks „Bestsellerprodukte“ zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Block mit den meistverkauften Produkten zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

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

Den Block „Bestsellerprodukte“ auf eine SeedProd-Seite ziehen

Schritt 2: Einstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Block „Bestsellerprodukte“, 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 Bestseller-Produkte anzeigen (Standard).

Abfrage:

  • Typ: Wählen Sie aus, welche Produkte angezeigt werden sollen – Alle Produkte, Ausgewählte Produkte, Sale-Produkte, Bestseller, Neueste Produkte oder Top-bewertete Produkte. Dieser Block ist standardmäßig auf Bestseller eingestellt.
  • 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).
Registerkarte „Einstellungen“ für den Block „Bestsellerprodukte“ mit Konfigurationsoptionen für Inhalt und Abfrage

Schritt 3: Design anpassen

Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Blocks „Bestsellerprodukte“ 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.
Block „Bestsellerprodukte“ Registerkarte „Erweitert“ mit den Optionen „Stile“, „Schaltfläche“, „Bild“, „Abstand“, „Attribute“, „Gerätesichtbarkeit“ und „Animationseffekte“

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie die Konfiguration des Blocks „Bestsellerprodukte“ und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.


Sie haben erfolgreich einen Block mit den meistverkauften Produkten zu Ihrer Seite hinzugefügt! Die Präsentation Ihrer Top-Seller ist eine der einfachsten Möglichkeiten, um die Konversionsrate zu steigern – Käufer vertrauen darauf, was andere Kunden bereits gekauft haben. Kombinieren Sie diesen Block mit einem Werbebanner oder einem Bereich für ausgewählte Produkte, um ein überzeugendes Einkaufserlebnis zu schaffen, das die Besucher bei Laune hält.

Verwandte Artikel