So fügen Sie Ihrer Divi-Produktseite Slide-In-Produktinformationen hinzu

Die Art und Weise, wie Sie Ihre Produktseiten gestalten, sagt viel über Ihren Shop im Allgemeinen aus. Das Design Ihrer Produktseite ist ein wichtiger Teil des Kauferlebnisses, daher lohnt es sich oft, die Extrameile zu gehen. Wenn Sie eine etwas interaktivere Produktseite erstellen möchten, werden Sie diesen Beitrag lieben. In diesem Tutorial zeigen wir Ihnen, wie Sie Slide-In-Produktinformationen in ein schön gestaltetes Produktseiten-Layout einfügen. Wir verwandeln dieses Layout auch in eine Produktseitenvorlage und Sie können die JSON-Datei 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 die Vorlage für die Slide-In-Produktseite KOSTENLOS herunter

Um die Vorlage für die Slide-In-Produktseite 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!

1. WooCommerce-Produkt hinzufügen/öffnen

Produktdetails

Beginnen Sie damit, ein neues Produkt zu erstellen oder ein vorhandenes zu öffnen. Um das gleiche Designergebnis zu erzielen, müssen Sie Ihrem Produkt die folgenden Details hinzufügen:

• Name
• Beschreibung
• Produktbild mit transparentem Hintergrund
• Preis
• Kategorie

Divi Builder aktivieren und Produktseiteneinstellungen ändern

Aktivieren Sie den Divi Builder und ändern Sie das Seitenlayout in der oberen rechten Ecke.

• Seitenlayout: Volle Breite

Wechseln Sie zu Visual Builder

Nachdem Sie das Seitenlayout geändert haben, können Sie zu Divis Visual Builder wechseln, indem Sie auf "Auf dem Frontend erstellen" klicken.

2. Erstellen Sie ein Slide-In-Produktinfo-Produktseitenlayout

Entfernen Sie mehrere Zeilen auf der Seite

Im Produktseiten-Editor werden Sie verschiedene Elemente bemerken, die für Ihr Produkt relevant sind. Wir brauchen nur die Elemente der zweiten Zeile, also fahren Sie fort und löschen Sie die erste und letzte Zeile innerhalb des Abschnitts.

Abschnittseinstellungen ändern

Hintergrundfarbe

Es ist an der Zeit, die verschiedenen Elemente zu ändern, um unser Slide-In-Produktinfo-Layout zu erstellen! Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ffe4a5

Größe

Fügen Sie auch eine Mindesthöhe zu den Größeneinstellungen hinzu. In diesem Schritt nimmt der Abschnitt die gesamte Höhe Ihres Browsers ein.

• Mindesthöhe: 100vh

Abstand

Gehen Sie dann zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.

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

Sichtweite

Blenden Sie auch die Überläufe des Abschnitts aus. Dadurch wird sichergestellt, dass während der Animationen kein horizontaler Balken angezeigt wird.

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

Zeileneinstellungen ändern

Größe

Öffnen Sie als Nächstes die Zeileneinstellungen und ändern Sie die Größeneinstellungen für verschiedene Bildschirmgrößen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100 % (Desktop), 90 % (Tablet und Telefon)

Abstand

Entfernen Sie auch die standardmäßige obere und untere Auffüllung der Zeile.

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

Position

Gehen Sie dann zu den Positionseinstellungen und stellen Sie sicher, dass die Zeile am unteren Rand des Abschnitts bleibt, indem Sie die Einstellungen entsprechend ändern:

• Position: Absolut (Desktop), Standard (Tablet & Telefon)
• Ort: Unten Mitte

Einstellungen für Spalte 2 ändern

Hintergrundfarbe

Als Nächstes nehmen wir einige Änderungen an der zweiten Spalte vor. Verwenden Sie eine weiße Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Abstand

Fügen Sie dann den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 10vw
• Untere Polsterung: 10vw
• Linke Polsterung: 8vw
• Rechte Polsterung: 8vw

Standardfilter

Gehen Sie zu den Filtereinstellungen der Spalte und stellen Sie sicher, dass die Helligkeits-, Invertierungs- und Sepiafilter ihren Standardwert in einem normalen Zustand beibehalten.

• Helligkeit: 100%
• Invertieren: 0%
• Sepia: 0%

Hover-Filter

Beim Hover ändern wir die Werte jedoch entsprechend:

• Helligkeit: 49%
• Invertieren: 100%
• Sepia: 100%

Position

Wir stellen außerdem sicher, dass die Spalte in der unteren rechten Ecke des Zeilencontainers platziert wird, indem wir die folgenden Positionseinstellungen anwenden:

• Position: Absolut (Desktop), Standard (Tablet & Telefon)
• Ort: Unten rechts

Ändern Sie das Woo-Titelmodul in Spalte 2

Einstellungen für Titeltext

Es ist an der Zeit, die verschiedenen Module in Spalte 2 anzupassen! Öffnen Sie das Woo Title Module und ändern Sie die H1-Texteinstellungen wie folgt:

• Titelschrift: Playfair Display
• Titeltextfarbe: #000000
• Titeltextgröße: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Ändern Sie das Woo-Preismodul in Spalte 2

Preistexteinstellungen

Öffnen Sie als nächstes die Woo Price Module-Einstellungen und ändern Sie die Preistexteinstellungen.

• Preis Schriftart: Poppins
• Preistextfarbe: #e5bc87
• Preistextgröße: 1,4 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)

Abstand

Fügen Sie auch einen benutzerdefinierten oberen und unteren Rand für verschiedene Bildschirmgrößen hinzu.

• Obere Marge: 2vw (Desktop), 4vw (Tablet & Telefon)
• Unterer Rand: 3vw (Desktop), 5vw (Tablet & Telefon)

Ändern Sie das Woo-Beschreibungsmodul in Spalte 2

Texteinstellungen

Weiter zum Woo-Beschreibungsmodul. Passen Sie die Texteinstellungen des Moduls entsprechend an:

• Textschriftart: Poppins
• Schriftstärke des Textes: Leicht
• Textgröße: 0,8 vw (Desktop), 1,8 vw (Tablet), 2,7 vw (Telefon)
• Textzeilenhöhe: 2.1em

Abstand

Fügen Sie auch einen reaktionsfähigen unteren Rand hinzu.

• Unterer Rand: 3vw (Desktop), 5vw (Tablet & Telefon)

Ändern Sie das Woo Add to Cart-Modul in Spalte 2

Feldeinstellungen

Als nächstes haben wir das Woo Add to Cart Modul. Ändern Sie die Feldeinstellungen des Moduls.

• Feldhintergrundfarbe: rgba(255,255,255,0)
• Feldtextfarbe: #000000
• Felder Schriftart: Poppins
• Feldtextgröße: 0,9vw (Desktop), 2vw (Tablet), 3vw (Telefon)

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

Tasteneinstellungen

Gehen Sie zu den Schaltflächeneinstellungen und gestalten Sie die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,9 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Verlaufsfarbe 1: #e5bd89
• Verlaufsfarbe 2: #e5bc87
• Verlaufstyp: Linear
• Verlaufsrichtung: 153deg
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 1px
• Schaltflächenschriftart: Poppins

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 6vw (Tablet), 9vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 6vw (Tablet), 9vw (Telefon)

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie für verschiedene Bildschirmgrößen etwas Schaltflächenrand hinzufügen.

• Unterer Rand: 2vw (Destkop), 4vw (Tablet & Telefon)

Ändern Sie das Woo-Meta-Modul in Spalte 2

Texteinstellungen

Fahren Sie fort, indem Sie das Woo-Meta-Modul öffnen und die Texteinstellungen ändern.

• Meta-Schriftart: Poppins
• Gewicht der Metaschrift: Leicht
• Metatextgröße: 0.8vw (Desktop), 1.8vw (Tablet), 3vw (Telefon)

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

• Linktextfarbe: #e5bc87

Codemodul zu Spalte 2 hinzufügen

Um die Zoom-Hintergrundfarbe des Woo Image Module zu ändern, benötigen wir ein kleines bisschen CSS-Code, den wir in ein neues Code-Modul in Spalte 2 einfügen.

Fügen Sie CSS-Code hinzu, um die Hintergrundfarbe des Woo-Bildzooms zu ändern

Fügen Sie dem Codemodul die folgenden CSS-Codezeilen hinzu:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Synchronisierte Animationseinstellungen zu Containern hinzufügen

Woo Bildmodul

Nachdem wir nun die verschiedenen Elemente auf unserer Produktseite gestaltet haben, ist es an der Zeit, den Slide-In-Produktinfo-Effekt zu verwirklichen! Um dies zu erreichen, verwenden wir die integrierten Animationseinstellungen von Divi. Öffnen Sie das Woo Image Module in Spalte 1 und wenden Sie die folgende Animation an:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Anfangsdeckkraft der Animation: 50%
• Animationsgeschwindigkeitskurve: Einfach

Spalte 1

Öffnen Sie als nächstes die Einstellungen von Spalte 1 und verwenden Sie die folgenden Animationseinstellungen:

• Animationsstil: Folie
• Animationsrichtung: Links (Desktop), Oben (Tablet & Telefon)
• Animationsverzögerung: 950ms (Desktop), 0vw (Tablet & Telefon)
• Animationsintensität: 25%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out

Spalte 2

Wenden Sie abschließend die folgenden Animationseinstellungen auf Spalte 2 an:

• Animationsstil: Folie
• Animationsrichtung: Links (Desktop), Oben (Tablet & Telefon)
• Animationsdauer: 1200 ms
• Animationsverzögerung: 800 ms (Desktop), 0 ms (Tablet & Telefon)
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out

4. Verwandeln Sie das Produktseitenlayout in eine Vorlage

Layout in Divi-Bibliothek speichern

Sobald Sie das gesamte Produktseitendesign fertiggestellt haben, können Sie es in Ihrer Divi-Bibliothek speichern. Wir verwenden dieses gespeicherte Produktseitenlayout, um eine neue Produktseitenvorlage zu erstellen.

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

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

Vorlage für alle Produkte verwenden

Verwenden Sie die neue Vorlage für alle Produkte.

• Verwenden Sie auf: Alle Produkte

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

Klicken Sie dann auf „Benutzerdefinierten Text hinzufügen“ und dann auf „Aus Bibliothek hinzufügen“.

Navigieren Sie zu „Ihre gespeicherten Layouts“ und wählen Sie das Produktseitenlayout aus, das Sie in Ihre Divi-Bibliothek hochgeladen haben.

5. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Nachdem Sie das Layout in Ihre neue Produktseitenvorlage hochgeladen haben, müssen Sie nur noch alle Änderungen im Theme Builder speichern und das Ergebnis auf Ihrer Website anzeigen!

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 Ihre Produktseiten aufpeppen können, indem wir Ihnen zeigen, wie Sie ein Slide-In-Produktinfo-Layout gestalten. Dies ist eine großartige Möglichkeit, Ihren Produktseiten zusätzliche Interaktionen hinzuzufügen. 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.