Sticky Bars blijven een populair onderdeel van webdesign. Ze zijn geweldig voor het stimuleren van conversies door call-to-action scherp te houden zonder zo opdringerig te zijn als pop-ups.

In dit geval ontwerpen we een plakstrip voor de producten WooCommerce met behulp van Woo-modules van Divi. De plakbalk kan elke module bevatten Divi. Voor deze zelfstudie maken we een plakbalk met de knop 'Toevoegen aan winkelwagentje', zodat deze zichtbaar blijft wanneer de gebruiker naar beneden scrolt. Daarnaast zullen we ook een winkelwagenmeldingsbalk maken, zodat gebruikers altijd de knop "winkelwagentje bekijken" zien zodra op de knop "toevoegen aan winkelwagentje" is geklikt.

Deze plakkerige balkelementen helpen de conversies te stimuleren door deze cruciale CTA's in beeld te houden.

overzicht

Hier is een voorbeeld van wat we in deze tutorial zullen ontwerpen.

divi ontwerpvoorbeeld plakkerige balk

Deel 1: Ontwerp van de kleefstaaf op een productpagina

We gaan voor dit voorbeeld een eenvoudig gesimuleerd product gebruiken, dus u moet een nieuw product maken of een bestaand product bewerken. Productinformatie is niet belangrijk voor deze tutorial. Zorg ervoor dat je de basis hebt, zoals producttitel, prijs, beschrijving, foto, etc.

Zodra een eenvoudig product gereed is, klikt u om het product in de backend te bewerken en te implementeren Divi Bouwer op de productpagina. Selecteer onder Divi Page-instellingen 'Volledige breedte' voor de lay-out en klik vervolgens op 'Build on Front'.

Productdivi woocommerce over de volledige breedte weergeven

De productpagina zou er zo uit moeten zien.

Voorbeeld van een divi woocommerce pagina

Voeg onder de eerste rij met de broodkruimels en de winkelwagenmelding een nieuwe rij toe met een indeling met één kolom.

Rij invoegen in kolom woocomemrce

Lijn instellingen

Voordat u modules toevoegt, werkt u de lijninstellingen als volgt bij:

  • Achtergrondkleur: # 333333
  • Gebruik een aangepaste gootbreedte: JA
  • Dakgootbreedte: 1
  • Breedte: 100%
  • Bekleding: 0px Top, 0px Bottom
Parametra plakkerige sectie divi

Maak de lijn plakkerig

Om de regel plakkerig te maken, voegt u de volgende aangepaste CSS-code toe aan het hoofdbureaubladelement:

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

Voeg vervolgens de volgende CSS-code toe aan hetzelfde hoofdelement voor het tabletdisplay:

top: 0px;

Als je niet bekend bent met de css "position: sticky" eigenschap, is dit een soort mix tussen de vaste positie en de relatieve positie waar het element (in dit geval de lijn) zal scrollen met zijn container totdat deze een aangegeven positie boven of onder aan de pagina bereikt (of de opgegeven offset). In dit voorbeeld stellen we de offset in op 50 px vanaf de bovenkant van het browservenster (waardoor er ruimte overblijft voor de hoogte van een standaard vaste koptekst op het bureaublad). Vervolgens wordt op een tablet de offset gewijzigd in "top: 0px" om de zelfklevende lijn / balk bovenaan de browser op mobiel te corrigeren.

Opmerking: negeer eventuele fouten die u ziet wanneer u CSS aan de box toevoegt. De code werkt prima.

Werk na de CSS de Z-index als volgt bij:

  • Z-index: 10
Z index product woocommerce

Nu wordt de regel plakkerig terwijl de gebruiker door de productpagina bladert.

Aangepaste CSS-kolom

Voordat je begint met het vullen van de regel inhoud, moeten we ervoor zorgen dat de module in onze rij met één kolom horizontaal wordt uitgelijnd in plaats van verticaal. We kunnen een eenvoudige CSS-truc gebruiken om dit te doen met de flex-eigenschap. Open de kolominstellingen en voeg de volgende aangepaste CSS toe aan het hoofdelement:

display:flex; align-items:center;

Code css kolom divi module woocommerce

Dit zorgt voor ons plakkerige lijnontwerp. Nu moeten we de regel vullen inhoud.

Voeg een titel toe Woo

Voeg een nieuwe Woo-titelmodule toe aan de plakkerige kolom.

Voeg een woo-titel toe

Werk vervolgens de instellingen als volgt bij:

  • Titel tekstkleur: #ffffff
  • Teksttitelgrootte: 28px (desktop), 20px (tablet), 16px (telefoon)
  • Breedte: 30%
  • Bekleding: 2vw bovenaan, 2vw onderaan, 2vw links, 2vw rechts
Kleur sticky bar divi

Voeg de prijs toe Woo

Voeg vervolgens een Woo-prijsmodule toe door te klikken op het grijze pluspictogram dat verschijnt wanneer u de muisaanwijzer over de zojuist gemaakte woo-titelmodule plaatst.

Woocommerce prijs divi

Werk vervolgens de Woo Price-instellingen als volgt bij:

  • Prijstekstgrootte: 28px (desktop), 20px (tablet), 16px (telefoon)
  • Breedte: 30%
  • Bekleding: 2vw bovenaan, 2vw onderaan, 2vw links, 2vw rechts
  • Breedte van de rechterrand: 1px
  • Kleur van de rechterrand: #777777
  • Breedte van de linkerrand: 1px
  • Kleur linkerrand: #777777
Voeg een woocommerce divi prijsmod toe

Voeg een module toe aan winkelwagen

Voor het laatste element van inhoud, voeg een Woo Add to Cart-module toe net na de Woo Price-module.

Voeg een divi-module toe aan winkelwagen

Werk vervolgens de instellingen als volgt bij:

Vereenvoudig het element Toevoegen aan winkelwagentje door het veld Voorraadaantal en hoeveelheid op mobiel te verbergen.

  • Hoeveelheidsveld weergeven: UIT (tablet)
  • Voorraad tonen: UIT
Weergave toevoegen aan winkelmandje divi
  • Tekstuitlijning: rechts
  • Gebruik aangepaste stijlen voor Knop: JA
  • Tekstgrootte knop: 18px (tablet), 14px (telefoon)
  • Knoptekstkleur: #ffffff
  • Achtergrondkleur knop: #0c71c3
  • Breedte van de knoprand: 0px
Pas de knopstijl aan
  • Breedte: 40%
  • Bekleding: 2vw aan de linkerkant, 2vw aan de rechterkant
Aangepast formaat breedte knop toevoegen aan winkelwagen woocommerce

Resultaat

Laten we eens kijken hoe het eruit ziet op de live-pagina.

Divi-beeldvoorbeeld

2-onderdeel: maak een winkelwagenmeldingsbalk

Het maken van een meldingsbalk voor een zelfklevend wagentje omvat eigenlijk een paar eenvoudige stappen, maar het resultaat kan buitengewoon effectief zijn. Zoals u wellicht al weet, wordt de winkelwagenmelding alleen weergegeven wanneer een gebruiker op de knop "Toevoegen aan winkelwagen" klikt. Maar het is de cruciale volgende stap in het koopproces die gebruikers naar de afrekenpagina brengt. Dus wanneer de winkelwagenmelding als een zelfklevende balk onder in het venster verschijnt, is deze beter zichtbaar voor de gebruiker.

Om de sticky bar met winkelwagenmeldingen te maken, moet u eerst een nieuwe rij met één kolom onder aan de productpagina maken. Werk vervolgens de rij-instellingen als volgt bij:

  • Breedte: 100%
  • Bekleding: 0px bovenaan, 0px onderaan
Voeg een nieuwe divirijn toe

Maak de lijn plakkerig door de volgende aangepaste CSS toe te voegen aan het hoofdelement:

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

Opmerking: zoals we eerder hebben gedaan, kunt u de fouten negeren die verschijnen bij het toevoegen van de eigenschap position: sticky.

Pas de stijl css divi-module aan

De rij blijft onderaan het venster hangen wanneer u omhoog schuift.

Werk vervolgens de z-index bij om deze als volgt op de voorgrond te houden:

  • Z-index: 10
Configureer de zindex divi line-module

Voeg de mandmeldingsmodule toe

Nadat u de regel hebt gemaakt, voegt u de module Woo Cart Notice toe aan de regel en werkt u de instellingen als volgt bij:

  • Tekstgrootte (telefoon): 15px
  • Marge: 0em onderaan
Aanpassing van de woo-notificatiemodule

Dat is het ! Of u het standaardwaarschuwingsitem voor het winkelwagentje bovenaan de pagina wilt verwijderen, is aan u, maar het kan een goed idee zijn om het te laten staan ​​voor betere conversies.

Eindresultaat

Dit is hoe het uiteindelijke resultaat eruit zou kunnen zien.

Service toegevoegd aan winkelwagen woocommerce divi

Final gedachten

Hopelijk helpt dit artikel ons te begrijpen hoe we plakbalken kunnen maken voor onze productpagina's in Divi. We hebben besproken hoe u een plakbalk kunt maken met een producttitel, prijs en knop Toevoegen aan winkelwagentje. En we hebben ook laten zien hoe je een plakstaaf maakt. Beide zouden het koopproces gemakkelijker moeten maken en het aantal conversies moeten stimuleren. En we hebben zelfs geen plug-in nodig!