Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Når du oppretter en destinasjonsside for bestemte produkter, enten det er en ny lansering eller et salg du forbereder deg på, er sjansen stor for at du vil bruke Shop-modulen på et tidspunkt. Divi's Shop-modul lar deg dynamisk trekke ut produkter fra WooCommerce-pluginet og style dem ved hjelp av Divis innebygde alternativer. 

Nå som standard kommer butikkmodulen med noen få kolonnestrukturer som alle oversettes til to kolonner på mindre skjermstørrelser. Dette betyr at jo flere produkter du velger å vise, jo mer vertikal rulling er nødvendig for å komme til neste del av destinasjonssiden.

I moderne webdesign er en teknikk som ofte brukes til å begrense vertikal rulling og visningselementer i henhold til dine besøkendes preferanser, å bruke magnetkort. I denne veiledningen vil vi vise deg hvordan du forvandler Divi-butikkmodulen til dynamiske produktkart på mindre skjermstørrelser uten å bruke et plugin. 

Vi begynner med å forberede de forskjellige elementene i produktseksjonen og bruker en liten mengde CSS-kode for å aktivere feieeffekten. Det er en fin måte å vise frem et bredt spekter av produkter på destinasjonssiden din uten å overvelde de besøkende. 

Mulig utfall

Før vi dykker inn i opplæringen, la oss ta en titt på resultatet. Vi aktiverer kun produktets magnetkort på nettbrett og mobiltelefoner. På skrivebordet beholder vi kolonnestrukturen som vi bestemmer i Shop-modulen.

Divi produktmodul butikkanimasjon

1. Konfigurer WooCommerce og produktsider

Før du går inn i Divi-delen av denne opplæringen, er det viktig at WooCommerce-plugin er installert og aktivert på nettstedet ditt. Hvis du ikke allerede har gjort det, kan du legge til flere produkter, avhengig av antall produkter du vil vise i butikkmodulen din.

Lag woocommerce-produkter

2. Lag en ny side og last ned skrivesideoppsettet

Lag en ny side

Når produktene er på plass, kan du legge til en ny side i WordPress-backend. Gi siden din en tittel, publiser siden og aktiver Divi Visual Builder.

Lag en diviside
Opprett en ny diviside

Last ned destinasjonssiden

Når du er inne på den nye siden, navigerer du til de forhåndsinnstilte layoutene og laster ned layouten for destinasjonssiden for skrivesaker. Selv om vi bruker dette spesifikke oppsettet, kan du bruke ethvert annet oppsett du vil, så lenge du legger til eller finner en butikkmodul inne i dette oppsettet.

Velg et divi-oppsett

3. Endre butikkdelen

Finn seksjonen med Shop-modulen

Hvis vi blar ned til den nye siden som vi opprettet ved hjelp av utformingen av skrivesaken, vil vi komme over en seksjon med en butikkmodul. Vi bruker denne delen gjennom de neste trinnene i denne opplæringen.

Finn butikkmodulen

Linjeinnstillinger

Responsiv dimensjonering

Start med å åpne radinnstillingene til raden som inneholder butikkmodulen. Som nevnt tidligere holder vi det samme designet på skrivebordet, vi vil bare aktivere produktets magnetkort på mindre skjermstørrelser. 

For å skape en uanstrengt opplevelse, lar vi raden berøre venstre og høyre side av skjermen ved å endre bredden i størrelsesinnstillingene.

  • Bruk en tilpasset rennebredde: 1
  • Bredde: 80% (stasjonær), 100% (nettbrett og telefon)
Responsiv designmodifikasjon

synlighet

Vi vil også sørge for at ingenting går utover radbeholderen ved å sette synlighetsinnstillingene til skjult.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Divi synlighet konfigurasjon

Innstillinger for butikkmodul

Velg antall produkter og ønsket kolonnestruktur

Deretter åpner vi innstillingene for butikkmodulen. Endringene vi gjør i CSS-koden (som vi vil legge til senere), avhenger av antall produkter vi viser. 

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

Vi begynner med å vise deg hvordan du kan gjøre en butikkmodul med åtte produkter til produktkort. Du kan velge hvilken som helst kolonneoppsett du vil ha på skrivebordet.

  • Antall produkter: 8
  • Kolonneoppsett: 4 kolonner
Endre divisøyle design

Responsiv dimensjonering

For å øke størrelsen på butikkmodulen, endrer vi størrelsesparametrene i designfanen. Merk at vi bare gjør dette for nettbrettet og telefonen.

  • Bredde: 100% (stasjonær), 250% (nettbrett og telefon)
  • Maksimal bredde: 100% (skrivebord), 250% (nettbrett og telefon)
Responsiv designkonfigurasjon

CSS klasse

Vi vil også legge til en CSS-klasse i butikkmodulen vår. Senere, når vi legger til CSS-koden, kan vi transformere Shop-modulen som bare har denne CSS-klassen. Med andre ord, hvis du vil at en annen Shop-modul skal vises i normal tilstand, kan du utelate denne CSS-klassen.

  • CSS-klasse: produkt-sveip-kort
Endre attributt css divi shop-modul

Reaktive overløp

Vi vil supplere linjeinnstillingene ved å endre synlighetsinnstillingene på forskjellige skjermstørrelser. Som du kan se i innstillingene, vil vi bare at rulleeffekten skal forekomme på mindre skjermstørrelser.

  • Horisontalt overløp: skjult (skrivebord), rulle (nettbrett og telefon)
  • Vertikal overløp: skjult
Overløpskonfigurasjon

Legg til en kodemodul under Shop-modulen

Når du har endret Shop-modulen, kan du legge til en kodemodul rett nedenfor.

Legg til kodemodul under divi shop-modulen

Legg til CSS-kode i modulen

Følgende CSS-kode vil automatisk forvandle vår butikkmodul 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>

Legg til kode css divi

Match forskjellige produktkontoer

Nå, hvis du ønsker å legge til færre (eller flere) produkter i butikkmodulen din, endres koden litt to steder. Begge disse stedene må endres manuelt for å matche det ønskede resultatet. La oss for eksempel endre antall produkter i butikkmodulen til '4'.

  • Antall produkter: 4
Match annen produktkonto

Når vi kommer tilbake til koden vår, må vi gjøre to endringer. Først må vi endre kolonnene i rutenettmalen. I stedet for 8 bruker vi 4 (samme antall som vårt antall produkter). Vi øker også den prosentvise størrelsen som disse produktene opptar i produktarkene våre (jo flere produkter, jo mindre plass).

rutenett-mal-kolonner: gjenta (4, 14%)! viktig;

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

Da vil vi også endre bredden på beholderen produktene er plassert i. For 4 produkter tilsvarer dette 150%. Disse verdiene er ikke faste, de oppnås ved å spille og finne en harmoni mellom kolonnene i rutenettmodellen og bredden på beholderen. 

For å finne den rette balansen, bytt til mobilvisningen i Visual Builder og juster verdiene nøye mens du ser resultatet av disse endringene.

width: 150%!important;

Legg til ytterligere divi css-kode

Legg til et blunk i rullen

Hvis du vil ta brukeropplevelsen et skritt videre i utformingen av sveipekortet ditt, kan du også legge til et rullebilde. Scroll capture lar besøkende bla ved å stirre på starten av et nytt produkt.

 Dette betyr at skanningen ikke trenger å være nøyaktig, rulle-slam vil ta over på et tidspunkt og skjermen justerer sin posisjon inne i sidemekanismen. 

For å aktivere rulleopptak på produktets magnetkort, legg til en linje med CSS-kode til hvert produkt individuelt i CSS-koden (se utskriftsskjermbildet nedenfor).

bla-snap-align: start

Vi vil også aktivere rullefangsten på butikkmodulen vår ved å legge til følgende linje med CSS-kode:

bla-snap-type: x obligatorisk

Tilpass css-kode

Bruk verkstedmodulen på nytt for å vise andre kategorier

Klon en hel linje en gang

Når du har fullført det første settet med magnetkort, kan du klone hele linjen en gang.

Gjenbruk divi-verkstedsmodulen

Fjern kodemodul på duplisert linje

Så lenge butikkmodulen din inneholder samme CSS-klasse som den forrige, vil en kodemodul gjøre. Gå videre og fjern kodemodulen i duplikatlinjen.

Dupliser divi-kodemodulen

Klone duplikatlinjen så mye du vil

Og klone duplikatlinjen nå så mange ganger som nødvendig, avhengig av antall sett sveipekort du vil vise på destinasjonssiden!

Klon modulen så mye som nødvendig
Duplisert divi-modul

4. Lagre sideendringer og se resultater på en mobil enhet

Sørg for at når du er ferdig med å legge til produktkortene, lagrer du siden din før du avslutter Visual Builder, og du er ferdig!

Demo forhåndsvisning på mobilenhet

undersøkelsen

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

Divi produktmodul butikkanimasjon

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du kan gjøre den integrerte Divi Shop-modulen til produktmagnetkort på mindre skjermstørrelser. På skrivebordet har vi beholdt den opprinnelige kolonnestrukturen som er tilordnet Shop-modulen. 

Ved å bruke produkt sveipekart kan du legge til endeløse produkter i en horisontal sveipemekanisme uten å overvelde dine vertikale rullende besøkende.

Dette er en trend som ofte brukes i moderne nettsteddesign fordi den fokuserer på brukeradferd og gjør det lettere å få tilgang til et bredt spekter av elementer på mindre skjermer.

 Du kan bruke disse produktarkene på hvilken som helst side, men det er spesielt nyttig for alle produktlandingssider du oppretter. Du kan også laste ned JSON-filen for layout gratis! 

Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.

0 aksjer
del
tweet
Enregistrer