1) Waarom we een nieuwe website hebben gemaakt en niet zomaar van thema konden wisselen

Toen we voor het eerst de noodzaak voor verandering identificeerden, leek de taak eenvoudig: "Verander het bovenste blok en maak de call-to-action effectiever." Op het eerste gezicht lijkt dit misschien een snelle oplossing, maar we realiseerden ons al snel dat deze kleine taak veel grotere onderliggende problemen met de structuur en het ontwerp van de site onthulde. Het probleem was niet slechts één blok; het was de hele architectuur van de site die een revisie nodig had.

Onze website was in de loop der tijd gebouwd, met verschillende pagina's die waren toegevoegd met verschillende ontwerpen en lay-outs, zonder een verenigend thema of sjabloon. Elke pagina was uniek in zijn ontwerp, wat misschien creatief klinkt, maar leidde tot een belangrijk probleem: inconsistentie. Als we door zouden gaan en een nieuw ontwerp zouden maken voor alleen het bovenste blok, terwijl we de rest van de site zouden laten zoals die was, zou dat betekenen dat we dat blok handmatig moesten bijwerken op meer dan 700 pagina's en berichten. Erger nog, dit handmatige proces zou elke keer dat we toekomstige wijzigingen wilden aanbrengen, moeten worden herhaald. Stel je de inefficiëntie voor van het moeten doorspitten van honderden pagina's om ervoor te zorgen dat elke pagina de nieuwste updates had. Het werd al snel duidelijk dat het niet duurzaam zou zijn om door te gaan met de oude site.

Naast de logistiek van het updaten van elke pagina, moesten we ook rekening houden met de algehele gebruikerservaring. Gebruikers verwachten tegenwoordig naadloze, samenhangende ervaringen wanneer ze een website bezoeken. Als ze naar beneden scrollen op een pagina en zien dat het ontwerp inconsistent is – waarbij elk blok verschillende stijlen gebruikt – creëert dat een onsamenhangende en onprofessionele indruk. Erger nog, wanneer een gebruiker van de ene naar de andere pagina gaat en merkt dat de lay-out en het ontwerp volledig anders zijn, versterkt dat een gevoel van wanorde.

De inconsistentie reikte verder dan de lay-out. Veel van de afbeeldingen op de site waren verouderd, slecht gestyled of zelfs verkeerd gegenereerd door neurale netwerken. Deze afbeeldingen voldeden niet aan de moderne ontwerpnormen en het vervangen ervan was een andere ontmoedigende taak. Het gebruik van slechte afbeeldingen weerspiegelde de algehele kwaliteit van de site slecht, waardoor gebruikers een negatieve indruk kregen van het product of de service die we aanboden.

Er was geen eenvoudige manier om de site uitgebreid te updaten met een tool als Elementor. Elke pagina en elk blok bevatte zijn eigen inline-stijlen, wat betekende dat wijzigingen niet wereldwijd konden worden doorgevoerd. Als we de stijl van de site wilden updaten, moesten we elke pagina afzonderlijk doorlopen en elk blok handmatig updaten, wat tijdrovend en inefficiënt zou zijn. Met dit in gedachten werd het duidelijk dat onze enige oplossing was om een nieuwe website vanaf nul te bouwen. Dit zou ons in staat stellen om alle content over te zetten met behoud van dezelfde URL's, maar met een nieuw, consistent en eenvoudig te updaten ontwerp.

2) Waarom we besloten om Elementor niet te gebruiken

Elementor is een van de populairste paginabuilders voor WordPress. Op het eerste gezicht lijkt het een geweldige tool die het mogelijk maakt om snel en eenvoudig pagina's te maken. Echter, na er uitgebreid mee gewerkt te hebben, kwamen we verschillende beperkingen tegen waardoor we besloten om Elementor te verlaten en in plaats daarvan te kiezen voor een op maat gemaakte website.

Beperkingen en uitdagingen van Elementor:

1. Bugs en glitches : Hoewel Elementor veel nuttige functies biedt, is het niet zonder technische problemen. Bijvoorbeeld, toen we een pagina kopieerden en probeerden te bewerken, zag de nieuwe pagina er vaak anders uit dan de originele, zelfs voordat we wijzigingen hadden aangebracht. Er waren vaak bugs met de manier waarop elementen werden weergegeven, zoals de eigenschap "maximale afbeeldingsbreedte" die niet correct functioneerde. Deze glitches maakten het moeilijk om consistente styling op alle pagina's te garanderen.
2. Te veel creatieve vrijheid, wat leidt tot inconsistentie : Een van de belangrijkste verkoopargumenten van Elementor is de mogelijkheid om alles aan te passen. Deze flexibiliteit kan echter een tweesnijdend zwaard zijn, vooral wanneer meerdere editors aan de site werken. Het is gemakkelijk voor niet-professionals om onbedoeld pagina's te maken met inconsistente ontwerpen. We zagen bijvoorbeeld gevallen waarin editors roze tekst op roze knoppen gebruikten of vliegende oranje driehoeken op de achtergrond toevoegden, wat resulteerde in een rommelig en verwarrend ontwerp. Zonder een strikt ontwerpsysteem werd het onmogelijk om een samenhangende visuele identiteit te behouden.
3. Beperkte aanpassing voor geavanceerde functionaliteit : Hoewel Elementor uitblinkt in basispagina-opbouw met tekst en afbeeldingen, wordt het een grotere uitdaging als u aangepaste functionaliteit wilt toevoegen. We waren vaak beperkt tot de ingebouwde blokken, die moeilijk aan te passen waren voor complexere functies. Naarmate onze behoeften verder gingen dan basislay-outs, werden de beperkingen van Elementor steeds duidelijker.
4. Opgeblazen code en prestatieproblemen : Elementor's methode voor het bouwen van pagina's introduceert overmatige nesting van elementen. Elementor genereert bijvoorbeeld automatisch meerdere
   containers binnen andere

   elementen, elk met zijn eigen set stijlen. Dit resulteert in een opgeblazen structuur die een negatieve invloed heeft op de laadsnelheid, de paginaprestaties en uiteindelijk de SEO-rangschikking van de website. Toen we snelheidstests uitvoerden, waren de resultaten consistent slecht en de zware code die door Elementor werd gegenereerd, was grotendeels de schuld.
5. Geen A/B-testmogelijkheden : In het digitale landschap van vandaag de dag is A/B-testen essentieel voor het optimaliseren van de gebruikerservaring. Elementor biedt echter niet de mogelijkheid om verschillende versies van de site aan verschillende gebruikers te tonen. Iedereen ziet dezelfde site, wat onze mogelijkheid beperkt om ontwerpelementen zoals kleuren, knopvormen en achtergrondafbeeldingen te testen en te verfijnen. Zonder deze functionaliteit zouden we de site niet kunnen optimaliseren op basis van echt gebruikersgedrag.
6. Database Bloat : Misschien wel een van de belangrijkste nadelen van Elementor is hoe het omgaat met stijlen en content. Elementor slaat stijlen, geneste structuren en andere onnodige tags op die gemengd zijn met de content in de database. Dit leidt tot een opgeblazen database die niet wordt opgeruimd, zelfs niet als Elementor is uitgeschakeld of verwijderd. Als gevolg hiervan lost het overschakelen naar een nieuw thema of framework het probleem niet op: die stijlen blijven ingebed in de pagina's en blijven problemen veroorzaken.

Met al deze uitdagingen in gedachten werd het duidelijk dat we een robuustere oplossing nodig hadden. We besloten een nieuwe, onafhankelijke website te bouwen zonder Elementor, en kozen voor een duurzamere en flexibelere aanpak.

3) Hoe maak je een pagina op de nieuwe site

Door de nieuwe site vanaf nul op te bouwen, kregen we de kans om een schoon, gestroomlijnd proces voor het maken van pagina's op te zetten. In het nieuwe systeem is het maken van een pagina eenvoudig:

1. Meld u aan bij het WordPress-beheerpaneel en klik op Pagina's -> Nieuwe pagina toevoegen .
2. U ziet de standaard WordPress-editor, waarin u tekst kunt schrijven of plakken, links kunt toevoegen en afbeeldingen kunt uploaden.

Dit proces is eenvoudig maar flexibel. In plaats van te vertrouwen op het ingewikkelde bloksysteem van Elementor, is de content editor in WordPress veel schoner, wat snelle updates en eenvoudige aanpassingen mogelijk maakt. Onder de editor bevinden zich instellingen voor Advanced Custom Fields (ACF), die al zijn geconfigureerd om consistentie over de hele site te behouden.

Met ACF kunnen we flexibele contentsecties maken, met blokken zoals Content 1…Content 15 , waar u eenvoudig de titel, tekst, afbeelding en knoplabels voor elke sectie van de pagina kunt instellen. Deze blokken wisselen automatisch de positionering van afbeeldingen en tekst af, waardoor de lay-out visueel aantrekkelijk blijft zonder dat er handmatige aanpassingen nodig zijn.

Voor afbeeldingen hebben we een kleurmatchingsysteem geïmplementeerd dat automatisch een gradiënt toepast in de hoofdkleuren van de site. Dit zorgt ervoor dat alle afbeeldingen aansluiten bij de algehele esthetiek. Voor logo's of screenshots waarbij de kleuren intact moeten blijven, is er een optie 'kleuren behouden' die de gradiënt overschrijft.

Dit systeem vereenvoudigt het beheer van content, terwijl de consistentie van het ontwerp op alle pagina's behouden blijft.

4) Hoe maak je een nieuw bericht?

Het maken van berichten op de nieuwe site verloopt volgens hetzelfde gestroomlijnde proces als het maken van pagina's, met een paar belangrijke verschillen:

• Berichten hebben URL's waarin ../blog/.. voorkomt, waardoor ze te onderscheiden zijn van pagina's.
• In de rechterzijbalk worden automatisch de drie nieuwste artikelen in een blok weergegeven, waardoor de blog dynamisch en boeiend blijft.

De template voor alle posts bevindt zich in het bestand template-parts/content/content-single.php , dat de structuur en lay-out van elke blogpost afhandelt. Deze consistente template zorgt voor eenvoudige updates en zorgt ervoor dat alle posts voldoen aan dezelfde ontwerprichtlijnen.

5) Geavanceerde aangepaste velden (ACF)

ACF is een essentieel onderdeel van de ontwikkeling van onze nieuwe website. Het stelt ons in staat om aangepaste velden te maken die eenvoudig beheerd kunnen worden via het WordPress admin paneel. Velden zoals content_1 worden gerefereerd in de PHP code, waardoor we dynamisch de juiste content voor elke pagina en post kunnen ophalen.

Deze flexibiliteit is van cruciaal belang om ervoor te zorgen dat we de site efficiënt kunnen beheren en updaten, terwijl we indien nodig nog steeds ruimte bieden voor aanpassingen.

6) A/B-testen

Een van de belangrijkste verbeteringen die we met de nieuwe site hebben doorgevoerd, was de implementatie van A/B-testen. Met A/B-testen kunnen we twee versies van de site vergelijken om te zien welke het beste presteert bij gebruikers. Dit kan het testen van verschillende kleuren, knopvormen, achtergronden of zelfs lay-outs omvatten.

We hebben deze functionaliteit geïmplementeerd met behulp van GET-parameters in de URL. Zo kunnen bijvoorbeeld twee identieke advertentiecampagnes worden gemaakt, maar met verschillende URL's:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Wanneer gebruikers op deze links klikken, wordt de parameter opgeslagen in een cookie. Afhankelijk van de waarde van de parameter, zal de site verschillende versies van de pagina tonen, zoals verschillende knopkleuren of achtergrondafbeeldingen. Dit stelt ons in staat om waardevolle gegevens te verzamelen over gebruikersvoorkeuren en -gedragingen.

Alle gebeurtenissen worden vastgelegd in een.csvbestand en in een MySQL-database, waardoor we de gegevens kunnen analyseren en weloverwogen beslissingen kunnen nemen over verbeteringen aan de site.

7) Het bestand functions.php

8) Omgaan met SEO en sitesnelheid

Een belangrijke focus tijdens de revisie van de website was het verbeteren van SEO en de algehele siteprestaties. De originele site, gebouwd met Elementor, had problemen met langzame laadtijden en suboptimale SEO-praktijken vanwege opgeblazen code en niet-geoptimaliseerde afbeeldingen.

SEO verbeteren

Om ervoor te zorgen dat onze nieuwe site SEO-vriendelijk was, hebben we vanaf het begin een aantal best practices geïmplementeerd:

• Semantische HTML : We hebben de HTML van de site zorgvuldig gestructureerd met het juiste gebruik van headertags (
  ,
  , etc.), waardoor zoekmachines de inhoudshiërarchie eenvoudig konden parseren en begrijpen. Dit is met name belangrijk voor zowel SEO-ranglijsten als toegankelijkheid.
• Metatags en Open Graph-gegevens : We hebben de Yoast SEO- plug-in gebruikt om metatitels, beschrijvingen en Open Graph-gegevens voor sociaal delen te verwerken. Door Yoast te gebruiken, hebben we ervoor gezorgd dat elke pagina en post geoptimaliseerde metagegevens had, wat cruciaal is voor zichtbaarheid in zoekmachines en doorklikpercentages van socialemediaplatforms.
• Schema Markup : Met behulp van het bestand functions.php hebben we aangepaste schema markup toegevoegd voor gestructureerde data, waardoor de manier waarop zoekmachines onze pagina's in zoekresultaten weergeven, is verbeterd. We hebben bijvoorbeeld schema's toegevoegd voor artikelen, case studies en producten, waardoor zoekmachines onze content beter kunnen categoriseren.

functie add_schema_markup() {
echo'
  {
"@context": "http://schema.org",
"@type": "Organisatie",
"naam": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );


Optimalisatie van sitesnelheid

Prestaties zijn een kritische factor, niet alleen voor de gebruikerservaring, maar ook voor SEO-ranglijsten. We hebben verschillende stappen ondernomen om de sitesnelheid te verbeteren:

• Image Optimization : We hebben gebruikgemaakt van moderne afbeeldingsformaten zoals WebP , die betere compressieverhoudingen bieden dan traditionele formaten zoals PNG en JPEG. Alle afbeeldingen werden weergegeven in de juiste grootte op basis van de schermresolutie van de gebruiker, wat snelle laadtijden garandeert, zelfs op mobiele apparaten.
• Lazy Loading : Door lazy loading voor afbeeldingen te implementeren, zorgden we ervoor dat alleen de afbeeldingen die zichtbaar waren op het scherm van de gebruiker, in eerste instantie werden geladen. Extra afbeeldingen werden geladen terwijl de gebruiker scrollde, waardoor de initiële laadtijden van de pagina werden verkort.
• Caching en minificatie : We gebruikten WP Rocket voor caching, minificatie en compressie van HTML-, CSS- en JavaScript-bestanden. WP Rocket hielp ons snellere laadtijden te bereiken door de algehele bestandsgrootte te verkleinen en statische gecachte versies van pagina's te serveren aan terugkerende bezoekers.

9) Database-optimalisatie en -opschoning

De oude website had een aanzienlijke hoeveelheid "junk" data verzameld vanwege Elementor's bloat en inefficiënte databasestructuur. Om ervoor te zorgen dat de nieuwe site soepel draaide, hebben we een grondige database-opschoning en -optimalisatie uitgevoerd.

• Oude Elementor-gegevens verwijderen

Zoals eerder vermeld, zelfs na het deactiveren van Elementor, waren de stijlen en instellingen nog steeds in de database ingebed. We gebruikten aangepaste query's om deze overtollige gegevens te verwijderen en de database op te schonen. Daarnaast verwijderden we alle ongebruikte mediabestanden, post-revisies en verlopen transients die zich in de loop van de tijd hadden opgehoopt.

• Database-indexering

We hebben de database ook geoptimaliseerd door indexen toe te voegen aan kolommen die vaak worden opgevraagd, waardoor databasequery's sneller en efficiënter werden. Bijvoorbeeld door een index toe te voegen aan depost_datumkolom versnelde zoekopdrachten met betrekking tot recente berichten, waardoor de prestaties van onze blogpagina's verbeterden.

Conclusie

De beslissing om een nieuwe website vanaf nul te bouwen, werd ingegeven door de beperkingen en inefficiënties van de oude site. Het simpelweg veranderen van het thema was geen haalbare optie vanwege inconsistenties in het ontwerp, opgeblazen stijlen en prestatieproblemen veroorzaakt door Elementor. Door een nieuwe site te maken met aangepaste ontwikkeling en Advanced Custom Fields, bereikten we een efficiëntere, samenhangende en professionelere website die de gebruikerservaring verbetert en tegelijkertijd gestroomlijnde updates en A/B-testfunctionaliteit mogelijk maakt. Deze nieuwe site biedt een solide basis voor toekomstige groei en verbeteringen.