Divi er designet for å være kompatibel med WooCommerce. Å integrere WooCommerce, må du installere den nyeste versjonen av WooCommerce.

WooCommerce er plugin e-handel som vi anbefaler, siden den har det fineste settet med funksjoner, grensesnitt og følger beste kodingspraksis. Etter å ha aktivert plugin, vil du se to nye seksjoner "WooCommerce" og "Produkter" lagt til WordPress-dashbordet ditt. Du kan bruke disse områdene til å justere e-handelsinnstillingene og publisere nye produkter. Du kan finne dokumentasjon Komplett på WooCommerce her .

Vær oppmerksom på at mens byggherren inneholder forskjellige WooCommerce-moduler, kan du også bruke WooCommerce av seg selv uten at byggherren helt fint. Du kan lage standardsider for kassa, handlekurv osv. Som vist i dokumentasjonen. Du kan også lenke direkte til woocommerce-kategoriene, eller bruke Kortkoder WooCommerce i en Divi-tekstmodul. Det gir deg frihet til å gjøre omtrent hva som helst.

Slik legger du til en butikkmodul på siden din

Før du kan legge til en butikkmodul på siden din, må du først hoppe inn i Divi Builder. Først når Divi-tema installert på nettstedet ditt, vil du legge merke til en knapp Bruk Divi Builder over innleggsredaktøren når du oppretter en ny side. Klikk på denne knappen for å aktivere Divi Builder og få tilgang til alle Divi Builder-modulene. Klikk deretter på knappen Bruk Visual Builder for å starte generatoren i visuell modus. Du kan også klikke på knappen Bruk Visual Builder når du surfer på nettstedet ditt i forgrunnen hvis du er koblet til WordPress-dashbordet.

Når du har angitt Visual Builder, kan du klikke på den grå pluss-knappen for å legge til en ny modul på siden din. Nye moduler kan bare legges til innenfor rader. Hvis du starter en ny side, husk å legge til en rad på siden din først. Vi har gode veiledninger om bruk av Divis linje- og seksjonselementer.

Finn butikkmodulen i listen over moduler, og klikk på den for å legge den til siden din. Listen over moduler er søkbar, noe som betyr at du også kan skrive ordet "butikk" og deretter klikke enter for automatisk å søke og legge til butikkmodulen! Når modulen er lagt til, vil du bli møtt av modulalternativlisten. Disse alternativene er delt inn i tre hovedgrupper: Innhold , Conception et avansert .

Bruk case-eksempel: viser de nyeste produktene på en hjemmeside ved hjelp av Shop-modulen

For dette eksemplet bruker jeg butikkmodulen til å vise de nyeste produktene på en hjemmeside.

Her er siden med de fire produktene som er presentert.

La oss begynne.

Bruk den visuelle byggmesteren til å legge til en vanlig seksjon med en rad i full bredde (1 kolonne). Endre radparameteren for å gjøre den full bredde med en tilpasset takrenne på 2.

Legg deretter til en butikkmodul på linjen.

Oppdater modulinnstillingene som følger:

Innholdsalternativer

Type: Nyere produkter
Antall produkter: 4

Designalternativer

Ikon Hover Farge: # ea1d63
Tittel Politi: Åpen Uten
Tittel Skriftstørrelse: 24px
Politiets pris: Åpen uten
Pris skriftstørrelse: 20px

Avanserte alternativer (tilpasset CSS)

Tittel:

tekst-align: center;
bakgrunn: #fff;
margin-topp: -10px! betydelig;

Prix:

tekst-align: center;
bakgrunn: #fff;
polstring ned: 15px;

Det er alt! Her er det endelige resultatet.

Handle innholdsalternativer

I Innhold-fanen finner du alle innholdselementene i modulen, for eksempel tekst, bilder og ikoner. Alt som styrer hva vises i modulen din, vil du alltid finne i denne fanen.

typen

Velg hvilken type produkter du vil vise i produktfeeden din. Du kan velge mellom nylige produkter som vil vise alle produktene dine i kronologisk rekkefølge, utvalgte produkter, salgsprodukter, bestselgende produkter eller topprangerte produkter.

Antall produkter

Definer antall produkter du vil vise. Du må ha laget produkter for at noe skal vises i denne modulen.

Inkluder kategorier

Velg kategoriene du vil inkludere.

Antall kolonner

Velg antall kolonner som skal vises i butikkmodulen. Fire kolonner skal brukes til en rad med 4 kolonne. Tre kolonner skal brukes til en kolonne som opptar 1/3 av radarealet. Kolonne 3 skal brukes til en kolonne som tar 4/2 av lysets plass. En kolonne skal brukes til en kolonne 1/2 av radområdet.

Omorganiser etter

Velg hvordan du vil at produktene dine skal bestilles. Velg å sortere som standard Sortering, Popularitet, Vurdering, Dato, Pris lav til høy, Pris høy til lav, eldst til nyeste, nyeste til eldst.

Admin-etikett

Dette vil endre moduletiketten i konstruktøren for enkel identifisering. Når du bruker WireFrame-visningen i Visual Builder, vises disse etikettene i modulblokken i Divi Builder-grensesnittet.

Alternativer for design av verksteder

I kategorien Design finner du alle stilalternativene for modulen, for eksempel skrifter, farger, størrelse og avstand. Dette er fanen du vil bruke til å endre utseendet til modulen din. Hver Divi-modul har en lang liste over designinnstillinger som du kan bruke til å endre hva som helst.

Overleggsikon

Når du holder markøren over et element i butikkmodulen, vises et overleggsikon. Du kan justere fargen som brukes til dette ikonet ved å bruke fargevelgeren i denne innstillingen.

Farge på overlegget

Når du holder musen over et element i Shop-modulen, vises en overleggsfarge øverst på bildet og under butikkens titteltekst og ikon. Som standard brukes en semi-gjennomsiktig hvit farge. Hvis du vil bruke en annen farge, kan du justere fargen ved å bruke fargevelgeren i denne innstillingen

Valgikon

Her kan du velge et tilpasset ikon som skal vises når en besøkende svever over butikkartiklene i modulen.

Farge på salgsemblemet

Når en vare er i salg, vises et salgsmerke på produktbildet. Med denne innstillingen kan du justere fargen som brukes til merkets bakgrunn.

Tittel skrifttype

Du kan endre skrifttypen til tittelteksten ved å velge ønsket skrift fra rullegardinmenyen. Divi tilbyr dusinvis av flotte skrifttyper som tilbys av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Tittel skriftstørrelse

Her kan du justere størrelsen på tittelteksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Titteltekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre tekstfargen på tittelen din, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Spacing av tittel bokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i tittelteksten, bruker du glidebryteren for å justere mellomrommet eller angir ønsket avstandsstørrelse i inntastingsfeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på tittellinjen

Linjehøyde påvirker mellomrommet mellom hver linje i tittelteksten. Hvis du vil øke mellomrommet mellom hver linje, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Prispolitikk

Du kan endre skrifttypen til pristeksten ved å velge ønsket skrift fra rullegardinmenyen. Divi kommer med dusinvis av flotte skrifttyper drevet av Google Fonts. Som standard bruker Divi Open Sans-skrift for all teksten på siden din. Du kan også tilpasse stilen på teksten din med fet, kursiv, stor bokstav og understrekingsalternativer.

Pris skriftstørrelse

Her kan du justere størrelsen på pristeksten. Du kan dra områdeglidebryteren for å øke eller redusere størrelsen på teksten, eller angi ønsket tekststørrelsesverdi direkte i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Pris tekstfarge

Som standard vises alle tekstfargene i Divi i hvitt eller mørkegrått. Hvis du vil endre fargen på pristeksten, velger du ønsket farge fra fargevelgeren ved hjelp av dette alternativet.

Omfang av prisbokstaver

Bokstavavstand påvirker avstanden mellom hver bokstav. Hvis du vil øke mellomrommet mellom hver bokstav i pristeksten, bruker du glidebryteren for å justere mellomrommet eller skriver inn ønsket avstandsstørrelse i inndatafeltet til høyre for glidebryteren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Høyde på prislinjen

Radhøyde påvirker mellomrommet mellom hver rad i pristeksten. Hvis du vil øke mellomrommet mellom hver rad, bruker du glidebryteren for å justere mellomrom eller angir ønsket avstandsstørrelse i inndatafeltet plassert til høyre for markøren. Inndatafeltene støtter forskjellige måleenheter, noe som betyr at du kan skrive inn "px" eller "em" avhengig av størrelsesverdien for å endre enhetstypen.

Avanserte alternativer for butikken

I den avanserte fanen finner du alternativer som mer erfarne webdesignere kan finne nyttige, for eksempel tilpassede CSS- og HTML-attributter. Her kan du bruke tilpasset CSS på alle modulens mange elementer. Du kan også bruke tilpassede CSS-klasser og IDer til modulen, som kan brukes til å tilpasse modulen i barnets temas style.css-fil.

CSS ID

Skriv inn en valgfri CSS-ID som skal brukes til denne modulen. En ID kan brukes til å lage en tilpasset CSS-stil eller for å koble til bestemte deler av siden din.

CSS klasse

Angi de valgfrie CSS-klassene som skal brukes til denne modulen. En CSS-klasse kan brukes til å lage tilpasset CSS-styling. Du kan legge til flere klasser, atskilt med et mellomrom. Disse klassene kan brukes i Divi-barnetemaet eller i det tilpassede CSS-stilarket du legger til på siden eller nettstedet ditt ved hjelp av Divi-temaalternativene eller innstillingene på Divi Builder-siden.

Tilpasset CSS

Tilpasset CSS kan også brukes på modulen og hvilken som helst av modulens interner. I Custom CSS-delen finner du et tekstfelt der du kan legge til tilpassede CSS-stilark direkte til hvert element. CSS-oppføringer i disse innstillingene er allerede pakket inn i stilkoder. Så bare skriv inn CSS-reglene atskilt med semikolon.

synlighet

Dette alternativet lar deg kontrollere enhetene som modulen din vises på. Du kan velge å deaktivere modulen din på nettbrett, smarttelefoner eller stasjonære datamaskiner hver for seg. Dette er nyttig hvis du vil bruke forskjellige mods på forskjellige enheter, eller hvis du vil forenkle mobildesignet ved å eliminere visse elementer fra siden.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre divisjoner

• 5 nettsteder for restaurant bruk Divi tema
• Slik legger du til tekst på et Divi WooCommerce-produkt
• Slik endrer du menyfargen mellom Divi-sider
• Hvordan tilpasse rutenettene til en blogg med Divi
• Hvordan bruke rollen Divi editor på WordPress
• Hvordan lage en Divi-glidebryter på fullskjerm
• Hvordan endre farge på menyer mellom Divi-sider
• Funksjoner du sannsynligvis ikke kjenner til Divi
• Slik bruker du Divi Builder på WordPress
• Slik bruker du Divi video-rullemodulen
• Slik bruker du Divi Builder Flip-modulen
• Hvordan legge til en attestmodul på Divi Builder
• Slik bruker du Divi-tekstmodulen
• Hvordan lage en glidebryter på Divi
• Hvordan redigere en Divi-brukerrolle
• Slik bruker du Divi Social Media-modulen
• Hvordan bruke butikkmodulen på temaet WordPress Divi
• Slik bruker du Divi sidebar-modulen
• Slik bruker du Divi Price Table Module
• Slik bruker du tittelmodulen til Divi-publikasjoner
• Hvordan legge til en videomodul av Divi
• Slik bruker du artikkelen navigasjonsmodulen
• Slik bruker du Divi-søkemodulen
• Slik bruker du Divi-lommebokmodulen
• Slik bruker du personmodulen på Divi Builder
• Slik bruker du lommebokmodulen med Divi filter
• Slik bruker du skyvemodulen med full bredde
• Slik bruker du Divi Builder Image Module
• Slik bruker du navigasjonsmodulen med full bredde på Divi Builder
• Slik bruker du bildegalleriemodulen
• Slik bruker du Divi Builder Full-Width Card Module
• Slik bruker du Divi Full Width Portfolio Module
• Hvordan bruke Divi-modulen i full bredde
• Slik bruker du Divi-tellermodulen
• Slik bruker du glidebryteren for artikler på Divi Builder
• Slik bruker du Divi Email Optin-modulen