11 september 2019
Bijgewerkt op 5 november 2020

Dynamische website die eenvoudig bij te houden is (zonder plugins!)

Een website bestaat vaak uit pagina’s die om een verschillende layout vragen maar tegelijkertijd eenvoudig gevuld en aangepast moeten kunnen worden door de webmaster. Zo moet idealiter bijvoorbeeld een evenementspagina eenvoudig kunnen worden toegevoegd op de website door simpelweg een aantal velden in te vullen. Eigenlijk zoals je een formulier invult. Dàt is nu mogelijk, met de Zero app van Gridbox (Joomla) of met de Oxygen Builder (WordPress).

Het gemak waarmee de webmaster in de Zero app tekst in een speciaal vak (custom field) plakt of alleen maar een bepaalde datum hoeft te selecteren in een ander custom field zonder zich te hoeven bekommeren om de layout is uniek. Elders heb ik geen Joomla oplossing gevonden die mij persoonlijk net zo goed leek. Zéker als ik me bedenkt dat de Zero app geen aparte plugin is maar onderdeel van de website builder Gridbox en je dus gèèn custom fields plugin voor hoeft aan te schaffen en mee te leren werken. Alleen Oxygen Builder, een WordPress builder bood dezelfde functionaliteit, en meer. Ook ben je niet aangewezen op de beperkte custom fields mogelijkheden die er standaard in WordPress of Joomla zitten.

Naast de bestaande 6 methoden om custom layouts te maken, die verderop in deze post aan bod komen zijn er nu dus 2 manieren bijgekomen die eigenlijk alle nadelen van de andere methoden oplost; de Gridbox 'Zero app', meer daarover lees je in deze blog post op balbooa.com of op de Oxygen Builder website

Custom fields met de Zero app (Gridbox)

Ik laat je eerst 5 layouts zien die ik gemaakt heb met Gridbox en 1 met Oxygen Builder. Dan komt daarna wel de lijst met alle voordelen van de Zero app en van Oxygen Builder. Met de voorbeelden ga ik je laten zien dat het allemaal erg geavanceerd is maar tegelijkertijd toch super gebruiksvriendelijk werkt, voor zowel webbouwer als voor de webmasters. Want zij moeten al die dynamische pagina's gaan vullen en onderhouden.

Voorbeeld van wat je er allemaal mee kunt bouwen

Hieronder geef ik 5 voorbeelden van een layout die content bevat die is ingevoerd in custom fields van Zero app: 

  • Nieuwspagina
  • Evenementspagina
  • Training/kennissessie pagina
  • Catalogus 
  • Uitgebreide referentie pagina
  • Portfolio pagina

Je kunt je voorstellen dat deze 5 pagina's er idealiter anders uitzien en andere informatie bevatten, en andere informatie betekent andere 'custom fields'.

Voorbeeld layout: Nieuwspagina

Laten we beginnen met hoe een nieuwspagina er op de frontend van een website uit kan zien. Dan laat ik je daarna wel de schermen zien waar een niet-webbouwer in eerste instantie minder herkenning mee zal hebben.

Hier zie je dezelfde nieuwspagina maar nu zie je 'm zoals de webbouwer de pagina ziet als deze ontwikkeld wordt en uiteraard kan de pagina ook weer eenvoudig worden aangepast/uitgebreid. Deze pagina is tevens de plek waar de custom fields zoals bijvoorbeeld 'introtekst' kunnen worden aangemaakt en direct op de juiste plek worden gezet. Ook worden ze hier voorzien van de gewenste styling zoals lettertype en -grootte. Overal waar 'value' staat is een custom field geplaatst. 
Dit is de nieuwspagina zoals die te zien is voor de webmaster, in de backend van de website. De eenvoud van dit scherm dus zoals gezegd denken aan een formulier dat even ingevuld moet worden. Geen overload aan velden die je nog wel eens tegenkomt in speciaal voor een layout geschreven plugins, bijvoorbeeld een evenementen plugin.

​De layout van de pagina is zoals je hierboven zag al door de webbouwer vastgelegd dus daar hoef je je niet meer druk over te maken; als webmaster richt je je uitsluitend op het invullen van de velden. De foto die je hier (rechts bovenin) upload wordt, in dit voorbeeld, automatisch bovenin de pagina gezet, achter de titel die je hier hebt ingevoerd.

​Voorbeeld layout: Training/Kennissessie

Een pagina voor het publiceren van een kennissessie zal andere info moeten bevatten dan een nieuwspagina en wellicht is een andere styling gewenst. Zo kan de foto een doorschijnende blauwe laag krijgen ipv een oranje. Dan komt zo'n pagina er bijvoorbeeld zo uit te zien:

Achter de schermen, hieronder, zie je dat elk veld apart te stylen is maar ook kun je er groepen van maken zodat de styling maar 1 keer hoeft te worden ingesteld.
De pagina voor de webmaster is van een verbluffende eenvoud.

Voorbeeld layout: Evenement

Voor de layout van een evenementen pagina is ervoor gekozen geen afbeelding te laten zien, in plaats daarvan verschijnt er een oranje balk bovenaan dit soort pagina's.


Het veld datum is belangrijk dus dat is direct onder de titel gezet
Hoe de webbouwer o.a de grootte en de kleur ervan kan bepalen is te zien in de popup
De vakken die ingevuld moeten worden door de webmaster.

Voorbeeld layout: Catalogus (met filter!)

In onderstaande video laat ik zien dat je er ook totaal wat anders mee kunt bouwen dan voorgaande voorbeelden. In deze demo catalogus maak ik gebruik van de onlangs geintroduceerde filter plugin voor de Zero app. Daarmee kan gefilterd worden op velden van het type Select, Radio, Checkbox en Prijs. Dit is hoe je dat doet in WordPress met bijvoorbeeld Metabox.

Ook wil ik je de achterkant van deze demo laten zien die ik met de Zero app gebouwd heb: 

Naast de bestaande 6 methoden om custom layouts te maken, die verderop in deze post aan bod komen is er nu dus een manier bijgekomen die eigenlijk alle daarbij genoemde nadelen van de andere methoden oplost; de Gridbox 'Zero app', meer daarover lees je in deze blog post op balbooa.com

Voorbeeld layout: Portfolio op webdegelijk.nl

Hieronder een video waarin ik zowel mijn deel (het bouwen van de portolio pagina met Oxygen Builder) als het deel van de webmaster laat zien (het enkel moeten vullen van de velden van een WordPress 'post', in de categorie 'Portolio items'.

​Nu heb ik je alleen nog niet laten zien hoe de webmaster een nieuwe pagina aanmaakt, dat gaat makkelijker in bewegend beeld: 

Voorbeeld layouts die worden aangedragen door Gridbox en Oxygen Builder zelf​

Ook de ontwikkelaars van Gridbox en gebruikers van Oxygen Builder komen met voorbeelden, die lijken nog het meest op mijn catalogus demo, het zijn:

Type velden

Dit zijn de velden die gebruikt kunnen worden in de Zero app:

  • Tekst (1 regel)
  • Textarea (meerdere regels tekst)
  • Selecteer een waarde
  • Checkbox
  • Radio button
  • URL
  • Prijs
  • Nummer
  • Datum
  • Evenement datum
  • Tijd
  • Range
  • Upload file
  • Tag.
  • Google Maps;
  • Eenvoudige fotogallerij;
  • Slideshow;
  • Video;
  • Image;
  • Evenementen kalender.

Alle voordelen van de Zero app van Gridbox en Oxygen Builder op een rij:

  • Eenvoudig in gebruik voor zowel webbouwer als webmaster.
  • Updaten gaat automatisch met het updaten van Gridbox en Oxygen Builder
  • Aangemaakte items zijn voor de website bezoeker te filteren op allerlei velden, handig in bijvoorbeeld een catalogus. In Oxygen Builder heb je hiervoor helaas een aanvullende plugin nodig, facetwp.
  • Geen Php code hoeft er geschreven te worden, dit maakt je een stuk onafhankelijker van je webbouwer (of degene die php code schrijft voor hem).
  • Niet alleen velden van het type 'text' zijn mogelijk maar ook allerlei andere.
  • Consistentie in content en layout, het kan niet meer gebeuren dat de ene webmaster andere informatie invoerd of styling toepast dan de andere webmaster.
  • Geen kosten bij aanschaf nog bij implementatie, alleen aan het daadwerkelijk bouwen van de toepassingen (bijvoorbeeld ‘evenementen’ zijn kosten verbonden.
  • Geen aparte plugin dus geen conflicten met andere plugins.
  • De toepassingen zijn gemaakt met dezelfde app dus zijn exact hetzelfde ingericht dus als een webmaster bijvoorbeeld een evenement kan toevoegen dan kan hij ook bijvoorbeeld een catalogus item toevoegen.
  • Zoals alles in Gridbox en Oxygen Builder kan ook de indeling van de content app per beeldscherm worden bepaald (responsiveness is dus uitstekend)

Zero app​ en Oxygen Builder hebben toch vast ook wel nadelen?!

Nou... bijna niet eigenlijk. Ik zou er slechts 3 dingen kunnen noemen die er nu nog niet in zitten (maar wellicht binnenkort wel).
Ik vind dat in Gridbox Zero app de mogelijkheid moet bestaan het tonen van de 'label' uit te schakelen, dus dat alleen de waarde te zien is, nu is er een workaround maar die werkt niet prettig. Ik heb het de ontwikkelaar gemeld en hij beloofde een update, en dat betekend eigenlijk altijd dat die er ook komt.
Ook zou ik graag zien dat het mogelijk wordt de ingevoerde titel, afbeelding en datum afzonderlijk te kunnen gebruiken, het liefst dat ik de afbeelding ook ergens anders achter kan zetten dan achter de titel zoals nu het geval is. Ook deze wens heb ik gepost op het Gridbox forum, ze nemen het in overweging. 
​Tenslotte kijk ik erg uit naar het moment dat de categorie pagina ('overzichtspagina') net zoveel indelings/stylings mogelijkheden heeft als de single post pagina en als Oxygen Builder. Zoals hierboven bij de layout 'Uitgebreide referentie pagina' reeds genoemd kunnen met Gridbox geen 3 kolommen maar maximaal 2 worden gebruik op de overzichtspagina, ik heb daarom het veld 'Gebruikte systemen' weggelaten. Echter, dat veld bleek zich eigenlijk zowieso beter te lenen als 'filter veld', dus die heb ik in een filter aan de rechterkant gezet zodat de referenties daarop gefilterd konden worden. 

Andere manieren om verschillende layouts te gebruiken 

Je hoeft natuurlijk geen Zero app of Oxygen Builder te gebruiken om toch pagina's zoals ik hierboven laat zien te maken, je hoeft er zelfs geen custom fields voor te gebruiken.. Wel heb ik de afgelopen jaren ervaren, of gelezen, dat er een aantal nadelen aan kleven. Per methode noem ik die, zonder de pretentie te hebben daarmee een uitvoerige review te schrijven laat staan een complete vergelijking te maken tussen de Zero app of Oxygen Builder en betreffende methode. Stel dat je kiest voor gebruik van een plugin voor een specifieke toepassing of voor een custom fields plugin realiseer je dan dat daar veiligheidsrisico's aan zitten, voor Joomla wat minder dan WordPress, zoals dat laatst nog in BNR Nieuwsradio besproken erd: 'Wordpress in spagaat qua beveiliging'. Maatregelen die ik hier tegen neem lees je in mijn blog post over beveiliging.

Layout zónder custom fields, 3 opties:

  • Een plugin, voor bijvoorbeeld evenementen.
  • Een Page builder 
  • Een standaard Post (wordpress) of Artikel (joomla) voor elk nieuw item.

Layout mèt custom fields, weer 3 opties: 

  • Custom fields in Joomla of WordPress zelf ('build-in-function')
  • Custom fields functie in Divi builder
  • Custom fields plugin, dus een plugin die de build-in-function uitbreid.

Layout zónder custom fields

Plugins gebruiken

De meest voor de handliggende optie, vooral wanneer er veel pagina's zijn, is om voor alle layouts een plugin aan te schaffen en te implementeren. Bijvoorbeeld een plugin voor nieuws, eentje voor trainingen en een voor evenementen. Soms zijn er ook plugins waar verschillende pagina's mee gemaakt kunnen worden zoals ZOO van Yootheme.


Nadelen hiervan zijn:

  • Vrij kostbaar in zowel aanschaf als implementatie.
  • Plugins conflicteren soms met elkaar.
  • Stijle leercurve want webmaster moet met alle plugins leren werken; de webmaster moet tenslotte zelf trainingen, evenementen als nieuwsitems kunnen toevoegen..
  • Een update van de plugin moet afzonderlijk van de updates van de gebruikte page builder en het CMS worden uitgevoerd, omdat de plugin er geen deel van uitmaakt.

Een page builder pagina gebruiken

Voor alle typen pagina’s wordt een goed gestylde dummy versie gemaakt in bijvoorbeeld een van deze page builders: Divi, Elementor (WordPress) of Gridbox (Joomla).  Dat item kan vervolgens door de webmaster gekopiërd en aanpast worden voor elk nieuw item. Bijvoorbeeld: Voor een nieuwe cursus kopieer je een bestaande cursus pagina en ga je die aanpassen. 


Nadelen hiervan zijn:

  • Soms zal een webmaster al dan niet opzettelijk toch de layout aanpassen, en dat kan ongewenste gevolgen hebben voor andere pagina.
  • De content is niet filterbaar, dus bijvoorbeeld kan een overzicht van evenementen niet gefilterd worden op ‘Locatie’.

Een post maken en die hergebruiken voor elk nieuw item

Voor alle typen pagina’s maak je een Post (WordPress) of Artikel (Joomla) en die hergebruik je voor elk nieuw item. Het voorbeeld van hierboven geldt hier ook: Als je een nieuw item wilt toevoegen bijvoorbeeld een nieuwe cursus kopieer je een bestaande cursus pagina (post of artikel dus) en ga je die aanpassen. 


Nadelen hiervan zijn:

  • Consistentie in content is in het geding; de ene keer vermeld de webmaster bij een training voor wie de training bedoeld is de andere keer vergeet hij dit.
  • Ook is de consistentie van layout in het geding, aangezien de ene webmaster de trainingslocatie vetgedrukt maakt en een andere webmaster dat niet doet.
  • De content is niet filterbaar, dus bijvoorbeeld kan een overzicht van evenementen niet gefilterd worden op ‘Locatie’.

Layout mèt custom fields

Custom fields in Joomla of WordPress zelf ('build-in-function') gebruiken

Met de build-in-function 'custom fields' kunnen er in o.a Joomla en WordPress ook velden worden toegevoegd.

Nadelen:

  • Php code moet geschreven worden, dit maakt je een stuk afhankelijker van je webbouwer (of degene die php code schrijft voor hem).
  • Alleen velden van het type 'text' zijn mogelijk.

Custom fields in Wordpress page builder 'Divi builder'

Wat kan met Zero app kan sinds een jaar ook al met de page builder 'Divi builder' van Elegant themes

Nadelen:

Custom fields plugin (WordPress) gebruiken

Er zijn een aantal custom fields plugin geschreven voor WordPress. De bekendste zijn Advanced custom fields, Toolset, Meta box en Pods. 

Nadelen: 

  • Steile leercurve voor de webbouwer als webmaster.
  • Een update van de plugin moet afzonderlijk van de updates van de gebruikte page builder en het CMS worden uitgevoerd, omdat de plugin er geen deel van uitmaakt.

Voordelen: 

  • Vlakke leercurve voor de webmaster want de custom fields bevinden zich in de welbekende WordPress "Posts" en "Pages", dus in feite in de bestaande WordPress omgeving en niet in een nieuw deel daarvan.

Conclusie

De Gridbox Zero app en Oxygen Builder zijn geweldige tools waarmee je heel veel soorten dynamische pagina’s, ‘content apps’, kunt bouwen. De content is daarbij ook nog eens filterbaar voor de website bezoeker. Ook de webmaster ervaart het gemak; hij/zij vult een soort van formulier in om content toe te voegen, eenvoudiger wordt het niet.

De Zero app of Oxygen Builder lijkt mij in veel gevallen een uitstekend alternatief voor het gebruik van plugins, custom fields oplossingen en zéker voor het gebruik van standaard 'Artikel' (Joomla) of 'Posts' (WordPress) pagina's zonder custom fields. Dit omdat er aan deze methoden om een dynamische website te bouwen een aantal nadelen kleven. Zoals o.a een stijle leercurve (want ‘Wéér een ander systeem’), hogere kosten, mogelijke conflicten met andere plugins of een gebrek aan consistentie in layout en/of content.

Paul Borkent
Als zzp'er ontwikkel ik websites en Google Ads campagnes voor verschillende branches zoals zakelijke dienstverlening, metaal, zorg, wetenschap. Dat doe ik voor zowel B2B als B2C. Ik verdiep me regelmatig in de actuele stand van de techniek, marketing en design om de ambities van mijn klanten te kunnen blijven bijbenen.
© 2004-2020 Webdegelijk
eye-slashlinkedin-square