Bare ngjitëse vazhdojnë të jenë një pjesë e popullarizuar e dizenjimit të faqeve në internet. Ata janë të shkëlqyeshëm për drejtimin e shndërrimeve duke mbajtur thirrje për veprim të shpejtë pa qenë ndërhyrës si dritaret.

Në këtë rast përdorimi, ne do të dizajnojmë një shirit ngjitës për produktet WooCommerce duke përdorur modulet Woo nga Divi. Shiriti ngjitës mund të përfshijë çdo modul Divi. Për këtë tutorial, ne do të krijojmë një shirit ngjitës që përfshin butonin "Shto në shportë" në mënyrë që të mbetet i dukshëm kur përdoruesi lëviz poshtë faqes. Për më tepër, ne do të krijojmë gjithashtu një shirit të njoftimeve të karrocave të blerjeve në mënyrë që përdoruesit të shohin gjithmonë butonin "shiko karrocën" pasi të klikohet butoni "Shto në shportë".

Këto elementë të ngjitjes së shiritit do të ndihmojnë në rritjen e shndërrimeve duke i mbajtur në konsideratë këto CTA të rëndësishme.

studim

Këtu është një vrojtim i asaj që do të hartojmë në këtë tutorial.

Pamja paraprake e dizajnit të shiritit ngjitës divi

Pjesa 1: Hartimi i shiritit ngjitës në një faqe produkti

Ne do të përdorim një produkt të thjeshtë të simuluar për këtë shembull, kështu që ju duhet të krijoni një produkt të ri ose të redaktoni një produkt ekzistues. Informacioni i produktit nuk është i rëndësishëm për këtë manual. Sigurohuni që të keni bazat si titulli i produktit, çmimi, përshkrimi, fotografia, etj.

Pasi një produkt i thjeshtë të jetë gati, klikoni për ta modifikuar produktin në pjesën e pasme dhe për ta vendosur Divi Ndërtues në faqen e produktit. Nën Cilësimet e faqes Divi, zgjidhni "Gjerësia e plotë" për paraqitjen, më pas kliko "Ndërto në pjesën e përparme".

Shfaqni tregtinë e produkteve me gjerësi të plotë të tregtisë tregtare

Faqja e produktit duhet të duket si kjo.

Shembull i një faqe divi woocommerce

Nën rreshtin e parë që përmban thërrimet e bukës dhe njoftimin për karrocë, shtoni një rresht të ri me një paraqitje me një kolonë.

Vendos rreshtin në kolonën woocomemrce

Cilësimet e linjës

Para se të shtoni module, azhurnoni cilësimet e linjës si më poshtë:

  • Ngjyra e sfondit: # 333333
  • Përdorni një gjerësi hekuri me porosi: PO
  • Gjerësia e zorrës së trashë: 1
  • Gjerësia: 100%
  • Tapiceri: 0px Top, 0px Fund
Pjesa ngjitëse e pjesës Parametra

Bëni vijë ngjitëse

Për ta bërë linjën ngjitëse, shtoni kodin vijues të personalizuar CSS në elementin kryesor të desktopit:

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

Pastaj shtoni kodin e mëposhtëm CSS në të njëjtin element kryesor për shfaqjen e tabletit:

top: 0px;

Nëse nuk e keni të njohur me pronën "pozicion: ngjitës" të css, kjo është një lloj përzierje midis pozicionit fiks dhe pozicionit relativ ku elementi (në këtë rast linja) do të lëvizë me enë derisa të arrijë një pozicion të caktuar në krye ose në fund të faqes (ose kompensimin e specifikuar). Në këtë shembull, ne vendosim kompensimin në 50px nga maja e dritares së shfletuesit (duke lënë hapësirë ​​për lartësinë e një koke fikse të paracaktuar në desktop). Pastaj, në një tabletë, kompensimi ndryshohet në "krye: 0px" në mënyrë që të korrigjojë vijën / shiritin ngjitës në pjesën e sipërme të shfletuesit në celular.

Shënim: Injoroni çdo gabim që shihni kur shtoni CSS në kutinë. Kodi do të funksionojë mirë.

Pasi të keni CSS, azhurnoni indeksin Z si më poshtë:

  • Indeksi Z: 10
Treguesi Z i tregtisë së produkteve

Tani linja do të ngjitet ndërsa përdoruesi lëviz nëpër faqen e produktit.

Kolona CSS me porosi

Para se të filloni të mbushni rreshtin me përmbajtje, duhet të sigurohemi që moduli brenda rreshtit tonë me një kolonë do të përafrohet horizontalisht në vend të vertikalisht. Ne mund të përdorim një truk të thjeshtë CSS për ta bërë këtë me vetinë flex. Hapni cilësimet e kolonës dhe shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:

display:flex; align-items:center;

Modeli i ndarjes së woocommerce të kolonës së kodit css

Kjo kujdeset për dizajnin tonë të linjës ngjitëse. Tani duhet të mbushim rreshtin me përmbajtje.

Shtoni një titull Woo

Shtoni një modul të ri të titullit Woo në kolonën e linjës ngjitëse.

Shto titullin woo

Pastaj azhurnoni cilësimet si më poshtë:

  • Titulli i tekstit me ngjyra: #ffffff
  • Madhësia e titullit të tekstit: 28px (desktop), 20px (tabletë), 16px (telefon)
  • Gjerësia: 30%
  • Mobilje tapiceri: 2vw në krye, 2vw në fund, 2vw në të majtë, 2vw në të djathtë
Ngjyra ndarëse shirit ngjitës

Shtoni çmimin Woo

Pastaj shtoni një modul çmimi Woo duke klikuar në ikonën gri plus që shfaqet kur rri pezull mbi modulin e titullit woo që sapo krijuat.

Ndarja e çmimeve të Woocommerce

Pastaj azhurnoni cilësimet Woo Price si më poshtë:

  • Madhësia e tekstit të çmimit: 28px (desktop), 20px (tabletë), 16px (telefon)
  • Gjerësia: 30%
  • Mobilje tapiceri: 2vw në krye, 2vw në fund, 2vw në të majtë, 2vw në të djathtë
  • Gjerësia e kufirit të duhur: 1px
  • Ngjyra e kufirit të duhur: #777777
  • Gjerësia e kufirit të majtë: 1px
  • Ngjyra e kufirit të majtë: #777777
Shto një mod çmimi divi të woocommerce

Shtoni një modul Shtoni në shportë

Për elementin e fundit të përmbajtje, shtoni një modul Woo Add to Cart menjëherë pas modulit Woo Price.

Shtoni një modul shtesë divi

Pastaj azhurnoni cilësimet si më poshtë:

Thjeshtoni elementin Shto në shportë duke fshehur fushën e sasisë dhe sasisë së inventarit në celular.

  • Fusha e sasisë së ekranit: OFF (tabletë)
  • Stock Stock: OFF
Shfaq shtimin në shportë divi
  • Rreshtimi i tekstit: e drejtë
  • Përdorni stilet e personalizuara për butonin: PO
  • Madhësia e tekstit të butonit: 18px (tabletë), 14px (telefon)
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: #0c71c3
  • Gjerësia e kufirit të butonave: 0px
Rregullo stilin e butonit
  • Gjerësia: 40%
  • Tapiceri: 2vw në të majtë, 2vw në të djathtë
Butoni i gjerësisë së madhësisë së personalizuar shtoni në shportë woocommerce

Rezultat

Le të shohim se si duket në faqen live.

Pamja paraprake e imazhit Divi

2 Pjesa: Krijoni një shirit njoftimi për shportën

Krijimi i një shiriti njoftimi të karrocës ngjitëse në të vërtetë përfshin disa hapa të thjeshtë, por rezultati mund të jetë jashtëzakonisht efektiv. Siç mund ta dini tashmë, njoftimi i karrocës shfaqet vetëm kur një përdorues klikon butonin "Shto në shportë". Por është hapi tjetër i rëndësishëm në procesin e blerjes që i çon përdoruesit në faqen e blerjes. Pra, kur njoftimi i karrocës shfaqet si një shirit ngjitës në fund të dritares, ai është më i dukshëm për përdoruesin.

Për të krijuar shiritin ngjitës të njoftimit të karrocës, së pari krijoni një rresht të ri me një kolonë në fund të faqes së produktit. Pastaj azhurnoni cilësimet e rreshtit si më poshtë:

  • Gjerësia: 100%
  • Mobilje tapiceri: 0px në krye, 0px në fund
Shto një vijë të re divi

Bëni vijë ngjitëse duke shtuar elementin kryesor të mëposhtëm CSS në elementin kryesor:

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

Shënim: Siç kemi bërë më parë, ju mund të injoroni gabimet që shfaqen kur shtoni pozicionin: vetinë ngjitëse.

Rregullo ndarjen e modulit të stilit css

Rreshti do të ngjitet në fund të dritares kur lëviz lart.

Pastaj azhurnoni indeksin z për ta mbajtur atë në plan të parë, ashtu si:

  • Indeksi Z: 10
Konfiguroni modulin e linjës zindex divi

Shtoni modulin e njoftimit të shportës

Pasi të keni krijuar linjën, shtoni modulin e njoftimit Woo Cart në linjë dhe azhurnoni cilësimet si më poshtë:

  • Madhësia e tekstit (telefon): 15px
  • Margjina: 0em në fund
Përshtatja e modulit të njoftimit woo

Kjo eshte ! Jeni ose jo doni të hiqni artikullin e paralajmëruar të paralajmërimit të karrocës në krye të faqes, varet nga ju, por mund të jetë një ide e mirë ta lini për shndërrime më të mira.

Rezultati përfundimtar

Ja se si mund të duket rezultati përfundimtar.

Shërbimi u shtua në karrocë woocommerce divi

Mendimet e fundit

Shpresojmë që ky artikull të na ndihmojë të kuptojmë se si të krijojmë shirita ngjitës për faqet e produkteve tona në Divi. Ne kemi mbuluar mënyrën e krijimit të një shiriti ngjitës që përfshin një titull të produktit, çmimin dhe butonin Shto në shportë. Dhe ne gjithashtu treguam se si të krijojmë një shirit ngjitës. Të dyja këto duhet ta bëjnë më të lehtë procesin e blerjes dhe të rrisin shndërrimet. Dhe as nuk kemi nevojë për një shtojcë!