So ändern Sie den Breakpoint für mobile Spalten des Divi Shop-Moduls

Sobald Sie auf ein mobiles Gerät umsteigen, verwandelt sich das Shop-Modul standardmäßig in ein einspaltiges Layout. Wenn Sie nun jedes Produkt einzeln hervorheben möchten, ist das großartig, aber mit den größeren Bildschirmgrößen von Smartphones möchten Sie vielleicht zwei Produkte nebeneinander anzeigen lassen, wenn Sie das Shop-Modul verwenden. Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie den mobilen Breakpoint des Shop-Moduls per CSS ändern, sodass auf den meisten modernen Smartphones zwei Produkte nebeneinander erscheinen können. Dies ist ein großartiges Tutorial, das Sie in Reichweite haben sollten, wenn Sie in Zukunft einen Online-Shop einrichten möchten! Sie können auch die JSON-Datei des Designs kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Handy, Mobiltelefon

Desktop

Laden Sie die Shop-Seitenvorlage KOSTENLOS herunter

Um die kostenlose Vorlage für die Shop-Seite in die Hände zu bekommen, müssen Sie sie zunächst ü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. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Gehen Sie zunächst zum Theme Builder von DIvi und fügen Sie eine neue Vorlage hinzu.

Verwenden Sie die Vorlage auf der Shop-Seite

Verwenden Sie diese neue Vorlage auf der Shop-Seite Ihrer Website.

• Verwenden Sie auf: Shop

Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Und beginnen Sie mit dem Aufbau des Bodys der Shop-Vorlage.

2. Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und verwenden Sie den folgenden Verlaufshintergrund dafür:

• Farbe 1: #32ff3d
• Farbe 2: #29c4a9
• Verlaufstyp: Linear
• Verlaufsrichtung: 109deg

Hintergrundbild

Laden Sie auch ein Hintergrundbild hoch. Das Hintergrundbild, das wir in diesem Tutorial verwenden, finden Sie im Download-Ordner, den Sie zu Beginn dieses Beitrags herunterladen konnten.

• Hintergrundbildgröße: Fit

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und ändern Sie die Abstandswerte entsprechend:

• Oberer Rand: 50px
• Linker Rand: 50px
• Rechter Rand: 50px
• Untere Polsterung: 150px

Grenze

Vervollständigen Sie die Abschnittseinstellungen, indem Sie einen Randradius hinzufügen.

• Alle Ecken: 20px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Textmodul zur Spalte hinzufügen

H1-Inhalt hinzufügen

Fügen Sie der Spalte der Zeile ein Textmodul mit einem H1-Inhalt Ihrer Wahl hinzu.

H1-Texteinstellungen

Ändern Sie die H1-Texteinstellungen des Moduls entsprechend:

• Überschrift Schriftart: Prata
• Ausrichtung des Überschriftentextes: Mitte
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 80px (Desktop), 60px (Tablet), 40px (Telefon)

Abschnitt 2 hinzufügen

Z-Index

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu. Öffnen Sie die Abschnittseinstellungen und erhöhen Sie den z-Index.

• Z-Index: 2

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Größe

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Größeneinstellungen wie folgt:

• Breite: 100%
• Maximale Breite: 1380px

Abstand

Fügen Sie dann einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzu.

• Oberer Rand: 200px
• Obere Polsterung: 50px (Desktop), 20px (Tablet & Telefon)
• Untere Polsterung: 50px (Desktop), 20px (Tablet & Telefon)
• Linke Polsterung: 100px (Desktop), 20px (Tablet & Telefon)
• Rechte Polsterung: 100px (Desktop), 20px (Tablet & Telefon)

Grenze

Wir fügen der gesamten Zeile auch einen Randradius hinzu.

• Alle Ecken: 25px

Box Schatten

Vervollständigen Sie die Zeileneinstellungen, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.1)

Shop-Modul zur Spalte hinzufügen

Inhalt

Jetzt ist es an der Zeit, unser Shop-Modul einzufügen. Wir verwenden ein 4-Spalten-Layout.

• Spaltenlayout: 4 Spalten

Überlagerung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Overlay-Farben.

• Overlay-Symbolfarbe: #29c6a6
• Overlay-Hintergrundfarbe: rgba(255,255,255,0.75)

Bild

Ändern Sie auch die Bildeinstellungen.

• Alle Ecken: 10px

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.11)

Einstellungen für Titeltext

Fahren Sie fort, indem Sie die Einstellungen für den Titeltext entsprechend ändern:

• Titelschriftart: Prata
• Titeltextgröße: 30px (Desktop), 25px (Tablet), 20px (Telefon)

Preistexteinstellungen

Nehmen Sie als Nächstes einige Änderungen an den Preistexteinstellungen vor.

• Preis Schriftart: Montserrat
• Preis Schriftgewicht: Mittel
• Preistextgröße: 18px (Desktop), 16px (Tablet), 14px (Telefon)

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einige obere Polsterungen hinzufügen.

• Obere Polsterung: 50px

Codemodul zur Spalte hinzufügen

Nachdem Sie das gesamte Shop-Modul-Design fertiggestellt haben, ist es an der Zeit, den Breakpoint der mobilen Shop-Modul-Spalte mit CSS zu ändern. Wir fügen den CSS-Code zu einem Code-Modul in unserem Design hinzu. Fahren Sie fort und fügen Sie direkt unter dem Shop-Modul ein neues Code-Modul hinzu.

CSS-Code einfügen

Wir reduzieren den einspaltigen mobilen Haltepunkt auf eine Breite von 300 px. Das bedeutet, dass die meisten modernen Smartphones zwei Produkte nebeneinander statt eines anzeigen. Um dies zu ermöglichen, fügen wir dem Codemodul die folgenden CSS-Codezeilen hinzu:

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. Alle Theme Builder-Änderungen speichern und das Ergebnis anzeigen

Sobald Sie das Design der Shop-Seite abgeschlossen und den CSS-Code hinzugefügt haben, um den mobilen Breakpoint zu ändern, können Sie alle Änderungen am Theme Builder speichern und das Ergebnis auf Ihrer Shop-Seite anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, 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 den Breakpoint der mobilen Spalte des Shop-Moduls ändern können, wodurch Sie auf den meisten modernen Smartphones zwei Produkte nebeneinander anzeigen können. Dies ist eine hervorragende Möglichkeit, das erforderliche mobile Scrollen zu reduzieren und Ihren Besuchern mehr Produkte auf einmal zu zeigen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen 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.