Divi er designet til at være kompatibel med WooCommerce. At integrere WooCommerce, skal du installere den seneste version af WooCommerce.
WooCommerce er plugin'et e-handel som vi anbefaler, da det har det bedste sæt funktioner, interface og følger bedste kodningspraksis. Efter aktivering af plugin'et vil du se to nye sektioner "WooCommerce" og "Produkter" tilføjet til dit WordPress-dashboard. Du kan bruge disse områder til at justere dine e-handelsindstillinger og udgive nye produkter. Du kan finde dokumentation fuldføre på WooCommerce her .
Bemærk, at selvom bygherren indeholder forskellige WooCommerce-moduler, kan du også bruge WooCommerce i sig selv uden bygherren helt fint. Du kan oprette standardsider til kassen, indkøbskurven osv. Som vist i deres dokumentation. Du kan også linke direkte til dine woocommerce-kategorier eller bruge Kortkoder WooCommerce i et Divi-tekstmodul. Det giver dig frihed til at gøre næsten hvad som helst.
Sådan føjes et butiksmodul til din side
Før du kan tilføje et butiksmodul til din side, skal du først hoppe ind i Divi Builder. En gang Divi-tema installeret på din hjemmeside, vil du bemærke en knap Brug Divi Builder over indlægseditoren, når du opretter en ny side. Klik på denne knap for at aktivere Divi Builder og få adgang til alle Divi Builder-modulerne. Klik derefter på knappen Brug Visual Builder for at starte generatoren i visuel tilstand. Du kan også klikke på knappen Brug Visual Builder når du gennemser dit websted i forgrunden, hvis du er tilsluttet dit WordPress-dashboard.
Når du har indtastet Visual Builder, kan du klikke på den grå plus-knap for at tilføje et nyt modul til din side. Nye moduler kan kun tilføjes inden for rækker. Hvis du starter en ny side, skal du huske at føje en række til din side først. Vi har gode tutorials om brug af Divis linje- og sektionselementer.
Find butiksmodulet på listen over moduler, og klik på det for at føje det til din side. Listen over moduler er søgbar, hvilket betyder at du også kan skrive ordet "shop" og derefter klikke på enter for automatisk at søge og tilføje butiksmodulet! Når modulet er tilføjet, vil du blive mødt af listen over modulindstillinger. Disse muligheder er opdelt i tre hovedgrupper: Indhold , Conception et avanceret .
Brug case-eksempel: fremvisning af de nyeste produkter på en hjemmeside ved hjælp af Shop-modulet
I dette eksempel vil jeg bruge butiksmodulet til at vise de nyeste produkter på en startside.
Her er siden med de fire præsenterede produkter.
Lad os starte.
Brug den visuelle builder til at tilføje en almindelig sektion med en række i fuld bredde (1 kolonne). Skift rækkeparameteren for at gøre den fuldbredde med en brugerdefineret tagrendebredde på 2.
Føj derefter et butiksmodul til linjen.
Opdater modulindstillingerne som følger:
Indholdsindstillinger
Type: Nye produkter
Antal produkter: 4
Design muligheder
Ikon Hover Farve: # ea1d63
Titel Politi: Åben Uden
Titel skrifttype: 24px
Politiets pris: Åben uden
Prisskriftsstørrelse: 20px
Avancerede indstillinger (brugerdefineret CSS)
Titre:
tekst-align: center;
baggrund: #fff;
margin-top: -10px! betydelige;
Prix:
tekst-align: center;
baggrund: #fff;
polstring ned: 15px;
Det er alt! Her er det endelige resultat.
Indkøb indholdsindstillinger
I fanen indhold finder du alle modulets indholdselementer, såsom tekst, billeder og ikoner. Alt det der styrer hvad vises i dit modul vil altid findes på denne fane.
Type
Vælg den type produkter, du vil have vist i dit produktfeed. Du kan vælge mellem Seneste produkter, der viser alle dine produkter i kronologisk rækkefølge, Fremhævede produkter, Salgsprodukter, Bedst sælgende produkter eller Bedst bedømte produkter.
Antal produkter
Definer antallet af produkter, du vil vise. Du bliver nødt til at have produkter lavet, for at alt kan vises i dette modul.
Medtag kategorier
Vælg de kategorier, du vil inkludere.
Antal kolonner
Vælg antallet af kolonner, der skal vises i dit butiksmodul. 4 kolonner skal bruges til en række på 1 kolonne. 3 kolonner skal bruges til en kolonne, der optager 3/4 af rækkepladsen. Kolonne 2 skal bruges til en kolonne, der optager 1/2 af lysets plads. En kolonne skal bruges til en kolonne 1/4 af rækkeområdet.
Omarrangere efter
Vælg, hvordan du vil have dine produkter bestilt. Vælg at sortere som standard Sorter, Popularitet, Bedømmelse, Dato, Pris lav til høj, Pris høj til lav, ældste til nyeste, nyeste til ældste.
Admin Label
Dette vil ændre moduletiketten i konstruktøren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vises disse etiketter i modulblokken i Divi Builder-grænsefladen.
Indstillinger for værkstedsdesign
Under fanen Design finder du alle indstillingerne for modulstyling, såsom skrifttyper, farver, størrelse og afstand. Dette er den fane, du vil bruge til at ændre udseendet på dit modul. Hvert Divi-modul har en lang liste over designindstillinger, som du kan bruge til at ændre alt.
Overlay-ikon
Når du holder markøren over et element i Shop-modulet, vises et overlay-ikon. Du kan justere den farve, der bruges til dette ikon ved at bruge farvevælgeren i denne indstilling.
Overlayets farve
Når du holder musen over et element i Shop-modulet, vises en overlayfarve øverst på billedet og under butiktitelteksten og -ikonet. Som standard bruges en semi-gennemsigtig hvid farve. Hvis du vil bruge en anden farve, kan du justere farven ved hjælp af farvevælgeren i denne indstilling
Vælgerikon
Her kan du vælge et brugerdefineret ikon, der skal vises, når en besøgende svæver over butiksartiklerne i modulet.
Farve på salg badge
Når en vare er til salg, vises der et salgsbadge på produktbilledet. Med denne indstilling kan du justere den farve, der bruges til badge-baggrunden.
Titel skrifttype
Du kan ændre skrifttypen på din titeltekst ved at vælge den ønskede skrifttype i rullemenuen. Divi tilbyder snesevis af fantastiske skrifttyper, der tilbydes af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Titel skriftstørrelse
Her kan du justere størrelsen på din titeltekst. Du kan trække skyderen for rækkevidde for at øge eller formindske størrelsen på din tekst eller direkte indtaste værdien for den ønskede tekststørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Titel tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre tekstfarven på din titel, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Spacing af titel breve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge mellemrummet mellem hvert bogstav i din titeltekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Højde på titellinjen
Linjehøjde påvirker afstanden mellem hver linje i din titeltekst. Hvis du vil øge afstanden mellem hver linje, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i afstanden placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Prispolitik
Du kan ændre skrifttypen i din pristekst ved at vælge den ønskede skrifttype i rullemenuen. Divi leveres med snesevis af fantastiske skrifttyper, der drives af Google Fonts. Som standard bruger Divi Open Sans-skrifttypen til al teksten på din side. Du kan også tilpasse stilen på din tekst ved hjælp af fed, kursiv, hovedstad og understregningsmuligheder.
Pris skriftstørrelse
Her kan du justere størrelsen på din pristekst. Du kan trække områdeskyderen for at øge eller formindske størrelsen på din tekst eller direkte indtaste den ønskede tekststørrelsesværdi i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Pris tekst farve
Som standard vises alle tekstfarver i Divi i hvid eller mørkegrå. Hvis du vil ændre farven på din pristekst, skal du vælge den ønskede farve fra farvevælgeren ved hjælp af denne mulighed.
Afstand mellem prisbreve
Mellemrum mellem bogstaver påvirker afstanden mellem hvert bogstav. Hvis du vil øge afstanden mellem hvert bogstav i din pristekst, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede afstand i indtastningsfeltet til højre for skyderen. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Høje prislinje
Rækkehøjde påvirker mellemrummet mellem hver række i din pristekst Hvis du vil øge afstanden mellem hver række, skal du bruge områdeskyderen til at justere mellemrummet eller indtaste den ønskede mellemstørrelse i indtastningsfeltet placeret til højre for markøren. Indtastningsfelterne understøtter forskellige måleenheder, hvilket betyder at du kan indtaste "px" eller "em" afhængigt af din størrelsesværdi for at ændre enhedstypen.
Avancerede indstillinger i butikken
På den avancerede fane finder du muligheder, som mere erfarne webdesignere måske finder nyttige, såsom tilpassede CSS- og HTML-attributter. Her kan du anvende brugerdefineret CSS på ethvert af modulets mange elementer. Du kan også anvende tilpassede CSS-klasser og ID'er til modulet, som kan bruges til at tilpasse modulet i dit barns temas style.css-fil.
CSS ID
Indtast et valgfrit CSS-ID, der skal bruges til dette modul. Et ID kan bruges til at oprette en brugerdefineret CSS-stil eller til at linke til bestemte sektioner på din side.
CSS klasse
Indtast de valgfri CSS-klasser, der skal bruges til dette modul. En CSS-klasse kan bruges til at oprette brugerdefineret CSS-styling. Du kan tilføje flere klasser adskilt af et mellemrum. Disse klasser kan bruges i dit Divi-underordnede tema eller i det brugerdefinerede CSS-stilark, som du føjer til din side eller til dit websted ved hjælp af Divi-temaindstillingerne eller Divi Builder-sideindstillingerne.
Tilpasset CSS
Brugerdefineret CSS kan også anvendes på modulet og ethvert af modulets interner. I sektionen Custom CSS finder du et tekstfelt, hvor du kan tilføje tilpassede CSS-stilark direkte til hvert element. CSS-poster i disse indstillinger er allerede pakket i typografikoder. Så indtast bare CSS-reglerne adskilt af semikolon.
synlighed
Denne mulighed giver dig mulighed for at kontrollere de enheder, som dit modul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne 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 = "flad" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DOWNLOAD 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 = "udvidet" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" flad "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faPL D fa-LOAD" DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Andre Divi tutorials
- 5 websteder, der bruger Divi restaurant tema
- Sådan tilføjer du tekst på et Divi WooCommerce-produkt
- Sådan ændres menuen farve mellem Divi sider
- Sådan tilpasses tavlerne på en blog med Divi
- Sådan bruges rolle Divi redaktør på WordPress
- Sådan opretter du en Divi-skyder på fuld skærm
- Sådan ændres menuenes farve mellem Divi-sider
- Funktioner, som du sandsynligvis ikke kender til Divi
- Sådan bruger du Divi Builder på WordPress
- Sådan bruges Divi-video-rullemodulet
- Sådan bruges Divi Builder Flip-modulet
- Sådan tilføjes et vidnesbyrdsmodul om Divi Builder
- Sådan bruges Divi-tekstmodulet
- Sådan opretter du en skyder på Divi
- Sådan redigeres en Divi-brugerrolle
- Sådan bruges Divi Social Media-modulet
- Sådan bruges butikmodulet med temaet WordPress Divi
- Sådan bruges Divi sidebar modul
- Sådan bruges Divi Price Table Module
- Sådan bruges titelmodulet i Divi-publikationer
- Sådan tilføjes et videomodul til Divi
- Sådan bruges artikelnavigationsmodulet
- Sådan bruges Divi-søgemodulet
- Sådan bruges Divi wallet-modulet
- Sådan bruges personmodulet på Divi Builder
- Sådan bruges tegnebogen modulet med Divi filter
- Sådan bruges glidemodulet i fuld bredde
- Sådan bruges Divi Builder Image Module
- Sådan bruger du navigationsmodulet med fuld bredde i Divi Builder
- Sådan bruges billedgallerimodulet
- Sådan bruges Divi Builder Fuldbredde-kortmodul
- Sådan bruges Divi Full Width Portfolio Module
- Sådan bruges Divi-modulet i fuld bredde
- Sådan bruges Divi Counter Module
- Sådan bruges artikelskyderen på Divi Builder
- Sådan bruges Divi Email Optin-modulet
Kære Bair,
Tak for dit bidrag.
Jeg har et spørgsmål om butiksmodulet og ville være meget glad, hvis du kunne svare på det for mig.
Og jeg vil gerne have individuelt udvalgte produkter synlige i mit butiksmodul. Jeg troede, dette kunne opnås ved at vedtage "stjerneprodukter". Men efter at have valgt denne mulighed, kan jeg ikke finde nogen måde at vælge mine ønskede produkter til modulet. Mangler jeg noget? Har du en forklaring?
Med venlig hilsen Frederik