Laden Sie eine schöne Vollbild-Produktseite für Divi . herunter

Da die WooCommerce-Module Teil von Divi geworden sind, haben wir Ihnen einige Produktseitendesigns gezeigt, die Sie mit den integrierten Optionen von Divi erstellen können. Heute fügen wir dieser Liste ein neues Tutorial hinzu, in dem wir Ihnen zeigen, wie Sie eine schöne Vollbild-Produktseite erstellen. Wir fassen alle Produktinhalte in einem einzigen Abschnitt zusammen und schaffen gleichzeitig ein atemberaubendes Design. Obwohl wir das erforderliche vertikale Scrollen auf der Produktseite einschränken, wirkt das Design keineswegs überwältigend. Wir haben auch darauf geachtet, dass das Design auch bei kleinen Bildschirmgrößen schön und reaktionsschnell bleibt. 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 für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Vollbild-Produktlayout KOSTENLOS herunter

Um das kostenlose Vollbild-Produktlayout in die Hände zu bekommen, müssen Sie es 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!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Vorhandene Produktseite öffnen

Als erstes müssen Sie eine vorhandene Produktseite öffnen oder eine neue erstellen. Für dieses spezielle Layout haben wir unserer Produktseite die folgenden Elemente hinzugefügt:

• Produktname
• Ausgewähltes Bild
• Kurze Beschreibung
• Beschreibung
• Preis

Divi aktivieren & Seiteneinstellungen ändern

Fahren Sie fort, indem Sie Divi aktivieren und das Seitenlayout in den Seiteneinstellungen ändern.

Wechseln Sie zu Visual Builder

Sobald dies erledigt ist, können Sie zu Visual Builder wechseln.

Vorhandenen Abschnitt löschen

Im Visual Builder sehen Sie einen Abschnitt mit den standardmäßigen Produktseitenelementen. Sie können fortfahren und diesen gesamten Abschnitt löschen. In den nächsten Schritten dieses Beitrags werden wir unser eigenes alternatives Design neu erstellen.

Neuen Abschnitt hinzufügen

Abstand

Es ist Zeit, mit dem Erstellen zu beginnen! Fügen Sie einen neuen Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und ändern Sie die oberen und unteren Abstandswerte.

• Obere Polsterung: 5vw
• Untere Polsterung: 5vw

Überläufe

Blenden Sie auch die Überläufe des Abschnitts aus.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und passen Sie die Größeneinstellungen wie folgt an:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Spalte 1

Z-Index

Wir erhöhen auch den Z-Index der ersten Spalte in den Sichtbarkeitseinstellungen.

• Z-Index: 10

Spalte 2

Hintergrund mit Farbverlauf

Öffnen Sie als nächstes die Einstellungen von Spalte 2 und fügen Sie einen Verlaufshintergrund für verschiedene Bildschirmgrößen hinzu:

• Farbe 1: #ffcb49
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 66 % (Desktop), 50 % (Tablet & Telefon)
• Endposition: 66 % (Desktop), 50 % (Tablet & Telefon)

Woo-Titelmodul zu Spalte 1 hinzufügen

Dynamischer Inhalt

Zeit, Module hinzuzufügen! In Spalte 1 benötigen wir als einziges Modul ein Woo Title Modul.

• Produkt: Dieses Produkt

Einstellungen für Titeltext

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

• Titelschriftart: Montserrat
• Schriftstärke des Titels: Ultra Light
• Ausrichtung des Titeltextes: Links (Desktop), Mitte (Tablet und Telefon)
• Titeltextgröße: 9vw

Größe

Ändern Sie auch die Größe des Moduls.

• Breite: 50vw (Desktop), 100% (Tablet & Telefon)

Abstand

Zusammen mit den Abstandseinstellungen.

• Obere Marge: 14vw (Desktop), 0vw (Tablet & Telefon)
• Unterer Rand: 5vw (Tablet & Telefon)
• Linker Rand: -11vw (Desktop), 2vw (Tablet & Telefon)
• Rechter Rand: 2vw (Tablet & Telefon)

Transformieren Drehen

Zu guter Letzt drehen Sie das gesamte Modul in den Transformationseinstellungen.

• Links: 270 Grad (Desktop), 0 Grad (Tablet und Telefon)

Woo Images-Modul zu Spalte 2 hinzufügen

Dynamischer Inhalt

Auf zum zweiten Modul! Dort brauchen wir nur das Woo Image Module.

• Produkt: Dieses Produkt

Bildeinstellungen

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

• Bild abgerundete Ecken: 1vw (alle Ecken)

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

Größe

Vervollständigen Sie die Einstellungen des Woo Image Module, indem Sie die Breite und die Modulausrichtung in den Größeneinstellungen ändern.

• Breite: 35vw
• Modulausrichtung: Mitte

Woo-Beschreibungsmodul Nr. 1 zu Spalte 3 hinzufügen

Dynamischer Inhalt

Auf zur letzten Spalte! Dort brauchen wir als erstes Modul das Woo Description Module.

• Produkt: Dieses Produkt
• Beschreibungstyp: Kurzbeschreibung

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen wie folgt:

• Textschriftart: Montserrat
• Textschriftart: Großbuchstaben
• Textgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Text Buchstabenabstand: -0.07vw
• Textzeilenhöhe: 1.8em

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Oberer Rand: 9vw
• Linke Polsterung: 2vw (Desktop), 5vw (Tablet & Telefon)
• Rechte Polsterung: 5vw

Woo-Preismodul zu Spalte 3 hinzufügen

Dynamischer Inhalt

Weiter zum nächsten Modul, dem Woo Price Module.

• Produkt: Dieses Produkt

Preistexteinstellungen

Ändern Sie die Preistexteinstellungen des Moduls wie folgt:

• Preis Schriftart: Montserrat
• Preistextfarbe: #333333
• Preistextgröße: 3vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Preiszeilenhöhe: 1.8em

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Oberer Rand: 4vw
• Linke Polsterung: 2vw (Desktop), 5vw (Tablet & Telefon)
• Rechte Polsterung: 2vw (Desktop), 5vw (Tablet & Telefon)

Woo Add To Cart Modul zu Spalte 3 hinzufügen

Dynamischer Inhalt

Das nächste und letzte Modul, das wir benötigen, um dieses Design zu vervollständigen, ist das Woo Add To Cart-Modul.

• Produkt: Dieses Produkt

Feldeinstellungen

Ändern Sie die Feldeinstellungen des Moduls wie folgt:

• Feldhintergrundfarbe: #0a0900
• Textfarbe der Felder: #ffffff
• Felder Schriftart: Montserrat

• Feldtextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Felder abgerundete Ecken: 50vw (alle Ecken)

Tasteneinstellungen

Spielen Sie auch mit den Tasteneinstellungen herum.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #ffcb49
• Breite des Tastenrahmens: 0px

• Button-Schriftart: Montserrat

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 4vw (Desktop), 8vw (Tablet), 10vw (Telefon)
• Rechte Polsterung: 4vw (Desktop), 8vw (Tablet), 10vw (Telefon)

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Oberer Rand: 2vw
• Linker Rand: -3vw (Desktop), 5vw (Tablet & Telefon)
• Rechter Rand: 5vw (Tablet & Telefon)

Verwandeln Sie die Produktseite in eine Vorlage

Seitenlayout in der Divi-Bibliothek speichern

Sobald Sie die Vollbild-Produktseite ausgefüllt haben, können Sie sie mit Divis Theme Builder für jedes Ihrer Produkte verwenden. Speichern Sie dazu das soeben erstellte Layout in Ihrer Divi-Bibliothek.

Neue Vorlage zum Theme Builder hinzufügen

Gehen Sie in Ihren Divi-Einstellungen zum Theme Builder und fügen Sie eine neue Vorlage hinzu.

Wählen Sie die Produktseiten aus, auf denen dieses Layout angezeigt werden soll.

Laden Sie das Layout in den Textkörper der Vorlage hoch

Klicken Sie dann auf „Globalen Körper hinzufügen“ und wählen Sie „Aus Bibliothek hinzufügen“.

Wählen Sie Ihr Layout auf der Registerkarte "Ihre gespeicherten Layouts" aus.

Und speichern Sie alle Ihre Änderungen!

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 eine schöne Vollbild-Produktseite erstellen können, die Sie für jede Art von E-Commerce-Website verwenden können, die Sie einrichten. Wir haben die Einstellungen der verschiedenen Woo-Module aufeinander abgestimmt, um ein beeindruckendes Ergebnis zu erzielen und das erforderliche vertikale Scrollen zu begrenzen. Wir hoffen, dass dieses Design Sie dazu inspiriert, auch Ihre eigenen Vollbild-Produktseiten zu erstellen! 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.