So stapeln Sie Woo-Galeriebilder vertikal in Ihrer Divi-Produktseitenvorlage

Sobald Sie Ihren WooCommerce-Produkten Galeriebilder hinzufügen, werden diese standardmäßig horizontal unter dem vorgestellten Bild Ihres Produkts im Frontend Ihres Produktseitendesigns angezeigt. In einigen spezifischen Designs kann das vertikale Stapeln dieser Woo-Galeriebilder bequemer sein, beispielsweise in Vollbild-Produktseitendesigns. Wenn Sie nach einer schnellen Möglichkeit suchen, Bilder der Woo-Galerie vertikal in der Produktseitenvorlage zu stapeln, die Sie mit Divis Theme Builder erstellen, werden Sie dieses Tutorial lieben. Wir zeigen Ihnen Schritt für Schritt, wie Sie dorthin gelangen. Wir begleiten diesen Ansatz mit einer minimalen Produktseitenvorlage, die Sie ebenfalls kostenlos herunterladen können! Dieses Tutorial funktioniert am besten auf Produktseiten, die Bilder mit einem Seitenverhältnis von 1:1 verwenden.

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie die Produktseitenvorlage KOSTENLOS herunter

Um die kostenlose Produktseitenvorlage in die Hände zu bekommen, müssen Sie sie 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!

Erstellen Sie eine Produktseitenvorlage im Divi Theme Builder

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

Gehen Sie zunächst zum Divi Theme Builder und klicken Sie auf „Neue Vorlage hinzufügen“.

Vorlage für alle Produkte verwenden

Wir verwenden diese Vorlage für alle Produkte, können die Bedingungen jedoch nach Belieben ändern.

Geben Sie den Body-Template-Editor der Vorlage ein

Nachdem Sie die Vorlage erstellt haben, klicken Sie auf "Benutzerdefinierten Körper hinzufügen" und fahren Sie fort, indem Sie "Benutzerdefinierten Körper erstellen" auswählen, um zum Vorlageneditor weitergeleitet zu werden.

Beginnen Sie mit dem Erstellen des Seitenvorlagenkörpers für Kategorie

Abschnitt 1 ändern

Hintergrundfarbe

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Abstand

Wechseln Sie zur Registerkarte Design und entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 2560px
• Zeilenausrichtung: Mitte

Abstand

Wir werden auch bei kleineren Bildschirmgrößen einige benutzerdefinierte obere und untere Polsterung verwenden.

• Obere Polsterung: 100px (nur Tablet und Telefon)
• Untere Polsterung: 100px (nur Tablet und Telefon)

Hauptelement-CSS

Um den Spalteninhalt auf dem Desktop auszurichten, verwenden wir zwei Zeilen CSS-Code im Hauptelement der Zeile. Wir bringen die Anzeigeeigenschaft auf Tablet und Telefon zurück.

Desktop:

display: flex;
align-items: center;

Tablet & Telefon:

display: block;

Spalte 2 Hintergrund mit Farbverlauf

Sobald die allgemeinen Zeileneinstellungen vorgenommen wurden, öffnen Sie die Einstellungen der zweiten Spalte und wenden Sie einen radialen Farbverlaufshintergrund an.

• Farbe 1: #f7f2ef
• Farbe 2: rgba(255,255,255,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 20%
• Endposition: 20%

Spalte 2 Abstand

Wechseln Sie zur Registerkarte Design der Spalte und ändern Sie die benutzerdefinierten Abstandswerte für verschiedene Bildschirmgrößen.

• Obere Polsterung: 30% (Desktop), 10% (Tablet & Telefon)
• Untere Polsterung: 10%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Woo Images-Modul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Zeit, Module hinzuzufügen! Das erste Modul, das wir in Spalte 1 benötigen, ist ein Woo Images-Modul. Dieses Tutorial funktioniert am besten, wenn Sie ein vorgestelltes Bild und Galeriebilder mit einem Verhältnis von 1:1 verwenden. Auf diese Weise können wir die Bilder in den nächsten Schritten in Kreise verwandeln. Stellen Sie nach dem Hinzufügen des Woo Images-Moduls sicher, dass der dynamische Inhalt auf "Dieses Produkt" eingestellt ist.

• Produkt: Dieses Produkt

Codemodul zu Spalte 1 hinzufügen

CSS-Code hinzufügen

Direkt unter dem Woo Images-Modul fügen wir ein Code-Modul hinzu. Der CSS-Code, den wir in dieses Codemodul einfügen, hilft uns dabei, Bilder der Woo-Galerie vertikal auf der linken Seite unserer Spalte zu stapeln.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Woo-Titelmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Weiter zur nächsten Spalte. Dort brauchen wir als erstes Modul ein Woo Title Module.

• Produkt: Dieses Produkt

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Einstellungen für den Überschriftentext wie folgt:

• Titelschriftart: PT Sans
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #000000
• Titeltextgröße: 84 Pixel (Desktop), 60 Pixel (Tablet), 45 Pixel (Telefon)

Woo-Beschreibungsmodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Weiter zum nächsten Modul, das ein Woo-Beschreibungsmodul ist.

• Produkt: Dieses Produkt
• Beschreibungstyp: Kurzbeschreibung

Texteinstellungen

Passen Sie die Texteinstellungen des Moduls entsprechend an:

• Textschriftart: Karla
• Textgröße: 17px (Desktop & Tablet), 15px (Telefon)
• Textzeilenhöhe: 1.9em

Abstand

Vervollständigen Sie die Moduleinstellungen, indem Sie einen oberen und unteren Rand hinzufügen.

• Höchste Marge: 5%
• Untere Marge: 5%

Woo-Preismodul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Fügen Sie ein Woo-Preismodul direkt unter dem Woo-Beschreibungsmodul hinzu.

• Produkt: Dieses Produkt

Preistexteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Preistexteinstellungen wie folgt:

• Preis Schriftart: PT Sans
• Preis Schriftgewicht: Fett
• Preistextfarbe: #ce8654
• Preis Textgröße: 27px

Woo Add to Cart Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Das nächste und letzte Modul, das wir benötigen, um dieses Tutorial abzuschließen, ist ein Woo Add to Cart-Modul.

• Produkt: Dieses Produkt

Feldeinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Feldeinstellungen wie folgt:

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #000000
• Fields-Schriftart: Open Sans

• Alle Ecken: 0px
• Breite des unteren Rands der Felder: 1px
• Farbe des unteren Rands der Felder: #ce8654

Tasteneinstellungen

Stylen Sie dann die Schaltfläche in den Schaltflächeneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #0a0201
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

• Tastenschrift: PT Sans
• Schriftstärke der Schaltfläche: Fett

• Knopfpolsterung oben: 20px
• Knopfunterseite Polsterung: 20px
• Tastenfüllung links: 50px
• Tastenpolsterung rechts: 50px

Abstand

Und vervollständigen Sie die Moduleinstellungen und dieses Tutorial, indem Sie dem Woo Add to Cart-Modul einen oberen Rand hinzufügen. Nachdem Sie die Produktseitenvorlage geändert haben, stellen Sie sicher, dass Sie alle Änderungen im Theme Builder speichern, bevor Sie das Ergebnis auf Ihren Produktseiten anzeigen!

• Höchste Marge: 5%

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den Produktseiten kreativ werden, die Sie mit Divis Theme Builder und den WooCommerce-Modulen erstellen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Woo-Galeriebilder vertikal stapeln können. Dieser Ansatz passt gut zu einem Produktseitendesign im Vollbildmodus, kann jedoch für jede Art von Produktseitenvorlage nützlich sein, die Sie erstellen. Sie konnten die JSON-Datei auch 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.