Flatesome-thema
Flatsome is een krachtig WordPress-thema ontworpen voor eCommerce-websites en wordt geleverd met WooCommerce-integratie.
Het is een van de meest populaire WooCommerce-thema's op ThemeForest. Op het moment dat deze tutorial werd geschreven, waren er meer dan 174.500 verkopen en een geweldige beoordeling van 4,8 sterren uit meer dan 6.600+ beoordelingen.
Flatsome is in de eerste plaats ontworpen met het oog op beginners en niet-technisch onderlegde gebruikers.
Dit is geweldig voor mensen die aan de slag willen met een online bedrijf, maar niet weten hoe ze moeten coderen of die het budget hebben om een professionele coder in te huren. Met Flatsome kun je een professioneel ogende website maken met behulp van eenvoudige en intuïtieve tools.
Nu zit Flatsome boordevol geweldige functies en functionaliteiten. Om te laten zien wat er beschikbaar is en hoe het werkt, hebben we een korte tutorial die je laat zien hoe je een WooCommerce-productpagina maakt met Flatsome.
Dus, zonder verder oponthoud, laten we beginnen:
Inhoudsopgave:
- Flatesome-thema
- Verschil tussen Flatsome, WooCommerce en WordPress
- Maak een WooCommerce-productpagina met het Flatsome-thema
- Stap 1: Selecteer een lay-out voor de productpagina
- (Optioneel) Stap 2: Productpagina handmatig maken
- Stap 3: Pas de productpagina aan
- Afsluiten
Verschil tussen Flatsome, WooCommerce en WordPress
Terwijl we onze nieuwe lezers verwelkomen, moeten we de nodige informatie invoeren om ervoor te zorgen dat al onze lezers op dezelfde pagina staan. Hier zullen we het verschil bespreken in alle drie de terminologieën die we in dit artikel zullen gebruiken.
Laten we beginnen met WordPress. Het is een platform waarop u verschillende thema's en plugin installeert om uw website te maken. Er zijn duizenden plugin ins en thema's beschikbaar om andere taken uit te voeren volgens uw vereisten.
WooCommerce is een plugin we op WordPress installeren waarmee u verschillende functies aan onze website kunt toevoegen. Met de installatie van deze plugin kunnen we onze website en online winkel maken met extra functionaliteiten zoals winkelwagentje, betalingsverwerking, productbeheer, enz.
Ten slotte, maar zeker, is een van de meest kritische elementen de uitstraling van onze website. Flatsome is een thema waarmee we het perspectief van onze website kunnen aanpassen aan onze wensen. Als uw bedrijfslogo bijvoorbeeld oranje is, wilt u reflecteren op de kleur van uw website. Het is wat Flatsome u kan bieden.
Maak een WooCommerce-productpagina met het Flatsome-thema
Omdat al onze lezers kennis hebben over WordPress, WoCommerce en Flatsome, is het tijd dat we verder gaan met het aanpassen van onze productpagina's met de fantastische UX-builder die bij het Flatsome-thema wordt geleverd. Het is een slepen-en-neerzetten-functie die het leven van de ontwerper buitengewoon gemakkelijk maakt.
Bijna iedereen heeft online gewinkeld, waarschijnlijk vanwege de uitdagende tijden die we de afgelopen maanden hebben doorgemaakt. Thuis blijven was voor ons allemaal de veiligste oplossing. Het is de reden dat al onze lezers het erover eens zullen zijn dat een online winkel een stuk gecompliceerder is in vergelijking met een standaardwebsite.
Met de hulp van WooCommerce en Flatsome is deze taak echter buitengewoon eenvoudig geworden. U moet gaan zitten en plannen hoe uw website eruit zal zien, en dat is het dan. WooCommerce zal er zijn om u te helpen met zijn bouweropties. Met slepen en neerzetten kunt u in slechts enkele minuten een volwaardige online winkel creëren.
Met WooCommerce en Flatsome kunt u uw ideeën voor het hebben van een online winkel een heel nieuw leven geven. Uw website moet een moderne en mooie uitstraling hebben om klanten aan te trekken. Daarom is Flatsome de beste oplossing voor al je problemen, dus download het hier en laten we beginnen.
Flatsome heeft een aantal fantastische functies, maar een van de onderdelen is dat het een topkeuze is geworden van meer dan 300.000 gebruikers. Een ultieme tool helpt bij het maken van een aantal geweldige responsieve websites zonder een enkele regel te hoeven coderen. Bovendien maakt het vermogen om een aantal zeer creatieve en unieke online winkels te creëren het nog waardevoller.
Dus zonder verder tijd te verspillen, gaan we verder met de tutorial. Deze tutorial neemt je mee door het volledige proces van het ontwerpen van de productenpagina. De afbeeldingen zullen u helpen een beter idee te krijgen van hoe de taak het proces zal doorlopen.
Stap 1: Selecteer een lay-out voor de productpagina
Allereerst beginnen we met het selecteren van een lay-out van de productenpagina. Deze selectie creëert een basispagina voor onze online winkel, die we later zullen aanpassen aan onze wensen. Deze stapsgewijze handleiding leidt u door het proces van het aanpassen van de pagina.
Voor dit amp we verder met de optie Classic Shop. Er zijn echter geen beperkingen voor u. Het aanpassingsproces is vergelijkbaar voor elke lay-out die u selecteert. Het enige verschil is dat de basisstructuur van de pagina anders is dan de andere.
We gingen verder met de productaanpasser en gaven het de naam de linkerzijbalk volledige hoogte.
Er zijn twee opties beschikbaar om de productenpagina aan te passen. De eerste moet worden gedaan met de UX-builder, terwijl de andere is om de pagina handmatig op te bouwen. Als u de tweede optie selecteert, moet u naar de officiële documentatie gaan en shortcodes zoeken. Als je een beginner bent en dit je eerste ervaring is met het bouwen van een online winkel, raad ik je aan om voor deze eerste optie te gaan.
(Optioneel) Stap 2: Productpagina handmatig maken
Hier is een screenshot van de officiële documentatiepagina van Flatsome. U kunt het woord shortcodes typen en ernaar zoeken.
Zodra u op zoeken klikt, wordt er een lijst met shortcodes op het scherm weergegeven. U kunt de shortcodes kiezen die belangrijk zijn voor de productpagina. Het gebruik van shortcodes kost minder moeite, maar het is essentieel dat je een beetje praktische ervaring hebt met WordPress en het gebruik van shortcodes.
Hier is de lijst met shortcodes die u op de website kunt gebruiken om pagina's te maken.
In deze ex amp le, zullen we het aanpassen van de volledige hoogte zijbalk links lay-out; dus kopiëren we de code voor het ontwerp. Hieronder ziet u een afbeelding van het toegepaste, maar u kunt het eenvoudig vanuit de structuur kopiëren.
Begin met het maken van een blok met een titel. Als je head wilt ontwikkelen, moet je klikken op "Nieuwe toevoegen" beschikbaar onder UX-blokken die in je dashboard zijn geplaatst.
U kunt het blok een naam geven volgens uw wensen. Hier in dit ex amp le, hebben we de naam van de vereniging als de 'volledige hoogte zijbalk links lay-out.' Vervolgens kunt u de shortcodes in de blokeditor zien. Zodra u klaar bent met het kopiëren van de gewenste shortcodes, kunt u op publiceren klikken.
We zullen gelijk zijn na deze ene kleine stap waar we onze pagina kunnen aanpassen aan onze wensen. Navigeer nu naar de thema-optie van de productpagina en klik op het pictogram voor aangepaste lay-out.
Eenmaal voltooid, kunt u nu blokken maken vanuit de vervolgkeuzelijst Aangepaste productlay-out.
Kies het blok dat we zojuist hebben gemaakt. Ons belangrijkste doel voor het maken van dat blok was om er een productpagina van te maken. Volgens deze ex amp le, de volledige hoogte zijbalk links lay-out is het blok, terwijl aan uw kant, zal het zijn als je een naam hebt gegeven.
Eenmaal voltooid, drukt u gewoon op de knop Publiceren; het slaat de instellingen op.
Stap 3: Pas de productpagina aan
Het is tijd dat we beginnen met maatwerk. Eerst zullen we door de bestaande productenpagina navigeren vanaf de voorkant die we eerder in de stappen hebben ingesteld.
Het is belangrijk dat u een bepaald product selecteert dat we moeten instellen. U moet volledige details hebben, afbeeldingen van het werk dat we moeten aanpassen. Op deze manier wordt het proces comfortabeler om de paginasectie die u gaat maken te visualiseren.
De optie UX-builder is zichtbaar. Druk gewoon op de knop om de aanpassing te starten.
Nadat de UX-builder is geopend, kunt u aan de afbeelding zien dat de productpagina-elementen beschikbaar zijn in het linkerzijpaneel van uw productpagina.
Het linkerzijpaneel is het blok dat we in eerste instantie hebben gemaakt. We hebben het gemaakt met behulp van de shortcodes uit de documentatie.
Je hebt opties om de elementen in het linkerzijpaneel opnieuw te ordenen en de instellingen te wijzigen via de elementoptie. In dit amp zullen we de prijs in het linkermenu herschikken.
Bovendien kunt u elementen uit het voorbeeld van de bouwer herschikken en extra componenten op de productpagina van de bouwer plaatsen. In deze demo zijn het gedeelte Productentabbladen en het Verwante product opnieuw gerangschikt met slechts een simpele slepen en neerzetten.
Met de aanzienlijke functionaliteit voor slepen en neerzetten, staat Flatsome klaar om u te bieden wat u zoekt op uw website. Met zeer aanpasbare modules kunt u met gemak een aantal fantastische pagina's maken. De functie slepen en neerzetten maakt het leven nog comfortabeler.
Afsluiten
Het is absoluut noodzakelijk om in deze moderne tijd een online bedrijf te hebben, omdat mensen liever thuis blijven om veilig te blijven. Dus begin met het bouwen van uw eerste online winkel met Flatsome en betover uw klanten met zijn uniekheid en creativiteit. Bovendien is er geen puinhoop van code in de inhoudeditor, slechts een paar shortcode-regels. Flatsome is ongetwijfeld het beste thema dat ik ben tegengekomen. Je hoeft dus niet rond te kijken naar een ander thema, klik gewoon op de downloadknop en begin meteen met het bouwen van je eigen online winkel.
