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.

Vill du lära dig hur du skapar en anpassad sida för en WooCommerce-butik med Elementor?

Som du kanske vet kommer Elementor Pro med en WooCommerce-byggfunktion som låter dig bygga en anpassad e-handelswebbplats med WooCommerce utan kodning. Med den här funktionen kan du skapa anpassade WooCommerce-sidor med Elementors visuella redigerare som erbjuder ett intuitivt gränssnitt.

Se även: Hur man installerar Elementor på WordPress

När denna artikel skrivs kan du skapa anpassade sidor för butikssidan, produktsidan och produktarkivsidorna (taggar och kategorier). Snart kommer du också att kunna skapa egna sidor för kassasidan och kundvagnssidan.

I den här artikeln visar vi dig hur du skapar en anpassad WooCommerce-butiksida med Elementor Pro's WooCommerce-byggfunktion.

Själva butiksidan är en av standardsidorna i WooCommerce. Denna sida fungerar som en utställning för att visa dina produkter. Du kan komma åt den här sidan genom att gå till yoursite.com/store. Som standard visar WooCommerce-butiksidan endast WooCommerce-produkter.

Genom att skapa en anpassad butikssida med Elementor Pro kan du lägga till element för att göra din butik mer attraktiv.

Hur man skapar en anpassad sida i en WooCommerce-butik med Elementor

Det finns minst två Elementor-widgets som du kan använda för att skapa en anpassad sida i en WooCommerce-butik: Arkivera produkter och Produkter.

I det här exemplet använder vi det senare.

Funktionen för widgeten Produkter är ganska lik widgetens Inlägg. Skillnaden är att widgeten Produkter används för att visa WooCommerce-produkter medan Posts-widgeten används för att visa blogginlägg.

Läs också: Hur man importerar eller exporterar modeller i Elementor

Observera att du bara kan hitta widgeten Produkter när plugin-programmet WooCommerce är installerat och aktiverat.

För att börja skapa en anpassad WooCommerce-butiksida med Elementor Pro, gå till för det första à Mallar -> Temabyggare på din WordPress-instrumentpanel. Klicka på fliken Produkter arkiv på sidan Temabyggare och klicka sedan på knappen ajouter a PRODUKTARKIV.

Ge din modell ett namn och klicka på knappen SKAPA EN MODELL.

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

hur man skapar en anpassad sida för en WooCommerce-butik med ElementorDet finns tre anpassade butikssidemallar du kan välja mellan om du vill skapa den anpassade butiksidan från en mall. Om du vill bygga den anpassade butiksidan från grunden kan du bara stänga mallbiblioteket.

Se även: Hur man använder Color Sampler i Elementor

I det här exemplet skapar vi den anpassade butiksidan från grunden. Som nämnts ovan använder vi widgeten Produkter för att visa produkterna.

Innan du lägger till widgeten Produkter i redigeringsrutan kan du definiera layouten genom att lägga till avsnitt och kolumner. När layouten är klar kan du helt enkelt dra widgeten Produkter till redigeringsrutan.

Som du kan se laddar widgeten Produkter automatiskt och visar de senaste WooCommerce-produkterna. Du kan ändra frågan genom att öppna blocket Fråga under fliken Innehåll från inställningspanelen. Det finns fem alternativ att välja mellan:

  • Aktuell fråga - Aktuell fråga
  • Senaste produkterna - Senaste produkterna
  • Försäljning - Försäljning
  • Utvalda - Utvalda
  • Manuellt val - Manuellt val

Du kan också ange i vilken ordning produkterna ska visas eller utesluta vissa

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

För att ställa in antalet kolumner och rader kan du öppna blocket Innehåll under fliken Innehåll. Från detta block kan du också aktivera paginering.

Vill du sälja dina produkter på internet?

Ladda ner WooCommerce gratis, de bästa plugins för e-handel för att sälja dina fysiska och digitala produkter på WordPress och enkelt skapa din onlinebutik. Perfekt för nybörjare.

Du kan leka med inställningspanelen tills du får de bästa inställningarna för widgeten Produkter. När du är klar med widgeten Produkter kan du lägga till fler widgets på din sida.

Läs också: Hur man använder färgväljaren i Elementor

När du är klar med att redigera sidan kan du klicka på knappen PUBLICERA längst ner på inställningspanelen.

Lägg till ett visningsvillkor genom att klicka på knappen lägg till ett villkor. Eftersom du vill skapa en anpassad butikssida, välj alternativet Shop Sida. Klicka på knappen SPARA & STÄNG för att spara ändringen.

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

Hittills har du framgångsrikt skapat den anpassade WooCommerce-butiksidan med Elementor Pro. Du kan gå på din webbplats.com/store för att kontrollera resultatet.

Anpassa produktwidgeten

Innan du publicerar din sida kan du anpassa widgeten Produkter för att göra den mer attraktiv. För att göra det, klicka på widgeten i redigeringsrutan och navigera till fliken Stil från inställningspanelen. Det finns fyra block som du kan öppna enligt följande:

  • Produkter

Du kan öppna detta block för att definiera klyftan mellan kolumner och rader. Från detta block kan du också ställa in typografi (teckensnittsfamilj, teckensnittsstorlek, etc.) samt textfärg för produktelement som produkttitel, produktpris, produktbedömning, produkt, etc.…. Du kan också ställa in gränsen för produktbilden,

  • Box

I detta sammanhang hänvisar Box till behållaren för varje produkt. Du kan öppna blocket Box för att definiera kantens bredd, kantradien, lådans skugga, bakgrundsfärg, kantfärg etc.

  • Paginering

Om du aktiverar alternativet Paginering från blocket Innehåll, du kan öppna blocket Paginering under fliken Stil för att anpassa sidan. Du kan ställa in saker som avstånd, kantfärg, bakgrundsfärg etc.

Du kan också definiera olika parametrar för varje tillstånd (normal, pekande och aktiv).

  • Rea Flash

När du lägger till en ny produkt i WooCommerce kan du ställa in ett försäljningsprisattribut för att visa dina besökare att den tillhörande produkten är rabatterad. För att betona detta kan du visa försäljningsattributet på butikssidan så att rabatterade produkter har ett försäljningsmärke.

Du kan öppna blocket Rea Flash för att anpassa försäljningsmärket. Du kan definiera element som textfärg, bakgrundsfärg, typografi, kantradie, storlek (bredd och höjd), avstånd osv.

I finalen

WooCommerce Builder är en av funktionerna som erbjuds av Elementor Pro. Det låter dig bygga en personlig och unik e-handelswebbplats med WooCommerce och ingen kodning. Inget behov av att installera ett WordPress-tema som påstår sig vara utformat för WooCommerce. Istället kan du skapa egna WooCommerce-sidor själv med Elementors visuella redigerare.

Läs också: Hur man lägger till avdelare för att skapa avsnitt i Elementor

Fram till version 3.2.2 tillåter Elementor Pro dig bara att skapa sidor med anpassad butik, sida med anpassad produkt och anpassade produktarkivsidor. Men Elementor meddelade att i nästa version av Elementor Pro kommer du också att kunna skapa en anpassad kundvagnssida, en anpassad kassasida och en anpassad kundkontosida.

Skaffa Elementor Pro nu!

Slutsats

Här! Det är det för den här artikeln som visar hur du skapar en anpassad sida för en WooCommerce-butik med Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

0 aktier
del
tweet
Enregistrer