Fladt tema
Flatsome er et kraftfuldt WordPress-tema designet til e-handelswebsteder og kommer med WooCommerce-integration.
Det er et af de mest populære WooCommerce-temaer på ThemeForest. På tidspunktet for skrivningen af denne tutorial var det over 174.500 salg og en fantastisk 4,8-stjernet vurdering fra over 6.600+ anmeldelser.
Flatsome er primært designet med begyndere og ikke-teknologikyndige brugere i tankerne.
Dette er fantastisk for folk, der ønsker at komme i gang med en online-forretning, men ikke ved, hvordan man koder eller har budgettet til at hyre en professionel koder. Med Flatsome vil du være i stand til at skabe et professionelt udseende websted ved hjælp af enkle og intuitive værktøjer.
Nu kommer Flatsome spækket med tonsvis af fantastiske funktioner og funktionaliteter. For at vise, hvad der er tilgængeligt, og hvordan det virker, har vi en hurtig vejledning, der viser dig, hvordan du opretter en WooCommerce-produktside ved hjælp af Flatsome.
Så lad os uden videre komme i gang:
Indholdsfortegnelse:
- Fladt tema
- Forskellen mellem Flatsome, WooCommerce og WordPress
- Opret en WooCommerce-produktside ved hjælp af Flatsome-temaet
- Trin 1: Vælg et layout til produktsiden
- (Valgfrit) Trin 2: Opret produktside manuelt
- Trin 3: Tilpas produktsiden
- Afslutter
Forskellen mellem Flatsome, WooCommerce og WordPress
Da vi byder vores nye læsere velkommen, skal vi indsætte nogle nødvendige oplysninger for at sikre, at alle vores læsere er på samme side. Her vil vi diskutere forskellen i alle tre terminologier, som vi vil bruge i hele denne artikel.
Lad os starte med WordPress. Det er en platform, hvor du installerer forskellige temaer og plugin for at oprette din hjemmeside. Der er tusindvis af plugin og temaer tilgængelige til at udføre andre opgaver i henhold til dit krav.
WooCommerce er et plugin vi installerer på WordPress, som giver dig mulighed for at tilføje forskellige funktioner til vores hjemmeside. Med dette plugin 's installation kan vi lave vores hjemmeside og online butik med yderligere funktioner såsom indkøbskurv, betalingsbehandling, produktstyring osv.
Endelig, men bestemt, er et af de mest kritiske elementer udsigten til vores hjemmeside. Flatsome er et tema, der giver os mulighed for at tilpasse vores hjemmesides perspektiv efter vores ønsker. For eksempel, hvis dit firmalogo er orange, vil du gerne reflektere over dit websteds farve. Det er, hvad Flatsome kan give dig.
Opret en WooCommerce-produktside ved hjælp af Flatsome-temaet
Da alle vores læsere har viden om WordPress, WoCommerce og Flatsome, er det tid for os at gå videre til vores produktsides tilpasning med den fantastiske UX-builder, der kommer med Flatsome-temaet. Det er en træk og slip-funktion, der gør livet for designeren ekstremt nemt.
Næsten alle har handlet online, sandsynligvis på grund af de udfordrende tider, vi har stået i de sidste par måneder. At blive hjemme var den sikreste løsning for os alle. Det er grunden til, at alle vores læsere er enige om, at en online butik er meget mere kompliceret sammenlignet med en standard hjemmeside.
Men ved hjælp af WooCommerce og Flatsome er denne opgave blevet ekstremt nem. Du skal sætte dig ned og planlægge, hvordan din hjemmeside vil se ud, og det er det. WooCommerce vil være der for at hjælpe dig med dets builder muligheder. Du kan oprette en fuldgyldig, fungerende onlinebutik på blot et par minutter med træk og slip.
Med WooCommerce og Flatsome vil du være i stand til at give dine ideer om at have en netbutik et helt nyt liv. Din hjemmeside skal have et moderne og flot udseende, så den kan tiltrække kunder. Derfor Flatsome den bedste løsning til alle dine problemer, så download den herfra og lad os komme i gang.
Flatsome har nogle fantastiske funktioner, men en af delene er, at det er blevet et topvalg af mere end 300.000 brugere. Et ultimativt værktøj hjælper med at skabe nogle fantastiske responsive hjemmesider uden at skulle kode en enkelt linje. Desuden gør dens evne til at skabe nogle meget kreative og unikke onlinebutikker den endnu mere værdig.
Så uden at spilde mere tid, lad os komme videre til selvstudiet. Denne vejledning fører dig gennem hele processen med at designe produktsiden. Billederne hjælper dig med at få et bedre indtryk af, hvordan opgaven vil gå gennem processen.
Trin 1: Vælg et layout til produktsiden
Først vil vi starte med at vælge et layout på produktsiden. Dette valg vil skabe en basisside til vores netbutik, som vi senere tilpasser efter vores ønsker. Denne trin-for-trin guide vil guide dig gennem processen med at tilpasse siden.
For dette amp vil vi fortsætte med Classic Shop-muligheden. Der er dog ingen begrænsning for dig. Tilpasningsprocessen vil være ens for hvert layout, du vælger. Den eneste forskel ville være den grundlæggende struktur på siden vil være forskellig fra den anden.
Idet vi gik videre til produkttilpasningen, gav vi den navnet den venstre sidebjælke i fuld højde.
Der er to muligheder for at tilpasse produktsiden. Den første skal udføres med UX-builderen, mens den anden er at bygge siden manuelt. Hvis du vælger den anden mulighed, skal du gå til den officielle dokumentation og finde kortkoder. Hvis du er nybegynder, og dette er din første oplevelse med at bygge en online butik, anbefaler jeg at gå efter denne første mulighed.
(Valgfrit) Trin 2: Opret produktside manuelt
Her er et skærmbillede af Flatsomes officielle dokumentationsside. Du kan skrive ordet kortkoder og søge efter dem.
Når du trykker på søg, vil der være en liste over kortkoder vist på skærmen. Du kan vælge de kortkoder, der er vigtige for produktsiden. Brug af shortcodes kræver mindre indsats, men det er essentielt, at du har lidt praktisk erfaring med WordPress og brug af shortcodes.
Her er listen over kortkoder, som du kan bruge på hjemmesiden til at oprette sider.
I dette amp vil vi tilpasse layoutet til venstre sidebjælke i fuld højde; Derfor kopierer vi koden til designet. Følgende er et billede af det anvendte, men du kan nemt kopiere det fra strukturen.
Start med at oprette en blok med en titel. Hvis du vil udvikle hovedet, skal du klikke på "Tilføj ny" tilgængelig under UX-blokke placeret i dit dashboard.
Du kan navngive blokken efter dine ønsker. Her i dette amp har vi navngivet foreningen som 'Fuld højde venstre sidebjælkelayout'. Dernæst kan du se kortkoderne inde i blokeditoren. Når du er færdig med at kopiere de ønskede kortkoder, kan du trykke på udgiv.
Vi vil være på niveau efter dette ene lille trin, hvor vi kan tilpasse vores side efter vores ønsker. Naviger nu til temaindstillingen for produktsiden og tryk på ikonet for brugerdefineret layout.
Når du er færdig, vil du nu være i stand til at oprette blokke fra rullemenuen Custom Product Layout.
Vælg den blok, vi lige har oprettet. Vores hovedmål med at skabe den blok var at skabe en produktside ud af den. Ifølge dette amp er layoutet til venstre sidebjælke i fuld højde blokken, mens det ved din ende vil være, som du har navngivet.
Når du er færdig, skal du blot trykke på knappen Udgiv; det gemmer indstillingerne.
Trin 3: Tilpas produktsiden
Det er på tide, at vi begynder at tilpasse. Først vil vi navigere på den eksisterende produktside fra den frontend, som vi satte tidligere i trinene.
Det er vigtigt, at du vælger et bestemt produkt, som vi skal konfigurere. Du skal have fuldstændige detaljer, billeder af arbejdet, som vi skal tilpasse. På denne måde bliver processen mere behagelig at visualisere det sideafsnit, du vil oprette.
UX Builder-indstillingen er synlig. Bare tryk på knappen for at starte tilpasningen.
Efter UX-builderen er åben, kan du se på billedet, at produktsideelementerne er tilgængelige i venstre sidepanel på din produktside.
Det venstre sidepanel er den blok, som vi oprindeligt oprettede. Vi har lavet det ved hjælp af shortcodes hentet fra dokumentationen.
Du har muligheder for at omarrangere elementerne fra venstre sidepanel og ændre indstillingerne fra elementindstillingen. I dette amp vil vi omarrangere den tilgængelige pris i menuen til venstre.
Desuden giver det dig også mulighed for at omarrangere elementer fra bygherrens forhåndsvisning og sætte yderligere komponenter på byggeproduktsiden. I denne demo er sektionen Produktfaner og det relaterede produkt blevet omarrangeret med blot et enkelt træk og slip.
Med den betydelige træk og slip funktionalitet er Flatsome klar til at give dig det, du leder efter på din hjemmeside. Med moduler, der kan tilpasses meget, kan du nemt oprette nogle fantastiske sider. Træk og slip-funktionen gør livet endnu mere behageligt.
Afslutter
Det er bydende nødvendigt at have en online-forretning i denne moderne tidsalder, fordi folk foretrækker at blive hjemme for at forblive sikre. Så begynd at bygge din virksomheds første onlinebutik med Flatsome og tryllebind dine kunder med dens unikke og kreativitet. Desuden er der ikke noget rod med kode i indholdseditoren, kun et par kortkodelinjer. Flatsome er uden tvivl det bedste tema, jeg er stødt på. Så der er ingen grund til at se sig om efter noget andet tema, bare tryk på download- knappen og begynd at bygge din tilpassede onlinebutik med det samme.
