So gestalten Sie Sticky Bars für Produktseiten mit Divis Woo-Modulen

Veröffentlicht: 2019-10-16

Sticky Bars sind nach wie vor ein beliebtes Element im Webdesign. Sie eignen sich hervorragend, um die Conversions zu steigern, indem CTAs im Vordergrund stehen, ohne so aufdringlich wie Popups zu sein.

In diesem Anwendungsfall werden wir mit den Woo-Modulen von Divi eine klebrige Leiste für WooCommerce-Produkte entwerfen. Die Sticky Bar kann ein beliebiges Divi-Modul enthalten. Für dieses Tutorial erstellen wir eine klebrige Leiste, die die Schaltfläche "In den Warenkorb" enthält, damit sie sichtbar bleibt, wenn der Benutzer auf der Seite nach unten scrollt. Außerdem werden wir eine Benachrichtigungsleiste für den Sticky Cart erstellen, damit Benutzer immer die Schaltfläche "Warenkorb anzeigen" sehen, wenn sie auf die Schaltfläche "In den Warenkorb" geklickt wird.

Diese klebrigen Balkenelemente werden dazu beitragen, die Conversions zu steigern, indem sie diese entscheidenden CTAs im Auge behalten.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das, was wir in diesem Anwendungsfall-Tutorial entwerfen werden.

Laden Sie das Sticky Bars-Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial 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.

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!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

Falls noch nicht geschehen, installieren und aktivieren Sie das installierte Divi Theme (oder das Divi Builder Plugin, wenn Sie das Divi Theme nicht verwenden).
Installieren und aktivieren Sie das WooCommerce-Plugin. Wenn Sie WooCommerce zum ersten Mal einrichten, müssen Sie den grundlegenden Einrichtungsassistenten ausführen, um Ihren Shop vorzubereiten. Sobald Sie fertig sind, können Sie Ihre neuen Produkte hinzufügen.
Erstellen Sie ein paar Produkte, wenn Sie noch keine haben. Weitere Informationen zum Hinzufügen eines neuen Produkts finden Sie in diesem Tutorial.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Teil 1: Entwerfen der Sticky Bar auf einer Produktseite

In diesem Beispiel verwenden wir ein einfaches Modellprodukt. Sie müssen also ein neues Produkt erstellen oder ein vorhandenes Produkt bearbeiten. Die Produktinformationen sind für dieses Tutorial nicht wichtig, stellen Sie nur sicher, dass Sie über die Grundlagen wie Produkttitel, Preis, Beschreibung, Bild usw. verfügen.

Sobald Sie ein einfaches Produkt bereit haben, klicken Sie auf , um das Produkt im Backend zu bearbeiten und den Divi Builder auf der Produktseite bereitzustellen. Wählen Sie unter Divi-Seiteneinstellungen für das Seitenlayout „Volle Breite“ und klicken Sie dann auf „Auf dem Frontend aufbauen“.

Die Produktseite sollte ähnlich aussehen.

Fügen Sie unter der ersten Zeile mit den Breadcrumbs und dem Warenkorbhinweis eine neue Zeile mit einem einspaltigen Layout hinzu.

Zeileneinstellungen

Aktualisieren Sie die Zeileneinstellungen wie folgt, bevor Sie Module hinzufügen:

Hintergrundfarbe: #333333
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Breite: 100%
Füllung: 0px oben, 0px unten

Die Reihe klebrig machen

Um die Zeile festzuhalten, fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement für Desktop hinzu:

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

Fügen Sie dann das folgende CSS zu demselben Hauptelement für die Tablet-Anzeige hinzu:

top: 0px;

Wenn Sie mit der CSS-Eigenschaft „position: sticky“ nicht vertraut sind, handelt es sich im Grunde genommen um eine Mischung zwischen der festen Position und der relativen Position, an der das Element (in diesem Fall die Zeile) mit seinem Container scrollt, bis es erreicht eine bestimmte Position am oberen oder unteren Rand der Seite (oder der angegebene Versatz). In diesem Beispiel legen wir den Offset auf 50px vom oberen Rand des Browserfensters fest (wodurch Platz für die Höhe einer standardmäßigen festen Kopfzeile auf dem Desktop bleibt). Auf dem Tablet wird der Offset dann auf „top: 0px“ geändert, um die Zeile/Sticky-Leiste oben im Browser auf dem Handy zu fixieren.

HINWEIS: Ignorieren Sie die Fehler, die beim Hinzufügen des CSS zum Feld angezeigt werden. Der Code wird gut funktionieren.

Aktualisieren Sie nach dem CSS den Z-Index wie folgt:

Z-Index: 10

Jetzt wird die Zeile klebrig, wenn der Benutzer auf der Produktseite nach unten scrollt.

Spaltenbenutzerdefiniertes CSS

Bevor wir die Zeile mit Inhalt füllen, müssen wir sicherstellen, dass das Modul in unserer einspaltigen Zeile horizontal statt vertikal ausgerichtet wird. Wir können dies mit einem einfachen CSS-Trick mit der flex-Eigenschaft tun. Öffnen Sie die Spalteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
align-items:center;

Das kümmert sich um unser klebriges Reihendesign. Jetzt müssen wir die Zeile mit etwas Inhalt füllen.

Woo-Titel hinzufügen

Fügen Sie der Spalte der Sticky-Reihe ein neues Woo-Titelmodul hinzu.

Aktualisieren Sie dann die Einstellungen wie folgt:

Titeltextfarbe: #ffffff
Titeltextgröße: 28px (Desktop), 20px (Tablet), 16px (Telefon)
Breite: 30%
Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts

Woo-Preis hinzufügen

Fügen Sie als Nächstes ein Woo-Preismodul hinzu, indem Sie auf das graue Plus-Symbol klicken, das angezeigt wird, wenn Sie mit der Maus über das gerade erstellte Woo-Titelmodul fahren.

Aktualisieren Sie dann die Woo-Preiseinstellungen wie folgt:

Preis Textgröße: 28px (Desktop), 20px (Tablet), 16px (Telefon)
Breite: 30%
Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts
Breite des rechten Rands: 1px
Farbe des rechten Rands: #777777
Breite des linken Rands: 1px
Farbe des linken Rands: #777777

Woo-Modul in den Warenkorb hinzufügen

Fügen Sie für den letzten Inhalt ein Woo Add to Cart-Modul direkt nach dem Woo-Preismodul hinzu.

Aktualisieren Sie dann die Einstellungen wie folgt:

Vereinfachen Sie das Element In den Warenkorb, indem Sie den Lagerbestand und das Mengenfeld auf dem Handy ausblenden.

Mengenfeld anzeigen: AUS (Tablette)
Lagerbestand anzeigen: AUS

Textausrichtung: Rechts
Benutzerdefinierte Stile für Schaltfläche verwenden: JA
Schaltflächentextgröße: 18px (Tablet), 14px (Telefon)
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #7ac5af
Breite des Tastenrahmens: 0px

Breite: 40%
Polsterung: 2vw links, 2vw rechts

Ergebnis

Schauen wir uns nun an, wie es auf der Live-Seite aussieht.

Und hier ist es auf dem Handy.

Teil 2: Erstellen einer Sticky Bar für Warenkorbbenachrichtigungen

Das Erstellen einer klebrigen Leiste für Einkaufswagenbenachrichtigungen erfordert eigentlich nur ein paar einfache Schritte, aber das Ergebnis kann äußerst effektiv sein. Wie Sie vielleicht bereits wissen, erscheint der Warenkorbhinweis erst, nachdem ein Benutzer auf die Schaltfläche „In den Warenkorb“ geklickt hat. Aber es ist der nächste entscheidende Schritt im Kaufprozess, der die Benutzer zur Checkout-Seite führt. Wenn der Warenkorbhinweis als klebriger Balken am unteren Rand des Fensters auftaucht, ist er für den Benutzer besser wahrnehmbar.

Um die Sticky Bar für Einkaufswagen-Hinweise zu erstellen, erstellen Sie zunächst eine neue einspaltige Zeile am unteren Rand der Produktseite. Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Breite: 100%
Padding: 0px oben, 0px unten

Machen Sie dann die Zeile klebrig, indem Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzufügen:

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

HINWEIS: Wie zuvor können Sie die Fehler ignorieren, die beim Hinzufügen der Eigenschaft position: sticky erscheinen.

Dadurch bleibt die Zeile beim Scrollen nach oben am unteren Rand des Fensters hängen.

Aktualisieren Sie dann den z-Index, um ihn wie folgt im Vordergrund zu halten:

Z-Index: 10

Fügen Sie das Modul "Warenkorbhinweis" hinzu

Nachdem Sie die Zeile erstellt haben, fügen Sie das Woo Cart Notice Module zur Zeile hinzu und aktualisieren Sie die Einstellungen wie folgt:

Text Textgröße (Telefon): 15px
Rand: 0em unten

Das ist es! Es liegt an Ihnen, ob Sie das Standardelement für Einkaufswagen-Benachrichtigungen oben auf der Seite löschen möchten. Es kann jedoch eine gute Idee sein, es für bessere Conversions zu belassen.

Endergebnis

Hier ist das Endergebnis mit den beiden klebrigen Balken.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

Hoffentlich hilft uns dieser Beitrag zu verstehen, wie man Sticky Bars für unsere Produktseiten in Divi erstellt. Wir haben erläutert, wie Sie eine klebrige Leiste erstellen, die einen Produkttitel, einen Preis und eine Schaltfläche zum Hinzufügen zum Warenkorb enthält. Und wir haben auch gezeigt, wie man eine Sticky Bar für Einkaufswagen-Hinweise erstellt. Beides sollte den Kaufprozess unterstützen und die Conversions steigern. Und wir brauchen nicht einmal ein Plugin!

Fühlen Sie sich frei, neue Möglichkeiten zu erkunden, um Produktseiten-Sticky Bars auf Ihrer eigenen Website zu verwenden.

Wir freuen uns, von Ihnen in den Kommentaren zu hören.

Danke schön!