Gå til hovedindhold

Sådan designes klæbestænger til produktsider med Divi Woo-moduler

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

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 brugssag skal vi designe en klæbrig bar til WooCommerce-produkter ved hjælp af Divis Woo-moduler. Den klæbende bar kan omfatte ethvert Divi-modul. Til denne vejledning opretter vi en klæbrig bjælke, der inkluderer knappen "Føj til indkøbskurv", så den forbliver synlig, når brugeren ruller ned på siden. Derudover vil vi også oprette en kurvmeddelelseslinje, så brugerne altid vil se knappen "se indkøbskurv", når der klikkes på knappen "Tilføj til kurv".

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 Divi Builder på produktsiden. Under Divi Page Settings skal du vælge "Fullwidth" for layoutet og derefter klikke på "Build on Front".

Vis produkt divi woocommerce i fuld bredde

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.

Indsæt række til woocomemrce-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
Parametra klæbrig sektion divi

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:

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

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
Z indeks produkt woocommerce

Nu bliver linjen klistret, når brugeren ruller gennem produktsiden.

Tilpasset CSS-kolonne

Før vi begynder at udfylde rækken med indhold, skal vi sørge for, at modulet inde i vores ene kolonnerække justeres vandret i stedet for lodret. Vi kan bruge et simpelt CSS-trick til at gøre dette med flex-ejendommen. Åbn kolonneindstillingerne, og tilføj følgende tilpassede CSS til hovedelementet:

display:flex; align-items:center;

Kode css kolonne divi modul woocommerce

Det tager sig af vores klæbrig linjedesign. Nu skal vi udfylde rækken med indhold.

Tilføj en titel Woo

Føj et nyt Woo-titelmodul til den klistrede linjekolonne.

Tilføj en woo-titel

Opdater derefter indstillingerne som følger:

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

  • 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
Farve sticky bar divi

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.

Woocommerce pris divi

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

For det sidste stykke indhold skal du tilføje et Tilføj til indkøbsvogn Woo-modul lige efter Woo Price-modulet.

Tilføj et tilføj til kurv divi-modul

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
Vis tilføj til kurv divi
  • 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
Tilpas knapstil
  • Bredde: 40%
  • Polstring: 2vw til venstre, 2vw til højre
Tilpas størrelse bredde knap tilføj til indkøbskurv woocommerce

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
Tilføj en ny divi linje

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.

Tilpas stil css modul divi

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:

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

  • Z indeks: 10
Konfigurer zindex divi line-modul

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
Tilpasning af woo-underretningsmodulet

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!

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
3 aktier
andel3
tweet
Tilmeld