Ik heb namelijk een werkende WordPress webshop in elkaar gezet en ik heb alle stappen en drempels beschreven. Als je alle stappen volgt, dan kan je een soortgelijke webshop maken – wat je ook verkoopt.
Een werkende WordPress webshop maken met WooCommerce
Zo ziet de webshop die we gemaakt hebben er uit.
Is die perfect? Nee. Maar ruim voldoende voor 1-2 dagen werk. En met de info in dit artikel kan je de webshop naar wens aanpassen en uitbreiden.
Wat als ik een ander design wil?
Dat kan. WordPress is flexibel. Er zijn duizenden Premium WordPress webshop designs waar je uit kan kiezen.
Dit is de shoppagina die ik met een ander thema heb gemaakt
Hoeveel kost het zelf maken van een webshop ongeveer?
De grootste kostenpost is hosting voor een webshop.
Voor webshops kost hosting tussen de 15 en 40 euro per maand (ligt een beetje aan de grootte van jouw webshop en het verwachte aantal bezoekers. En je bent eenmalig ongeveer 60 tot 80 euro – voor een WordPress design.
Dit is een fractie van het bedrag dat je normaal kwijt bent als je een webshop laat maken door een professioneel webdesignbureau. Dan ben je snel 3.000, 7.000 tot wel 50.000 kwijt voor het bouwen van een webshop en + hosting.
En hoeveel tijd kost het opzetten van een WordPress webshop?
Verder denk ik dat je wel een paar dagen zoet bent met het opzetten, indelen, vullen en goedzetten van de webshop. Helemaal als je nieuw bent met WordPress.
En ook deze schatting is afhankelijk van de grootte en complexiteit. Een simpele webshop met een handvol producten zou je in een dag of een paar dagen kunnen opzetten, maar voor een grote webshop met honderden producten, tientallen categoriëeen, een blog en een mooie homepage ben je wel een eventjes zoet.
Ook in vergelijking met het laten bouwen van een webshop valt dit wel mee. Dan ben je snel een paar maanden verder.
In het kort: Hoe maak je een WordPress webshop?
We moeten een paar stappen maken.
Een WordPress hostingpakket kiezen waarop we een webshop kunnen draaien en het vastleggen van een domeinnaam.
WordPress installeren en wat basisinstellingen goedzetten.
De WooCommerce webshop plugin installeren en instellen.
De webshop vullen met een handvol producten.
Het kiezen van een betaalprovider met iDeal.
Het installeren van een goed WordPress webshop thema.
Het goedzetten en indelen van jouw webshop.
En tot slot moet je de rest van jouw webshop vullen met tekst, producten en eventueel blogartikelen.
WordPress webshop hosting
Je betaalt over het algemeen iets meer voor hosting wanneer je een webshop wil maken.
Waarom?
Omdat webshops over het algemeen meer pagina’s met veel afbeeldingen hebben en zwaardere software gebruiken.
Omdat het versleuteld verzenden van vertrouwelijke informatie bij webshops essentieel (en verplicht) is – je hebt een SSL-certificaat nodig. Je krijgt dan een beveiligde https:// verbinding.
Omdat een goed pakket meer betrouwbaarheid met zich meebrengt.
Omdat het snel laden van pagina’s nog belangrijker wordt (er wordt vaker doorgeklikt en elke seconde extra laadtijd vergroot de kans dat men de website verlaat).
En omdat het hebben van een testomgeving extra handig is voor webshops.
Het grote verschil met normale websites is dat bij webshops alles wordt uitvergroot. Een langzame webshop of een webshop waarbij er iets niet werkt kan direct betekenen dat je minder omzet (bij zakelijke websites met diensten is het hele koopproces langzamer en heeft een klein foutje of een langzamere laadtijd minder invloed op het aantal sales).
Twee WordPress webshop pakketten die ik aanraad
Ik bespreek zo twee pakketten van twee providers.
Ze zijn allebei goed, dus het maakt niet heel veel uit welke je kiest. De twee pakketten zijn voor kleine tot middelgrote webshops van een paar honderd producten.
In het kort: xel.nl is een goede keuze als je wat meer budget hebt en gebruik wilt maken van de (Nederlandstalige) WordPress ondersteuning en SiteGround heeft een hele sterke prijs-kwaliteitverhouding en 24/7 support.
Laten we de twee providers en twee aanbevolen pakketten bespreken:
Het WordPress COMPLETE hostingpakket kost 30,- per maand en heeft alles wat je nodig hebt als je wilt starten met het bouwen van je eigen webshop..
In het pakket zit een SSL-certificaat inbegrepen. De domeinnaam wordt dan https:// in plaats van http://. Een SSL-certificaat is verplicht voor webshops. Verder krijg je ook een beveiligd groen slotje in de browser.
Je krijgt een testomgeving. Je kan dan veilig aanpassingen in het design en in de code testen, voordat je de aanpassing live zet.
Automatische back-ups en handmatige back-ups (handig als je design of software aanpassingen wil doorvoeren).
Automatische WordPress updates
Het is een van de snelste hostingpakketten in Nederland. En je webshop blijft snel als je veel bezoekers tegelijkertijd op je website hebt.
WordPress wordt automatisch geïnstalleerd. Je kan dus direct starten met bouwen.
Hulp bij het bouwen van je eigen WordPress webshop
En je kan met dit pakket de servicedesk WordPress en WooCommerce gerelateerde vragen stellen.
Dit is enorm waardevol als je een eigen webshop gaat maken en onderhouden (helemaal omdat het maken van een webshop een stuk lastiger is dan het bouwen van een ‘normale’ website. Als iets niet lukt tijdens het bouwen, dan heb je een hulplijn die je direct kan bellen of mailen.
SiteGround is een van de populairste en best beoordeelde internationale hostingproviders. En ze hebben hostingservers in Nederland staan.
Dat zit er in de WooCommerce WordPress hostingpakketten
Meer dan genoeg schijfruimte
Gratis WordPress en WooCommerece installatie
Gratis SSL – een beveiligde verbinding
Dagelijkse back-ups
24/7 support
Live chat
Automatische WordPress updates
WordPress starter module
Extra WordPress security plugin
Meerdere snelheid optimalisaties – dat een pagina 50 tot 500% sneller laat laden
Gratis CDN – zorgt dat de pagina ook sneller laadt in andere landen
Welk pakket heb ik nodig bij SiteGround?
Een webshop kan niet goed draaien op de meeste kleine pakketten. Dus bij SiteGround valt het StartUp pakket hoogstwaarschijnlijk af.
Ze raden zelf het GoGeek-pakket van 14 euro per maand voor het de eerste contractperiode (daarna 35 p/m) aan.
Maar ik denk dat meeste kleine en middelgrote webshops prima kunnen draaien op een GoBig-pakket. Het pakket heeft een actieprijs van 7 euro per maand (na de eerste jaar kost het 23 euro per maand).
Bij zowel het GrowBig als het GoGeek account zit een testomgeving (waar je design en functies kunt testen), handmatige back-ups (handig wanneer je grote aanpassingen wil doorvoeren) en meer capaciteiten en optimalisaties.
Bespaartip: hoe langer het eerste contract is, hoe langer je een korting kan hebben. Dus weet je zeker dat je twee of drie jaar deze webshop gaat gebruiken, dan kan het die investering waard zijn – om op termijn geld te besparen.
Na het selecteren van het WordPress hostingpakket is het tijd om een domeinnaam vast te leggen.
Probeer een domeinnaam vast te leggen die makkelijk op te schrijven en te onthouden is. Dus als je de domeinnaam zou vertellen tegen een vriend/vriendin, dan zou hij/zij die in één keer goed op papier kunnen zetten.
WordPress installeren
Bij het WordPress hostingpakket van xel is het installeren van WordPress een eitje. WordPress wordt namelijk automatisch geïnstalleerd. Je krijgt automatisch een mailtje wanneer je in kan loggen op jouw WordPress website (het kan soms een paar uurtjes duren voordat alles goed staat).
Bij SiteGround installeer je WordPress (en WooCommerce) met een paar klikken.
Je kan in de tussentijd wat anders doen (tot zo!) of verder lezen.
WordPress permalinks goedzetten
Het eerste wat je moet doen na het installeren van WordPress is het goedzetten van hoe WordPress URL’s aanmaakt. Anders krijgen we url’s zoals: deaanhouder.nl/?237 in plaats van deaanhouder.nl/shop.
Het aanpassen van de permalinks is in no-time gedaan.
Klik tenslotte op ‘Wijzigingen opslaan’ (linksonder).
De WordPress plugin: WooCommerce installeren
De plugin WooCommerce voegt alle functies toe die je nodig hebt voor een webshop.
Klik op ‘Plugins’ en klik daarna op ‘Nieuwe plugin’.
Vul rechtsboven in het zoekveld ‘WooCommerce’ in.
Klik daarna bij de optie ‘WooCommerce’ op ‘Nu installeren’.
Klik vervolgens op ‘Activeren’.
Na het activeren kom je terecht op de installatiewizard van WooCommerce.
Klik hier op ‘Aan de slag’.
Stap 1: Pagina-instellingen
Klik op ‘doorgaan’.
Stap 2: Winkellocatie
Waarschijnlijk staat dit al goed. Anders even goedzetten. Daarna weer op ‘Doorgaan’ klikken.
Stap 3: Verzendingen en belastingen
Vul vervolgens in of je fysieke producten gaat verzenden. Ga je bijvoorbeeld e-books verkopen of andere digitale producten, dan kan je deze uitvinken.
Het is verstandig om aan te vinken dat je btw in rekening gaat brengen en bepaal vervolgens hoe je jouw prijzen wil invoeren.
Als je bijvoorbeeld 30 euro invult bij de kosten van een product.
Wil je dan die prijs tonen aan de klant? Een prijs waarbij 21% belasting inbegrepen is? De omzet is in dit geval 24,79 euro.
Of wil je dat de btw er nog bovenop komt? Dus bij het afrekenen krijgt de klant pas de prijs te zien met btw, dit wordt dan 36,30.
Wanneer je verkoopt aan particulieren dan zie je dat bijna iedereen kiest voor inclusief btw. Bij het verkopen aan bedrijven verschilt het, omdat bedrijven btw terug kunnen vragen.
P.S. verkoop je producten met een lager belastingtarief? Dan kan je later bij ‘belasting-instellingen’ het tarief aanpassen.
Stap 4: betalingen
Hier kan je een betaalprovider kiezen.
Als je voornamelijk met iDeal wil werken, dan kan je het best voor de Nederlandse betaalprovider Mollie gaan. Bij Mollie betaal je maar 0,25 per betaling en bij Stripe (die ook iDeal heeft) betaal je 25 cent en 1.4% van de sales. Mollie is dus een stuk goedkoper.
Mollie kan je hier niet instellen, dus je kan hier drukken op ‘Stap Overslaan’.
P.S. Richt je voornamelijk op het buitenland? Dan kan het zijn dat Stripe misschien beter is. Daar betaal je minder bij creditcard transacties.
Je winkel is klaar
Top, nu is het tijd op je eerste product toe te voegen. Klik daarom op de grote paarse knop.
Product toevoegen
Allright, laten we ons eerste product toevoegen.
Het kan zijn dat je nog niet de tekst en afbeeldingen hebt van de producten die je gaat verkopen, als dat het geval is: vul dan een testproduct in en gebruik wat testafbeeldingen. Het gaat om dit moment om het leren hoe je producten toevoegt. Verder is het hebben van minimaal één productpagina handig als we straks een thema gaan kopen en installeren. Dan kunnen we direct zien hoe de webshop er echt uit komt te zien.
Bovenaan kan je de productnaam invullen. Dit wordt ook de titel van de pagina.
Het gele gedeelte komt onderaan het product komt te staan.
Het blauwe gedeelte komt naast het product te staan.
Bij het groene gedeelte kan je afbeeldingen toevoegen.
En bij het roze gedeelte kan je productgegevens, zoals prijs en voorraad, opgeven.
Rechts bij ‘productcategorieën’ kan je een categorie maken, zoals ‘jurkjes’.
Een voorbeeld van een ingevulde productpagina
Klik na het invullen van een productpagina rechts op ‘Publiceren’.
En zo ziet het er dan uit
Wanneer we straks van thema wisselen dan kan de indeling van de pagina verschillen.
Prijs en belasting
Wat ik net opmerkte is dat ik 60 euro invulde bij prijs en dat op de productpagina 49,59 staat. Blijkbaar staat een instelling dan nog niet op ‘Toon prijzen in de winkel inclusief belasting’.
Dit kan je aanpassen door op het menu-item ‘WooCommerce’ te klikken en daarna bovenaan op ‘Belasting’.
Verander daarna ’toon prijzen in de winkel’ en toon prijzen gedurende bestellen’ naar ‘Inclusief belastingen. Klik daarna op ‘Wijzigingen opslaan’.
Verzendmethoden
Heb je al nagedacht hoe je het gaat aanpakken met het verzenden van producten?
Ga je verzendkosten in rekening brengen? Zo ja, hoeveel? Of laat je het afhangen van bepaalde factoren? Is er gratis verzending wanneer iemand voor een bepaald bedrag aan spullen koopt?
Wat je precies moet doen is afhankelijk van jouw antwoorden.
Je kan gebruik maken van software die veel zaken uit handen neemt, zoals Sendcloud.
Of je kan vaste tarieven gebruiken
Laten we de laatste optie even nalopen.
Verzendmethoden instellen
Je zag waarschijnlijk ook een grote melding met ‘verzendmethoden invullen’.
Laten we dat nu doen.
Klik op die melding bovenaan of ga via het menu-item ‘WooCommerce’ naar ‘Verzendmethoden’.
Stel, we bezorgen alleen in Nederland en België en we willen 7 euro verzendkosten in rekening brengen en gratis verzending als men boven de 100 euro bestelt.
Geef de zone (beschrijving van geselecteerde regio’s) een naam
Selecteer daarna de regio’s. Je zou ook hier bijvoorbeeld aparte verzendzones voor Nederland, Belgie, Duitsland, Engeland etc kunnen maken
Klik daarna op ‘Verzendmethode toevoegen’
Selecteer daarna een verzendmethode, ik start hier met ‘vast tarief’. Klik daarna op ‘Verzendmethode toevoegen’.
Als je met je muis over de naam gaat, dan verschijnen de knoppen ‘bewerken’ en ‘verwijderen’. Klik op ‘bewerken’.
Vul daarna de verzendkosten in.
Wil je gratis verzending aanbieden bij een bepaald bedrag?
Klik dan weer op ‘verzendmethode toevoegen’ en doe dan weer alle handelingen. Bij het ‘bewerken’ van de gratis verzending kan je selecteren dat men gratis verzending krijgt als het minimale aankoopbedrag een bepaalde hoeveelheid heeft.
P.S. Ga je voor elk product gratis verzending aanbieden? Dan hoef je maar een methode toe te voegen en het bestelbedrag op 0 (of 1 te zetten).
Betaalprovider met iDeal koppelen aan jouw website
Om betalingen te kunnen ontvangen, moet je een betaalprovider hebben.
Je kan het best gaan voor Mollie. Je betaal bij Mollie 0,29 per iDeal transactie. Je kan direct een account aanmaken.
Daarna moet je nog een aantal zaken uploaden en instellen, voordat je echt aan de slag kan.
Je moet een ID-kaart uploaden.
Je moet Kamer van Koophandel-uittreksel opsturen.
En je moet een zakelijke bankrekening hebben.
Wanneer alles is goedgekeurd kan je verder (p.s. als het even duurt voordat je dit gefixed hebt, dan kan je ook eerst verder gaan met het bouwen van je website door naar het volgende hoofdstuk over het kiezen van een thema te gaan).
De Mollie plugin installeren
Om een plugin te installeren moet je op ‘Plugins’ klikken en daarna op ‘Nieuwe plugin’.
We kunnen dan het zoekveld rechtsboven gebruiken en zoeken naar “Mollie Payments for WooCommerce”. Installeer vervolgens die plugin.
Wanneer je dan via het menu-item ‘WooCommerce’ op ‘Instellingen’ klikt en daarna bovenaan op ‘Betalingen’, dan zie je als je een stukje naar onder scrollt de Mollie instellingen.
Onderaan zie je dat je een ‘Live API key’ moet toevoegen. Dat is de API key van jouw account.
Jouw live API-key kan je vinden in het account van Mollie wanneer je klikt op ‘instellingen’, ‘websiteprofielen’ en daarna op ‘Live API-keys’. Het kan zijn dat je nog een websiteprofiel moet aanmaken. Als dat zo is, doe dat dan eerst. Voeg daarna jouw API-key toe.
Wanneer de API-key is ingevoerd kan je starten met het inschakkelen van de betaalproviders die je in Mollie hebt geselecteerd.
Klik bijvoorbeeld bovenaan op ‘Mollie – IDEAL’ en klik op ‘iDeal inschakelen’. Dit moet je ook doen voor de andere betaalopties die je wil hebben.
En wanneer je bij het kopje ‘Afrekenen’ helemaal naar onder scrollt, dan kan je ook de volgorde van de betalingsverwerkers aanpassen. Dit is vooral interessant als je heel wat mogelijkheden aanbiedt.
Allright, nu kunnen we betalingen ontvangen.
Tijd voor de volgende stap.
WordPress webshop thema kiezen
Some words of caution: als je een handvol producten wil verkopen, dan is het geen slecht idee om te gaan voor een normale Premium WordPress thema. Of zelfs een van de gratis thema van WordPress, zoals Twenty Fifteen of Twenty Sixteen. Met WooCommerce heb je alle benodigde pagina’s en functionaliteit en de opmaak van alles zit prima in elkaar.
Waarom moet ik mogelijk geen WordPress webshop thema kiezen?
Omdat het instellen van een webshop lastig is. Er zijn enorm veel opties en enorm veel mogelijkheden. En elk thema is anders gebouwd. Ik kan ook niet stap voor stap uitleggen wat je precies moet doen.
Het is verre van onmogelijk, begrijp me niet verkeerd. Maar het is lastig en zal vast een paar dagen duren. Twijfel je? Dan kan je ook eerst de rest van dit artikel lezen waarin ik een WordPress webshop thema installeer en goed probeer te zetten.
Hoe installeer je een WordPress webshop thema?
Oké, laten we het design van onze webshop aanpakken.
Dit doen we door een WordPress thema te installeren die bij ons past. Een thema bepaalt niet alleen de look & feel van de website, maar kan ook een hoop functionaliteit toevoegen.
Het is mogelijk om een van de gratis thema’s te gebruiken, maar die zijn meestal matig uitgewerkt. Het is slimmer om een professioneel ontworpen WordPress thema te kopen die speciaal ontwikkeld is voor webshops. Zo’n thema kost ongeveer 60 tot 80 dollar.
De grootste WordPress thema marktplaatsen is ThemeForest. Daar kan je meer dan
dit artikel te lezen over het vinden en kiezen van een goed WordPress thema.
Je leert daar hoe je thema’s moet beoordelen en hoe je zo’n thema koopt via iDeal en installeert.
Het kiezen van een thema moet je niet overhaastig doen. Neem de tijd ervoor. Kijk, het is niet super erg als je een keuze maakt waar je later niet achter staat, de thema’s zijn namelijk niet zo duur, maar het is natuurlijk zonde dat je vijf thema’s gekocht hebt voordat je een thema hebt gevonden waar je tevreden mee bent.
Let wel op dat het artikel gaat over normale WordPress thema’s, wij moeten kijken naar eCommerce thema’s.
Het kan helpen om vooraf al een lijstje te maken van hoe jouw ideale webshop eruit ziet. Probeer vervolgens een thema te vinden die het dichts bij jouw wens zit. Je zal waarschijnlijk geen thema vinden die op alle aspecten perfect zijn, maar tot de tijd dat we een eigen webshop thema kunnen laten bouwen (dat kost gauw 5000 euro), moeten we een thema hebben die ‘good enough’ is om een paar jaar mee door te gaan.
WordPress thema installeren en instellen
Na het installeren van een thema belanden we in een groot grijs gebied. Figuurlijk.
Hoe je een thema moet instellen verschilt namelijk per thema. Het is dus onmogelijk om een algemene stap voor stap handleiding te maken.
Dit betekent niet dat het zinloos is om te bespreken hoe je een thema moet instellen. Redelijk wat onderdelen zullen waarschijnlijk overeenkomen.
Maar dat is niet de belangrijkste reden
Je leert hoe je om gaat met informatie-overload, keuzeparalyse en structureel stappen maken. Want de meeste thema’s, en helemaal webshops thema’s, brengen honderden extra opties met zich mee. En wanneer je het thema installeert, dan ziet jouw webshop er niet uit als het voorbeeld. Verder is het ook niet een, twee, drie duidelijk wat je moet doen om het thema zo te krijgen.
Als je niet weet wat de volgende stap is, dan is de kans groot dat je blokkeert en het bouwen van je webshop uitstelt en uitstelt en uitstelt.
Dat is enorm zonde
Zonde van je webshop, de tijd, het geld en jouw droom.
Dus laten we het volgende doen:
Ik ga één WordPress webshop thema van dit artikel uitgelegd.
Dit is het eerste dat ik zag na het installeren en activeren van het thema.
Dit zijn de plugins die of verplicht zijn of aangeraden worden voor dit thema.
Ik raad je aan om alle plugins te selecteren, rechtsboven ‘acties’ te veranderen naar ‘install’ en daarna op toepassen te klikken. De kans is redelijk groot dat je niet alle plugins nodig hebt, maar we kunnen net zo goed alles installeren en later verwijderen wat we niet nodig hebben.
In de afbeelding had ik ‘Demo content’ niet aangevinkt, dat had ik achteraf wel moeten doen.
Waarom?
Nou, toen ik het thema installeerde toen zag ik een stuk van twintig extra menu-items. Ik heb/had geen idee wat ik precies moest doen. Ik heb toen even rondgeklikt en het was nog steeds niet duidelijk hoe ik pagina’s op zo’n manier kan maken zoals ze in het voorbeeld stonden.
Demo content
Met demo content worden automatisch pagina’s, berichten, afbeeldingen aangemaakt en instellingen op zo’n manier ingesteld zodat je krijgt wat je op het voorbeeld zag.
Je kan daarna de demo content bestuderen, kijken wat zij precies hebben gedaan en dan alles aanpassen naar wens.
Dit was mijn website zonder demo content. Je ziet dus helemaal niets. En ik kwam er niet snel uit wat ik precies moet doen. Ik heb daarom besloten om de demo-content te installeren en die demo-content dan aan te passen.
Daarna moet je de geïnstalleerde plugins activeren. Je selecteer weer alle plugins en je verandert ‘acties’ of ‘install’ naar ‘activate’. Daarna klik je op ’toepassen’.
Demo content installeren
Soms wordt demo content met één druk op de knop geïnstalleerd, maar bij mijn thema kon ik kiezen wat voor demo content ik kon installeren.
Of je uberhaupt demo content hebt en wat er precies gebeurt, is weer afhankelijk van het thema dat je gebruikt.
Ik had heb zelf gekozen voor de demo content van ‘Vario’ en gekozen om alle opties te importen.
Wat je bij die afbeelding ook ziet is dat je links een hoop elke menu-items ziet.
Toen ik dacht zag dacht ik direct ‘Fuck’.
Het is namelijk een hoop en ik heb geen idee wat alles precies doet. De kans op keuze-paralyse is groot. Ik zou zelf nu gewoon alles proberen te negeren. Het komt allemaal wel goed. Alles gaat stap voor stap.
Na het installeren van de demo-content keek ik even op mijn website. Die zag er nu zo uit. Een stuk beter.
En zo ziet de productpagina die we al gemaakt hebben eruit. Top.
Hoe nu verder?
Ik zag dat er een paar plugins geüpdatet moesten worden, dus dat deed ik eerst. Je kan plugins en thema’s updaten via ‘Dashboard’ en dan ‘Updates’.
Daarna is het tijd om het thema aan te passen.
Ik denk dat het verstandig is om te beginnen bij ‘Theme options’. Dit zijn alle generale opties die invloed hebben op het thema.
Klik op ‘Theme Options’. Waar die in het menu staat verschilt per thema.
Het thema die ik gebruik heeft enorm veel thema options. Het best kan je gewoon elke rustig pagina langslopen, lezen wat er staat en kijken of je iets wil aanpassen.
Ik heb net zelf de hele lijst langsgelopen en ik heb besloten om meer dan 95% zo te laten.
Kijk vooral naar de dingen die je echt aangepast wil hebben. En laat de rest voor nu zitten. Als je later iets specifieks wil aanpassen, dan kan je ook gericht op zoek gaan naar de optie die dat aanpast.
Voorbeelden van opties die ik wel heb aangepast
Ik heb de tekst voor de 404 pagina (de pagina die getoond wordt als een bezoeker op een url komt die niet bestaat) vertaald van Engels naar Nederlands.
Ik heb ergens mijn social media accounts ingevuld.
Ik heb ‘Sticky Menu’ uitgezet (dan scrollt het menu niet mee wanneer de gebruiker scrollt).
Ik heb bij ‘copyright’ de linkjes naar het thema en naar WordPress verwijderd.
Ik heb aangegeven dat ik de enige auteur ben van het blog, zodat je niet steeds een ‘author box’ krijgt onder een blogbericht.
Ik heb een zeven meldingen vertaald van Engels naar Nederlands.
Ik heb maar twee ‘grote’ dingen aangepast.
Dat is het toevoegen van mijn logo en de indeling van de header. Ik heb gekozen voor het logo links en het menu rechts.
Ik heb vervolgens besloten dat ik eerst alle pagina’s die in het menu staan wil aanpassen.
Ik wil weten hoe de pagina’s zijn opgebouwd, ik wil de titels vertalen in het Nederlands en ik wil de pagina’s al een beetje vullen met ‘good enough’-teksten.
Pagina’s kan je aanpassen door op ‘Pagina’s’ te klikken en het menu en daarna bij elke pagina op ‘Bewerken’. Ik open zelf altijd alle pagina’s tegelijkertijd in een ander tabblad, zo kan ik in een klap alles tegelijk doen. Maar je kan natuurlijk ook één pagina per keer doen.
Een andere manier om bij de bewerkpagina te komen van een pagina is door de pagina die je wil aanpassen via jouw browser te bezoeken en bovenaan op ‘pagina bewerken’ te klikken.
In de afbeelding kan je zien dat het logo en het menu nauwelijks zichtbaar is op deze pagina.
De vraag is, waar kan je dit aanpassen?
Ik dacht aan twee mogelijkheden. Op de pagina zelf of ergens bij ‘Theme options’.
Bij Theme Options zag ik niet zo snel een pagina waar je de kleur van de header kon instellen, daarom bezocht ik de pagina zelf. Het was even zoeken voordat ik de optie vond. Blijkbaar heeft dit thema een ‘Meta Options’ blok onder elke pagina. Ik heb even op elk menu-item geklikt en gekeken wat er stond.
Het was niet echt duidelijk wat ik aan moest passen, maar toen ik de ‘Page Header Type’ veranderde naar ‘Standard’, klikte op ‘bewerken’ en daarna op ‘wijzigingen bekijken’ (rechtsboven), toen zag ik dat alles weer leesbaar was.
Wat je ook bij de afbeelding kan zien is een hoop vage Engelstalige code. Het duurde een paar seconden voordat ik realiseerde wat het was. Het blijkt de code te zijn van de ‘Pagebuilder’ die bij dit thema zit.
WordPress Swift Pagebuilder
Als je rechtsboven op ‘Pagebuilder’ klikt, dan switch je van editor.
Met deze pagebuilder kan je designelementen toevoegen en de volgorde veranderen met een drag-and-drop systeem.
In de afbeelding hieronder heb ik twee keer op ‘Add Element’ geklikt en een ‘Boxed content’-blok toegevoegd. Daarna heb ik met die twee streepjes helemaal rechts allebei de bokken een 1/2 breedte gegeven, zodat ze naast elkaar komen te staan.
Je kan blijkbaar een hoop elementen toevoegen.
Met zo’n pagebuilder kan je bijvoorbeeld de indeling van de homepage of van een landingspagina bepalen.
Het kan zijn dat het thema die jij gebruikt ook zo’n Pagebuilder heeft, maar de kans is groot dat die net ietsje anders werkt. Ik ga voor dit moment de Pagebuilder negeren, want het brengt teveel opties met zich mee. Ik wil eerst een goedwerkende en eenvoudige webshop bouwen.
De pagina is nog niet zoals ik hem wil hebben.
Zo zie je heel groot ‘Our products’ en ‘all the wonderful things we sell staan’. En de url is nog Engelstalig, namelijk /products.
Het is dan de vraag in hoeverre we dit in het thema kunnen aanpassen.
Blijkbaar kunnen we vrij veel aanpassen in het ‘meta options’-gedeelte.
Ik kan de tekst veranderen bij ‘Page Title’, maar ik heb besloten dat ik helemaal geen titel wil. Ik wil alles producten op een rijtje hebben, zonder poespas. Het is een kwestie van opties proberen en kijken wat er anders wordt. Ik heb ‘Show page title’ uitgezet en de ‘Page Title Style’ aangepast.
Blijkbaar kan je ook achtergrondsafbeelding toevoegen. Handig, maar niet voor deze pagina.
De URL kan je bovenaan aanpassen door op ‘bewerken’ te klikken en de url te veranderen naar ‘producten’. Het is trouwens niet aan te raden op de URL te veranderen van pagina’s die al heel lang bestaan en al goed geïndexeerd zijn door Google.
Dezelfde handelingen doen we nu voor de rest van de pagina’s.
De URL aanpassen.
De ’titel’ uitzetten of vertalen.
De pagina evt aanpassen met de Pagebuilder.
Het vullen van de pagina’s.
De ‘Page header style’ veranderen naar ‘Standard’.
De ‘Over’-pagina
Hier heb ik wel voor een titel en een achtergrondsfoto gekozen (hier zou je een teamfoto kunnen plaatsen of een foto van jezelf).
Contactpagina
Bij de contactpagina zal ik in de Page Builder een Google Maps feature. Die kon ik met wat moeite werkend krijgen, maar ik heb gekozen om het element te verwijderen (met het prullenbakje).
En met het pennetje kan je elementen bewerken.
Contactformulier fixen
Je ziet in de afbeelding dat er een contactformulier is gemaakt met de plugin ‘Contact Form 7’ en die heet ‘Porter Contact’.
Laten we er nu voor zorgen dat het contactformulier klopt en dat de e-mails naar het juiste adres wordt gestuurd. Heeft jouw thema geen contactformulier? Dan kan je bij ‘Plugins’ zoeken naar de ‘Contact Form 7’-plugin (de populairste plugin voor contactformulieren) en die installeren.
Om het contactformulier aan te passen moet je klikken op het menu-item ‘Contact’.
Daarna drukken wij bij de titel ‘Porter Contact’ op ‘bewerken’. Als je net de plugin hebt geinstralelerd, dan kan je kiezen voor het eerste contactformulier. Wil je de contactformulier op een (andere) plek plaatsen, dan kan je later de shortcode plakken op de pagina waar je het contactformulier wil hebben.
Contactformulier aanpassen
Nu is het een kwestie van alle vier tabbladen (formulier, e-mail etc) doorlopen en aanpassen wat nodig is.
Je kan ook de ‘placeholder’ aanpassen (wat er in het formulier staat als er nog niets is ingevuld). Zo kan je ‘Your Name’ veranderen in ‘Jouw naam’ of gewoon ‘naam’. En ‘Send’ naar ‘Versturen’.
Bij het tabblad ‘E-mail’ kan je bepalen naar welk e-mailadres het e-mailtje wordt verstuurd.
Zo vul je bij ‘Aan’ jouw e-mailadres is. Alles wat tussen haakjes staat, bijvoorbeeld [your-name], moet je zo houden. Het formulier vult daar in wat de verstuurder heeft ingevuld bij ‘Naam’.
Je kan spam bij een e-mailadres verminderen of geheel voorkomen door de plugin ‘Contact Form 7 Honeypot’ te installeren en een Honeypot code in het formulier te plaatsen.
Producten en productcategorieën toevoegen
Zullen we voordat we verder gaan met het aanpassen van het design even een handvol producten toevoegen met categorieën?
De kans is namelijk vrij groot dat je een aantal categorieën wil hebben en dat je die categorieën wil tonen in het menu. Daarnaast wordt onze webshop gelijk wat voller en krijg je het gevoel dat je ook echt stappen maakt.
Het eerste wat ik doe is het verwijderen van alle producten van de demo content (dat doe je door bij de pagina op ‘prullenbak’ te klikken). Daarna maak ik een vijftal extra productpagina’s aan en vul ik die.
We hebben het al kort eerder besproken, maar rechts kan je aanvinken in welke categorie(ën) een product hoort of je kan een nieuwe categorie toevoegen.
Menu aanpassen of aanmaken in WordPress
Om het menu aan te passen moet je op ‘Weergave’ klikken en daarna op ‘Menu’s.
Heeft jouw webshop al een menu? Dan kan je links (bij het blauwe gedeelte) linkjes toevoegen aan het menu. Pagina’s kan je bij ‘pagina’s’ vinden, linkjes naar andere websites kan je toevoegen bij ‘Aangepaste links’ etc.
Voor een submenu met onze productcategorieën gaan we naar ‘productcategorieën’, vinken ‘Jurkjes’ en ‘Tops’ aan en klikken op ‘Aan menu toevoegen’. Daarna slepen wij de menu-items in de juiste positie. Om een submenu te maken, moet je het item iets rechtsonder het hoofdmenu-item te slepen.
Heb je nog geen WordPress menu?
Klik dan op ‘een nieuw menu aanmaken’.
Vul een ‘menunaam’ in en druk op ‘Menu opslaan’.
Voeg daarna alle pagina’s toe die je in het menu wil hebben.
Zet alles in de goede volgorde.
Klik onderaan bij ‘menu instellingen’ op ‘Hoofdmenu’ (of iets in de trant van ‘Primary Navigation).
En sla het menu weer op.
Op deze methode kan je ook een apart menu maken voor bijvoorbeeld de footer (en dan moet je bij locatie ergens ‘footer’ aanvinken). Of dat kan is weer afhankelijk van het thema dat je gebruikt.
Work so far
Allright. Zo ziet de shoppagina er nu uit.
Ziet er prima uit, maar ik ben wel benieuwd of ik meerdere producten naast elkaar kan zetten.
Dus ik ging weer naar de pagina zelf, klikte op de pagebuilder en selecteerde ‘bewerken’ bij de shopfunctie.
Ik heb een paar ‘display types’ geprobeerd en heb vervolgens gekozen voor een combi van ‘Gallery’ en ‘Multi-Mansonry display’.
En zo ziet het er nu uit.
Verder kan je ook bovenaan in het menu het submenu met de items ‘Jurkjes en Tops’ zien.
We zijn al een flink eind
Dit staat nog op de planning:
De footer aanpassen
De sidebar aanpassen
Drie blogs toevoegen
De homepage fixen
Slider
Instagram
De footer en de sidebar
De footer en de sidebar kan je aanpassen bij ‘Widgets’. En die kan je vinden onder het kopje ‘Weergave’.
Met een drag-and-drop-systeem kan je bepalen wat je in de footer en in de sidebar wil hebben.
De meeste thema’s hebben één sidebar. Het thema dat ik gebruik heeft er blijkbaar zeven. Je kan met dit thema verschillende sidebars aanmaken en bij de meta-options van elk product, pagina en blogartikel bepalen welke sidebar je laat zien.
Handig is je verschillende dingen op verschillende locaties wil plaatsen.
Wij gaan dit niet doen
Wij gaan gewoon voor één sidebar (Sidebar One).
Je kan uit die kolom (Sidebar one in dit geval ) alle widgets verwijderen die je niet wil door op het pijltje te klikken en op verwijderen te klikken. Je kan ook een widgets slepen naar de linkerkant op hem te verwijderen.
Daarna sleep je alle widgets die je wil hebben van de linkerkant (beschikbare widgets) naar de sidebar kolom, zet je alles op de juiste volgorde en pas je de inhoud aan. De inhoud kan je aanpassen door op het kleine pijltje te klikken.
Wil je iets in de sidebar hebben, maar zie je de optie niet bij beschikbare widgets? Dan is de kans groot dat er een plugin bestaat die zo’n widget toevoegt. Het best kan je even Googelen in het Engels naar iets van WordPress plugin (of) widget for ……
Footer aanpassen
Vervolgens pas je de footer op dezelfde manier aan. Het thema dat ik gebruik werkt drie footer columns.
Koppen en enters in de sidebar en footer widgets toevoegen
Je ziet in het voorbeeld ook wat code, zoals <br> en <h3>. Dit komt omdat de widgets niet werken met een normale teksteditor (zoals je gewend bent bij het maken van pagina’s). Je moet hier html-code gebruiken om teksten een stijl mee te geven.
Met <br> voeg je een enter toe.
<h3> is een code voor een header (een kop). Je hebt verschillende niveaus van headers. <h1> is het hoogste niveau, <h2> komt daarna en zo gaat het verder.
Als je in de sidebar of in de footer van een zin een kop wil maken, dan voeg je bijvoorbeeld <h3> aan het begin van de zin toe en </h3>aan het einde van de zin. In het voorbeeld hierboven is blijkbaar van een hele alinea een kop gemaakt, dit is niet de bedoeling.
Het blog aanpassen
Zo ziet het blog er nu uit.
Het eerste wat ik ga doen is alle blogartikelen van de demo content verwijderen (dit doe je op dezelfde manier als we al hebben gedaan bij producten). Daarna ga ik drie eigen voorbeeld blogartikelen publiceren.
Bij het menu-item ‘Berichten’ (of Posts) kan je blogartikelen verwijderen, aanpassen, publcieren en maken.
Verder wil ik uitzoeken hoe ik een afbeelding kan tonen bij elk blogartikel op de blogpagina.
Blogs en pagina’s werken met een vergelijkbare editor als die van Pages of Word.
Bij ‘Media toevoegen’ kan je afbeeldingen in het blog plaatsen. Met die drie schakeltjes (rechts in editor) kan je linkjes toevoegen en als je op ‘Alinea’ klinkt (helemaal links) kan je zinnen veranderen in koppen.
Om een afbeelding bovenaan het blog te tonen (en op de blogpagina) moet je rechtsonder bij ‘Uitgelichte afbeelding’ een afbeelding toevoegen. Je kan ook rechts het blog indelen in een categorie.
Blogstijl veranderen
Het was wel even zoeken hoe ik de stijl van de blogoverzichtpagina kon aanpassen.
Ik heb eerst gekeken bij de meta-options van de blogpagina en losse blogartikelen, maar daar kon ik het niet vinden. En ik heb gekeken bij de Theme Options, maar daar zag ik het ook niet staan. Daarna keek ik bij de PageBuilder van de blogpagina en daar kon ik het ‘blog type’ aanpassen. Die heb ik op ‘standaard’ gezet.
Het blog ziet er nu zo uit.
En nu is het tijd voor de laatste stap: de homepage aanpassen.
Homepage van de webshop aanpassen
Dit is het huidige design van de demo content.
De homepage is gemaakt met de Pagebuilder.
Het bestaat uit vijftien verschillende elementen.
Dit zou voor een “WTF”-momentje zorgen als dit de eerste pagina was die ik ging aanpassen. Maar nu hebben we al redelijk wat ervaring met het aanpassen van elementen in de Pagebuilder.
Ik ga gewoon bij elk element op ‘bewerken’ klikken en kijken wat ik wil aanpassen. En zo stap voor stap de homepage aanpassen.
Het blijkt dat ik te vroeg heb gejuicht.
Ik liep vast bij het tweede gedeelte. Dit stukje.
Problemen oplossen met de Pagebuilder
Het lukte in één keer om het linkje aan te passen. Ik heb gekozen om de bestaande code van de knop aan te passen. Het is mogelijk om een nieuwe knop toe te voegen met een shortcode (rode blokje), maar waarom iets aanpassen dat al voor een groot deel goed staat?
In de code van de knop zie je een verwijzing naar een pagina, namelijk /vario-demo/products/. Blijkbaar snapt de editor dat voor de eerste / jouw domeinnaam hoort. In mijn geval is het dan deaanhouder.nl/vario-demo/products/.
Om dit aan te passen heb ik de url van de pagina waar ik naartoe wil linken gekopieerd (en dan zonder het deaanhouder.nl stukje) en het linkje omgewisseld. Daarna heb ik de linktekst (het groene gedeelte) aangepast.
Maar het was niet duidelijk waar ik de titel kon veranderen. De titel met “Our new catalogue”.
Het duurde even voordat ik de oplossing vond.
Maar om uit te leggen hoe ik bij de oplossing kwam, moet ik eerst de ‘Page Builder’ even beter uitleggen. Want het werken met de Pagebuilder is voor een groot deel de logica proberen te snappen van hoe de builder werkt.
Je moet de page builder zien als een soort blokkensysteem. Je begint met de hele pagina (het blauwe vierkant). Daarna voeg je een ‘row’ toe. Een rij met elementen. Bovenaan zie je bijvoorbeeld een rij met ‘products’ die de hele breedte in neemt. Daarna zie je een stuk witruimte ‘blank spacer’. Dit zorgt ervoor dat alle elementen niet heel dicht op elkaar staan.
Om aan een volgend blok te werken, wat onder de ‘products’ komt, moet je weer eerst een ‘row’ toevoegen (door op het plusje te klikken). Zo voorkom je dat alles netjes naast en onder elkaar staat. Wanneer je alles in één row plaatst, kan het snel rommelig worden.
Je ziet daarna de row met het ‘Our catalogue’-stukje. Je ziet ook dat er aan beide kanten een stukje witruimte is toegevoegd. Zo voorkom je dat het element niet de hele breedte inneemt. Je kon met die twee streepjes bij een element (||) de breedte aanpassen.
Als we dan naar de homepage kijken, dan zie je dat ‘Our new catalogue’ in het midden staat. Het is dus middelste element.
Wat is dan het probleem?
Nou als je naar boven scrollt, dan zie je alleen de code van het linkje. En je kan ook niet scrollen. Verder zie je bovenaan in het element ook geen ‘Widget title’.
De vraag is dan: waar staat dan de code van de titel? Hoe kan ik de inhoud veranderen? Het moet in het middelste element staan. Maar waar?
Ik klikte daarom eens op ‘Tekst’ bij de editor. Dan zie je de html code van het element.
En? Tada! Onze titel.
Je ziet ook een stukje code die zegt dat de tekst gecentreerd moet worden en dat de kleur #ffffff wordt (dat is de kleurcode voor wit).
Ik wou niet zitten aan die code, dus ik veranderde alleen de titel en de onderdeel in de code, drukte weer op ‘visueel’ (dat is de normale teksteditor) en drukte op ‘opslaan’.
Slider aanpassen
Blijkbaar is er geen slideroptie in de pagebuilder, dus die moet ergens anders staan.
Ik keek eerst bij de plugin “Slider revolution’. Daar zou die moeten staan, dacht ik. Maar daar stond die niet. Ik ging daarom terug naar de pagina en bij de meta-options vond ik een stukje met ‘Page header/slider’ (blijkbaar kan je dus ook voor individuele pagina’s aparte sliders maken). Daar stond ‘Swift Slider’ geselecteerd.
En blijkbaar staat er ook een ‘Swift Slider’ in ons menu. Ik vind het vreemd dat ze twee slider plugins meeleveren. Ik kan dus zo de plugin voor de ‘Slider revolution’ verwijderen. Elke plugin neemt namelijk ruimte in beslag en kan je website iets langzamer maken. Verwijder daarom altijd de plugins die je niet gebruikt.
Je kan vervolgens instellen of je een achtergrondsafbeelding (of video) wil (en die kan je bij ‘Add Media’ toevoegen).
Bij ‘Slide Content’ kan je de inhoud aanpassen. Je kan weer met een shortcode een knop toevoegen of de huidige knop aanpassen door de code te veranderen.
