Sticky Bars er fortsat en populær del af webdesign. De er gode til at skabe konverteringer ved at holde opkald til handling banebrydende uden at være så påtrængende som pop op.
I dette tilfælde vil vi designe en klæbrig stang til produkterne WooCommerce ved hjælp af Woo-moduler fra Divi. Den klæbende bjælke kan indeholde ethvert modul Divi. Til denne vejledning opretter vi en klæbrig bjælke, der inkluderer knappen "Tilføj til kurv", så den forbliver synlig, når brugeren ruller ned på siden. Derudover vil vi også oprette en meddelelseslinje for indkøbskurv, så brugere altid vil se knappen "se indkøbskurv", når der er klikket på knappen "tilføj til indkøbskurv".
Disse klistrede bjælkeelementer hjælper med at øge konverteringer ved at holde disse afgørende CTA'er i betragtning.
undersøgelse
Her er en forhåndsvisning af, hvad vi vil designe i denne tutorial.
Del 1: Design af klæbebjælken på en produktside
Vi vil bruge et simpelt simuleret produkt til dette eksempel, så du skal oprette et nyt produkt eller redigere et eksisterende produkt. Produktinformation er ikke vigtig for denne vejledning. Sørg for, at du har det grundlæggende som produkttitel, pris, beskrivelse, billede osv.
Når et simpelt produkt er klar, skal du klikke for at redigere produktet på backend og implementere det Divi Builder på produktsiden. Under Divi-sideindstillinger, vælg "Fuldbredde" for layoutet, og klik derefter på "Byg på forsiden."
Produktsiden skal se sådan ud.
Under den første række, der indeholder brødkrummer og vognmeddelelse, skal du tilføje en ny række med et layout i en kolonne.
Linieindstillinger
Før du tilføjer moduler, skal du opdatere linjeindstillingerne som følger:
- Baggrundsfarve: # 333333
- Brug en brugerdefineret tagrendebredde: YES
- Tagrendebredde: 1
- Bredde: 100%
- Polstring: 0px top, 0px bund
Gør linjen klistret
For at gøre linjen klæbrig skal du tilføje følgende tilpassede CSS-kode til det vigtigste skrivebordselement:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Føj derefter følgende CSS-kode til det samme hovedelement til tabletskærmen:
top: 0px;
Hvis du ikke er bekendt med egenskaben css "position: sticky", er dette en slags blanding mellem den faste position og den relative position, hvor elementet (i dette tilfælde linjen) vil rulle med sin beholderen, indtil den når en bestemt position øverst eller nederst på siden (eller den angivne forskydning). I dette eksempel indstiller vi forskydningen til 50 pixel fra toppen af browservinduet (hvilket giver plads til højden på en standard fast overskrift på skrivebordet). Derefter ændres forskydningen på en tablet til "top: 0px" for at rette klæbemiddellinjen / bjælken øverst i browseren på mobilen.
Bemærk: Ignorer eventuelle fejl, du ser, når du føjer CSS til feltet. Koden fungerer fint.
Når du har CSS, skal du opdatere Z-indekset som følger:
- Z indeks: 10
Nu bliver linjen klistret, når brugeren ruller gennem produktsiden.
Tilpasset CSS-kolonne
Inden du begynder at fylde linjen med indhold, skal vi sørge for, at modulet inde i vores én-kolonne række vil justere vandret i stedet for lodret. Vi kan bruge et simpelt CSS-trick til at gøre dette med flex-egenskaben. Åbn kolonneindstillingerne, og tilføj følgende tilpassede CSS til hovedelementet:
display:flex; align-items:center;
Dette tager sig af vores sticky line design. Nu skal vi fylde linjen med indhold.
Tilføj en titel Woo
Føj et nyt Woo-titelmodul til den klistrede linjekolonne.
Opdater derefter indstillingerne som følger:
- Farveteksttitel: #ffffff
- Teksttitelstørrelse: 28px (desktop), 20px (tablet), 16px (telefon)
- Bredde: 30%
- Polstring: 2vw øverst, 2vw i bunden, 2vw til venstre, 2vw til højre
Tilføj prisen Woo
Tilføj derefter et Woo-prismodul ved at klikke på det grå plus-ikon, der vises, når du holder musepekeren over det woo-titelmodul, du lige har oprettet.
Opdater derefter Woo Price-indstillingerne som følger:
- Pris tekststørrelse: 28px (desktop), 20px (tablet), 16px (telefon)
- Bredde: 30%
- Polstring: 2vw øverst, 2vw i bunden, 2vw til venstre, 2vw til højre
- Bredde på højre kant: 1px
- Farve på højre kant: #777777
- Bredden af den venstre grænse: 1px
- Venstre kantfarve: #777777
Tilføj et modul Tilføj til indkøbskurv
Til det sidste element af indhold, tilføj et Woo Add to Cart-modul lige efter Woo Price-modulet.
Opdater derefter indstillingerne som følger:
Forenkle elementet Tilføj til indkøbskurv ved at skjule lagermængde og mængdefelt på mobil.
- Vis mængde felt: OFF (tablet)
- Vis lager: FRA
- Tekstjustering: højre
- Brug brugerdefinerede stilarter til knap: YES
- Knaptekststørrelse: 18px (tablet), 14px (telefon)
- Knappen tekstfarve: #ffffff
- Knappens baggrundsfarve: #0c71c3
- Bredde på knapgrænsen: 0px
- Bredde: 40%
- Polstring: 2vw til venstre, 2vw til højre
Resultat
Lad os se, hvordan det ser ud på live-siden.
2-del: Opret en anmeldelse af kurven
Oprettelse af en selvklæbende vognmeddelelseslinje involverer faktisk et par enkle trin, men resultatet kan være ekstremt effektivt. Som du måske allerede ved, vises kurvmeddelelsen kun, når en bruger klikker på knappen "Føj til kurv". Men det er det næste vigtige trin i købsprocessen, der fører brugerne til kassen. Så når vognmeddelelsen vises som en klæbende stang i bunden af vinduet, er den mere synlig for brugeren.
For at oprette en klæbrig bjælke med en kurv skal du først oprette en ny række med en kolonne nederst på produktsiden. Opdater derefter rækkeindstillingerne som følger:
- Bredde: 100%
- Polstring: 0px øverst, 0px i bunden
Gør linjen klistret ved at tilføje følgende brugerdefinerede CSS til hovedelementet:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Bemærk: Som vi gjorde tidligere, kan du ignorere de fejl, der vises, når du tilføjer position: sticky property.
Rækken klæber til bunden af vinduet, når du ruller op.
Opdater derefter z-indekset for at holde det i forgrunden som sådan:
- Z indeks: 10
Tilføj kurvnotifikationsmodulet
Når du har oprettet linjen, skal du tilføje Woo Cart Notice-modulet til linjen og opdatere indstillingerne som følger:
- Tekststørrelse (telefon): 15px
- Margen: 0em i bunden
Det er det ! Uanset om du vil fjerne standardadvarselelementet for indkøbsvogn øverst på siden, er det op til dig, men det kan være en god ide at lade det være for bedre konverteringer.
Endelig resultat
Her er, hvordan det endelige resultat kan se ud.
endelige tanker
Forhåbentlig hjælper denne artikel os med at forstå, hvordan vi opretter klæbende søjler til vores produktsider i Divi. Vi forklarede, hvordan man opretter en klæbrig bjælke, der inkluderer en produkttitel, pris og en knap til indkøbskurv. Og vi viste også, hvordan man opretter en klæbrig bar. Begge disse skal gøre købsprocessen lettere og øge konverteringerne. Og vi har ikke engang brug for et plugin!
