Client Mode in Oxygen Builder

Mogelijkheden voor de klant om een Oxygen site te kunnen aanpassen

Met de introductie van Oxygen 3.6 in november 2020 er is een mogelijkheid gekomen klanten om de Oxygen editor te gebruiken. Tot die tijd was Oxygen alleen toegankelijk voor gebruikers met een beheerders login. Klanten waren aangewezen op de Gutenberg editor waarvoor een plugin bestaat voor Oxygen. Die werkte echter niet altijd op een manier waarop je dat zou willen, verderop in dit artikel meer daarover. Daarom is de Client Mode waarmee beperkte rechten voor klanten kunnen worden ingesteld een zeer welkome functie. De functie is beschikbaar voor iedereen met een Oxygen Agency license.

Client Mode

Voor een bepaalde rol, bijvoorbeeld een WordPress ‘editor’ kan worden ingesteld of deze ‘Full access’, ‘No Access’ of ‘Edit Only’ toegang moeten krijgen. Full Access is wat je meestal niet wilt want dan zou een klant ook toegang krijgen tot het aanpassen van Global settings, Stylesheets, of CSS Selectors (zoals je op de afbeelding hierboven zag) dus ik ga hier verder in op “Edit only” omdat je hiermee mooi kunt instellen wat de klant wel en niet moet kunnen, daarmee maak je een goed evenwicht is tussen dat de klant veel zelf kan doen zonder dat het onoverzichtelijk is doordat je de klant opzadelt met allerlei knoppen/mogelijkheden die bijna nooit gebruikt zullen worden. Het voorbeeld van het resultaat zie je hieronder.

Edit-only rechten 

Om een klant teksten te kunnen laten aanpassen geef je toegang tot de elementen van het type Rich text, Text, Afbeelding, Video en tenslotte het Shortcode element. Een shortcode element kan gebruikt worden voor formulieren, elk formulier heeft een specifieke shortcode waarmee het formulier getoond kan worden. De overige Oxygen elementen zijn vaak te complex en komen te weinig voor om zelf te kunnen toevoegen. Door het mogelijk te maken dat een gebruiker zelf bepaalde elementen kan toevoegen wordt het voor die gebruiker ook mogelijk die elementen zelf te verwijderen, dus als een element van het type ‘Slider’ niet toegevoegd is zal de klant ook niet de mogelijk hebben het element per ongeluk te verwijderen. 

Overige rechten die zijn in te stellen via Client Mode zijn

Rechten instellen op gebruikers niveau

Niet alleen op gebruikers rol niveau kunnen rechten worden ingesteld, ook op gebruikers niveau, dus de ene user met editor rechten kun je weer andere rechten toekennen dan dan de andere gebruiker met editor rechten. 

Lock Post In Edit Mode

Een mooie aanvulling op het kunnen opleggen van alle bovengenoemde specifieke beperkingen is het kunnen uitsluiten van complete pagina’s om aangepast te kunnen worden door een niet-beheerder. Dat doe je door een vinkje te plaatsen bij: "Lock Post In Edit Mode". Dat raad ik aan altijd te doen voor template(s) en meestal ook sommige re-usable blocks.

Oxygen Gutenberg plugin 

De Gutenberg plugin voor Oxygen, dankzij die plugin kan de webmaster binnen de bekende Gutenberg editor zelf pagina’s aanpassen. Het werkt zoals het bedoeld is, alleen is dat in dit geval helaas niet zoals je zou willen. Als deze plugin gebruikt wordt mag namelijkj in de Oxygen editor de content niet meer worden aangepast, alleen de stijl. Eigenlijk wil iedere website bouwer content ook kunnen aanpassen in de Oxygen omgeving. De workaround die sommigen gebruiken is ACF velden, maar dat is erg omslachtig. Het niet meer kunnen aanpassen van de content is dus geen bug maar een bewuste ontwerp keuze, waar ik dus niet achter sta, en met mij vinden meer mensen dat valt te lezen in de facebook groep voor Oxygen ontwikkelaars maar aangezien die besloten is geeft ik links naar andere plekken: https://github.com/soflyy/oxygen-bugs-and-features/issues/798 en https://github.com/soflyy/oxygen-bugs-and-features/issues/1067. Mocht je (klant) nou toch zo verknocht zijn aan het werken binnen de Gutenberg editor dat een ander editor geen optie is, houd dan deze regel aan om te voorkomen dat er meerder versies van 1 pagina kunnen ontstaan: Content wijzigingen doe je in de Gutenberg editor, layout wijzigingen in de Oxygen editor. Dit omdat de wijzigingen die in de Editor gedaan zijn dus niet gesynchroniseerd worden met de pagina als deze in de Oxygen editor geopend wordt. De elementen zijn dus in feite mini-templates geworden voor de content die in Gutenberg geupdate kan worden.
Kortom, het is erg fijn dat Oxygen nu met de introductie van Client Mode een alternatieve, betere, manier heeft aangeboden om de webmaster prettig te kunnen laten werken in de website, De webmaster heeft hiermee toegang heeft tot een uitgeklede, kan-niets-kapot-maken-versie van Oxygen om daarin pagina’s aan te passen. 

Oxygen is geen multi-user en multi-tab omgeving

Vanwege de manier waarop er in Oxygen global styles, classes, en settings aangepast kunnen worden is het niet modelijk met meerdere users tegelijkertijd te werken in de Oxygen editor, ook is multi-tab gebruik af te raden om veilig gebruik te kunnen waarborgen. Dit staat te lezen op https://oxygenbuilder.com/documentation/other/multi-user-editing-edit-locking/.

Wanneer de editor al door een andere gebruiker geopend is of wanneer de editor door jouzelf al in een andere tab al gebruikt wordt krijg je daarvan als beheerder een melding, gebruikers met minder rechten helaas niet. “Oxygen is open in another tab or by another user. Please close the other instance of the builder and refresh this page to edit.” Users met beheerders rechten hebben de mogelijkheid “Open anyway” te klikken en dan alsnog de pagina’s te openen. 

Het woord ‘veilig’ op de Oxygen documentatie pagina wekte mijn nieuwsgierigheid. Ik kon 2 manieren vinden waarbij het toch veilig is om de Oxygen editor meerdere keren geopend te hebben. Deze manieren zijn meestal best acceptabel maar alleen bij multi-tab gebruik, dus nooit bij multi-user gebruik:

Conclusie

WordPress voorziet al sinds jaar en dag in het perfect op maat kunnen aanbieden van login rechten, zodat klant niet per ongeluk een site om zeep kunnen helpen, met soms hoge herstelkosten als gevolg. Oxygen sluit hier nu mooi bij aan, weliswaar met de beperking dat er niet tegelijkertijd door meerdere users in de Oxygen editor gewerkt kan worden maar door pas een login af te geven wanneer de site live staat kan het ongemak voor het grootste deel worden voorkomen.

Wil je ook een eigen login voor Oxygen? Ik kan een overzichtelijke omgeving inrichten waarbij je alleen de onderdelen ziet die je zelf wilt kunnen aanpassen, daardoor kun je snel wijzigingen doorvoeren en voorkom je herstelkosten wanneer je via een login met maximale rechten per ongeluk de verkeerde onderdelen van de site aanpast. Ook maak ik een beknopte handleiding die je erbij kunt pakken als je er even niet uitkomt.

"Waarom is mijn site niet vindbaar in Google?"

Dus deze blog gaan niet over “Off-page” SEO?

Dat klopt, Off-page gaat over factoren die niet direct op je pagina of zelfs website te vinden zijn. Dat betekent dat je bij Off-page SEO andere websites nodig hebt om je rankings te verbeteren. Dat doe je voornamelijk door te linkbuilden. Om daar toch nog wat verder op in te gaan: Linkbuilden doe je door je content onder de aandacht te brengen, o.a op social media. Een garantie dat ook echt backlinks gaat opleveren heb je niet. Welke backlink zorgt voor betere SEO? Het draait allemaal om relevantie, dus kijk naar de inhoud, de website en de doelgroep. Ga niet in zee met linkfarms. Als je besluit aan de slag te gaan met het verkrijgen van backlinks, bouw deze dan geleidelijk op en wees geduldig. Want alleen kwaliteitslinks van relevante websites dragen bij aan betere SEO. Het web is enorm groot en de mogelijkheden om backlinks te krijgen zijn bijna eindeloos. Je positie in Google zal niet stijgen als je een backlink krijgt van een irrelevante site die niet past bij de content op je webste.

De pagina titel

Dan nu echt meer over On-page SEO, we beginnen met de titel.

Lengte van de titel

De titel van elke pagina is een belangrijke factor voor zoekmachineoptimalisatie. Een titel wordt weergegeven in de zoekresultaten, dus het is belangrijk om deze zo relevant mogelijk te maken voor de zoekopdracht. Elke pagina op internet heeft een title-tag en veel zoekmachines geven de title-tag weer in hun zoekresultaten. De title-tag is ook een van de eerste dingen die een bezoeker ziet nadat hij op een website is aangekomen. Als de titel lang is, is de kans groot dat je bezoeker meer tijd zal besteden aan het lezen van de titel dan aan de inhoud op de pagina.

Zoektermen in de titel

Als je wilt dat inhoud wordt weergegeven in zoekresultaten wanneer gebruikers naar specifieke woorden zoeken, is het belangrijk om die zoektermen al in de titel op te nemen, en niet alleen in de tekst. Zoekmachines gebruiken verschillende vormen van de zoekwoorden om een ​​website te classificeren. Zo worden er bijvoorbeeld synoniemen, spelfouten en afkortingen gebruikt om je site beter te indexeren. Dat doet Googlel omdat niet alle mensen dezelfde woorden gebruiken, terwijl ze wel op zoek zijn naar dezelfde informatie. "Badjas" en "duster" is een mooi voorbeeld van 2 verschillende woorden voor hetzelfde product.

Begin de titel idealiter met een zoekterm

Als je wilt dat jouw title-tag de positie in de zoekresultaten beïnvloedt, moet deze nauw verband houden met de zoekopdracht. Als Google ziet dat de titel een zoekopdracht bevat, levert dit u een concurrentievoordeel, met als gevolg een hogere plek in de zoekresultaten.
Als je de positie in de zoekmachines van de website wilt verbeteren, is het belangrijk ervoor te zorgen dat de title-tag volledig is geoptimaliseerd. Door de doelzoekopdracht toe te voegen aan de title-tag, kun je een hogere zoekmachine-ranking behalen dan wanneer je de zoekopdracht weglaat uit de title-tag. Dit komt omdat zoekmachines de voorkeur geven aan title-tags die relevanter zijn voor de zoekopdracht.

Vermijd dubbele titels

Dubbele titels kom je geregeld tegen. Misschien hoop je je ranking een boost geven te kunnen geven door dubbele titels te gebruiken. Er zijn echter betere manieren om dat te realiseren. Veel SEO-experts zijn van mening dat dubbele title-tags een van de redenen zijn waarom websites niet zo goed scoren als ze zouden kunnen. Het is soms niet zo eenvoudig om dubbele title-tags te ontdekken. Voor WordPress zijn er meerdere plugins voor beschikbaar.

Meta teksten

Lengte van de meta beschrijving

Een metabeschrijving is bedoeld als een korte beschrijving van de inhoud van de webpagina. De zoekmachines gebruiken de beschrijving om de pagina in de zoekresultaten te rangschikken. Een metabeschrijving is niet bedoeld als een soort lokkertje om te klikken. Het moet een beknopte samenvatting te zijn van de inhoud van de pagina. Zoekmachines beperken de lengte van de metabeschrijving tot 160 tekens, daarom is de aanbevolen grootte 50-160 tekens. De lengte is geen vaste waarde, en zelfs de zoekmachines verschillen in hun benadering van de lengte van de metabeschrijving.

Zoektermen in de meta beschrijving

De metabeschrijvings is een stukje tekst dat wordt gebruikt om een ​​webpagina te beschrijven. Dit fragment wordt (soms) door zoekmachines gebruikt om een ​​fragment van een webpagina te maken voor weergave in de lijst resultaten. De metabeschrijving wordt ook gebruikt om gebruikers inzicht te geven in de inhoud van de webpagina en wat deze bevat. De meta description tag is een belangrijk hulpmiddel voor zowel zoekmachines als gebruikers.

Vermijd dubbele meta beschrijvingen

Metabeschrijvingstags zijn niet altijd gemakkelijk te schrijven, niet alleen omdat ze kort zijn en veel informatie moeten bevatten, maar omdat ze ook uniek moeten zijn. Als een site dubbele metatags gebruikt, zal de site er niet alleen dubieus uitzien voor Google, maar ook voor gebruikers, met een negatief gevolg voor hoe goed je site scoort in Google, en dus op het aantal bezoekers.

URL

URL lengte

Hoe lang moeten urls zijn? Google geeft 78-80 tekens van een pagina-URL weer in de zoekresultaten pagina. Door beschrijvende namen voor webpagina's te gebruiken, kun je de inhoud van de website gemakkelijker en correcter laten crawlen door Google, wat uiteindelijk resulteert in een betere ranking. Uit Google-gegevens blijkt verder dat korte URL's twee keer zoveel klikken krijgen als langere. Zelf vraag ik me wel af of er inderdaad een causaal verband bestaat of dat er slechts correlatie bestaat. Immers, de SEO mensen die achter die goed scorende sites zitten hebben vast ook meer dingen goed gedaan hebben dan de lengte van de urls.

URL moet een zoekterm bevatten

Voorzie de URL's van belangrijke zoektermen. Dat maakt het gemakkelijker om te onthouden en gemakkelijker om naar te linken. De URL wordt zichtbaar in de SERP en de zoekopdracht wordt gemarkeerd. Door de zoekopdracht in de URL te gebruiken, worden zowel de URL als de zoekopdracht gemarkeerd in de SERP. Dit maakt het voor de gebruiker gemakkelijker om op het resultaat te klikken en door de website te navigeren.
Bij een On-page SEO strategie is het zaak om het aantal zoektermen per pagina niet te overdrijven. Concentreer je op het gebruik van een klein aantal relevante zoekwoorden (2-3) die nuttig zullen zijn voor je gebruikers.

Gebruik in de URL een streepje tussen de woorden

Zoekmachines raden aan om koppeltekens te gebruiken in plaats van onderstrepingstekens, omdat zoekwoorden die door koppeltekens worden gescheiden, eigenlijk als gescheiden worden "gezien". Dus als een URL bijvoorbeeld de zinsnede "koop_boeken" bevat, dan zullen zoekmachines dit tonen voor de zoekopdracht "koop_boeken", en wie zoekt daar nou op? Een pagina-URL die "boeken-kopen" bevat, zal als relevant worden beschouwd voor de beoogde zoekopdracht, namelijk "boeken kopen".

Het gebruik van hoofdletters

Het gebruik van hoofdletters in URL's is een manier die ooit werd gebruikt om het belang van een bepaalde pagina aan te geven. Net als bij andere, voorheen gangbare, maar dubieuze SEO-praktijken, heeft Google dit idee de rug toegekeerd. Vandaag de dag is het belangrijker dan ooit om je te houden aan de richtlijnen van Google in plaats van verouderde SEO-praktijken. Deze richtlijnen stellen dat je altijd kleine letters moet gebruiken in alle delen van de URL, inclusief het domein, protocol, pad en bestandsnaam.

Afbeeldingen

Naam en alt-attribuut van afbeeldingen

In de begintijd van SEO werden afbeeldingen vaak over het hoofd gezien. Het alt-attribuut werd gezien als een handige plek om trefwoorden voor een pagina in te voegen en er werd niet vaak aan veel meer gedacht. Maar naarmate zoekmachines evolueerden en geavanceerder werden, groeide ook hun begrip van alt-attributen en hoe deze zouden moeten worden gebruikt. Tegenwoordig zijn afbeeldingen een essentieel onderdeel van elke succesvolle SEO-campagne. Het verbeteren van de manier waarop je alt-attributen en afbeeldingsbestandsnamen gebruikt, is een van de gemakkelijkste manieren om SEO op de pagina te verbeteren. Wanneer je een website optimaliseert, is het goed ervoor te zorgen dat afbeeldingen de juiste naam hebben en alt-attributen hebben die relevant zijn voor de bestandsnaam van de afbeelding.
Bij het upload van een afbeelding wordt vaak de naam van de afbeelding niet gewijzigd, waardoor je een nietszeggende naam als ‘IMG_1234.jpg krijgt. Het is beter om deze naam aan te passen naar een duidelijke naam zodat zoekmachines makkelijker te weten komen wat er op de foto staat.

Als je wilt dat een afbeelding goed scoort, moet je een alt-attribuut gebruiken dat de afbeelding goed beschrijft. Het alt-attribuut moet een korte beschrijving zijn van waar de afbeelding over gaat. Zorg er tevens voor, indien mogelijk, dat het alt-attribuut het trefwoord bevat. Het alt-attribuut is een tekst die wordt getoond als de afbeelding om wat voor reden dan ook niet kan worden getoond.

Streepje gebruiken ipv underscores in bestandsnamen

Een goede reden om onderstrepingstekens in bestandsnamen te vermijden, is dat sommige zoekmachines onderstrepingstekens, underscores (_)interpreteren als "lettertekens", terwijl koppeltekens, een streepje (-) worden "gezien" als een spatie. Dit geldt ook voor steepjes en underscores in URLs zoals ik hierboven al verteld heb.
Gebruik dus geen onderstrepingstekens in de namen van afbeeldingsbestanden maar in plaats daarvan koppeltekens. De algoritmen van Google zullen de bestandsnaam eerder matchen met de gebruikte zoekterm.

Gebruik unieke afbeeldingen

Zoekmachines kunnen zoals wellicht bekend zien of een tekst uniek is. Dat geldt ook voor afbeeldingen. Het gebruik van unieke afbeeldingen wordt als een positieve ranking factor beschouwd. Dus bij het plaatsen van een afbeelding op de website moet je eenb afweging maken tussen de kosten van een unieke foto en het nadelige effect van het gebruik van stock afbeeldingen. Ook kun je stock afbeeldingen aanpassen of combineren met andere afbeeldingen zodat ze toch als uniek gezien zullen worden door Google. Soms bestaat er op stock afbeeldingen sites de mogelijkheid te zoeken op datum van toevoegen, of kun je zelfs zien hoe vaak een afbeelding al gebruikt is dus doe ook daar je voordeel mee.

Content

Lengte content

De aanbevolen lengte voor een WordPress-pagina is 500-1000 woorden. Dit varieert afhankelijk van het type pagina, maar de meeste experts zijn het erover eens dat een goed startpunt 500 woorden is. Dit omvat alle inhoud op de pagina, inclusief de titel, de inhoud, de metabeschrijving, het metatrefwoord en de metatags.

Unieke content

Het uniekheidspercentage is een maatstaf voor hoe vaak Google de inhoud van een website is tegengekomen op andere websites. Zoekmachines herkennen de unieke inhoud als origineel en kunnen deze sites een betere positie geven in de zoekresultaten.

Dubbele inhoud

Dubbele inhoud kan een reëel probleem zijn voor SEO. Een van de belangrijkste redenen waarom Google een site negeert of zelfs bestraft, is dubbele inhoud. Wanneer dezelfde tekst (of in ieder geval vergelijkbare tekst) op meerdere pagina's voorkomt, zien de spiders van zoekmachines dit als een probleem, omdat ze niet weten welke van de pagina's ze moeten rangschikken. Als je dezelfde inhoud hebt op je site als een concurrent, loopt je dus mogelijk waardevolle kansen mis in Google.

De "canonical link"

De "canonical link" is een HTML-element dat webmasters gebruiken om problemen met dubbele inhoud te voorkomen. Met het rel = "canonical" -element kun je aangeven welke versie van een webpagina je beschouwt als de voorkeur versie. Als er meerdere versies van de pagina zijn, zullen de zoekmachines de gewenste pagina in de zoekresultaten tonen.

Voorzie content (aan het begin) van de juiste zoektermen

Zoekmachines als Google gebruiken woorden op webpagina's om hun relevantie voor bepaalde zoekopdrachten te bepalen. Daarom is het belangrijk de zoektermen waarop jouw organisatie zich richt te gebruiken in de inhoud van de pagina. Dat klinkt als een open deur maar wordt nog vaak vergeten. Vroeger was zoekwoordgerichte SEO voldoende om goed gevonden te worden, tegenwoordig komt er meer bij kijken om goed gevonden te worden.

Als je van plan bent content te schrijven voor een WordPress site, is je uiteindelijke doel om deze inhoud te optimaliseren voor de zoekopdracht en te ranken in Google, zodat de content de doelgroep bereikt, zonder vindbaarheid, geen lezers. Zoektermen die aan het eind van een pagina geplaatst worden zullen minder bijdragen aan de ranking dan zoektermen die in de eerste 100 woorden gebruikt worden. Bij zoekmachineoptimalisatie (SEO) draait het erom bezoekers naar de website te halen en ze vervolgens lang genoeg te laten blijven om de content te lezen, interessant te vinden en over te gaan tot conversie, bijvoorbeeld contact opnemen.

Zoekterm dichtheid

Zoekterm dichtheid is de verhouding tussen (zoekopdrachten) in de tekst en het totale aantal woorden op de pagina. WordPress-pagina's met een geoptimaliseerde zoekwoorddichtheid scoren hoger bij zoekmachines, tenzij een overload aan zoektermen in een zin de leesbaarheid nadelig beinvloed, dan is het natuurlijk juist weer een nadeel. Aangezien de algoritmen van zoekmachines echter voortdurend veranderen, kan de waarde van de trefwoorddichtheid ook variëren.

(Paragraaf) koppen

Google is altijd op zoek naar manieren om de gebruikerservaring van hun zoekmachine te verbeteren. Met H-tags kun je de leesbaarheid van de inhoud verbeteren en op die manier de gebruikerservaring verbeteren. Het gebruik van H1-H6-tags is bedacht om zoekmachines een structuur te bieden voor de onderwerpen op een webpagina. Elke keer dat de webmaster een nieuwe post maakt moet hij de H-tags invullen waar ze nodig zijn. Als het bericht bijvoorbeeld gaat over de rechten van kinderen en je schrijft het eerste paragraaf over de rechten van kinderen op van de leeftijd 0-4 jaar, dan zul je daarvoor de H2-tag moeten gebruiken.
De H1 wordt gebruikt om de titel van de pagina te definiëren. Op deze WordPress blog pagina gebruik ik de H1-tag en meerdere H2-, en H3-tags

Zoektermen in H1-H6 tags

H1-H6-tags zijn tekstkoppen die worden gebruikt om de inhoud van een pagina op de juiste manier te structureren en om zoekmachines en gebruikers te helpen snel een beeld te krijgen van de de inhoud van de pagina, om die reden zet ik ze, in een blog artikel, ook altijd nog even onder elkaar in een kader, direct onder de intro van het blog artikel. Dat doe ik overigens met het TOC element van Oxygen, dat onlangs werd geintroduceerd.
Dus als je wilt dat bezoekersaantallen door het dak gaan, gebruik dan je zoektermen in de H1-H6-tags van je pagina. Zoekmachines hechten meer waarde aan de zoektermen in de hoofdkop van je pagina, dus maak daar gebruik van.

Totaal aantal zoektermen

Het doel van een website is om geïnteresseerde mensen aan te trekken en hen de informatie te geven die ze nodig hebben om, uiteindelijk een ​​aankoop te doen of zich aan te melden voor een dienst. Om dat te doen, moet een website-eigenaar goed weten welke zoektermen zijn potentiële bezoekers gebruiken om de informatie te vinden die ze nodig hebben. Hoe relevanter die zoekwoorden zijn voor de doelgroep, hoe hoger je scoort op Google, wat meer meer hits voor je website betekent.

Outbound en internal links

Om hoog te scoren in Google moet je o.a linken naar relevante sites. Links van andere sites zijn belangrijk voor zoekmachineoptimalisatie (SEO). Zoekmachines zoals Google gebruiken die links om de populariteit en relevantie van een site en de positie ervan te bepalen.

Interne links zijn links naar een ander pagina's op dezelfde website. Interne links zijn een belangrijk onderdeel van de SEO-inspanningen van een website. Door te linken naar andere pagina's op de website, krijgen de zoekmachines informatie dat de website met elkaar verweven en samenhangend is. Ook hier geldt, overdaad schaadt, het beste is om alleen relevante links te maken.

Laadtijd van een website

Dat de score voor de laadsnelheid belangrijk is realiseer je je pas echt als je lang moet wachten totdat een webpagina (helemaal) geladen is. Voor een pagina met een goede laadsnelheid score is de gemiddelde laadsnelheid van de pagina ongeveer twee seconden. De score voor laadsnelheid van pagina's, geschat door Google, vergelijkt de laadsnelheid van een website met miljoenen andere websites in de database van Google op een schaal van 0 tot 100. Hoe hoger de waarde, des te beter. Als de laadsnelheidsscore van een webpagina ergens tussen de 85 en 100 ligt, wordt dat als uitstekend beschouwd. De beste manier om je bezoekers de frustratie van lang moeten wachten te besparen, is door je pagina te optimaliseren, dit doe je door je afbeeldingen te optimaliseren, de hoeveelheid javascript, CSS op je pagina zoveel mogelijk te verminderen en door je website te comprimeren. Zelf heb ik me jarenlang bezig gehouden met het uitvoeren van optimalisaties maar gelukkig nu een stuk minder, want de builder waar ik nu veel mee werk, Oxygen builder, brengt geen overbodige code met zich mee, die dus ook niet geladen hoeft te worden.

"Trage websites suck” is een uitdrukking die je vaak zult tegenkomen op SEO-forums. En ook Google neemt snelheid mee als ranking factor en bepaalt of je site hoog in de zoekresultaten komt te staan ​​bij gewenste keywords en verhoogt de conversieratio. Want wanneer een bezoeker op je website terechtkomt, kijken ze een seconde of twee naar je pagina en als deze in die tijd niet wordt geladen, gaan ze er van uit dat er problemen zijn, verlaten ze de pagina en komen wellicht ook niet meer terug. Het bouncepercentage neemt hierdoor onnodig toe.
Ook zoekmachine Bing heeft aangegeven dat als een site langzaam laadt, dit ervoor kan zorgen dat mensen een frustrerende ervaring hebben en dat ze de site zullen verlaten voordat ze hebben gevonden wat ze zochten.
Dus als je website traag is, loop je potentiële bezoekers mis. Als je een betere positie wilt, helpt het om een ​​site te hebben die in minder dan 2 seconden wordt geladen, wat bijna twee keer zo snel is als de gemiddelde site. Die 2 seconde gaan in wanneer de browser een verzoek verzendt om een ​​pagina te laden en eindigt wanneer alle inhoud van de pagina is geladen. Webbrowsers laten meestal een kleine "spinner" zien in het tabblad om aan te geven dat de pagina nog steeds wordt geladen.

Social media

Online beoordelingen en recensies, via sociale media als Instagram, facebook, linkedin, zijn een van de meest prominente ranking factoren voor zoekmachines geworden. De verbinding tussen SEO en sociale media is sterker dan ooit. Grote zoekmachines zijn zich ervan bewust dat sociale media een belangrijke plek heeft ingenomen. Het aantal gebruikers op sociale medianetwerken is exponentieel gestegen en de platforms worden met de dag populairder en belangrijker. Voor velen is het onderdeel van het dagelijks leven geworden. Naarmate het gebruik van sociale media groeit, verandert dit de manier waarop we zaken doen. Sociale media worden niet alleen gebruikt om mensen in de sociale kring op de hoogte te houden van ditjes en datjes maar worden ook gebruikt om producten/diensten te (ver)kopen en verkopen, een baan te vinden, contact te leggen met potentiële werkgevers etc. Google en andere zoekmachines houden nauwlettend in de gaten hoe populair een bepaalde WordPress-webpagina is op sociale media en passen de rangschikking dienovereenkomstig aan. “Social media authority” is een maatstaf voor deze populariteit. Tegenwoordig zijn de meeste organisaties actief op minstens één social media kanaal.

Social media buttons zorgen ervoor dat meer mensen de inhoud van je website delen op social media. Uit een onderzoek van Brightedge.com bleek dat het toevoegen van de juiste share-knoppen tot 7x meer delen kan leiden. Met share-knoppen kunnen je bezoekers de pagina met een enkele klik op Facebook en Twitter delen. Social media is vaak de meest effectieve manier voor merken om hun doelgroep te bereiken.

Gebruiksvriendelijkheid

Favicon

Een favicon is een kleine, vierkante afbeelding die in de adresbalk van een browser verschijnt. Het dient als branding voor je website en een handige manier voor bezoekers om je pagina te vinden wanneer ze meerdere tabbladen open hebben staan. Het feit dat ze zo klein zijn, maakt ze perfect voor mobiele apparaten.

Frames

Als je je WordPress site zo SEO-vriendelijk mogelijk wilt houden gebruik dan geen frames. Google heeft moeite om pagina's te indexeren die niet boven in een browservenster worden weergegeven. In plaats daarvan zal Google proberen de pagina te bezoeken waar naar via het frame is gelinkt, en dat wil je natuurlijk niet.

Redirect HTTP naar HTTPS

Sinds Google heeft aangekondigd dat HTTPS een ranking factor zal zijn, hebben veel online bedrijven besloten over te schakelen naar zo’n beveiligde site. Het enkel verhuizen van niet-beveiligde HTTP naar beveiligde HTTPS, is niet genoeg, je moet ook al het verkeer omleiden naar het nieuwe domein. Anders zullen de zoekmachines beide domeinen als totaal verschillende sites zien.

Robots.txt

Het robots.txt-bestand is een tekstbestand met een lijst van pagina’s die zoekmachines moeten crawlen of juist niet. Het robots.txt-bestand bevat informatie over het aantal pagina's van de website en de inhoud van die pagina's. De basis voor de informatie in het robots.txt-bestand is de broncode van de website. De structuur en inhoud van het robots.txt-bestand wordt bepaald door de broncode. Met behulp van robots.txt kun je bijvoorbeeld zoekmachines blokkeren om delen van de site te crawlen, of ze blokkeren voor het indexeren van bepaalde afbeeldingen of CSS-bestanden.

XML sitemap

Een sitemap is een XML-bestand dat alle pagina's van een website weergeeft. Sitemaps helpen zoekmachine-bots websites te indexeren. Zo’n sitemap moet eerst worden ingediend bij Google, dat doe je via Search Console. Sitemaps kunnen worden gegenereerd voor URL's maar ook voor afbeeldingen, video's, nieuws en mobiele inhoud.
Specificeer in de sitemap de locatie, de frequentie van wijzigingen, crawl-instellingen, prioriteit en het type inhoud dat naar de zoekmachine wordt verzonden. Het XML-bestand wordt gegenereerd door de webmaster. Samen met robots.txt informeert een XML-sitemap Google en andere zoekmachines over de pagina's op je website.

Websitebeveiliging

Google heeft aangekondigd dat ze van plan zijn actie te ondernemen tegen websites die worden gehackt en malware aanbieden. Als online bedrijf of website-eigenaar wil je dat bezoekers veilige toegang hebben tot de website. Kunnen bezoekers op jouw site terechtkomen zonder te worden aangevallen door malware? Als het antwoord ja is leidt dit tot verhoogde gebruikers loyaliteit maar eigenlijk is het een basisvoorwaarde. De meest effectieve manier om malware aanvallen te voorkomen, is door ze te detecteren en te blokkeren. Website bescherming is geen eenmalige actie, maar een continu proces. Ik zet regelmatig de WordPress plugin Admin Tools in waarmee ik talloze beveiligingsinstellingen kan doen.

W3C HTML validity test

Wanneer je HTML-code wijzigt, is het altijd een goed idee om te controleren of deze nog geldig is. Als dit het geval is, kunt u er zeker van zijn dat de website nog steeds correct wordt weergegeven in de browser. Dit zal bijdragen aan een hogere ranking in Google. De W3C HTML validiteitstest toetst de HTML-structuur van je website aan de norm. Als de W3C HTML validiteitstest niet doorstaan wordt is er werk aan de winkel; het probleem moet onderzocht, en indien mogelijk opgelost worden.

Benieuwd hoe jouw site ervoor staat op alle hierboven genoemde onderdelen?

Met behulp van mijn (Optimum) abonnement op SE Ranking maak ik een analyse van hoe jouw site ervoor staat, op een groot aantal in deze post genoemde factoren! Vervolgens zal ik dat rapport aan je voorleggen en toelichten.
Hiervoor breng ik eenmalig €79,- in rekening. Eventuele knelpunten oplossen valt er dus niet onder, wel kan ik hiervoor desgewenst een offerte maken. Ook het maken van een aanvalsplan om de vindbaarheid te verbeteren voor bepaalde zoektermen behoort tot de mogelijkheden.

Header maken in WordPress website met Oxygen Builder

Header maken met Oxygen

Stap in de wereld van WordPress met Oxygen en maak kennis met het ultiem flexible “Header builder” element. Het vullen van de Header Builder werkt werkt min of meer hetzelfde als het vullen van andere secties in je template, of op je pagina’s. Je kunt het zo geavanceerd en uitgebreid maken als je klant/designer/ het je voorschrijft, of je jezelf hebt voorgeschreven. Wel bestaat een Header Builder altijd uit maximaal 3 kolommen. 

Minder dan 3 kolommen nodig? Heb je voldoende aan 2 kolommen, bijvoorbeeld omdat je alleen een logo en een menu hebt te plaatsen in de header dan verberg je de derde kolom, dat doe je met de CSS selector Display, die zet je op None, komt verderop in dit artikel aan bod. 

Header element plaatsen

Ik er van uit dat je een menu gemaakt hebt in WordPress (via Weergave > Menu’s) dat je wilt gaan gebruiken in de header van de website. Anders dan wat je misschien gewend bent bij het werken met WordPress premium themes is dat het uploaden van een logo niet nodig is in Oxygen. Het logo toevoegen doe je gewoon rechtstreeks in het “Header builder” element. 

Het invoegen van het Header builder element doe je zoals gezegd op dezelfde manier als het plaatsen van andere elementen. 

  1. Open het template waarin je de header wilt plaatsen, dat zal over het algemeen het main template zijn (andere template erven de header vaak over uit het main template waardoor je de header dus maar eenmalig hoeft aan te maken). 
  2. Voeg het Header Builder element toe door op de blauwe Add knop te klikken links bovenin Oxygen.

Functies van de Header Builder

In het Header Builder element kun je aangeven of de header: 

Elementen die je altijd zult gebruiken in de Header Builder

Een header van een WordPress site, of elke andere site, bestaat doorgaans uit verschillende elementen. 

Logo in de header

Wat er in ieder geval in de header staat is het logo. Hiervoor heeft Oxygen geen specifiek element, er is geen element dat Logo heet. Dat is juist goed want aangezien het gewoon een afbeelding is (vooruit, met daarin een link naar de homepage) kun je een logo plaatsen in een, je raad het al, Afbeeldings element. 

Een logo in svg formaat werkt het beste, altijd scherp, ook op kleinere schermen en de bestandsgrootte is gering, en aangezien het bestand op iedere pagina geladen moet worden zal het in belangrijke mate bijdragen aan de laadtijd van je website.

Menu in de header

Voor het plaatsen van het menu kun je kiezen uit maar liefst 6 elementen. Heb je geen dropdown knoppen nodig, laat staan een heel mega enu, kies dan voor het element Pro Menu. In de instellingen geef je aan welk menu daarin gebruikt moet worden. 

Mega menu en Mega menu? Wat is het verschil?

Het Mega Menu element in de afbeelding hierboven waar je een paarse ‘O’ in ziet staan is een zogenaamd samengesteld element. Dat zijn dus elementen die bestaan uit een combinatie van andere elementen. Daarnaast is er stuk code aan toegevoegd voor de gewenste functionaliteit. Een Mega menu element bijvoorbeeld bestaat zoals je in de afbeeling hieronder ziet uit de volgende elementen:

Het andere Mega menu, dus zonder die ‘O’ is eigenlijk ook een samengesteld element maar niet als zodanig aangeduid want van Oxyextras.

Meerdere menu’s in de header

Het komt voor dat je niet alle knoppen kwijt kunt in 1 menu, dan zie je vaak dat knoppen als ‘Contact’, ‘Over ons’, en ‘Blog’ in een ander menu gezet worden, vaak in kleiner lettertype en minder styling.

Styling van het menu 

Voor het stylen van het menu beschik je, zoals voor elk element, voor het hele arcenaal aan CSS selectors onder de Advanced tab. Daarnaast uit de volgende aanvullende instelmogelijkheden: 

Typografie (lettertype) 

Spacing (Ruimte om de tekst in de menu knop heen en tussen de menu knoppen onderling)

Hover & active 

Een knop ziet er niet altijd hetzelfde uit. Bepaal hier hoe de knoppen er uit moeten zien wanneer:
Er overheen bewogen worden (hover)
Je je op de betreffende pagina bevindt (active). 

In Oxygen heb je in Pro Menu, nog een aantal extra opties tot je beschikking. 

Social media knoppen in header of elders

Wil je de links naar de social media kanalen een prominente plek geven op de WordPress site kies dan voor een plek in de header. Het element Social Icons kun je daarvoor gebruiken. Daarin kun je kiezen voor brandcolor of je kiest zelf je kleuren, bijvoorbeeld uit de centraal ingestelde (huisstijl) kleuren. Voor recherchebureaudaniluk.nl deed ik beide; brandcolored icons in de footer, zelf gekozen kleuren op de contactpagina om niet te veel de aandacht daar naartoe te leiden: 

Hier kun je ook instellen of de icons afgerond of hoekig moeten worden, wat de grootte en de onderlinge afstand moet zijn.

Je hebt binnen het element Social icons geen controle over de volgorde, dat vind ik persoonlijk een nadeel. Om dit probleem te ondervangen gebruik ik daarvoor custom css, dat is in dit geval css die niet te genereren is via de Advanded tab, de handgeschreven CSS voeg je toe in het veld ‘custom css’. Voor het in een aandere volgorde zetten van items binnen een element (Linkedin icon vooraan zetten in het Social icons element) gebruik ik de Flex selector:

.oxy-social-icons a.oxy-social-icons-linkedin {
order: 1;
}
.oxy-social-icons a.oxy-social-icons-twitter {
order: 2;
}
.oxy-social-icons a.oxy-social-icons-instagram {
order: 3;
}

Omdat je social icons bestaan uit icons, kun je er ook voor kiezen icon elementen te gaan gebruiken, dan kun je niet aanklikken ‘Use brand colors’ maar zo ingewikkeld is het niet om die kleuren zelf op te geven in de CSS instellingen.

Contactgegevens in de header

Contactgegevens zie je wel eens helemaal bovenin de site staan, technisch gezien staan ze niet in de header maar in de een sectie die veelal ‘topbar’ genoemd word. In Oxygen voeg je een nieuwe row to in de header, van die nieuwe row verberg je 2 van de 3 kolommen en in de overgebleven kolom plaats je een Text element, eventueel doe je dat binnen een div als je extra eigenschappen wilt toevoegen. 

Zoekveld in de header

Een WordPress website met veel content worden vaak uitgerust met een zoekveld in de header. Je kunt gebruik maken van het Oxygen element ‘Search Form’ maar die is eigenlijk vrij beperkt in mogelijkheden. 

Als je een Oxyextras licentie hebt, ga dan voor het element ‘Header Search’, daarin heb je een stuk meer mogelijkheden, zie hieronder de toepassing ervan in de jarabee.nl website: 

Meerdere Header Builders gebruiken

Heb je aan meerdere rijen niet voldoen kies er dan voor meerdere Header Builder elementen in te zetten. Ik koos daarvoor in de situatie dat het ene deel van de header sticky moest zijn maar tegelijkertijd toch ook direct al in beeld moest komen. Dus een extra rij voldeed niet want die kan alleen op ‘Only show in sticky’ of ‘Hide in sticky’ gezet worden en het menu moest juist in plaats van only ‘always’ getoond worden, en in plaats van hide moest ik ‘m ‘show’ in sticky hebben.

Mocht je nu door de bomen het bos niet meer zien. Het wordt je vanzelf duidelijk wanneer je er zelf mee aan de slag gaat en gewoon ‘ns wat gaat uitproberen.

Header geschikt maken voor mobiel

Sinds Google “Mobile first” uit rolde, of eigenlijk al daarvoor, is het erg belangrijk dat een (WordPress) website ook op mobiele apparaten goed toegankelijk is. 

De header is een belangrijk onderdeel van de website dus je wilt voorkomen dat het logo of menu daarop slecht wordt uitgelijnd of überhaupt niet werkt. Ook dat kan relatief eenvoudig met Oxygen geregeld worden. 

Responsive menu

Zodra je de header af is voor mobiel begin je aan de instellingen voor mobiel. Het breakpoint heb ik hieronder ingesteld “Toon het mobiele menu bij schermen smaller dan 768px”. Op schermen die kleiner zijn verschijnt daardoor niet het menu maar de hamburger knop. Overigens kun je de breakpoints zelfs wijzigen in de van Oxygen.

Via de knoppen Mobile Menu en Mobile Dropdowns heb je weer een groot aantal instelmogelijkheden zoals uitlijnen, kleuren, animatie, submenu indicator (icoon om aan te geven dat er zich een dropdown onder het menu item bevindt) etcetc.

Voor het logo heb ik @media regels gemaakt, maar dan met behulp van Oxygen, dus veel intuïtiever. Een voor schermen kleiner dan 1120 px breed en een voor schermen kleiner dan 992 px breed. Van die tweede laat ik weer een printscreen zien. Omdat er op schermen kleiner dan 992px toch geen menu te zien zal zijn (alleen de hamburger knop) kies ik ervoor het logo meer ruimte te geven, dus een groter deel van de header te laten beslaan.

Divs (met elementen) onzichtbaar maken op mobiel

Tenslotte kun je er nog voor zorgen dat bepaalde onderdelen van de header helemaal niet te zien zullen zijn op klein beeldscherm. Dat doe je weer door de css selector ‘Display’ te gebruiken, en op ‘None’ te zetten. Ook voor deze selector hoeft geen css regel geschreven te worden want ook hierin voorziet Oxygen

Let op. Anders dan in een WordPress Builder zoals Elementor heb je nergens een schuifjes ‘Toon op mobiel’, ‘Toon op tablet’ en ‘Toon op desktop’, die je alleen maar even aan en uit hoeft te zetten; in Oxygen wordt je helaas (of gelukkig!) overgeleverd aan je kennis van CSS, met als beloning dat je veel meer mogelijkheden hebt. Zo hoeft je bijvoorbeeld geen verschillende knoppen aan te maken voor groot beeldscherm en voor klein beeldscherm. Bijvoorbeeld omdat je op een klein beeldscherm te weinig ruimte hebt om een icon te laten zien in een button.  In bijvoorbeeld Elementor wil dit nog wel eens de ‘minst slechte’ methode is om tegemoet te komen aan de gewenste afmetingen van een knop in zowel groot als klein beeldscherm: 

  1. Maak een knop voor groot beeldscherm die je verbergt op klein beeldscherm
  2. Maak een knop voor klein beeldscherm, die je dus verbergt op groot beeldscherm 

De CSS selector die je tot je beschikking hebt vind je overigens in elk element onder de tab ‘Advanced’. 

Header uitschakelen

Stel dat je een landingspagina bouwt waar de header niet te zien moet zijn, om te voorkomen dat mensen naar een andere pagina gaan, dan kun je dat instellen bij Conditions.

Header met verticaal menu

De header builder is niet geschikt voor het maken van een verticaal menu. Het element dat je wel gebruikt als je een template bouwt voor een site met een verticaal menu is een basaal Div element, met als instelling dat de child divs horizontaal achter elkaar getoond moeten worden. In het eerste child div dat je plaatst zet je het menu, in de volgende child div plaats je het Innercontent element, dat is zoals gezegd het element dat de pagina (of post) inhoud laat zien. De breedte van div met het verticale menu stel je in op bijvoorbeeld 200px. De hoogte ervan is meestal de hoogte van het beeldscherm, hoe hoog dat beeldscherm ook moge zijn, kies daarom de eenheid ‘vh’ (viewport height) en de waarde ‘100’ . In het Pro Menu stel je bij Orientation in dat het menu verticaal moet worden weergegeven, dus met de knoppen onder elkaar ipv naast elkaar. 


Verticaal menu voor kleine beeldschermen

Ook een verticaal menu gebruikt moet natuurlijk te gebruiken zijn op kleinere beeldschermen. Voor tablet kun je nog de breedte van de kolom wat kleiner maken, voor mobiel zal dat niet mogelijk zijn, op mobiel zal een hamburger knop te zien moeten zijn, die je maakt met een icon (de hamburger knop zelf) en een Modal element met daarin het menu. De Modal wordt getriggerd, geopend in dit geval, door een klik (of een hover) op de hamburger knop, eigenlijk hetzelfde dus als hoe een horizontaal menu zich “gedraagt” op mobiel, maar dan nu maak je ‘m zelf, dus met een icoon en een Modal element. Alle ins en outs van een verticaal menu in Oxygen kan ik je nog niet mededelen want heb zo’n menu simpelweg nog niet gemaakt.. 

In WordPress profielpagina’s maken met Oxygen

Custom post types maken

Aangezien de webmaster vaak degene zal zijn die profielen toevoegd, aanpast, en verwijderd is het handig dat er een apart menu item voor is. Als je dat niet doet zouden de profielen onder Berichten (Posts) komen te staan Ik noem het menu item 'Mijn teamleden'. Het aanmaken van custom post types doe je met Custom Post Types UI, maar er zijn meerdere plugin om uit te kiezen. Sinds 2020 gebruik ik Metabox, die plugin geeft naast het kunnen aanmaken van custom fields ook de mogelijkheid om custom post types te maken, daardoor is voor mij de plugin Custom Post Types UI overbodig geworden.   

Custom velden aanmaken

De velden die je nodig gaat zijn, zoals 'Titel' of 'Naam' zitten niet standaar in WordPress. De plugin die ik gebruik voor het maken van nieuwe velden is ACF, dat staat voor Advanced Custom Fields, maar je kunt ook kiezen voor andere plugins zoals Metabox. 

Nadat je in ACF de field groep ‘Teamleden’ hebt aangemaakt voeg je de benodigde velden toe.

Onderin de afbeelding zie je dat ik deze groep, dus met alle velden die erin zitten, heb toegewezen aan het post type die ik daarvoor al had aangemaakt, het post type 'Teamlid'

Het toevoegen van een profiel

Je kunt nu beginnen met het toevoegen van de profielen, dat zal er ongeveer zo uitzien. 

De profielen op de website zetten

Uiteindelijk wil je dat alle medewerkers een eigen pagina krijgen met daarop dus de ingevoerde gegevens. Maar daarnaast moet er ook een overzichts pagina komen, die kun je het beste maken met de zogenaamde 'Repeater', dat is een element in Oxygen. 

In de repeater geef je eerst aan welke items er in de repeater terecht moet komen. Berichten van het type ‘team’ kies je dus.

Alle teamleden die ingevoerd zijn worden dus nu getoond op de pagina. Dt gebeurd echter pas als je hebt aangegeven welke informatie geladen moet worden.
Stel je wilt in ieder geval de featured image laten zien. Daarvoor plaats je binnen die repeater de featured image door in de structuur lint aan de rechterkant van je beeldscherm de Repeater te selecteren en vervolgens links bovenin op de blauwe knop ‘+ Add’ te klikken.
Omdat het geen afbeelding moet zijn uit de media bibliotheek klik je op 'Data' en selecteer je ‘Featured image’.

De Featured image is een voorbeeld van het gebruik van Dynamische data in een Oxygen Builder template

Layout aanpassen

Hover-state

Een hover-state is altijd goed om toe te voegen, dat zorgt voor interactie tussen de site en de bezoeker. Ik koos voor het naar boven bewegen van de afbeelding. Degenen die bekend zijn met CSS weten dat je dat kunt doen met de 'Translate' selector. Om het naar boven bewegen van de afbeelding geleidelijk te laten verlopen, zodat het niet zo schokkerig wordt, voeg je ook een Transition selector toe, 0,4 sec is meestal prima.  

Kolommen

Het aantal kolommen, dus het aantal mensen naast elkaar, kun je niet rechtstreeks instellen, is er nergens een vakje waarin je kunt kiezen voor bijvoorbeeld '4'.
Het aantal kolommen in een repeater wordt bepaald aan de hand van de breedte van de div in de repeater. Voor het maken van 4 kolommen kies je een breedte die net onder de 25% ligt, omdat je vaak ook tussenruimte wilt hebben.
Dit kun je per beeldscherm breedte instellen. Bij de kleinste afmeting (alles onder 480 px) kies ik doorgaans voor 100%, zodat op mobiel alle personen onder elkaar komen te staan.

De css selector translate met als property transform, {translate: transform (-10px)} maar dan wat gebruiksvriendelijker toegevoegd, namelijk via de Oxygen Builder Editor

Andere effecten die ik vaak toegepast zie worden nasst translate zijn 'Scale', om te vergroten/verkleinen, ‘Opacity’, waarmee je de helderheid (letterlijk doorzichtigheid) laat toe- of afnemen wanneer er met de cursor overheen bewogen wordt. Of een combinatie van verschillende selectors.

Oxygen Builder versus het gebruik van WordPress themes

Waarom geen thema gebruiken?

De website die je bouwt met Oxygen zal veel flexibeler zijn, wat niet alleen bij de bouw goed uitkomt maar ook een groot voordeel zal zijn bij toekomstige aanpassingen/uitbreidingen.

Lichter, dus laadt sneller

Een andere reden om geen premium themes te gebruiken noem ik eigenlijk ook al elders op mijn site; die themes zijn niet geprogrammeerd met 1 bepaalde website als doel, ze zijn volgestopt met allerlei handige functies zodat er allerlei websites mee gemaakt kunnen worden. Hierdoor kan er weliswaar heel snel een website gebouwd worden maar met gevolg dat zo'n 80-90% van de code niet gebruikt wordt maar wel moet worden ingeladen. Daardoor is de laadtijd erg lang en vergt de website veel onderhoud, en als je dat niet doet wordt je website kwetsbaar voor aanvallen of kunnen bepaalde functies ophouden te werken na verloop van tijd.

Flexibeler

Als je klant toe is aan een nieuw theme, dan is het een stuk eenvoudiger en minder tijdrovend een nieuw theme te ontwikkelen in Oxygen en die vervolgens te gaan gebruiken met de bestaande content waardoor je deze content gewoon zou kunnen laten staan en niet hoeft over te hevelen naar een site waar een nieuw premium theme op geïnstalleerd staat.

Wat is oxygen Builder?

Oxygen is een plugin die gebruikt wordt voor het bouwen van WordPress websites. Kennis van HTML en CSS kun je gebruiken in de visuele editor. Met Oxygen bouw je een theme(s) en pagina’s. Dat doe je m.b.v een almaar uitdijende verzameling Oxygen elementen. In feite kun je alles bouwen met Oxygen, en ook optimaliseren voor verschillende beeldschermen.

Hoeveel wordt Oxygen gebruikt

Ik tel eind 2020 meer dan 18.000 gebruikers in hun (besloten) facebook groep, in die groep zitten veelal ontwikkelaar die kennis delen over (het gebruik van) Oxygen Builder. Het daadwerkelijk aantal gebruikers zal nog wat hoger liggen. Oxygen wint snel aan populariteit.
Voor mij is Oxygen de enige tool geworden waarmee ik websites bouw.

Kosten Oxygen licentie

Webdevelopers kunnen een lifetime licentie a $249,- aanschaffen, die kosten zijn wellicht een drempel voor website bouwers die gewend zijn $59,- dollar te betalen voor een premium theme. Een lifetime licentie kunnen ze echter voor al hun klanten gebruiken, een theme wordt vaak per klant aangeschaft en is dus eigenlijk juist duurder.

Oxygen theme(s) ontwikkelen

Stel dat je hebt gekozen voor Oxygen, dan staat je het bouwen van een maatwerk theme te wachten. Als je dit idee te overrompelend vindt zou je ook een bestaand Oxygen theme als uitgangspunt kunnen gebruiken. Direct na de installatie van Oxygen kies je dan uit een van de ca. 20  ‘design sets’, een design set is in feite een theme. Je begint meestal bovenin te bouwen. Doorgaans zet je daar het logo in. Bij het werken met een design set zul je tegen beperkingen aanlopen die je doen denken aan het werken met een premium theme. Maar als je voortaan na de installatie ‘Start from scratch’ kiest zul je volledige vrijheid hebben in welke elementen je op welke plek gebruikt, en met welke css.

Global styles instellen in oxygen

Nadat je kleuren en fonts hebt gekozen kun je daar later bij het stylen van elementen, bijvoorbeeld het menu, gebruik van maken. Ben je na afloop niet tevreden over de gekozen kleuren dan hoef je die maar op 1 plek aan te passen, zo kun je efficient websites ontwikkelen. 

De meeste gebruikte elementen in Oxygen

Het aantal elementen in Oxygen is aanzienlijk, de ene zul je meer gebruiken dan de andere.

Section en div element

Een pagina of theme bestaat uit een verzameling divs, hoe een “div” eruit ziet hangt af van de CSS selectors die zijn toegepast op de div.

Styling van divs

Een div kan een ID zijn, of een class. Een ID wordt aangeduid met #, een class herken je aan een . (een punt).  IDs gebruik je wanneer de styling maar voor 1 specifieke div bedoeld is, terwijl classes gebruikt worden voor alle divs met de betreffende class. Zelf gebruik ik vaak een combinatie van IDs en meerdere classes, bijvoorbeeld voor een knop. Omdat ik vaak meerdere classes gebruik kan ik dus ook soms een class soms achterwege laten. Bijvoorbeeld de class voor de schaduw, zodat ik 1 bepaalde knop juist meer of minder schaduw kan geven, dat doe ik dan door niet de .schaduw class toe te passen maar de ID #schaduw-groot toe te voegen. 

Voor een footer, vaak de balk onderaan de pagina, hoef je geen apart template te maken, zoals dat bijvoorbeeld moet in Elementor. In Oxygen is de footer zelfs geen apart element, en header is dat overigens wel, zie volgende paragraaf. Een footer kan eenvoudig worden opgebouwd een section, divs en de nodige elementen voor het weergeven van bijvoorbeeld contactgegevens, social media knoppen, link naar privacy voorwaarden een copyright etc.

Samen met de header zit de footer in the ‘theme’, daar tussenin bevindt zich een element dat ‘Innercontent’ heeft, daarin komt alles terecht wat je maakt voor de afzonderlijke pagina’s. Als je de homepage bijvoorbeeld begint met een slider dan zal die slider dus direct onder de header te zien zijn. (Als er een overlay is insteld zal ie er overigens letterlijk onder vallen, anders sluit de slider aan op de header.) 

Class lock

Om te voorkomen dat ik per ongeluk een css class aanpas terwijl ik in feite een id wil aanpassen gebruik ik soms de Class clock mogelijkheid die in Hydrogen pack zit. Daarmee voorkom ik dat ik bijvoorbeeld alle knoppen over de gehele website een andere stijl geef terwijl ik alleen 1 enkele knop wil aanpassen.

Class lock zorgt ervoor dat er niet per ongeluk css classes worden aangepast

Header element

Bovenin bijna iedere website zit een header. Meestal zit daarin in ieder geval het logo en een menu. Ook komt het voor dat er contactgegevens (telefoonnummer) en/of social media buttons in te vinden zijn. Op alle pagina’s is de header te zien. Zie mijn blog artikel over de Header voor een volledige omschrijving van de Header.

Ben je ‘from scratch’ begonnen dan kun je bij een totaal gebrek aan inspiratie toch nog terugvallen op het gebruik van een bestaande header, daarvoor klik je op ‘Add’ en ga je naar de Design library, hier kunnen overigens alleen complete design sets worden geopend, dus die zou je moeten ontdoen van alles wat er onder de header staat. Zelf houd ik lijstjes bij van site onderdelen, zoals headers, die ik goed gekozen vind om daar ideeën uit te halen voor als ik inspiratie nodig heb.

Woocommerce elementen

Productpagina’s van WooCommerce zien er niet altijd even verrassend uit, vaak hebben ze dezelfde indeling. Een productpagina in WooCommerce op verschillende manieren aan te passen. De manier die ik hier ga toelichten is die met Oxygen. Naast een productpagina kun je ook een template maken voor specifieke productcategorieën, of een productpagina template voor specifieke producten.
Er bestaan voor het maken van o.a een productpagina, een afrekenpagina en een (categorie) overzichtspagina uiteenlopende Oxygen elementen. Die elementen zitten in de Woocommerce plugin voor Oxygen, die krijgt begin 2022 een grote update, na een periode zonder updates. De alfa versie van die update kan al gedownload worden, het wachten is dus nog op de stable release versie. Welke elementen dat precies zijn zie je in de 2 afbeeldingen hieronder.

Voor een webshop waar ik momenteel aan werk heb ik dit template voor de productpagina gemaakt:

Naast specifieke Woocommerce elementen heb ik ook gewoon algemene Oxygen elementen toegepast voor deze productpagina
Woocommerce elementen in Oxyextras

Mocht je in het bezig zijn van een Oxyextras.com licentie (aanrader!) dan kun je aanvullend gebruik maken van twee eigenlijk onmisbare Woocommerce elementen. Dat zijn de "Cart Counter", om aan te geven hoeveel producten in de cart zitten, en de "Mini Cart". Daarmee krijgt de bezoeker snel een beknopt overzicht van de inhoud van de winkelwagen.

Meest gebruikte elementen binnen een blog template

In Oxygen kun je naast een template voor een losse pagina ook een template maken voor een post type, dat type kan bijvoorbeeld zijn “blog artikel”.
Bij het maken van een blog template is het handig al wat berichten klaar te hebben, want in Oxygen kan de inhoud ervan direct getoond worden, als voorbeeld, terwijl je de template aan het opbouwen bent. Hierdoor gaat dat bouwen een stuk sneller.

Zoals je in de "structuur panel" in bovenstaande afbeeling kunt zien gebruik ik de volgende blog-specifieke elementen:

De volgende elementen zijn geen specifieke blog elementen maar wel gevuld met specifieke blog informatie:

Wat misschien opvalt, als je gewend bent te werken met Elementor, is dat je niet hele specifiele widgets kunt kiezen. Dus widgets als Post title, Post Excerpt, Post content, Featured image etc bestaan niet in Oxygen. Je gebruikt in plaats hiervan algemene elementen die je vult met specifieke (dynamische) data. Voordeel hiervan is dat je een ruimere keuze hebt in de data die je wilt laten zien.

Zodra je alle elementen hebt toegevoegd en de styling helemaal naar wens is begin je aan de indeling en styling voor de kleinere beeldschermen.

Pagina-specifieke templates maken

Zoals hierboven gemeld kun je in Oxygen ook templates maken die geladen moeten worden wanneer er een bepaald post type, category etc getoond wordt. 

Voor zo’n single template hoef je niet opnieuw een header en footer te gaan maken, het volstaat om in het single template aan te geven dat er “overgeërfd” moet worden, en wel uit het basis template. Hierdoor hoef je je alleen maar bezig te houden met wat er tussen de header en de footer (de “innercontent”) moet komen. In mijn blog post over single templates geef ik voorbeelden van single templates die ik gemaakt heb, daarvan noem ik er nu 2:  

Door middel van dynamische content verschijnen er automatisch de gegevens die de webmaster heeft ingevoerd in de betreffende post, eventueel aangevuld met custom fields. Voorbeeld: Bovenaan een profielpagina komt de naam te staan van de persoon. Het veld ‘Naam’ is een dynamisch veld dat is gevuld door de webmaster. In een template voor een blog pagina moet doorgaans worden aangegeven waar onderstaande gegevens terecht moeten komen:

In de meeste premium thema’s zitten custom post types voor bijvoorbeeld cases en profielen van personeelsleden. Ik raad aan zelf custom post types te maken (en pas wanneer je ze nodig hebt). Dat doe ik met CPT UI, die bevalt mij goed.

Ook kun je een template toewijzen aan bijvoorbeeld ‘Woocommerce producten'. Met Oxygen kun je zo'n template geheel naar wens indelen/stylen, dankzij de Oxygen Woocommerce plugin, zodat je niet vastzit aan de geijkte indeling van links de afbeeldingen met thumbs daaronder en rechts de tekst.

Wat ik ook vaak gebruik is een template voor zoekresultaten. Een bezoeker krijgt een zoekresultatenpagina te zien wanneer er een zoekopdracht op de website is uitgevoerd. Ook voor dit template heb je weer alle mogelijke elementen en dynamische data tot je beschikking, voor Jarabee leidde dit tot deze pagina: 

De titel van het zoekresultaat licht ik er hier uit (groe). Het is een dynamisch veld en kan van A to Z worden gestyled.

Ook andere archief templates kun je maken met Oxygen, denk aan categorie pagina’s, artikelen van een bepaalde gebruiken etc.

404 template

Een template dat je toewijst aan ‘404’ wordt gebruikt wanneer er een url bezocht wordt die niet meer bestaat, bijvoorbeeld omdat je de pagina verwijderd hebt. Uiteraard kun je het beste 404 pagina’s helemaal verwijderen, bijvoorbeeld door er redirects van te maken. Maar als er dan toch nog bezoekers op een 404 terecht komen dan wil je natuurlijk dat dit er goed uitziet. Gebruik je WordPress een standaard premium theme dan zit er vaak al een rudimentaire 404 pagina in, die neit veel meer laat zien dan “Sorry, de pagina die u probeerde te bezoeken bestaat helaas niet meer”, met soms een zoekveld, die je meestal daar niet wilt hebben en een knop ‘Terug naar de homepage’. In Oxygen moet er een custom 404 pagina gebouwd worden, dus je heb alle vrijheid.

Het 404 template dat ik voor Jarabee maakte
Toewijzen van het template aan de juiste "pagina's"

Kosten Oxygen versus kosten Divi Builder

Dat antwoord  'Vast helemaal niets’ baseerde ik hierop:

Je voelt ‘m al aankomen; ik kon er niet verder naast zitten met mijn antwoord 'Vast helemaal niets'.. Er ontbrak in mijn ogen weldegelijk e.e.a in de Divi Builder, en niet alleen de minst essentiële..

Eerst even een stap terug. De reden waarom ik überhaupt keek naar de mogelijkheden van Divi Builder was dat ik in veel aanvragen die ik voorbij zie komen zinnen tegenkwam met de volgende strekking: ‘.. en het moet een WordPress met Divi website worden…’, en ‘..deze bestaande Divi WordPress website moet voorzien worden van…’ . 'Divi' was dus de magic word ontdekte ik. Dus vandaar dat ik deze builder maar 'ns tegen het licht houdt.

Aanvullende plugins die je nodig hebt voor Divi maar die al standaard aanwezig zijn in Oxygen 

Voor bijna alle functionaliteit die ontbreekt in de Divi Builder bestaan wel plugins. Dus dat maakt het dan wel weer een beetje goed. Hieronder geef ik een overzicht van die plugins. Deze lijst blijkt overeen te komen met lijsten van meest gebruikte divi plugins, dus blijkbaar ben ik niet de enige die de ontbrekende functionaliteit als een gemis ervaart.

Per Divi plugin vermeld ik de prijs. Ook vermeld ik soms waar in Oxygen dezelfde functionalteit te vinden is. 

Kosten per jaar voor Divi plugin 'Divi ultimate header plugin'. 

(voor meer dan 1 site): $ 35,-. Essentieel natuurlijk, dat je als WordPress webbouwer volledige controle wilt hebben over wat er allemaal in de header van een website staat.

Oxygen alternatief

Header builder element. 

Kosten per jaar voor Divi plugin 'Divi ultimate footer plugin'. 

Voor meer dan 1 site: $ 35,-. 

Oxygen alternatief

Gebruik basis elementen sections en divs.

Kosten per jaar voor 'Page builder everywhere'. 

Kies je voor deze plugin dan heb je de header en de footer plugin niet nodig. Kosten € 79,- per jaar bij meer dan 3 sites. 

Oxygen alternatief

Zoals hierboven genoemd, dus Header builder element en gebruik basis elementen zoals sections en divs.

Kosten per jaar voor Divi plugin 'Divi Mega Menu'.

Voor meer dan 1 site: €60,-.

Maar waarschijnlijk niet compatibel met bovengenoemde divi ultimate header plugin vermoed ik.). Zelf een mega menu in Divi maken kan ook, maar meer dan alleen knoppen kunnen er niet in, handleidingen voor het maken van een mega menu vind je in hun documentatie vind je een handleiding voor een mega menu voor een bepaalde layout pack.

Oxygen alternatief

Mega menu element.

Kosten per jaar voor Divi plugin 'Divi Icon King' of 'Divi Icons'

Kosten voor Divi plugin 'Divi Icon King' (Alleen Material en font awesome icons) $ 19.97. Of "Divi Icons" (Zowel Custom Line Icons, FontAwesome, Material Icons). € 65,- 6 mnd support maar wel lifetime updates, ik neem aan voor 'unlimited sites' maar dat staat nergens.

Oxygen alternatief

Oxygen heeft twee icons packs standaard aan boord en ze kunnen bovendien ook nog eens gebruikt worden in verschillende elementen zoals het element 'Button'.

Kosten per jaar voor Divi plugin 'Divi switch'.

Om Breakpoints aan te passen. € 79,- per jaar bij meer dan 3 sites. Er kan overigens nog veel meer met Divi switch maar je hebt het in ieder geval nodig om die breakpoints aan te passen.

Oxygen alternatief

Instelbaar onder Settings

Kosten per jaar voor Divi plugin 'Divi Overlays'. 

€ 59,- per jaar bij meer dan 3 sites.

Oxygen alternatief

Modal element.

Kosten per jaar voor Divi plugin "Divi Booster".

$ 29,- per jaar bij unlimited sites.

Page builder instellingen aanpassen. Support schijnt er niet echt te zijn, je hoeft uberhaubt geen reactie op je support aanvraag te verwachten.

Oygen alternatief

Er hoeft niets geboost te worden, Oxygen is het is al snel.

Kosten per jaar voor Divi plugin 'Divi bars'.

Divi bars kost € 59,- per jaar bij meer dan 3 sites.

Oxygen alternatief

Modal element.

Kosten per jaar voor Divi social party.

$ 77,- per jaar bij meer dan 3 sites. 

Oxygen alternatief

Element Social icons.

Kosten per jaar voor Monarch.

Geen kosten want is inclusief bij divi builder. 

Oxygen alternatief  

Element 'Social Share Buttons'

Kosten per jaar voor Divi plugin 'Divi logo swap'.

Kosten: $ 5,- 'For the time being, unlimited use, and unlimited updates and support for life.'

Oxygen alternatief

Gebruik sticky menu, daarin zet je dan een ander logo.

Kosten per jaar voor Divi Extras

$ 77,- per jaar bij meer dan 3 sites.

Oxygen alternatief

Repeater element, met alle denkbare instel en layout mogelijkheden zodat er een 'Recent posts’ blok of een ‘Post slider’ ontstaat.

Totale kosten per jaar voor Divi plugins

Dus in totaal een kostenpost die niet echt te verantwoorden is van in totaal ca. € 500,- per jaar, voor alleen de aanschaf ervan al, dus de uren implementatie laat ik dan buiten beschouwing.. 

Zit er in sommige plugins meer functionaliteit dan in de Oxygen tegenhanger? Dat weet ik niet maar daar ga ik wel van uit, waardoor de kosten nog enigszins te verantwoorden zijn voor de webbbouwer. Feit blijft dat flexiblititeit altijd groter is in Oxygen.

Functionaliteit waarvoor uberhaubt geen plugin is

Nested rows. Hier is uberhaubt geen plugin voor. Er kan dus alleen uit bepaalde indelingen worden gekozen, bovendien moet een css class worden opgegeven en als het responsive moet wordt het al helemaal handwerkOver het ontbreken van nested rows/columns wordt o.a hier steen en been geklaagd

Is een vergelijking eigenlijk wel mogelijk?

Divi Builder is een page builder, Oxygen is meer een website builder. Dus dat er veel functionaliteit ontbreekt in Divi is misschien weliswaar logisch maar ik vermoed dat de gebruikers van Divi zich het niet realiseren, getuige het grote aantal plugins dat men gaat installeren om er toch alsnog een website builder van te gaan maken. 

Maar laat ik gematigd positief over Divi Builder afsluiten. Het zijn van een page builder, i.p.v een complete site builder, biedt namelijk ook een voordeel: Divi Builder kan binnen een bestaand theme gebruikt worden. En laat dat gebruik van themes nou net datgene zijn wat de WordPress community moeilijk vindt om los te laten.

Conclusie

Oxygen is een complete site builder, terwijl er voor Divi Builder erg veel plugins aangeschaft moeten worden om tot dezelfde functionaliteit te komen. De kosten van de plugins, en ook de kosten van implementatie en onderhoud van die plugins zullen niet voor alle projecten te verantwoorden zijn.
Maar stel dat het project waar je aan gaan werken niet meer functionaliteit vereist, of gaat vereisen in de toekomst, dan er standaard aanwezig is in Divi. In dat geval kun je er voor kiezen alle plugins achterwege te laten. Vervolgens schaf je geen lifetime licentie aan maar ga je voor een jaar licentie a $90,-. Oxygen Builder heeft enkel lifetime licenties, variërend van $129,- tot $349,-, voor mijn klanten is het echter gratis.

Dynamische pagina's zonder specifieke WordPress plugins

Gebruiksgemak voor webmaster

Een webmaster wil zich niet bekommeren over de layout van bijvoorbeeld de nieuwspagina. Het invoeren van een titel, koptekst, tekst, datum en eventuele afbeeldingen moet voor hem of haar even eenvoudig zijn als het invullen van een formulier. Daarvoor is nu in een WordPress site, mits gebouwd met Oxygen slechts 1 algemene plugin nodig en dat is ACF, Advanced Custom Fields.

Ik heb geen andere WordPress oplossing gevonden die mij persoonlijk net zo goed leek in termen van uitvoerbaarheid, aantal regels code en flexibiliteit voor de webbouwer en gebruiksvriendelijkheid voor de webmaster.

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 nadelen van de andere methoden oplost; het repeater element in Oxygen.

Dynamische pagina's met Oxygen

Ik laat je eerst 4 praktijkvoorbeelden zien die ik gemaakt heb met Oxygen en ACF. Daarna geef ik een opsomming met alle voordelen van deze methode. In de praktijk voorbeelden ga ik je laten zien dat het allemaal erg geavanceerd is maar tegelijkertijd toch super gebruiksvriendelijk werkt, voor zowel webbouwer als voor de webmaster.

Voorbeelden van wat je er allemaal mee kunt bouwen

Hieronder geef ik 4 voorbeelden van layouts die zijn gemaakt met Oxygen en content bevat die is ingevoerd in (ACF) custom fields: 

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

Praktijk voorbeeld 1: Nieuwspagina

Laten we beginnen met hoe een nieuwspagina er op de frontend van een website uit kan zien. Daarna laat ik je de omgeving voor de WordPress ontwikkelaar zien en waar de webmaster overigens geen toegang toe heeft.

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 'datum' worden voorzien van de gewenste styling zoals lettertype en -grootte. Dit template gebruik ik ook voor Onderwerp pagina's, vandaar staan er meer velden in die je er niet zou verwachten.  
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 andere oplossingen.

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 upload wordt automatisch bovenin de pagina gezet, achter de titel.

Praktijk voorbeeld 2: Profielpagina

Een pagina voor het publiceren van informatie over een medewerker zal andere info moeten bevatten dan een nieuwspagina en wellicht is een andere styling gewenst. De profiel pagina die ik op maat gemaakt heb voor BekkenfysiotherapieTwente ziet er bijvoorbeeld zo uit:

De Oxygen builder editor met daarin het template voor de custom posts pagina; de omgeving voor de WordPress ontwikkelaar. Templates hoeven normaal gesproken niet door de webmaster aangepast te worden, en is daarom ook niet toegankelijk.
De pagina voor de webmaster is van een verbluffende eenvoud

Praktijk voorbeeld 3: Layout voor Onderwerp pagina

Voor de layout van een Onderwerp pagina is ervoor gekozen voor een deel dezelfde opzet te gebruiken als voor de Nieuws pagina, om de onderhoudskosten laat te houden koos ik ervoor hetzelfde tempate te gebruiken waarbij ik dan wel bepaalde elementen alleen laat zien wanneer het template te zien is voor een nieuwsitem, de datum bijvoorbeeld. Ook laat ik elementen alleen zien wanneer het gaat om een Onderwerp pagina, in dat geval moeten er soms Veelgesteldevragen ingevoerd en getoond kunnen worden. Ik maak daarvoor gebruik van de Conditions feature in Oxygen, meer hierover op https://oxygenbuilder.com/documentation/other/conditions/.

Bij het praktijk voorbeeld 'Nieuwspagina' heb ik je al het eerste deel van het template laten zien, nu laat ik je zien hoe het onderste deel in elkaar steekt. Op het rode Call-to-action vlak wordt de informatie geplaatst die de webmaster invoert. Als de webmaster kiest voor het toevoegen van een emailadres in plaats van een telefoonnummer wordt de knop gebruikt waar een 'mailto' link in zit, en niet de knop waar een 'tel' link in zit.

Praktijk voorbeeld 4: Portfolio

Hieronder een afbeelding waarin ik laat zien wat de structuur is van die pagina, welke elementen ik ervoor gebruikt heb.

In de Repeater element maak ik voor bepaalde elementen gebruik van conditions. Dat is nodig omdat niet alle items in de portfolio websites zijn, als het Google Ads items betreft is er slechts 1 afbeelding en moet dus het element Afbeelding gebruikt worden en niet het element Slider.
Dit is de pagina waar de webmaster enkel een aantal velden moet invullen van een WordPress 'post'.

ACF velden voor dynamische pagina's

Dit zijn de velden die aangemaakt kunnen worden (in ACF) en daarna gebruikt kunnen worden in Oxygen om de meest uiteenlopende dynamische pagina's te kunnen maken zoals ik in de voorbeelden hierboven liet zien:

Voordelen van Oxygen Builder voor dynamische pagina's

Dynamische pagina's zonder Oxygen

Je hoeft natuurlijk geen 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, en/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 Oxygen en betreffende methode.

Layout zónder custom fields, 3 opties:

Layout mèt custom fields: 

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 persoonlijke profielpagina's en een voor een portfolio. Soms zijn er ook plugins waar verschillende pagina's mee gemaakt kunnen worden zoals ZOO van Yootheme.


Nadelen

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).  Dat item kan vervolgens door de webmaster gekopieë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

Een post maken en die hergebruiken voor elk nieuw item

Voor alle typen pagina’s maak je een Post (WordPress) 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

Layout mèt custom fields

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

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

Nadelen

Custom fields in WordPress page builder 'Divi builder'

Wat kan met Oxygen sinds 2018 ook al met de page builder 'Divi builder' van Elegant themes

Nadelen

WordPress custom fields plugin gebruiken (zonder Oxygen)

Er zijn naast ACF een aantal andere custom fields plugin geschreven voor WordPress. De bekendste zijn Toolset, Meta box en Pods. Sinds 2020 gebruik ik voor nieuwe sites geen ACF meer maar Metabox. 

Nadelen 
Voordelen 

Conclusie

Oxygen 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 content toe te voegen, eenvoudiger wordt het niet.

Oxygen lijkt mij in veel gevallen een uitstekend alternatief voor het gebruik van plugins, custom fields oplossingen en zéker voor het gebruik van standaard 'Posts' (WordPress) 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.

"Uitgebreide tekstadvertenties" ombouwen naar "Responsive zoekadvertenties"

Wat zijn in Google Ads responsive zoekadvertenties

Aanvankelijk dacht ik dat de term ‘responsive ad’ alleen maar sloeg op het zich aanpassen van de advertentie aan (het formaat) van het beeldscherm van de gebruiker, zoals dat bij responsive websites het geval is. Het type 'Uitgebreide tekstadvertenties' die even daarvoor waren geïntroduceerd door Google hadden die mogelijkheid ook al. En omdat het advertentietype ‘responsive ad’ toch nog maar in de ‘Beta versie’ was heb ik het niet bovenaan mijn lijstje gezet om verder uit te zoeken. 
Totdat een gewaardeerde klant uit Duitsland mij er opmerkzaam op maakte. Ze had een telefoontje van Google gehad over verbetermogelijkheden in haar Google Ads account. Ik zou het allemaal wel even gaan nakijken en er snel bij haar op terugkomen. Even later moest ik bijna met het schaamrood op de kaken mijn klant laten weten dat het wel degelijk een ander soort advertentie-type was, en zeker interessant genoeg om direct mee aan de slag te gaan.

In responsive zoekadvertenties kun je tot maar liefst vijftien verschillende koppen en vier beschrijvingen zetten. Het aantal koppen en beschrijvingen dat Google toont is nog steeds hetzelfde; maximaal 3 respectievelijk 2. Het werkt als een soort carrousel; Google toont de koppen en beschrijvingen in wisselende samenstellingen. Je kunt je voorstellen dat het aantal combinaties bijna eindeloos is. Google beoordeelt, mbv 'Machine learning' welke koppen en beschrijvingen, en combinaties daarvan, het beste werken. Daarbij zal Google kijken naar verschillen in conversie, CTR etc. Vervolgens zullen de meest succesvolle regels en combinaties vaker gebruikt gaan worden. 

Responsive ads maken

Voor sommige Google accounts was het nog niet zo lang geleden dat ik de betreffende klant had overtuigd om de bestaande advertenties te laten upgraden naar uitgebreide tekstadvertenties, dus ik wilde eigenlijk niet weer aankomen met de volgende upgrade.
Gelukkig was het mogelijk de bestaande zoekadvertenties om te bouwen naar de nieuwe variant. Althans, je kunt ook helemaal opnieuw beginnen maar dat is niet echt nodig.

Werkwijze ombouwen naar responsive zoekadvertenties.

Als ik een responsive zoekadvertentie aanmaakte werden er veel velden al automatisch door Google ingevuld, dus dat schoot mooi op. Op de volledigheid viel alleen nog wel wat af te dingen; ik zag dat er een aantal koppen en beschrijvingen niet in de nieuwe responsive ads waren terecht gekomen. Het zou jammer zijn om dat die koppen en beschrijvingen niet te gaan hergebruiken, mijn klant had er tenslotten nog niet zo lang geleden voor betaald om ze te laten aanmaken. Daarom heb ik een poging gedaan om het allemaal wat systematischer aan te pakken zodat ik alles kon hergebruiken. De werkwijze die ontstond bestond grofweg uit deze 4 handelingen:

  1. Advertentierapport maken van de bestaande ads. (Ik koos voor ‘Excel bestand’)
  2. Nieuwe advertentie van het type ‘Responsive zoekadvertentie’ maken
  3. De regels die ik tegenkwam in de door Google aangemaakte ad zocht ik op in het advertentierapport en die gaf ik een kleur (groen).
  4. In de tweede responsive ad die ik aanmaakte liet ik de koppen onaangeroerd en plakte ik de nog niet gebruikte beschrijvingen uit mijn Excel sheet (de nog niet groen gekleurde cellen dus) er in.
    ​Ook paste ik de zichtbare url aan. Als je in Excel cellen een kleur gaat geven wil het nog wel eens gebeuren dat je daarin behoorlijk doorslaat. Of laat ik voor mezelf spreken; de kleuren lichtgrijs en oranje haalde ik toch maar weer weg om het overzicht te behouden.

Automatisch de advertentiekwaliteit laten beoordelen

Sommige nieuw aangemaakte responsive zoekadvertenties kregen al direct de kwalificatie ‘Uitstekend’. Omdat dit voor mij riekte naar 'de slager keurt z’n eigen vlees' ben ik maar 'ns gaan kijken in hoeverre ik vond dat de ads inderdaad ‘Uitstekend’ waren. Dit voor voor zover dat uberhaubt al te zeggen is van een ad die nog geen enkele vertoning heeft gehad. Laat staan dat er al op geklikt is.
Ook al vindt Google een nieuwe ad helemaal geweldig, toch kwam ik regelmatig stukjes tekst tegen die er niet in hoorden. Koppen of beschrijvingen die in de oude advertentie waar Google ze uit gehaald had waren bedoeld om aan te sluiten op een andere regel. Nu de koppen allemaal door elkaar gebruikt kunnen gaan worden hadden ze betekenis verloren. Een voorbeeld daarvan is ‘Nieuw voor de prijs van een’. Stel je voor dat dat de bovenste kop van een advertentie is en dat de tweede regel die Google kiest om te vertonen is ‘Transporters altijd 100 voorraad’. Dat zou raar zijn. Kan ik dan koppen niet meer op elkaar laten doorlopen? Jawel dat kan nog steeds maar dan zou ik die koppen moeten vastzetten, bijvoorbeeld op de eerste positie.
Ik zou dus verwachten dat de advertentiekwaliteit zou blijven steken op ‘Gemiddeld’. Of op z’n best, als 'goed’ worden bestempeld. Om van ‘Onvolledig’ naar ‘Gemiddeld’ te komen haalde ik de nu misplaatste woorden weg (wat dus nog niet bijdroeg aan de beoordeling), voegde ik koppen toe, bracht ik wat meer variatie aan in die koppen en in de beschrijvingen. Dat was soms nogal wat gezoek was, naar productkenmerken die ik er nog niet in gezet had.
Uiteindelijk steeg de beoordeling dan naar ‘Uitstekend’ en klikte ik op ‘Nieuwe advertentie opslaan’, Ik nam me voor binnenkort ook deze grote Google Ads account wijziging ‘ns aan een kritische analyse te onderwerpen om te zien of de klant er inderdaad wat mee zou zijn opgeschoten. Ik lees dat de CTR zo'n 15% omhoog kan schieten dus dat wil ik wel eens zien.

Wat verstaat Google onder 'De advertentiekwaliteit'

De advertentiekwaliteit wordt trouwens door Google gedefinieerd als: ‘..een indicatie van de relevantie en diversiteit van uw advertentiecombinaties. Met meer relevante en unieke content kunt u de juiste advertentie aan uw klanten weergeven en de prestaties van uw advertentie verbeteren.’.
Omdat de beoordelingstool die Google introduceert je aanzet tot het zoeken naar dat ene nog onvermelde productkenmerk, USP of call-to-action vind ik de tool zeker een waardevolle toevoeging en verwacht ik er gebruikt te blijven maken. Maar dus wel zonder er blind op te vertrouwen..

Vierde beoordelingscriterium toegevoegd

Ergens tussen eind juli en 5 augustus werd er een vierde beoordelingscriterium toegevoegd om de advertentiekwaliteit te meten. Dit criterium is: "Gebruik populaire zoekwoorden in uw koppen". In bovenstaande afbeelding van de advertentiekwaliteit is dit vierde item nog niet weergegeven.

Feedback naar Google gestuurd

Omdat het advertentie type 'responsive zoekadvertentie' zich nog in de beta versie heb ik Google van feedback voorzien. In mijn feedback gaf ik aan dat ik het jammer vindt dat er slechts 1 zichtbare url kan worden opgegeven, ik had graag gezien dat ik ook hiervoor meerdere varianten kon toevoegen. Zodat ook daarvoor, net als voor de 15 koppen en 4 beschrijvingen, een 'best of all’ zou kunnen worden aangewezen. Om die vervolgens vaker te gebruiken in de advertentie.
Google reageerde met "Ik heb de suggestie voorgelegd bij de desbetreffende afdeling. Echter krijgen wij hier geen feedback op terug en moeten ook wij afwachten of de suggestie word geïmplementeerd."

Wat heeft de overstap naar responsive ads nou allemaal opgeleverd

De CTR ging er sinds de overstap naar responsive ads eind juni eigenlijk alleen maar op achteruit, marginaal, maar toch. Oei dat had ik niet verwacht. De ads zijn dus in feite oninteressanter geworden voor de mensen die 'm te zien kregen; er werd minder vaak op geklikt. Maar ik heb ook gekeken naar de conversies die we meten, het aantal conversies in de maanden juli en augustus lag hoger, de kosten per conversie daalden 12%. De kosten per klik zijn ook gedaald, zonder dat we gevonden worden op goedkopere zoektermen want die had ik dus juist niet aangepast. In de twee maanden na de omzetting naar responsive ads waren de kliks € 0,05 goedkoper geworden om precies te zijn. Gemiddeld wordt er 2500 keer geklikt per maand, dus dat betekent een regelrechte besparing op jaarbasis van €1500,-.

Een veilige website

Gevaren

Een website bestaat uit de basissoftware en (meestal) een aantal geïnstalleerde plugins. In de software kunnen fouten in de code zitten, van zowel WordPress als de daarop geinstalleerde plugins. Een hacker kan die fouten gebruiken om bijvoorbeeld de homepage te vervangen door een pagina van de hacker zelf. Jou bedrijf of organisatie kan schade ondervinden van een dergelijke aanval. Het is daarom belangrijk maatregelen te nemen. Vertrouw niet alleen op het updaten naar 'de laatste software update', voor WordPress (of ander CMS) en alle gebruikte plugins, want elke dag worden er weer nieuwe lekken gevonden.

Maatregelen die ik neem

Webdegelijk neemt, als je daarvoor gekozen hebt, al bij de bouw van een website beveiligingsmaatregelen.
Een greep uit de beveiligingsmaatregelen die ik doorgaans neem vind je hieronder.

Is jou website beveiligd?

Vertrouw niet alleen op het updaten naar 'de laatste software update', voor WordPress (of ander CMS) en alle gebruikte plugins, want elke dag worden er weer nieuwe lekken gevonden.

Automatische WordPress core en plugins updates

Als je er voor kiest automatisch naar alle nieuwe WordPress versies te updaten kan het zijn dat er zich soms compatibiliteitsproblemen met themes of plugins voordoen. Door een update van de core WordPress kunnen bepaalde functies of kan zelfs de hele website vast lopen, waardoor je ook nog eens geconfronteerd kunt worden met hoge herstelkosten. Daarom is het, vooral voor een site die veel plugins gebruikt soms verstandiger updates naar grotere (major) WordPress releases handmatig uit te voeren. Ook kun je er voor kiezen de updates van de plugins handmatig uit te voeren, en dus de updates van alle WordPress updates wel automatisch te laten verlopen. Door plugins stuk voor stuk te updaten kan ik snel problemen zien, terwijl als er pas problemen geconstateerd worden op een moment dat er al meerdere plugins geupdate zijn het een stuk lastiger is de oorzaak (plugin) te achterhalen en een oplossing te vinden.

Over het algemeen is het niet aan te bevelen naar alle nieuwe versies automatisch te updaten, kies voor enkel updates uitvoeren naar onderhouds- en beveiligingsreleases.

Al na een jaar een nieuwe website? Nee toch?!

Waarom soms al na 1 jaar een nieuwe site?

Meestal gaat een site twee of drie jaar mee. Want over het algemeen gebeurt het pas na die periode dat de bezoekers van je website zien dat een site niet de uitstraling en functionaliteit heeft die ze gewend zijn van andere websites. Dan is het een gemiste kans om die bezoekers te boeien en te verleiden contact op te nemen met je bedrijf of anderszins te converteren.

In de tijd dat ik websites bouw, sinds 2004, zie ik veranderingen elkaar in hoog tempo opvolgen, in het ene jaar gaat dat zelfs nog een stukje sneller dan in het andere. Zo maakte de websitebuilder Gridbox (voor Joomla) zoveel ontwikkelingen door binnen de periode van 1,5 jaar tijd dat het andere page builders, inclusief die voor WordPress, ruimschoots inhaalde. Ook liet het de template frameworks, zoals het door mij veel gebruikte Gantry framework, achter zich, zeker wanneer het gaat om het bouwen van een statische website. Van een statische website is, anders dan de term doet vermoeden, ook de content eenvoudig aan te passen. Door deze snelle ontwikkelingen is nieuwbouw na 1-2 jaar soms een interessantere optie dan wachten totdat de meer gebruikelijke levensduur van 2-3 jaar voorbij is.

Redenen voor het laten ontwikkelen van een nieuwe site

​Hieronder ga ik in op welke ontwikkelingen dat kunnen zijn, als er geen ontwikkelingen tussen zitten waarmee je zelf te maken hebt is er dus volgens mij geen reden een nieuwe site te laten bouwen. Als je zelf je huidige website niet kunt beoordelen dan help ik je er graag bij.

Onvolkomenheden huidige website

Kost het oplossen van onvolkomenheden in de huidige website, soms ontstaan door updates van browsers (zoals Chrome, Safari etc), is relatief veel tijd? In een nieuw website systeem zitten die compatibiliteitsproblemen niet. Of ze zijn makkelijker te voorkomen.

Ontwikkelingen huidige website software

Zijn er genoeg ontwikkelingen in je huidige websitebuilder? Check hiervoor de zogenaamde "changelog" van de website builder die je gebruikt. Komt er maandelijks een update uit? Zijn de toegevoegde functie en bugfixes relevant voor jou website? M.a.w, kun je, als je dat zou willen, maandelijks profiteren van updates die je in feite niets kosten?

Eisen van Google

Is de website in lijn met nieuwe eisen van Google? Zoekmachines passen vaak algoritmes aan waardoor bijvoorbeeld de snelheid van de site op mobiel beeldscherm een belangrijke factor geworden is in de ranking (juli 2018).

Responsiveness

Biedt jou huidige website builder mogelijkheden om per beeldscherm (desktop, laptop, tablet liggend, tablet staand, mobiel liggend, mobiel staand) te bepalen hoe, maar ook ook wèlke, content getoond moet worden? Dat gaat dus verder dan dat de site zich aanpast aan het formaat van het beeldscherm van de bezoeker. Met zogenaamde "media queries" til je responsive naar een hoger plan. Zo wil je bijvoorbeeld op klein beeldscherm voorkomen dat de pagina titel teveel ruimte inneemt en vind je het niet nodig dat er een slider zichtbaar is; je hebt liever in plaats daarvan een afbeelding omdat die sneller tevoorschijn komt.

Webmaster heeft te veel tijd nodig voor aanpassingen

Kost het maken van een nieuwe pagina veel tijd? Omdat je alle elementen opnieuw moet opmaken omdat je geen zogenaamde ‘presets’ hebt. Of je wilt bijvoorbeeld de pagina titels transparantie geven en dat kan alleen maar door overal de titel afzonderlijk aan te passen, een hele klus.

Gebrek aan functionaliteit

Wil je een blog? Vaak zit die functie niet (volledig genoeg) in een bestaande website en wel in bijvoorbeeld Gridbox waardoor je geen plugin hoeft te laten inbouwen in je huidige website.

Designtrends

Zijn er bepaalde designtrends zijn die je niet wilt missen? Net als met andere trends is het zo dat het bijna ondoenelijk is alle designtrents te volgens je zult hierin keuzes moeten maken omdat je budget vast niet ongelimiteerd is.

Browser updates

Zijn er browser updates geweest waardoor bijvoorbeeld de efficiency van content creatie omhoog zou kunnen? Oké, dit klinkt allemaal vrij technisch dus ik geef weer een voorbeeld. Stel dat je webmaster gewend is een foto op een bepaalde manier te bewerken voordat hij ‘m op de website plaatst maar deze handeling in photoshop kost best veel tijd; je wilt eigenlijk dat de website het effect automatisch voor je creëert. Als https://caniuse.com/#feat=css-backgroundblendmode aangeeft dat de brouwser ook de door de website bewerkte foto goed laat zien dan kun je dus overstappen op automatisch bewerking en je webmaster veel tijd besparen. Nog een voorbeeld van een browser update waar je je voordeel mee kunt doen: Je logo hoef je niet meer in jpg of png file te hebben staan, het kan nu ook in svg, waardoor je logo ook op mobiel beeldscherm scherp is (https://caniuse.com/#feat=svg)

Conclusie

​Heb je de hierboven genoemde vragen vaak met 'nee' beantwoord des te waarschijnlijker is het dat je besluit voorlopig nog even geen nieuwe website laat bouwen.
Zie je echter wel reden om aan een (vroegtijdige) vervanging van je site te beginnen dan is het belangrijk te weten wat de voordelen zijn maar ook of er onderdelen zijn van je site waarin het nieuwe systeem juist niet voorziet. Dus eigenlijk zou je je webbouwer ook moeten vragen of er ook zaken zijn, specifiek voor jou website, die in het nieuwe systeem relatief moeilijk te realiseren zijn. Mocht je die punten toevallig erg belangrijk vinden dan kan het dus toch verstandig zijn nog even af te wachten. Ook als het binnen je bedrijf ‘politiek’ lastig ligt al na 1 jaar een grote update door te voeren dan kan het natuurlijk handiger zijn nog even te wachten. Want wachten hoef je vaak (soms gek genoeg) niet zo te verdedigen.