Sticky Bars sind weiterhin ein beliebtes Element des Webdesigns. Sie eignen sich hervorragend, um Conversions voranzutreiben, indem sie Handlungsaufforderungen auf dem neuesten Stand halten, ohne so aufdringlich wie Popups zu sein.
In diesem Anwendungsfall entwerfen wir eine Klebeleiste für die Produkte WooCommerce mit Woo-Modulen von Divi. Die Haftleiste kann ein beliebiges Modul enthalten Divi. Für dieses Tutorial erstellen wir eine Sticky-Leiste, die die Schaltfläche „Zum Warenkorb hinzufügen“ enthält, damit sie sichtbar bleibt, wenn der Benutzer auf der Seite nach unten scrollt. Darüber hinaus werden wir auch eine Warenkorb-Benachrichtigungsleiste erstellen, damit Benutzer immer die Schaltfläche „Warenkorb anzeigen“ sehen, sobald auf die Schaltfläche „Zum Warenkorb hinzufügen“ geklickt wird.
Diese klebrigen Balkenelemente steigern die Conversions, indem sie diese wichtigen CTAs im Blick behalten.
Übersicht
Hier ist eine Vorschau dessen, was wir in diesem Tutorial entwerfen werden.
Teil 1: Gestaltung des Klebestreifens auf einer Produktseite
In diesem Beispiel wird ein einfaches simuliertes Produkt verwendet. Sie müssen also ein neues Produkt erstellen oder ein vorhandenes Produkt bearbeiten. Produktinformationen sind für dieses Tutorial nicht wichtig. Stellen Sie sicher, dass Sie die Grundlagen wie Produkttitel, Preis, Beschreibung, Bild usw. haben.
Sobald ein einfaches Produkt fertig ist, klicken Sie, um das Produkt im Backend zu bearbeiten und bereitzustellen Divi Builder auf der Produktseite. Wählen Sie unter „Divi-Seiteneinstellungen“ „Volle Breite“ für das Layout aus und klicken Sie dann auf „Auf der Vorderseite aufbauen“.
Die Produktseite sollte so aussehen.
Fügen Sie unterhalb der ersten Zeile mit den Brotkrumen und dem Warenkorb eine neue Zeile mit einem einspaltigen Layout hinzu.
Leitungseinstellungen
Aktualisieren Sie vor dem Hinzufügen von Modulen die Leitungseinstellungen wie folgt:
- Hintergrundfarbe: # 333333
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: JA
- Dachrinnenbreite: 1
- Breite: 100%
- Polsterung: 0px oben, 0px unten
Machen Sie die Linie klebrig
Fügen Sie dem Hauptdesktopelement den folgenden benutzerdefinierten CSS-Code hinzu, um die Zeile klebrig zu machen:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Fügen Sie dann den folgenden CSS-Code demselben Hauptelement für die Tablettanzeige hinzu:
top: 0px;
Wenn Sie mit der CSS-Eigenschaft "position: sticky" nicht vertraut sind, ist dies eine Art Mischung zwischen der festen Position und der relativen Position, an der das Element (in diesem Fall die Linie) mit seiner scrollen wird Behälter, bis eine bestimmte Position oben oder unten auf der Seite (oder der angegebene Versatz) erreicht ist. In diesem Beispiel setzen wir den Versatz vom oberen Rand des Browserfensters auf 50 Pixel (wobei Platz für die Höhe eines festen Standardheaders auf dem Desktop bleibt). Auf dem Tablet wird der Versatz dann auf „oben: 0 Pixel“ geändert, um die Klebelinie / Leiste oben im Browser auf Mobilgeräten zu korrigieren.
Hinweis: Ignorieren Sie alle Fehler, die beim Hinzufügen von 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 durch die Produktseite blättert.
Benutzerdefinierte CSS-Spalte
Bevor Sie mit dem Füllen der Leitung beginnen Inhalt, 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 dem Hauptelement das folgende benutzerdefinierte CSS hinzu:
display:flex; align-items:center;
Dies kümmert sich um unser Sticky-Line-Design. Jetzt müssen wir die Zeile mit füllen Inhalt.
Füge einen Titel hinzu Woo
Fügen Sie ein neues Woo-Titelmodul zur Spalte mit der klebrigen Linie hinzu.
Dann aktualisieren Sie die Einstellungen wie folgt:
- Titel des Farbtextes: #ffffff
- Text Titelgröße: 28px (Desktop), 20px (Tablet), 16px (Telefon)
- Breite: 30%
- Polsterung: 2vw oben, 2vw unten, 2vw links, 2vw rechts
Addieren Sie den Preis Woo
Fügen Sie dann ein Woo-Preismodul hinzu, indem Sie auf das graue Plus-Symbol klicken, das angezeigt wird, wenn Sie den Mauszeiger über das soeben erstellte Woo-Titelmodul halten.
Aktualisieren Sie dann die Woo Price-Einstellungen 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 Randes: 1px
- Farbe des rechten Randes: #777777
- Breite des linken Randes: 1px
- Farbe des linken Randes: #777777
Modul hinzufügen In den Warenkorb
Für das letzte Element von Inhalt, fügen Sie direkt nach dem Modul „Woo Price“ ein Modul „Woo Add to Cart“ hinzu.
Dann aktualisieren Sie die Einstellungen wie folgt:
Vereinfachen Sie das Element "In den Warenkorb", indem Sie das Feld "Bestandsmenge" und "Menge" auf dem Handy ausblenden.
- Anzeigemengenfeld: AUS (Tablett)
- Lagerbestand anzeigen: OFF
- Textausrichtung: rechts
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: JA
- Textgröße der Schaltfläche: 18px (Tablet), 14px (Telefon)
- Knopftextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: #0c71c3
- Breite des Schaltflächenrandes: 0px
- Breite: 40%
- Polsterung: 2vw links, 2vw rechts
Ergebnis
Mal sehen, wie es auf der Liveseite aussieht.
2-Teil: Erstellen Sie eine Warenkorb-Benachrichtigungsleiste
Das Erstellen einer Benachrichtigungsleiste für den Klebewagen umfasst zwar einige einfache Schritte, das Ergebnis kann jedoch äußerst effektiv sein. Wie Sie vielleicht bereits wissen, wird der Warenkorb nur angezeigt, wenn ein Benutzer auf die Schaltfläche "In den Warenkorb" klickt. Aber es ist der nächste entscheidende Schritt im Kaufprozess, der Benutzer zur Checkout-Seite führt. Wenn der Warenkorb als Klebestange am unteren Rand des Fensters angezeigt wird, ist er für den Benutzer besser sichtbar.
Um die Sticky-Leiste für die Warenkorbbenachrichtigung zu erstellen, erstellen Sie zunächst eine neue einspaltige Zeile am unteren Rand der Produktseite. Aktualisieren Sie dann die Zeileneinstellungen wie folgt:
- Breite: 100%
- Polsterung: 0px oben, 0px unten
Machen Sie die Linie klebrig, indem Sie dem Hauptelement das folgende benutzerdefinierte CSS 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 auftreten.
Die Zeile bleibt beim Hochscrollen 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 Warenkorb-Benachrichtigungsmodul hinzu
Nachdem Sie die Linie erstellt haben, fügen Sie der Linie das Modul Woo Cart Notice hinzu und aktualisieren Sie die Einstellungen wie folgt:
- Textgröße (Telefon): 15px
- Rand: 0em am unteren Rand
Das ist es ! Es liegt an Ihnen, ob Sie das Standard-Warnelement für den Warenkorb oben auf der Seite entfernen möchten oder nicht. Es ist jedoch möglicherweise eine gute Idee, es für bessere Conversions zu belassen.
Endergebnis
So könnte das Endergebnis aussehen.
Abschließende Gedanken
Hoffentlich hilft uns dieser Artikel zu verstehen, wie man klebrige Balken für unsere Produktseiten in Divi erstellt. Wir haben erläutert, wie Sie eine klebrige Leiste erstellen, die einen Produkttitel, einen Preis und die Schaltfläche "In den Warenkorb" enthält. Und wir haben auch gezeigt, wie man eine klebrige Leiste erstellt. Beides sollte den Kaufprozess erleichtern und die Conversions steigern. Und wir brauchen nicht einmal ein Plugin!
