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.

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. Zowel in de Wordpress wereld als elders binnen Joomla heb ik geen 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. 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 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

Custom fields met de Zero app (Gridbox)

Ik laat je eerst 5 layouts zien die ik gemaakt heb. Dan komt daarna wel de lijst met alle voordelen van de Zero app. 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

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.

In de eerste afbeelding hieronder 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. 

In de tweede afbeelding hieronder laat ik je het belangrijkste scherm zien; 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.
In de tweede afbeelding zie je weer dat de pagina voor de webmaster van een verbluffende eenvoud is.

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. In de tweede afbeelding zie je weer de vakken die ingevuld moeten worden door de webmaster.

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


​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. Hoe je dit doet in Wordpress met bijvoorbeeld Metabox: https://metabox.io/create-product-pages/. Ga d'r maar aanstaan..




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

​Voorbeeld layout: Referenties

Ook referentie pagina's zullen af en toe moeten worden toegevoegd door de webmaster, aangezien het niet zo heel vaak voorkomt moet het eenvoudig zijn, dus dat de webmaster niet altijd denkt 'Hmm, hoe werkte het nou ook alweer.. ik bel de webbouwer wel.'

Linksonder laat ik je de overzichtspagina zien, rechtsonder weer de inmiddels bekende invuloefening voor de webmaster. Bij het bouwen van de overzichtspagina liep ik aan tegen een beperking in Gridbox Zero app, jawel, die blijkt er dus toch te zijn.. Velden konden niet verdeeld worden over 3 kolommen, 2 bleek het maximum. Daarom heb ik het veld 'Gebruikte systemen' maar als filter gebruikt, wat eigenlijk zowieso beter is denk ik.  


Voorbeeld layouts die worden aangedragen door Gridbox zelf​

Ook de ontwikkelaars van Gridbox 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 op een rij:

Zero app​ heeft 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 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. Zoals hierboven bij de layout 'Uitgebreide referentie pagina' reeds genoemd kunnen er 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 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 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 werd: 'Wordpress in spagaat qua 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: 

        • Stijle leercurve voor zowel 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.


        Conclusie

        De Gridbox Zero app is een geweldige tool 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 conent toe te voegen, eenvoudiger wordt het niet.

        De Zero app lijkt mij in veel gevallen een uitstekend alternatief voor het gebruik van plugins, custom fields oplossingen en zéker voor het gebruiken van standaard 'Post' (Wordpress) of 'Artikel' (Joomla) pagina's. 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.


        Tags