Opret en brugerdefineret WooCommerce-produktside med et Flatsome-tema

Flatesome tema

Flatsome er et kraftfuldt WordPress -tema designet til eCommerce -websteder og leveres med WooCommerce -integration.

Det er et af de mest populære WooCommerce -temaer på ThemeForest. På tidspunktet for skrivningen af ​​denne vejledning var det over 174.500 salg og en fantastisk 4.8-stjernet vurdering, der kom fra over 6.600+ anmeldelser.

Flatsome er primært designet med begyndere og ikke-teknologikyndige brugere i tankerne.

Dette er fantastisk til folk, der ønsker at komme i gang med en online -forretning, men ikke ved, hvordan de skal kode eller har budget til at ansætte en professionel koder. Med Flatsome vil du være i stand til at oprette et professionelt udseende websted ved hjælp af enkle og intuitive værktøjer.

Nu leveres Flatsome med masser af fantastiske funktioner og funktioner. For at vise, hvad der er tilgængeligt, og hvordan det fungerer, har vi en hurtig vejledning, der viser dig, hvordan du opretter en WooCommerce -produktside ved hjælp af Flatsome.

Så lad os komme i gang uden videre:

Indholdsfortegnelse:

Forskel 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 gennem denne artikel.

Lad os starte med WordPress. Det er en platform, hvor du installerer forskellige temaer og plugin til at oprette dit websted. Der er tusindvis af plugin og temaer til rådighed for at udføre andre opgaver i henhold til dit krav.

WooCommerce er et plugin vi installerer på WordPress, der giver dig mulighed for at tilføje forskellige funktioner til vores hjemmeside. Med dette plugin installation kan vi oprette vores websted og onlinebutik med yderligere funktioner såsom indkøbskurv, betalingsbehandling, produktadministration osv.

Endelig, men bestemt, er et af de mest kritiske elementer udsigterne for vores websted. Flatsome er et tema, der giver os mulighed for at tilpasse vores websides perspektiv i henhold til vores ønsker. For eksempel, hvis dit firmas logo 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 al vores læser 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 følger med Flatsome-temaet. Det er en træk-og-fald-funktion, der gør designerens liv ekstremt let.

Næsten alle har handlet online, sandsynligvis på grund af de udfordrende tider, vi har haft 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 onlinebutik er meget mere kompliceret sammenlignet med et standardwebsted.

Men ved hjælp af WooCommerce og Flatsome er denne opgave blevet ekstremt let. Du skal sidde ned og planlægge, hvordan dit websted vil se ud, og det er det. WooCommerce vil være der for at hjælpe dig med sine builder-muligheder. Du kan oprette en fuldt fungerende onlinebutik på få 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 er 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 for mere end 300.000 brugere. Et ultimativt værktøj hjælper med at oprette nogle enorme responsive websteder uden at skulle kode en enkelt linje. Desuden gør dens evne til at skabe nogle meget kreative og unikke onlinebutikker det endnu mere værdigt.

Så uden at spilde yderligere tid, lad os gå videre til vejledningen. Denne vejledning fører dig gennem hele processen med at designe produktsiden. Billederne hjælper dig med at få en bedre idé om, hvordan opgaven gennemgår processen.

Trin 1: Vælg et layout til produktsiden

Først starter vi med at vælge et layout på produktsiden. Dette valg vil skabe en grundlæggende side til vores online butik, som vi senere vil tilpasse efter vores ønsker. Denne trin-for-trin guide vil guide dig gennem processen med at tilpasse siden.

For denne ex amp le fortsætter vi med Classic Shop-indstillingen. Der er dog ingen begrænsninger for dig. Tilpasningsprocessen vil være ens for hvert layout, du vælger. Den eneste forskel er, at sidens grundlæggende struktur vil være forskellig fra den anden.

Vi gik videre til produkttilpaseren og gav det navnet Fuld højde til venstre sidebjælke.

Der er to muligheder for at tilpasse produktsiden. Den første skal gøres med UX-builderen, mens den anden er at oprette 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 opbygge en onlinebutik, anbefaler jeg at gå til denne første mulighed.

(Valgfrit) Trin 2: Opret produktside manuelt

Her er et screenshot af den officielle dokumentationsside for Flatsome. Du kan skrive ordets korte koder og søge efter dem.

Når du trykker på søgning, vises der en liste over kortkoder på skærmen. Du kan vælge de korte koder, der er vigtige for produktsiden. Brug af kortkoder kræver mindre indsats, men det er vigtigt, at du har lidt praktisk erfaring med WordPress og brug af kortkoder.

Her er listen over kortkoder, som du kan bruge på hjemmesiden til at oprette sider.

I denne amp tilpasser vi det venstre sidebjælkelayout i fuld højde; således 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 denne ex amp le har vi kaldt foreningen som 'Layout i venstre højde til venstre i sidelinjen.' Dernæst kan du se genvejskoderne inde i blokeditoren. Når du er færdig med at kopiere de ønskede genveje, 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 produktsides temaindstilling og tryk på ikonet for brugerdefineret layout.

Når du er færdig, kan du nu oprette blokke fra rullemenuen Custom Product Layout.

Vælg den blok, vi lige har oprettet. Vores hovedmål for at oprette denne blok var at oprette en produktside ud af den. I henhold til denne ex amp er det venstre sidebjerglayout i fuld højde blokken, mens det ved din ende er som du har navngivet.

Når du er færdig, skal du bare trykke på knappen Publicer; det gemmer indstillingerne.

Trin 3: Tilpas produktsiden

Det er tid for os at starte tilpasning. Først navigerer vi på den eksisterende produktside fra frontenden, som vi har angivet tidligere i trinene.

Det er vigtigt, at du vælger et bestemt produkt, som vi skal konfigurere. Du skal have komplette detaljer, billeder af det arbejde, som vi har brug for at tilpasse. På denne måde bliver processen mere behagelig at visualisere det sidesektion, du opretter.

UX-builder-indstillingen er synlig. Bare tryk på knappen for at starte tilpasningen.

Når UX-bygherren er åben, kan du se på billedet, at produktsideelementerne er tilgængelige i venstre sidepanel på din produktside.

Venstre sidepanel er den blok, vi oprindeligt oprettede. Vi oprettede det ved hjælp af kortkoder hentet fra dokumentationen.

Du har muligheder for at omarrangere elementerne fra venstre sidepanel og ændre indstillingerne fra elementindstillingen. I denne ex amp ombestiller vi 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å på byggesidens produktside. I denne demo er sektionen Produkterfaner og det relaterede produkt blevet omarrangeret med bare en simpel træk og slip.

Med den betydelige træk og slip-funktionalitet er Flatsome klar til at give dig det, du leder efter på dit websted. Med meget tilpasselige moduler 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 i sikkerhed. Så start med at opbygge din virksomheds første online butik med Flatsome, og trylle dine kunder med sin unikke og kreative oplevelse. Desuden er der ikke noget rod i indholdseditoren, kun et par korte kodelinjer. Flatsome er utvivlsomt 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 start med at opbygge din tilpassede onlinebutik med det samme.

Efterlad en kommentar

Din e-mailadresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *