Gå till innehållet

Divi tutorial: Hur man använder butiks modulen

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Divi designades för att vara kompatibelt med WooCommerce. För att integrera WooCommerce måste du installera den senaste versionen av WooCommerce.

WooCommerce är det e-handelsplugin vi rekommenderar eftersom det har den finaste uppsättningen funktioner, gränssnitt och följer kodningens bästa praxis. När du har aktiverat plugin-programmet ser du två nya avsnitt ”WooCommerce” och “Products” läggs till i din WordPress-instrumentpanel. Du kan använda dessa områden för att justera dina e-handelsinställningar och lägga upp nya produkter. Du hittar dokumentation KOMPLETTERA på WooCommerce här .

Observera att även om byggaren innehåller olika WooCommerce-moduler kan du också använda WooCommerce av sig själv utan att byggaren bara fungerar bra. Du kan skapa standardsidor för kassa, kundvagn etc., som visas i deras dokumentation. Du kan också länka direkt till dina woocommerce-kategorier eller använda Kortnummer WooCommerce i en Divi-textmodul. Det ger dig friheten att göra nästan vad som helst.

Så här lägger du till en butiksmodul på din sida

Innan du kan lägga till en butiksmodul på din sida måste du först hoppa in i Divi Builder. När Divi-temat har installerats på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

divi byggare

När du har angett Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, kom ihåg att först lägga till en rad på din sida. Vi har bra handledning om hur Divis linje- och sektionselement används.

butiksmodul divi.png

Leta reda på butiksmodulen i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva in ordet "shop" och sedan klicka på Enter för att automatiskt söka och lägga till butiksmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Använd exempel: visa de senaste produkterna på en hemsida med hjälp av Shop-modulen

I det här exemplet använder jag butiksmodulen för att visa de senaste produkterna på en hemsida.

Här är sidan med de fyra produkterna som presenteras.

visa produkter på en accel page divi.jpg

Låt oss börja.

Använd den visuella byggaren för att lägga till en vanlig sektion med en rad i full bredd (1 kolumn). Ändra radparametern för att göra den fullbredd med en anpassad rännbredd på 2.

zonalternativ divi.png

Lägg sedan till en butiksmodul till raden.

sätt in butiksmodulen divi.png

Uppdatera modulinställningarna enligt följande:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Innehållsalternativ

Typ: Nya produkter
Antal produkter: 4

Designalternativ

Icon Hover Färg: # ea1d63
Titel Polis: Öppna Utan
Titelstorlekstorlek: 24px
Polispriset: öppet utan
Prisstorlek: 20px

Avancerade alternativ (anpassad CSS)

Titer:

text-align: center;
bakgrund: #fff;
marginal-topp: -10px! signifikant;

Prix:

text-align: center;
bakgrund: #fff;
klädsel: 15px;

Det är allt! Här är det slutliga resultatet.

produkt sektion divi.jpg

Handla innehållsalternativ

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

Typ

Välj vilken typ av produkter du vill visa i ditt produktflöde. Du kan välja bland senaste produkter som visar alla dina produkter i kronologisk ordning, utvalda produkter, försäljningsprodukter, bästsäljande produkter eller högst rankade produkter.

Antal produkter

Definiera antalet produkter du vill visa. Du måste ha produkter tillverkade för att allt ska kunna visas i den här modulen.

Inkludera kategorier

Välj de kategorier du vill inkludera.

Antal kolumner

Välj antalet kolumner som ska visas i din butiksmodul. Fyra kolumner ska användas för en rad med 4 kolumn. Tre kolumner ska användas för en kolumn som tar 1/3 av radutrymmet. Kolumn 3 bör användas för en kolumn som tar upp 4/2 av ljusets utrymme. En kolumn ska användas för en kolumn 1/2 av radutrymmet.

Ordna om

Välj hur du vill att dina produkter ska beställas. Välj att sortera som standard Sortera, Popularitet, Betyg, Datum, Pris låg till hög, Pris hög till låg, äldsta till nyaste, nyast till äldsta.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Admin-etikett

Detta ändrar moduletiketten i konstruktorn för enkel identifiering. När du använder vyn WireFrame i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Workshop designalternativ

På fliken Design hittar du alla stilalternativ för modulen, som teckensnitt, färger, storlek och avstånd. Det här är fliken du använder för att ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att ändra vad som helst.

inställning butik divi.png

Överläggsikon

När du håller muspekaren över ett objekt i Shop-modulen visas en överläggsikon. Du kan justera färgen som används för denna ikon genom att använda färgväljaren i den här inställningen.

Överlagets färg

När du håller muspekaren över ett objekt i Shop-modulen visas en överläggsfärg längst upp på bilden och under butikens titeltext och ikon. Som standard används en halvtransparent vit färg. Om du vill använda en annan färg kan du justera färgen med hjälp av färgväljaren i den här inställningen

Väljarikon

Här kan du välja en anpassad ikon som ska visas när en besökare svävar över butiksartiklarna i modulen.

Försäljningsemblemets färg

När ett objekt säljs visas ett försäljningsmärke på produktbilden. Med den här inställningen kan du justera färgen som används för märkets bakgrund.

Titel typsnitt

Du kan ändra typsnittet i titeltexten genom att välja önskat typsnitt i rullgardinsmenyn. Divi erbjuder dussintals bra teckensnitt som erbjuds av Google Fonts. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Titel teckenstorlek

Här kan du justera storleken på din titeltext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Titeltextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra textfärgen på din titel väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, använd skjutreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjd på titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Prispolitik

Du kan ändra typsnittet i din pristext genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med fetstil, kursiv, versaler och understrukna alternativ.

Prisstorlek

Här kan du justera storleken på din pristext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Pris textfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din pristext väljer du önskad färg från färgväljaren med det här alternativet.

Spacing av prisbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din pristext, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Höjden av prissystemet

Radhöjd påverkar utrymmet mellan varje rad i din pristext Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra dess enhetstyp.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Avancerade alternativ i butiken

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

förhandsbeskrivning boutique divi.png

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi-underordnade tema eller i det anpassade CSS-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter, eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

Andra Divi tutorials

Denna artikel innehåller 1 kommentar

  1. Kära Bair,

    Tack för ditt bidrag.
    Jag har en fråga om butiksmodulen och skulle vara väldigt glad om du kunde svara på den för mig.
    Och jag vill att individuellt utvalda produkter ska visas i min butiksmodul. Jag trodde att detta kunde uppnås genom att anta "stjärnprodukter". Men efter att ha valt det här alternativet kan jag inte hitta något sätt att välja mina önskade produkter för modulen. Har jag missat något? Har du en förklaring?

    Med vänliga hälsningar, Frederik

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
12 aktier
del4
tweet2
Enregistrer6