
Kadence WPEenvoudig website ontwerp
In drie weken een redesign inclusief leercurve.
Een paar maanden geleden kreeg ik een opdracht voor de redesign van een website. De oude website was in Wordpress gemaakt door een webbedrijfje. Zij hadden hiervoor een eigen thema inclusief template gemaakt wat echter na een onderzoek zo beperkt bleek om zelf aanpassingen in door te voeren – je kent ze wel, die bedrijfjes die je voor iedere aanpassing die je laat doen een factuurtje sturen – dat we besloten, het kleine team verantwoordelijk hiervoor en mijzelf, de website helemaal van de grond af opnieuw op te bouwen.
Het is een paar jaar geleden dat ik een website in Wordpress heb gebouwd voor een klant en zoals je hebt kunnen lezen in Praatje 3 en Praatje 9 ben ik een voorvechter voor toegankelijke sites met schone code. Daarom heb ik deze website met Textpattern gemaakt, een cms waarbij je het schrijven van html en css helemaal zelf in de hand hebt. Hier kun je alles over lezen in de genoemde artikelen. Dat was voor deze opdracht geen optie gezien de snelheid waarmee het e.e.a moest gebeuren. Ook het in de toekomst mogelijk integreren van een webshop maakt de keuze voor WP een voor de hand liggende.
De zoektocht startte naar een geschikt thema (en template) om de beoogde doelstellingen zowel tekstueel als visueel een mooie en juiste plek te kunnen geven. Na enkele vruchteloze pogingen stuitte ik bij het lezen van een artikel op Kadence WP. Specifiek omdat nadrukkelijk werd vermeld dat het hier om een thema gaat dat met schone en toegankelijke code werkt die je als beheerder ook zelf kan beïnvloeden. Dat klonk goed. De website van Kadence bleek een goede informatiebron te zijn en ik kreeg al snel het gevoel dat dit het wel eens kon zijn. Dus ermee aan de slag.
Blocks
Kadence werkt zoals zoveel themas ook met zogenaamde blocks, een uitbreiding of vervanging van de bestaande (Gutenberg) wp-blocks die WP standaard biedt. Een block is een specifiek content element dat je op een pagina kunt plaatsen, bijvoorbeeld een paragraaf of een afbeelding en heeft een aantal opties om het te stijlen. De code wordt automatisch gegenereerd. De kracht van Kadence zit ‘m in de lay-out blocks vind ik. De flex
en grid
blocks zeg maar. Deze zijn standaard responsive maar kunnen ook heel nauwkeurig worden aangepast aan de behoefte (lees: content) op je website. Een ruime keuze aan instelmogelijkheden zorgt ervoor dat je een pagina minutieus kunt vormgeven. Erg mooi. Een bonusoptie is wel dat het standaard html wrapper element div
kan worden gewijzigd. Dus wil je een section
of aside
element? Mogelijk.
AI
Op het web zie je al veel mogelijkheden om met AI de mooiste dingen te creëren. Photoshop genereert unieke achtergronden voor je afbeelding als je dat wilt. Kunstenaars creëren(?) met AI. En met Kadence kun je AI gebruiken om je eigen thema/template te ontwerpen. Vul een aantal gegevens over je business in en voilà, AI maakt een aantal templates voor je met voorbeeldteksten en in een stijl die bij je business past. Althans, dat hoop je en het gaat natuurlijk lang niet altijd zoals je het zou verwachten. Maar ik zie het als een goed uitgangspunt. Want natuurlijk wil je, als designer en ontwikkelaar, je eigen stempel op het ontwerp drukken. Gelukkig is dat heel goed mogelijk met Kadence. Een eigen kleurenpalet en letterfamilie is vanzelfsprekend. Daarnaast bieden de lay-out blocks zoveel opties dat het zeer goed mogelijk is een uniek ontwerp te maken.
En die schone code dan?
Natuurlijk wordt er ontiegelijk veel code geschreven door WP en het gebruikte thema. Een blik op de paginabron (page source) laat dat meteen zien. Vergelijk het maar eens met de code van een pagina op deze site. Dat lijkt onvermijdelijk en hoeft ook helemaal niet erg te zijn. Want als je zuiver naar de content code <body/>
kijkt valt het eigenlijk erg mee. Veel div
s maar dat kun je dus zelf beïnvloeden (ik kwam er jammer genoeg te laat achter en ik pas het niet graag in de live-omgeving aan)
Wel spijtig vind ik het gebruik van het article
element dat de gehele pagina beslaat, net onder het main
element. Wanneer je naar de code kijkt zie je dat het er op lijkt dat Kadence denkt dat je met een blog te maken hebt. Of het is standaard WP structurering ik weet het niet. Het is toch eenvoudig na te gaan of je met (dynamische) blog posts te maken hebt of met (statische) pagina’s? Die keuze maak je namelijk specifiek in WP. Nu zie je zoiets: <article id="post-884" class="entry content-bg single-entry post-884 ..........">
Daar zit de hele pagina-inhoud in. Nu kun je zeggen dat bij gebrek aan verschillende posts de hele pagina als één article
kan worden gezien. Want tenslotte, de inhoud is gerelateerd aan elkaar (echt! een pagina about us bevat geen hoofdstuk over het weer) en dat is een voorwaarde voor het gebruik van een article
element. Tsja. Ik zie geen toegevoegde waarde voor het gebruik op deze manier. Liever zie ik de pagina verdeelt in verschillende section
s. Met een kop en een stukje content. Een div
element is absoluut niet fout maar biedt weinig structureel soulaas.
Conclusie
Het werken met Wordpress en Kadence is me erg bevallen en na een korte leercurve is het me gelukt om in een relatief korte tijd een compleet nieuwe website te bouwen. Ik heb de gratis versie van Kadence gebruikt want er zijn upgrade plannen te koop waarbij je jaarlijks een bedrag betaald. Logisch, je wilt natuurlijk wel beleg op je boterham. Deze betaalde versies hebben meer mogelijkheden wat betreft het aantal blocks (en soms ook de mogelijkheden in een block) en de hoeveelheid templates waaruit je kunt putten. Ook de WooCommerce optie zit in de betaalversie. Maar tot nu toe kon ik goed uit de voeten met de basisversie.
Praatje #15 is op 14 december 2024 geplaatst