Verwandeln des Shop-Moduls von Divi in ​​dynamische Produkt-Swipe-Karten auf Mobilgeräten

Wenn Sie eine Landingpage für bestimmte Produkte erstellen, sei es eine neue Einführung oder ein Verkauf, auf den Sie sich vorbereiten, ist die Wahrscheinlichkeit groß, dass Sie irgendwann das Shop-Modul verwenden. Das Shop-Modul von Divi ermöglicht es Ihnen, Produkte dynamisch aus dem WooCommerce-Plugin zu ziehen und die Produkte mit den integrierten Optionen von Divi zu gestalten. Das Shop-Modul enthält jetzt standardmäßig einige Spaltenstrukturen, die sich auf kleineren Bildschirmgrößen alle in zwei Spalten übersetzen lassen. Dies bedeutet, dass je mehr Produkte Sie anzeigen möchten, desto mehr vertikales Scrollen ist erforderlich, um zum nächsten Teil Ihrer Zielseite zu gelangen.

Im modernen Webdesign ist die Verwendung von Wischkarten eine häufig verwendete Technik, um das vertikale Scrollen zu begrenzen und Elemente basierend auf den Vorlieben Ihrer Besucher anzuzeigen. In diesem Tutorial zeigen wir Ihnen, wie Sie das Divi-Shop-Modul auf kleineren Bildschirmgrößen in dynamische Produkt-Swipe-Karten verwandeln, ohne ein Plugin zu verwenden. Wir beginnen mit der Vorbereitung der verschiedenen Elemente in unserem Produktbereich und verwenden eine kleine Menge CSS-Code, um den Swipe-Effekt zu aktivieren. Dies ist eine großartige Möglichkeit, eine breite Palette von Produkten auf Ihrer Zielseite anzuzeigen, ohne Ihre Besucher zu überfordern. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis. Wir aktivieren die Produkt-Swipe-Karten nur auf Tablets und Mobilgeräten. Auf dem Desktop behalten wir die Spaltenstruktur bei, die wir im Shop-Modul festlegen.

Handy, Mobiltelefon

Desktop

Laden Sie das Produkt-Swipe-Karten-Layout KOSTENLOS herunter

Um das kostenlose Produkt-Swipe-Karten-Layout in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Richten Sie WooCommerce & Produktseiten ein

Bevor Sie in den Divi-Teil dieses Tutorials einsteigen, ist es wichtig, dass das WooCommerce-Plugin auf Ihrer Website installiert und aktiviert ist. Falls noch nicht geschehen, fügen Sie mehrere Produkte hinzu, je nachdem, wie viele Produkte Sie in Ihrem Shop-Modul anzeigen möchten.

2. Erstellen Sie eine neue Seite und laden Sie das Landingpage-Layout für Briefpapier hoch

Neue Seite erstellen

Sobald Sie die Produkte eingerichtet haben, fügen Sie eine neue Seite in Ihrem WordPress-Backend hinzu. Geben Sie Ihrer Seite einen Titel, veröffentlichen Sie die Seite und aktivieren Sie den Visual Builder von Divi.

Laden Sie das Landingpage-Layout für Briefpapier hoch

Navigieren Sie auf Ihrer neuen Seite zu Ihren vorgefertigten Layouts und laden Sie das Landing Page-Layout für den Schreibwarenladen hoch. Obwohl wir dieses spezielle Layout verwenden, können Sie jedes andere Layout Ihrer Wahl verwenden, solange Sie ein Shop-Modul in diesem Layout hinzufügen oder suchen.

3. Shop-Bereich ändern

Abschnitt mit Shop-Modul suchen

Wenn wir auf unserer neuen Seite nach unten scrollen, die wir mit dem Layout der Zielseite für Schreibwarenläden erstellt haben, stoßen wir auf einen Abschnitt mit einem Shop-Modul. Wir werden diesen Abschnitt in den nächsten Schritten dieses Tutorials verwenden.

Zeileneinstellungen

Responsive Größenanpassung

Öffnen Sie zunächst die Zeileneinstellungen der Zeile, die das Shop-Modul enthält. Wie bereits erwähnt, behalten wir das gleiche Design auf dem Desktop bei, wir werden die Produkt-Swipe-Karten nur auf kleineren Bildschirmgrößen aktivieren. Um ein müheloses Erlebnis zu schaffen, lassen wir zu, dass die Reihe die linke und rechte Seite unseres Bildschirms berührt, indem wir die Breite in den Größeneinstellungen ändern.

• Benutzerdefinierte Dachrinnenbreite verwenden: 1
• Breite: 80 % (Desktop), 100 % (Tablet & Telefon)

Sichtweite

Wir stellen auch sicher, dass nichts den Zeilencontainer übertrifft, indem wir die Sichtbarkeitseinstellungen auf ausgeblendet setzen.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Einstellungen des Shop-Moduls

Wählen Sie die Produktanzahl und die Desktop-Spaltenstruktur Ihrer Wahl aus

Dann öffnen wir die Shop-Modul-Einstellungen. Die Änderungen, die wir an unserem CSS-Code vornehmen (den wir später hinzufügen werden), hängen von der Anzahl der Produkte ab, die wir zeigen. Wir zeigen Ihnen zunächst, wie Sie ein Shop-Modul mit 8 Produkten in Produkt-Swipe-Cards verwandeln. Sie können ein beliebiges Spaltenlayout Ihrer Wahl für den Desktop auswählen.

• Produktanzahl: 8
• Spaltenlayout: 4 Spalten

Responsive Größenanpassung

Um die Größe unseres Shop-Moduls zu erhöhen, werden wir die Größeneinstellungen im Design-Tab ändern. Beachten Sie, dass wir dies nur für Tablets und Telefone tun.

• Breite: 100 % (Desktop), 250 % (Tablet & Telefon)
• Max. Breite: 100 % (Desktop), 250 % (Tablet und Telefon)

CSS-Klasse

Wir werden unserem Shop-Modul auch eine CSS-Klasse hinzufügen. Später, wenn wir den CSS-Code hinzufügen, können wir das Shop-Modul transformieren, das nur diese CSS-Klasse trägt. Mit anderen Worten, wenn Sie möchten, dass ein anderes Shop-Modul in einem normalen Zustand angezeigt wird, können Sie dies durch Weglassen dieser CSS-Klasse tun.

• CSS-Klasse: product-swipe-cards

Responsive Überläufe

Wir vervollständigen die Zeileneinstellungen, indem wir die Sichtbarkeitseinstellungen für verschiedene Bildschirmgrößen ändern. Wie Sie in den Einstellungen sehen können, möchten wir, dass der Scroll-Effekt nur bei kleineren Bildschirmgrößen auftritt.

• Horizontaler Überlauf: Versteckt (Desktop), Scrollen (Tablet & Telefon)
• Vertikaler Überlauf: Versteckt

Code-Modul unter Shop-Modul hinzufügen

Nachdem Sie das Shop-Modul geändert haben, können Sie direkt darunter ein Code-Modul hinzufügen.

CSS-Code zum Modul hinzufügen

Der folgende CSS-Code verwandelt unser 8-Produkt-Shop-Modul automatisch in responsive Produkt-Swipe-Karten:

<style>

@media all and (max-width: 980px) {
   
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}

.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
  
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}

.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
  
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
  
.product-swipe-cards {
-ms-overflow-style: none;
}

}

</style>

Abgleich verschiedener Produktanzahlen

Wenn Sie nun weniger (oder mehr) Produkte in Ihrem Shop-Modul hinzufügen möchten, ändert sich der Code an zwei Stellen leicht. Diese beiden Stellen müssen manuell geändert werden, um das gewünschte Ergebnis zu erreichen. Ändern wir beispielsweise die Produktanzahl in unserem Shop-Modul auf '4'.

• Produktanzahl: 4

Wenn wir zu unserem Code zurückkehren, müssen wir zwei Änderungen vornehmen. Zuerst müssen wir die Spalten der Rastervorlage ändern. Anstelle von 8 verwenden wir 4 (die gleiche Zahl wie unsere Produktanzahl). Wir erhöhen auch die prozentuale Größe, die diese Produkte in unseren Produkt-Swipe-Karten einnehmen (je mehr Produkte, desto weniger Platz).

grid-template-columns: repeat(4, 14%) !important;

Dann ändern wir auch die Breite des Behälters, in dem die Produkte platziert werden. Bei 4 Produkten entspricht dies 150%. Diese Werte sind nicht in Stein gemeißelt, sie werden durch Herumspielen und Finden einer Harmonie zwischen den Spalten der Rastervorlage und der Containerbreite erreicht. Um die richtige Balance zu finden, wechseln Sie im Visual Builder zur mobilen Ansicht und optimieren Sie die Werte sorgfältig, während Sie das Ergebnis dieser Änderungen betrachten.

width: 150% !important;

Scroll-Snap hinzufügen

Wenn Sie die Benutzererfahrung in Ihrem Produkt-Swipe-Card-Design noch einen Schritt weiter bringen möchten, können Sie auch Scroll-Snap hinzufügen. Scroll Snapping hilft Ihren Besuchern beim Scrollen, indem es zum Anfang eines neuen Produkts springt. Das bedeutet, dass ihr Wischen nicht genau sein muss, das Scroll-Snaping übernimmt irgendwann und zeigt ihre Position innerhalb des horizontalen Scroll-Mechanismus an. Um das Scrollen auf Ihren Produkt-Swipe-Karten zu aktivieren, fügen Sie jedem Produkt einzeln im CSS-Code eine Zeile CSS-Code hinzu (siehe Druckbildschirm unten).

scroll-snap-align: start

Wir werden auch das Scrollen in unserem Shop-Modul aktivieren, indem wir die folgende CSS-Codezeile hinzufügen:

scroll-snap-type: x mandatory

Shop-Modul wiederverwenden, um andere Kategorien anzuzeigen

Ganze Zeile einmal klonen

Sobald Sie das erste Produkt-Swipe-Kartenset fertiggestellt haben, können Sie die gesamte Reihe einmal klonen.

Codemodul in doppelter Zeile löschen

Solange Ihr Shop-Modul dieselbe CSS-Klasse wie das vorherige enthält, reicht ein Code-Modul. Fahren Sie fort und löschen Sie das Codemodul in Ihrer doppelten Zeile.

Doppelte Zeile so oft klonen wie gewünscht

Und klonen Sie die duplizierte Zeile jetzt so oft wie nötig, je nachdem, wie viele Produkt-Swipe-Card-Sets Sie auf Ihrer Zielseite anzeigen möchten!

4. Seitenänderungen speichern und Ergebnis auf Mobilgerät anzeigen

Stellen Sie sicher, dass Sie nach dem Hinzufügen der Produkt-Swipe-Karten Ihre Seite speichern, bevor Sie Visual Builder beenden, und fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Handy, Mobiltelefon

Desktop

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie das integrierte Divi Shop-Modul in Produkt-Swipe-Karten auf kleineren Bildschirmgrößen verwandeln. Auf dem Desktop haben wir die dem Shop-Modul zugewiesene ursprüngliche Spaltenstruktur beibehalten. Durch die Verwendung von Produkt-Swipe-Karten können Sie einem horizontalen Wischmechanismus endlose Produkte hinzufügen, ohne Ihre Besucher mit vertikalem Scrollen zu überfordern.

Es ist ein häufig verwendeter Trend im modernen Webdesign, da er das Benutzerverhalten in den Mittelpunkt stellt und den Zugriff auf eine Vielzahl von Elementen auf kleineren Bildschirmgrößen erleichtert. Sie können diese Produkt-Swipe-Karten auf jeder beliebigen Seite verwenden, aber sie ist besonders praktisch für Produkt-Landingpages, die Sie erstellen. Sie konnten auch die JSON-Datei des Layouts kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.