Platt tema
Flatsome är ett kraftfullt WordPress-tema designat för e-handelswebbplatser och kommer med WooCommerce-integration.
Det är ett av de mest populära WooCommerce-teman på ThemeForest. När den här handledningen skrevs var det över 174 500 försäljningar och ett fantastiskt betyg på 4,8 stjärnor från över 6 600+ recensioner.
Flatsome är främst designad med nybörjare och icke-teknikkunniga användare i åtanke.
Det här är bra för människor som vill komma igång med ett onlineföretag men inte vet hur man kodar eller har budget för att anlita en professionell kodare. Med Flatsome kommer du att kunna skapa en webbsida med ett professionellt utseende med enkla och intuitiva verktyg.
Nu kommer Flatsome packad med massor av fantastiska funktioner och funktioner. För att visa upp vad som är tillgängligt och hur det fungerar har vi en snabb handledning som visar hur du skapar en WooCommerce-produktsida med Flatsome.
Så, utan vidare, låt oss börja:
Innehållsförteckning:
- Platt tema
- Skillnaden mellan Flatsome, WooCommerce och WordPress
- Skapa en WooCommerce-produktsida med Flatsome-temat
- Steg 1: Välj en layout för produktsidan
- (Valfritt) Steg 2: Skapa produktsida manuellt
- Steg 3: Anpassa produktsidan
- Avslutar
Skillnaden mellan Flatsome, WooCommerce och WordPress
Eftersom vi välkomnar våra nya läsare måste vi lägga in nödvändig information för att säkerställa att alla våra läsare är på samma sida. Här kommer vi att diskutera skillnaden i alla tre terminologier som vi kommer att använda i den här artikeln.
Låt oss börja med WordPress. Det är en plattform där du installerar olika teman och plugin för att skapa din webbplats. Det finns tusentals plugin och teman tillgängliga för att utföra andra uppgifter enligt dina krav.
WooCommerce är ett plugin vi installerar på WordPress som låter dig lägga till olika funktioner på vår hemsida. Med installationen av detta plugin kan vi göra vår webbplats och onlinebutik med ytterligare funktioner som kundvagn, betalningshantering, produkthantering etc.
Slutligen, men definitivt, en av de mest kritiska delarna är utsikterna för vår webbplats. Flatsome är ett tema som gör att vi kan anpassa vår hemsidas perspektiv efter våra önskemål. Till exempel, om din företagslogotyp är orange, skulle du vilja reflektera över din webbplatss färg. Det är vad Flatsome kan ge dig.
Skapa en WooCommerce-produktsida med Flatsome-temat
Eftersom alla våra läsare har kunskap om WordPress, WoCommerce och Flatsome, är det dags för oss att gå vidare till vår produktsidas anpassning med den fantastiska UX-byggaren som kommer med Flatsome-temat. Det är en dra och släpp-funktion som gör livet för designern extremt enkelt.
Nästan alla har handlat online, förmodligen på grund av de utmanande tider vi har mött de senaste månaderna. Att stanna hemma var den säkraste lösningen för oss alla. Det är anledningen till att alla våra läsare är överens om att en onlinebutik är mycket mer komplicerad jämfört med en vanlig webbplats.
Men med hjälp av WooCommerce och Flatsome har denna uppgift blivit extremt enkel. Du måste sätta dig ner och planera hur din webbplats ska se ut, och det är det. WooCommerce kommer att finnas där för att hjälpa dig med dess byggalternativ. Du kan skapa en fullfjädrad fungerande onlinebutik på bara några minuter med dra och släpp.
Med WooCommerce och Flatsome kommer du att kunna ge dina idéer om att ha en webbutik ett helt nytt liv. Din hemsida måste ha ett modernt och vackert utseende så att den kan locka kunder. Därför Flatsome den bästa lösningen för alla dina problem, så ladda ner den härifrån och låt oss komma igång.
Flatsome har några fantastiska funktioner, men en av delarna är att det har blivit ett toppval för mer än 300 000 användare. Ett ultimat verktyg hjälper till att skapa några enorma responsiva webbplatser utan att behöva koda en enda rad. Dessutom gör dess förmåga att skapa några mycket kreativa och unika onlinebutiker det ännu mer värdigt.
Så utan att slösa mer tid, låt oss gå vidare till handledningen. Denna handledning tar dig genom hela processen för att designa produktsidan. Bilderna hjälper dig att få en bättre uppfattning om hur uppgiften kommer att gå igenom processen.
Steg 1: Välj en layout för produktsidan
Först kommer vi att börja med att välja en layout för produktsidan. Detta val kommer att skapa en grundläggande sida för vår webbutik, som vi kommer att anpassa efter våra önskemål senare. Den här steg-för-steg-guiden leder dig genom processen för att anpassa sidan.
För det här amp kommer vi att fortsätta med alternativet Classic Shop. Det finns dock ingen begränsning för dig. Anpassningsprocessen kommer att vara liknande för varje layout du väljer. Den enda skillnaden skulle vara den grundläggande strukturen på sidan kommer att skilja sig från den andra.
När vi gick vidare till produktanpassaren gav vi den namnet på vänster sidofält i full höjd.
Det finns två alternativ tillgängliga för att anpassa produktsidan. Den första ska göras med UX-byggaren, medan den andra är att bygga sidan manuellt. Om du väljer det andra alternativet måste du gå till den officiella dokumentationen och hitta kortkoder. Om du är nybörjare och det här är din första erfarenhet av att bygga en onlinebutik, rekommenderar jag att du väljer det här första alternativet.
(Valfritt) Steg 2: Skapa produktsida manuellt
Här är en skärmdump av Flatsomes officiella dokumentationssida. Du kan skriva ordet kortkoder och söka efter dem.
När du trycker på sök kommer det att visas en lista med kortkoder på skärmen. Du kan välja de kortkoder som är viktiga för produktsidan. Att använda kortkoder kräver mindre ansträngning, men det är viktigt att du har lite praktisk erfarenhet av WordPress och att använda kortkoder.
Här är listan över kortkoder som du kan använda på webbplatsen för att skapa sidor.
I det här amp kommer vi att anpassa layouten på vänster sidofält i full höjd; Därför kommer vi att kopiera koden för designen. Följande är en bild av den applicerade, men du kan enkelt kopiera den från strukturen.
Börja med att skapa ett block med en titel. Om du vill utveckla huvudet måste du klicka på "Lägg till nytt" tillgängligt under UX-block placerade i din instrumentpanel.
Du kan namnge blocket enligt dina önskemål. Här i det här amp har vi döpt förbundet till 'Fullhöjd vänster sidofältslayout'. Därefter kan du se kortkoderna i blockredigeraren. När du har kopierat de önskade kortkoderna kan du trycka på publicera.
Vi kommer att vara i paritet efter detta lilla steg där vi kan anpassa vår sida efter våra önskemål. Navigera nu till produktsidans temaalternativ och tryck på ikonen för anpassad layout.
När du är klar kommer du nu att kunna skapa block från rullgardinsmenyn Custom Product Layout.
Välj blocket som vi just skapade. Vårt huvudmål för att skapa det blocket var att skapa en produktsida av det. Enligt det här amp är den vänstra sidofältslayouten i full höjd blocket, medan det i din ände kommer att vara som du har nämnt.
När du är klar trycker du bara på knappen Publicera; det kommer att spara inställningarna.
Steg 3: Anpassa produktsidan
Det är dags för oss att börja anpassa. Först kommer vi att navigera på den befintliga produktsidan från gränssnittet som vi ställt in tidigare i stegen.
Det är viktigt att du väljer en viss produkt som vi behöver ställa in. Du bör ha fullständiga detaljer, bilder av arbetet som vi behöver anpassa. På så sätt blir processen mer bekväm att visualisera sidavsnittet du kommer att skapa.
Alternativet UX-byggare är synligt. Tryck bara på knappen för att starta anpassningen.
När UX-byggaren är öppen kan du se på bilden att produktsidans element är tillgängliga i den vänstra sidopanelen på din produktsida.
Den vänstra sidopanelen är blocket som vi ursprungligen skapade. Vi skapade den med hjälp av kortkoderna hämtade från dokumentationen.
Du har alternativ att ordna om elementen från den vänstra sidopanelen och ändra inställningarna från elementalternativet. I det här amp kommer vi att ändra ordningen på det tillgängliga priset i menyn till vänster.
Dessutom låter det dig också ordna om element från byggarens förhandsgranskning och sätta på ytterligare komponenter på byggarens produktsida. I den här demon har sektionen Produktflikar och den relaterade produkten arrangerats om med bara ett enkelt dra och släpp.
Med den betydande dra och släpp-funktionen är Flatsome redo att ge dig det du letar efter på din webbplats. Med mycket anpassningsbara moduler kan du enkelt skapa fantastiska sidor. Dra och släpp-funktionen gör livet ännu bekvämare.
Avslutar
Det är absolut nödvändigt att ha ett onlineföretag i denna moderna tid eftersom människor föredrar att stanna hemma för att förbli säkra. Så börja bygga ditt företags första onlinebutik med Flatsome och fascinera dina kunder med dess unika och kreativitet. Dessutom finns det ingen kod i innehållsredigeraren, bara några kortkodsrader. Flatsome är utan tvekan det bästa temat jag har stött på. Så det finns ingen anledning att leta efter något annat tema, bara tryck på nedladdningsknappen och börja bygga din anpassade onlinebutik direkt.
