Som e-handlare vill vi att vår e-handel ska sticka ut. För att uppnå detta och verkligen skapa en unik upplevelse för dina kunder, så måste du kunna anpassa din produktsida exakt som du vill ha den. Utöver detta är möjligheten att anpassa din produktsida avgörande för att behålla en och samma stil på hela din webbplats. 

Om du ska bygga en e-handel helt från scratch, så krävs det ett dussintals rader kod. Elementor gör jobbet mycket lättare och mindre krävande. Genom att visuellt dra och släppa olika element på dina enskilda produktsidor, så kan du anpassa designen hur du vill. Det finns inga begränsningar i vad du kan skapa, utan det är enbart fantasin som sätter gränserna.

Elementor’s Page Builder ger dig full kontroll över din design och produktsidlayout med kraften hämtad från deras betalversion, Elementor Pro. Med Elemenor Pro och ‘’WooCommerce Builder, så behöver du inte skriva kod tills energin är slut, du behöver inte heller gräva i de olika PHP-filerna. 

Varje designanpassning görs på produktsidan, direkt från Elementor’s Page Builder.

Innan du kan släppa lös dina design kunskaper eller din vilda fantasi, så måste du börja med att skapa en ‘’Elementor-mall’’. 

Obs! Du måste aktivera WooCommerce på din WordPress hemsida först, annars kan du inte komma åt Elementors produktmallar.


Steg 1: Skapa din produktmall

För att börja designa den enskilda produktmallen i Elementor så behöver vi följa en liknande procedur som att skapa en vanlig mall. 

Så här skapar du en produktmall:

1. Under Mallar -> Teambyggare -> Enskild produkt -> Lägg till ny, välj Enstaka produkt i rullgardinsmenyn, ge den ett namn och klicka på ‘’Skapa mall’’.


2. Välj ett enstaka produkt block och infoga. Om du vill börja helt från början, så rekommenderar jag att du skapar en helt egen mall.

3. När du är klar med designen så klickar du på ‘’Publicera’’.

Steg 2: Välj en mall för produktsida

Att börja från grunden kan alltid vara ett alternativ om du inte vill börja med en färdig designad mall.
 


Det enklaste sättet att komma igång är att använda en av de fördesignade mallarna och anpassa den så att den passar till din e-handel. 

Det finns flera olika stilar på produktsidor att välja mellan. Via några lätta Googlingar på tex. Product templates for Elementor, så kommer du finna ännu flera stilar/mallar som du kan använda dig utav. Vissa kostnadsfria och andra mot en mindre engångsavgift.

Varje WooCommerce-produkt har en produktbild eller ett bildgalleri som visar bilder på produkten för kunderna. Elementor har en inbyggd Product Images-modul som gör att du kan infoga detta direkt i mallen. Vanligtvis så ligger den widgeten redan inlagd i mallen (om du tar en färdigdesignad). Om inte, så finner du den i redigeringspanelen tillsammans med övriga widgets.

Steg 3: Lägg till dina önskade widgets

Efter att du har ställt in dina bilder och texter eller annat skoj, så kan du nu lägga till widgets för att göra din e-handel fullt funktionell. Naturligtvis kan du alltid ta bort eller lägga till fler widgets på din sida under skapandets gång.

Samtliga widgets som är kompatibla med WooCommerce kommer att dyka upp på vänster sidan. För att applicera en widget i din mall, så klickar du helt enkelt bara på den widget som du önskar, håller in knappen och drar den till den plats på produktsidan där du vill att den skall vara.


Det viktigaste att komma ihåg är: Varför vi lägger widgets på vår sida, är för att göra den effektiv och engagerande. Rätt widgets hjälper dina besökare att nå dig, hitta det dem söker efter och sedan handlar.

Kom ihåg att varje produkt bör åtminstone visa grundläggande information som tex. titel, beskrivning och recensioner (om de är tillgängliga). Skapa en ny rad under det översta avsnittet och dra modulen ‘’Produktdata-flikar’’ från redigeringspanelen till raden för att infoga den.


Steg 4: Förhandsgranska produkt med en annan produkt

För att säkerställa att din produktmall har rätt design samt inte är anpassad till en specifik produkt, så rekommenderas att du förhandsgranska den med flera olika produkter.

Klicka på ögon ikonen längst ner till vänster och klicka sedan på inställningar. Välj den specifika produkt du vill visa under ‘’Inställningar för förhandsgranskning’’. 


Därefter så klickar du på ‘’Förhandsgranska’’ för att se hur resultatet av din produktsida blev. 


Steg 5: Ställ in din sida eller webbplatsens villkor

I detta steg ställer du in villkoren som avgör var din produktmall ska visas. Som standard påverkar mallen alla produktsidor på din webbplats. Du kan också välja en specifik produktkategori.

När du är färdig med din design och du har förhandsgranskat med olika produkter för att säkerställa att du är helt klar, så klickar du på ‘’Publicera’’.

Därefter får du upp några inställningar som styr vart din produktmall visas, vanligtvis så är ‘’Produkter’’ markerad, men om inte, så markera den.

När du gjort klart dina inställningarna så klickar du på spara och stäng. Din produktmall visas nu på samtliga produktsidor på din hemsida.

Slutsats

Elementors Page Builder ger dig design flexibilitet för att skapa och finjustera dina produktsidor visuellt. Detta sparar tid och pengar då det inte alltid krävs att du anlitar en professionell utvecklare innan du kan börja sälja via e-handel. Det minskar även avsevärt den tid det tar att gå från; att du har en idé om en hemsida som du vill förverkliga, tills du har en live och fullt fungerande WooCommerce-butik.

Elementor Page Builder ger dig även full designfrihet avseende resterande delar av din e-handel och inte bara produktsidor (som vi har gått igenom i detta exempel). 

Prova Kepler Hosting WooCommerce hosting redan nu!