Når du opretter en landingsside for specifikke produkter, uanset om det er en ny lancering eller et udsalg, du forbereder dig på, er chancerne store for, at du kommer til at bruge Shop-modulet på et tidspunkt. Divi Shop-modulet giver dig mulighed for dynamisk at udtrække produkter fra plugin'et WooCommerce og style dem ved hjælp af Divis indbyggede muligheder. 

Nu leveres som standard butiksmodulet med et par kolonnestrukturer, som alle oversættes til to kolonner på mindre skærmstørrelser. Dette betyder, at jo flere produkter du vælger at vise, jo mere lodret rulning kræves for at komme til den næste del af din destinationsside.

I moderne webdesign, en teknik, der ofte bruges til at begrænse lodret rulning og vise elementer i henhold til dine præferencer. besøgende er at bruge magnetkort. I denne vejledning viser vi dig, hvordan du gør Divi Shop-modulet til dynamiske produktkort på mindre skærmstørrelser uden at bruge et plugin. 

Vi starter med at forberede de forskellige elementer i vores produktsektion og bruge en lille mængde CSS-kode for at aktivere swipe-effekten. Det er en fantastisk måde at vise en bred vifte af produkter på din landingsside uden at overvælde din besøgende

Muligt resultat

Før vi dykker ned i vejledningen, lad os se på resultatet. Vi aktiverer kun produktets magnetkort på tablets og mobiltelefoner. På skrivebordet beholder vi den søjlestruktur, som vi bestemmer i Shop-modulet.

Divi produkt modul butik animation

1. Konfigurer WooCommerce og produktsider

Før du går ind i Divi-delen af ​​denne tutorial, er det vigtigt, at plugin'et WooCommerce er installeret og aktiveret på din Websted. Hvis du ikke allerede har gjort det, skal du tilføje flere produkter, afhængigt af hvor mange produkter du vil have vist i dit Shop-modul.

Opret woocommerce-produkter

2. Opret en ny side, og download arkivpapirets sidelayout

Opret en ny side

Når produkterne er på plads, skal du tilføje en ny side i din WordPress-backend. Giv din side en titel, udgiv siden, og aktiver Divi Visual Builder.

Opret en diviside
Opret en ny diviside

Download destinationssidens layout

Når du er inde på din nye side, skal du navigere til dine forudindstillede layout og downloade layoutet til landingsside til papirvarer. Selvom vi bruger dette specifikke layout, er du fri til at bruge ethvert andet layout, du ønsker, så længe du tilføjer eller finder et butiksmodul inde i dette layout.

Vælg et divi-layout

3. Rediger butiksafsnittet

Find sektionen med Shop-modulet

Hvis vi ruller ned til vores nye side, som vi oprettede ved hjælp af layoutet til papirvarer, kommer vi over et afsnit med et butiksmodul. Vi bruger dette afsnit gennem de næste trin i denne vejledning.

Find butiksmodulet

Linieindstillinger

Responsiv størrelse

Start med at åbne rækkeindstillingerne for rækken, der indeholder Shop-modulet. Som nævnt før holder vi det samme design på skrivebordet, vi aktiverer kun produktets magnetkort på mindre skærmstørrelser. 

For at skabe en ubesværet oplevelse tillader vi rækken at røre ved venstre og højre side af vores skærm ved at ændre bredden i størrelsesindstillingerne.

  • Brug en brugerdefineret tagrendebredde: 1
  • Bredde: 80% (desktop), 100% (tablet og telefon)
Responsiv designændring

synlighed

Vi vil også sikre, at intet går ud over rækkebeholderen ved at indstille synlighedsindstillingerne som skjult.

  • Vandret overløb: skjult
  • Lodret overløb: skjult
Divi synlighed konfiguration

Indstillinger for shop-modul

Vælg antallet af produkter og den valgte sorts struktur

Dernæst åbner vi indstillingerne for Shop-modulet. De ændringer, vi foretager i vores CSS-kode (som vi tilføjer senere), afhænger af antallet af produkter, vi viser. 

Vi starter med at vise dig, hvordan du omdanner et butiksmodul med 8 produkter til produktkort. Du kan vælge ethvert kolonnelayout, du vil have til skrivebordet.

  • Antal produkter: 8
  • Søjlelayout: 4 kolonner
Rediger divi-søjledesign

Responsiv størrelse

For at øge størrelsen på vores butiksmodul ændrer vi størrelsesparametrene i fanen design. Bemærk, at vi kun gør dette til tablet og telefon.

  • Bredde: 100% (desktop), 250% (tablet og telefon)
  • Maksimal bredde: 100% (skrivebord), 250% (tablet og telefon)
Responsiv designkonfiguration

CSS klasse

Vi tilføjer også en CSS-klasse til vores butiksmodul. Senere, når vi tilføjer CSS-koden, kan vi omdanne Shop-modulet, som kun bærer denne CSS-klasse. Med andre ord, hvis du vil have et andet Shop-modul til at blive vist i normal tilstand, vil udeladelse af denne CSS-klasse give dig mulighed for at gøre det.

  • CSS-klasse: produkt-swipe-kort
Skift attribut css modul butik divi

Reaktiv overløb

Vi supplerer linjeindstillingerne ved at ændre synlighedsindstillingerne på forskellige skærmstørrelser. Som du kan se i indstillingerne, ønsker vi kun, at rulleeffekten skal forekomme på mindre skærmstørrelser.

  • Horisontalt overløb: skjult (skrivebord), rulle (tablet og telefon)
  • Lodret overløb: skjult
Overløbskonfiguration

Tilføj et kodemodul under Shop-modulet

Når du har ændret Shop-modulet, kan du tilføje et kodemodul lige nedenfor.

Tilføj kodemodul under divi shop-modulet

Føj CSS-kode til modulet

Følgende CSS-kode vil automatisk omdanne vores butiksmodul med 8 produkter til reaktive magnetiske kort:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Tilføj kode css divi

Match forskellige produktkonti

Nu, hvis du ønsker at tilføje færre (eller flere) produkter til dit butiksmodul, ændres koden lidt to steder. Disse to placeringer skal ændres manuelt for at matche det ønskede resultat. Lad os f.eks. Ændre antallet af produkter i vores butiksmodul til '4'.

  • Antal produkter: 4
Match en anden produktkonto

Når vi kommer tilbage til vores kode, skal vi foretage to ændringer. Først skal vi ændre kolonnerne i gitterskabelonen. I stedet for 8 bruger vi 4 (samme antal som vores antal produkter). Vi øger også den procentvise størrelse, som disse produkter optager i vores produktark (jo flere produkter, jo mindre plads).

gitter-template-kolonner: gentag (4, 14%)! vigtigt;

Derefter ændrer vi også bredden på den container, hvor produkterne er placeret. For 4 produkter svarer dette til 150%. Disse værdier er ikke faste, de opnås ved at spille og finde en harmoni mellem kolonnerne i gittermodellen og bredden på containeren. 

For at finde den rette balance skal du skifte til mobilvisningen inde i Visual Builder og justere værdierne nøje, mens du ser resultatet af disse ændringer.

width: 150%!important;

Tilføj yderligere divi css-kode

Føj et snap til rullen

Hvis du vil tage brugeroplevelsen lidt længere i dit swipe-kortdesign, kan du også tilføje et scroll-snap. Scroll capture giver din besøgende at rulle ved at rette på begyndelsen af ​​et nyt produkt.

 Dette betyder, at deres scanning ikke behøver at være nøjagtig, rulle-slammen overtager på et tidspunkt og displayet justerer sin position inde i siderullemekanismen. 

For at aktivere rulleoptagelse på dit produkts strygekort skal du tilføje en linje med CSS-kode til hvert produkt individuelt i CSS-koden (se udskrivningsskærmen nedenfor).

scroll-snap-align: start

Vi aktiverer også rulleoptagelsen på vores butikmodul ved at tilføje følgende linje med CSS-kode:

rulle-snap-type: x obligatorisk

Tilpas css-kode

Genbrug værkstedsmodulet til at vise andre kategorier

Klon en hel linje én gang

Når du har afsluttet det første sæt magnetkort, kan du klone hele linjen én gang.

Genbrug divi-værkstedsmodulet

Fjern kodemodulet i duplikatlinie

Så længe dit butiksmodul indeholder den samme CSS-klasse som den foregående, vil et kodemodul gøre. Gå videre og fjern kodemodulet i din duplikatlinje.

Kopier divi-kodemodulet

Klon duplikatlinjen så meget, som du vil

Og klon duplikatlinien nu så mange gange som nødvendigt, afhængigt af antallet af sæt skubkort, du vil have vist på din destinationsside!

Klon modulet så meget som nødvendigt
Dupliceret divi-modul

4. Gem sideændringer, og se resultater på en mobilenhed

Sørg for, at når du er færdig med at tilføje produktets strygekort, skal du gemme din side, inden du afslutter Visual Builder, og du er færdig!

Demo-forhåndsvisning på mobilenhed

undersøgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.

Divi produkt modul butik animation

endelige tanker

I denne artikel har vi vist dig, hvordan du omdanner det integrerede Divi Shop-modul til produktmagnetkort på mindre skærmstørrelser. På skrivebordet har vi bevaret den oprindelige kolonnestruktur tildelt Shop-modulet. 

Brug af produktstrygekort giver dig mulighed for at tilføje uendelige produkter til en vandret strygemekanisme uden at overvælde dine lodrette rullende besøgende.

Dette er en tendens, der ofte bruges i moderne webstedsdesign, fordi det fokuserer på brugeradfærd og gør det lettere at få adgang til en bred vifte af elementer på mindre skærme.

 Du kan bruge disse produktark på enhver side, men det er især praktisk til alle produktlandingssider, du opretter. Du kan også downloade JSON-filen til layoutet gratis! 

Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.