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

• Advanced Tab.
  Kun je het beste uitschakelen
• Drag & Drop
  Is tricky om te laten gebruiken door de klant, vanwege dat styling soms gebaseerd is op de positie die een element inneemt op de pagina. 
• Reusable Parts.
  Een aanrader om beschikbaar te stellen aan de klant, want je zou een call-to-action section kunnen bewaren als reusable part en op die manier beschikbaar stellen aan de klant om zelf ergens op een pagina toe te voegen, eventueel in aangepaste vorm, dus met andere tekst bijvoorbeeld.
• Enable Design Library
  Zet alleen aan wanneer je ook daadwerkelijk een design library specifiek voor de klant ter beschikking stelt, zelf kies ik liever voor het maken van reusable parts die ik dan afhankelijk van welke parts het zijn wel of niet beschikbaar stel aan de klant.
• Disable Classes
  Die zet je in principe altijd aan zodat klanten nooit zomaar css classes kunnen gaan passen.
• Disable IDs
  Het aanpassen van een id zal geen gevolg hebben voor items elders op de site zoals dat met classes wel het geval is, maar dat is soms juist ook meteen het probleem; je wilt niet dat de layout van een knop op bijvoorbeeld de contact pagina aangepast wordt terwijl de layout van een knop op bijvoorbeeld de homepage hetzelfde zou moeten 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:

• Gebruik van deze plugin WPDevDesign – Oxygen – Navigator, die is weliswaar onveilig voor multi-user situaties want het negeert de ‘Lock this post in edit mode’, dus ook items zoals template die eigenlijk gelocked zijn kunnen kunnen worden aangepast maar het is prima wanneer ie gebruikt wordt tijdens de ontwikkeling van de site of in andere situaties wanneer er slechts 1 user bestaat die toegang heeft tot de site. 
• “Disable edit locking” inschakelen in Hydrogen Pack. Ook dit is prima voor multi-tab, maar niet aan te raden bij multi-user.

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.

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 alle in deze post genoemde factoren! Vervolgens zal ik dat rapport aan je voorleggen en gaan toelichten.
Hiervoor breng ik eenmalig €79,- in rekening. Eventuele knelpunten oplossen valt er dus niet onder, wel kan ik hiervoor desgewenst een offerte maken.

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: 

• Sticky moet zijn, dat betekend of ie bovenaan je browser window vastgeplakt moet blijven terwijl je naar beneden scrollt.
• Overlay moet zijn, dus over de eerste sectie heen moet vallen in plaats van dat de volgende sectie onderaan de header moet aansluiten. 

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:

• Code block element
• Link wrapper element
• Columns element
• Text element
• Div element
• Icon element.

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.. 

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.  

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. 

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’.

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.

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.

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?

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 meer dan 18.000 gebruikers in hun (besloten) facebook groep, in die groep zitten veelal ontwikkelaar die kennis delen over (het gebruik van) Oxygen. 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 onder de streep 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.) 

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. Welke elementen dat precies zijn zie je in de 2 afbeeldingen hieronder.

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:

• Reading progress bar element (Oxyextras)
• Post modified date element (Oxyextras)
• Table of contents element
• Adjacient posts element (Oxyextras)
• Author box element (Oxyextras)

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

• Date. Dit is een text element dat een dynamische waarde laat zien, namelijk de datum.
• Introtext. Dit is eveneens een text element, dat dit keer gevuld wordt door de waarde van het custom field ‘Introtekst’ van het blog bericht dat getoond wordt. Dit veld heb ik aangemaakt met de plugin ACF en heb ik toegewezen aan alle berichten van het type “Blog post”.
• Afbeelding, hiervoor gebruik ik een Image element, dat een dynamische afbeelding toont, de afbeelding die de webmaster heeft toegevoegd aan het blog bericht.

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:  

• Een nieuwspagina template wordt getoond wanneer er een post van het custom post type ‘Nieuws’ wordt getoond.
• Een profielpagina template wordt getoond wanneer er een post van het custom post type ‘Teamleden’ wordt getoond. 

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:

• De uitgelichte afbeelding.
• Dat datum van publicatie en eventueel de datum van updaten.
• De info over de schrijver.

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: 

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.