Flatsome is een krachtig WordPress-thema ontworpen voor e-commercewebsites 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 afkomstig van meer dan 6.600 recensies.
Flatsome is in de eerste plaats ontworpen met beginners en niet-technisch onderlegde gebruikers in gedachten.
Dit is geweldig voor mensen die aan de slag willen met een online bedrijf, maar niet weten hoe ze moeten coderen of het budget hebben om een professionele codeerder in te huren. Met Flatsome kun je een professioneel ogende website maken met behulp van eenvoudige en intuïtieve tools.
Nu wordt Flatsome geleverd met talloze geweldige functies en functionaliteiten. Om te laten zien wat er beschikbaar is en hoe het werkt, hebben we een korte tutorial die u laat zien hoe u een WooCommerce-productpagina kunt maken met Flatsome.
Laten we dus, zonder verder oponthoud, aan de slag gaan:
Inhoudsopgave:
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 en thema's beschikbaar om andere taken uit te voeren volgens uw vereisten.
WooCommerce is een plugin die wij 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 voorzien van extra functionaliteiten zoals winkelwagentje, betalingsverwerking, productbeheer, etc.
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 nadenken over de kleur van uw website. Dat is wat Flatsome u kan bieden.
Omdat al onze lezers kennis hebben over WordPress, WoCommerce en Flatsome, is het tijd voor ons om verder te gaan met het aanpassen van onze productpagina met de fantastische UX-builder die bij het Flatsome-thema wordt geleverd. Het is een functie voor slepen en neerzetten die het leven van de ontwerper uiterst eenvoudig maakt.
Bijna iedereen heeft wel eens online gewinkeld, waarschijnlijk vanwege de uitdagende tijden waarmee we de afgelopen maanden te maken hebben gehad. Thuisblijven 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 ingewikkelder is in vergelijking met een standaardwebsite.
Met de hulp van WooCommerce en Flatsome is deze taak echter uiterst eenvoudig geworden. U moet gaan zitten en plannen hoe uw website eruit zal zien, en dat is alles. WooCommerce zal er zijn om u te helpen met de bouwopties. Met slepen en neerzetten kunt u in slechts enkele minuten een volledig werkende online winkel creëren.
Met WooCommerce en Flatsome kunt u uw ideeën voor een online winkel een heel nieuw leven inblazen. Uw website moet er modern en mooi uitzien, zodat deze klanten kan aantrekken. Daarom Flatsome de beste oplossing voor al uw problemen, dus download het hier en laten we aan de slag gaan.
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 creëren van geweldige responsieve websites zonder ook maar één regel te hoeven coderen. Bovendien maakt het vermogen om een aantal zeer creatieve en unieke online winkels te creëren het nog waardevoller.
Laten we dus verder gaan met de tutorial, zonder nog meer tijd te verspillen. Deze tutorial leidt u door het volledige proces van het ontwerpen van de productpagina. De afbeeldingen helpen u een beter idee te krijgen van hoe de taak het proces zal doorlopen.
Eerst beginnen we met het selecteren van een lay-out van de productenpagina. Met deze selectie ontstaat een basispagina voor onze online winkel, die we later naar onze wensen zullen aanpassen. Deze stapsgewijze handleiding leidt u door het proces van het aanpassen van de pagina.
In dit amp gaan we verder met de Classic Shop-optie. Er zijn echter geen beperkingen voor u. Het aanpassingsproces is voor elke lay-out die u selecteert vergelijkbaar. Het enige verschil zou zijn dat de basisstructuur van de pagina anders zal zijn dan de andere.
We gingen verder met de productaanpasser en gaven deze de naam de linkerzijbalk op 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 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.
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 vergt minder inspanning, maar het is essentieel dat u enige praktijkervaring heeft 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 dit amp passen we de lay-out van de linkerzijbalk op volledige hoogte aan; dus kopiëren we de code voor het ontwerp. Hieronder volgt een afbeelding van de toegepaste versie, maar u kunt deze eenvoudig vanuit de structuur kopiëren.
Begin met het maken van een blok met een titel. Als u hoofd wilt ontwikkelen, moet u op “Nieuw toevoegen” klikken, beschikbaar onder UX-blokken die in uw dashboard zijn geplaatst.
U kunt het blok een naam geven volgens uw wensen. Hier in dit amp hebben we de vakbond de 'Indeling linkerzijbalk op volledige hoogte' genoemd. 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.
Na deze kleine stap zijn we op gelijke hoogte en kunnen we onze pagina 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 via de vervolgkeuzelijst Aangepaste productindeling.
Kies het blok dat we zojuist hebben gemaakt. Ons belangrijkste doel bij het maken van dat blok was om er een productpagina van te maken. Volgens dit amp is de lay-out van de linkerzijbalk op volledige hoogte het blok, terwijl deze er aan uw kant uitziet zoals u hebt genoemd.
Eenmaal voltooid, klikt u gewoon op de knop Publiceren; het zal de instellingen opslaan.
Het is tijd dat we beginnen met maatwerk. Eerst navigeren we door de bestaande productenpagina vanaf de frontend die we eerder in de stappen hebben ingesteld.
Het is belangrijk dat u een bepaald product selecteert dat we moeten instellen. U zou volledige details moeten 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.
U hebt opties om de elementen opnieuw te ordenen in het linkerzijpaneel en de instellingen te wijzigen via de elementoptie. In dit amp herschikken we de prijs die beschikbaar is in het linkermenu.
Bovendien kunt u hiermee ook elementen uit de preview van de bouwer herschikken en extra componenten op de productpagina van de bouwer plaatsen. In deze demo zijn de sectie Productentabbladen en het gerelateerde product opnieuw gerangschikt met slechts een simpele drag-and-drop.
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 eenvoudig fantastische pagina's maken. De drag-and-drop-functie maakt het leven nog comfortabeler.
Het is in deze moderne tijd absoluut noodzakelijk om een online bedrijf te hebben, omdat mensen liever thuis blijven om veilig te blijven. Dus begin met het bouwen van de eerste online winkel van uw bedrijf met Flatsome en betover uw klanten met zijn uniekheid en creativiteit. Bovendien is er geen rommel van code in de inhoudseditor, slechts een paar shortcoderegels. Flatsome is ongetwijfeld het beste thema dat ik ben tegengekomen. U hoeft dus niet naar een ander thema te zoeken, klik gewoon op de downloadknop en begin meteen met het bouwen van uw aangepaste online winkel.
De kop- en voetteksten van een website zijn essentiële elementen. In de meeste gevallen biedt de kop navigatie...
Twee van de meest populaire WordPress-thema’s op de markt zijn Astra en OceanWP. Professioneel…
Voor het maken van een uitstekende nieuwswebsite hoeft u geen webdesigner te worden. Wij…
Het krantenthema is een van de belangrijkste WordPress-thema's ontworpen door tagDiv, een…
Als het gaat om het opzetten van een online winkel, is WooCommerce de go-to plugin . Het…
Een header is over het algemeen het eerste dat iemand ziet wanneer hij of zij uw website bezoekt,…