Divi-Plugin-Highlight: Divi-Produktkarussell-Modul

Divi Product Carousel Module ist ein Drittanbieter-Plugin für Divi, das WooCommerce-Produkte in einem Karussell-Slider anzeigt. Bauen Sie ein Produktkarussell und platzieren Sie es in einem beliebigen Divi-Layout. Sie können sie gestalten und mehrere Layout- und Anzeigeoptionen auswählen. In diesem Artikel sehen wir uns das Divi Product Carousel Module an, sehen seine Funktionen und sehen, wie einfach es zu verwenden ist.

Das Divi Product Carousel Module ist auf der Website des Entwicklers und auf den Divi-Marktplätzen erhältlich.

Divi Produktkarussellmodul

Nachdem Sie das Plugin hochgeladen und aktiviert haben, gehen Sie im Dashboard-Menü zu DiviGear und aktivieren Sie Ihre Lizenz. Wenn Sie mehrere Plugins von diesem Entwickler haben, müssen Sie die Registerkarte des Plugins auswählen.

Dem Divi Builder wird ein neues Modul namens Product Carousel hinzugefügt. Es enthält ein lila Symbol, damit es sich von der Masse abhebt.

Die Einstellungen umfassen die Registerkarten Inhalt, Design und Erweitert. Die Registerkarte Inhalt enthält Einstellungen für den WooCommerce-Inhalt. Wählen Sie aus dem Dropdown-Feld den Produkttyp aus „Neueste“, „Vorgestellt“, „Verkauf“, „Bestseller“, „Beste Bewertung“ oder „Produktkategorie“. Geben Sie eine Zahl für die Produktanzahl ein, die Sie anzeigen möchten. Wählen Sie die Sortierreihenfolge aus Beliebtheit, Bewertung, Datum oder Preis. Sie können auch die Schaltfläche Zum Warenkorb hinzufügen und die Beschreibung aktivieren. Zeigen Sie die vollständige Beschreibung oder einen Auszug an.

In den Karusselleinstellungen können Sie die Anzahl der Spalten basierend auf dem verwendeten Gerät auswählen. Es enthält auch Multislide (aktivieren Sie es, um nach der Anzahl der Folien auf dem Bildschirm zu gleiten oder deaktivieren Sie es, um jeweils eine Folie zu gleiten), Elementabstand, Übergangsdauer, Mitte, Schleife, Autoplay, Punkt- und Pfeilnavigation, Ausrichtung und Slide-Effekt. Andere Einstellungen umfassen den Link und den Hintergrund. Es ist interessant, dass Sie die Punkte und Pfeile zusammen verwenden können. Sie können die Punkte rechts, in der Mitte oder links unten auf der Folie platzieren.

Die Registerkarte Design enthält Einstellungen für Overlay, Titel, Preis, Beschreibung, Verkaufslogo, Schaltfläche zum Warenkorb hinzufügen, Überprüfung, Pfeil, Punkte, Bild, Hover, Abstand, Rahmen und Boxschatten. Andere Einstellungen werden basierend auf der von Ihnen ausgewählten Auswahl hinzugefügt. Jede dieser Einstellungen ist umfangreich.

Die Registerkarte Erweitert enthält die erwarteten CSS-, Sichtbarkeits- und Übergangsfunktionen. Das benutzerdefinierte CSS enthält Felder für Produkt, Bild, Titel, Preis, Verkaufsabzeichen-Pfeil zurück, Pfeil weiter und Punkte. Dies gibt Ihnen viel Kontrolle mit CSS.

Einstellungen des Divi-Produktkarussellmoduls

Sie können die Titel und Preise nach oben oder unten verschieben. In diesem Beispiel habe ich beide nach oben verschoben und ihre Größe und Farbe geändert. Ich habe das Verkaufsabzeichen gestaltet, indem ich die Hintergrundfarbe und die Schriftgröße geändert habe. Ich habe auch die inaktiven und aktiven Punkte gestylt.

So sieht es im Frontend aus. Ich habe auch ein Overlay hinzugefügt und die Schaltfläche Zum Warenkorb hinzufügen wird beim Bewegen des Mauszeigers angezeigt. Sie können diese Schaltfläche sowohl für den Overlay-Hover als auch für den Schaltflächen-Hover gestalten.

In diesem habe ich 6 Spalten ausgewählt, den gesamten Text wieder nach unten verschoben, die Textfarben angepasst und der Schaltfläche In den Warenkorb etwas Deckkraft hinzugefügt. Ich habe die Hover-Deckkraft standardmäßig belassen, sodass die Schaltfläche durchgehend ist, wenn Sie den Mauszeiger über die Schaltfläche selbst bewegen.

Für dieses habe ich das Layout auf 4 Spalten gesetzt. Ich habe Pfeile hinzugefügt und die Farben der Pfeile und Punkte geändert. Außerdem habe ich dem Titel, dem Preis und der Beschreibung einen Hintergrund hinzugefügt und den gesamten Text in Weiß geändert. Um den Text innerhalb der Box gut auszurichten, habe ich einige Inhaltsauffüllungen hinzugefügt. Es enthält auch Inhalts-Padding für den oberen Rand (falls Sie den Titel oder Preis über dem Bild platzieren).

So sieht es im Frontend aus. Der Pfeil rechts ist heller, um anzuzeigen, dass er sich am Ende der Produkte befindet, die angezeigt werden können. Wenn ich es auf Loop setze, wäre es die normale Farbe.

So sieht es aus, wenn Überlauf ausgewählt ist. Es bietet einen schönen 3D-Karteneffekt. Sie können den Grad der Drehung anpassen und den Schiebeschatten aktivieren.

In diesem Beispiel habe ich den Karten einen Boxschatten gegeben und die Unschärfe angepasst. Ich habe auch die Pfeile in einen Kreis geändert und die Farben angepasst.

So sieht es im Frontend mit aktivierter Center Slide aus. Dies ist das 4-Spalten-Layout. Es wird anders angezeigt, wenn Sie Folie zentrieren auswählen.

Dies ist das 5-Spalten-Layout mit den gleichen Einstellungen wie im obigen Beispiel.

Das Produktkarussell passt gut in die Divi-Layouts. In diesem Beispiel habe ich das Divi-Shop-Modul durch das Divi-Produktkarussell-Modul ersetzt und an das Layout angepasst.

In diesem habe ich den Titel nach oben verschoben, oben und unten etwas Auffüllung hinzugefügt und die Titel halbfett gemacht. Ich habe auch die Farbe der Schaltfläche "In den Warenkorb" geändert, damit sie dem Layout entspricht.

Für dieses habe ich die Ränder für die Folien und die Bilder angepasst, um abgerundete Ecken zu erzeugen. Ich ging voran und machte die Bilder in Kreise. Ich habe auch einen Boxschatten hinzugefügt.

Es sieht im Layout hervorragend aus. Es verbirgt jedoch den größten Teil des Verkaufsabzeichens. Es gibt wahrscheinlich einen Weg, das mit CSS zu umgehen.

Dieser verwendet Overflow mit dem 3-Spalten-Layout.

Für dieses habe ich den Bildrand entfernt, aber den Rand für die Folien beibehalten. Ich habe einen Boxschatten hinzugefügt und seine Stärke und Position angepasst.

Es zeigt auch die Sternebewertung aus den Bewertungen beim Schweben an. Es platziert die Bewertung neben der Schaltfläche In den Warenkorb. Es bringt sie mit einer coolen Animation zusammen. Dies sind die Standardeinstellungen. Sie können die Farben des Hintergrunds und der Sterne gestalten.

In diesem habe ich die Bewertungen so gestaltet, dass sie mit Elementen aus dem Layout übereinstimmen.

Für dieses habe ich den Preis nach oben und den Titel nach unten verschoben. Ich habe eine Beschreibung und ein Overlay hinzugefügt. Ich habe die Punktnavigation nach rechts verschoben. Ich musste etwas Polsterung hinzufügen, damit der Boxschatten an den Seiten angezeigt wird. Ohne die Polsterung platziert es das Produkt am Rand des Modulraums.

Demos des Divi-Produktkarussellmoduls

Derzeit gibt es 13 herunterladbare Demos auf der Website des Entwicklers. Dies sind Layouts, die Sie in die Divi-Bibliothek hochladen und mit jedem Divi-Layout verwenden können. Alle enthalten Styling für das Divi Product Carousel-Modul und einige enthalten andere gestaltete Module und Hintergründe. Diese sind gut, um einen Ausgangspunkt für Ihre Produktkarussell-Designs zu erhalten und einige der Dinge zu zeigen, die mit dem Modul gemacht werden können. Schauen wir uns einige davon an.

Dieser platziert die Titel oben, Stile oben und unten passend, fügt eingekreiste Pfeile außerhalb der Bilder hinzu und fügt Punkte ein. Es hat auch einen unteren Rand, um die Folien hervorzuheben. Ich mag die kräftigen Farben. Die Ober- und Unterseite haben ein wenig Transparenz, sodass die Hintergrundmuster durchscheinen. Dieses Layout enthält ein formatiertes Textmodul für den Titel.

Einige der Layouts enthalten andere Module mit Styling. Dieser verwendet ein zweispaltiges Layout, um mithilfe von Text- und Schaltflächenmodulen einen Call-to-Action hinzuzufügen.

So sieht es von vorne aus. Es enthält einen Rahmen, Titel oben und zwei Farben für die Schaltfläche In den Warenkorb. Die Pfeile zeigen innerhalb der Bilder des Moduls.

Dieser enthält einen grünen Hintergrund und passende Folien. Die Schaltfläche In den Warenkorb ist hellgrün, wenn Sie mit der Maus über das Produkt fahren, und dunkelgrün, wenn Sie mit der Maus über die Schaltfläche fahren. Es enthält ein formatiertes Textmodul für den Titel.

Dieser enthält blaues Design für die Verkaufsabzeichen, runde Pfeile außerhalb der Bilder und die Schaltfläche In den Warenkorb. Es fügt den Folien einen kleinen Rahmen hinzu. Es zeigt die Folien mit dem Überlaufeffekt an.

Dieser zeigt auch Produkte mit dem Overflow-Effekt an. Es verwendet auch Blau für die Pfeile und die Schaltfläche Zum Warenkorb hinzufügen. Der Titel wird nach oben verschoben. Das Overlay ist weiß mit hoher Deckkraft und das Sale-Badge ist rot.

Dieser enthält einen gestylten Hintergrund und fügt einen Rahmen, eine gestylte Schaltfläche zum Hinzufügen zum Warenkorb, ein Verkaufsabzeichen und eingekreiste Pfeile hinzu. Die Auflage ist weiß. Es platziert den Preis oben und alle anderen Daten unten.

Divi Product Carousel Module Preis und Dokumentation

Es gibt zwei Kaufoptionen für das Divi Product Carousel Module:

• Einzelne Site – $19
• Unbegrenzte Websites – $39

Es ist auf der Website des Entwicklers und auf den Marktplätzen verfügbar.

Die Dokumentation wird durch ein YouTube-Video bereitgestellt, das Sie durch die Funktionen führt. Sie finden einen Link dazu im DiviGear-Menü im Dashboard. Wenn Sie mehr als ein DiviGear-Produkt haben, wählen Sie die Registerkarte des Produkts und dann Dokumentation.

Gedanken beenden

Divi Product Carousel ist einfach zu bedienen und eignet sich hervorragend, um Ihre Produkte hervorzuheben. Auch wenn Sie sie nicht als Slider anzeigen möchten, bietet es viele Styling- und Produktpräsentationsoptionen, die eine Überlegung wert sind. Mit Extra habe ich nicht so gut funktioniert. Ich würde gerne sehen, dass Extra unterstützt wird, da es bereits viele WooCommerce-Funktionen hat und eine großartige Plattform zum Aufbau von WooCommerce-Shops ist.

Ich mag, dass es herunterladbare Demos hat. Sie beinhalten die Hintergründe und das Styling für das Modul. Diese sind großartig, um Ihnen einen Ausgangspunkt zu geben oder Ihre Fantasie anzuregen, Ihre WooCommerce-Produkte in Ihren Divi-Layouts zu präsentieren.

Wenn Sie daran interessiert sind, Ihre WooCommerce-Produkte in einem Karussell zu präsentieren oder einfach nur ein paar weitere Gestaltungsmöglichkeiten haben, ist das Divi Product Carousel Module einen Blick wert. Es ist auf der Website des Entwicklers und auf den Divi-Marktplätzen erhältlich.

Wir wollen von dir hören. Haben Sie das Divi Product Carousel Module ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild Letters-Shmetters / shutterstock.com