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 bij te werken met behulp van een tool als Elementor. Elke pagina en blok bevatte zijn eigen inline-stijlen, wat betekent dat er wereldwijd geen wijzigingen konden worden aangebracht. Als we de stijl van de site wilden bijwerken, zouden we elke pagina moeten doornemen en elk blok handmatig moeten bijwerken, wat tijdrovend en inefficiënt zou zijn. Met dit in gedachten werd het duidelijk dat onze enige oplossing was om helemaal opnieuw een nieuwe website te bouwen. Hierdoor kunnen we alle inhoud overbrengen met behoud van dezelfde URL's, maar met een nieuw, consistent en gemakkelijk bij te werken ontwerp.

2) Waarom we besloten om Elementor niet te gebruiken

Elementor is een van de meest populaire paginabuilders voor WordPress. Op het eerste gezicht lijkt het een geweldig hulpmiddel waarmee u snel en eenvoudig pagina's kunt maken. Nadat we er echter uitgebreid mee hadden gewerkt, kwamen we verschillende beperkingen tegen die ons deden besluiten om af te stappen van Elementor en in plaats daarvan te kiezen voor een op maat gemaakte website.

Elementor’s Beperkingen en uitdagingen:

1. Bugs en Glitches: Hoewel Elementor veel nuttige functies biedt, is het niet zonder technische problemen. Toen we bijvoorbeeld een pagina kopieerden en probeerden deze te bewerken, zag de nieuwe pagina er vaak anders uit dan het origineel, zelfs voordat we wijzigingen aanbrachten. Er waren regelmatig bugs over hoe elementen werden weergegeven, zoals de eigenschap “maximale beeldbreedte” die niet correct functioneerde. Deze storingen maakten het moeilijk om een consistente styling over pagina's heen 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 redacteuren aan de site werken. Het is voor niet-professionals gemakkelijk om onbedoeld pagina's met inconsistente ontwerpen te maken. We zagen bijvoorbeeld voorbeelden van redacteuren die 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: Terwijl Elementor uitblinkt in het bouwen van basispagina's met tekst en afbeeldingen, wordt het uitdagender wanneer u aangepaste functionaliteit moet toevoegen. We bevonden ons vaak beperkt tot de ingebouwde blokken, die moeilijk aan te passen waren voor complexere functies. Naarmate onze behoeften verder groeiden dan de basisindelingen, werden de beperkingen van Elementor’ steeds duidelijker.
4. Opgeblazen code en prestatieproblemen: Elementor’s methode voor het bouwen van pagina's introduceert overmatig nestelen van elementen. Zo genereert Elementor automatisch meerdere
   containers binnen andere

   elementen, elk met zijn eigen set stijlen. Dit resulteert in een opgeblazen structuur die de laadsnelheid, de paginaprestaties en uiteindelijk de SEO-ranglijst van de website negatief beïnvloedt. Toen we snelheidstests uitvoerden, waren de resultaten voortdurend slecht, en de zware code gegenereerd door Elementor was grotendeels de oorzaak.
5. Geen A/B-testmogelijkheden: In het huidige digitale landschap 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 ons vermogen beperkt om ontwerpelementen zoals kleuren, knopvormen en achtergrondbeelden 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 inhoud. Elementor slaat stijlen, geneste structuren en andere onnodige tags op die zijn vermengd met de inhoud 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 overstappen naar een nieuw thema of raamwerk het probleem niet op. Deze 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 hebben de beslissing genomen om een nieuwe, onafhankelijke website te bouwen zonder Elementor, waarbij we hebben gekozen 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 inhoudseditor in WordPress veel schoner, waardoor snelle updates en eenvoudige aanpassingen mogelijk zijn. Onder de editor staan instellingen voor Geavanceerde aangepaste velden (ACF), die al zijn geconfigureerd om de consistentie op 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 .csv bestand 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 belangrijk aandachtspunt tijdens de website-revisie was het verbeteren van SEO en de algehele siteprestaties. De oorspronkelijke site, gebouwd met behulp van Elementor, had problemen met trage laadtijden en suboptimale SEO-praktijken als gevolg van 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",
"hetzelfde als": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'schema_markup toevoegen' );


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 totale bestandsgrootte te verkleinen en statische gecachte versies van pagina's aan terugkerende bezoekers te leveren.

9) Database-optimalisatie en -opschoning

De oude website had een aanzienlijke hoeveelheid “junk”-gegevens verzameld vanwege een opgeblazen gevoel van Elementor’ en een inefficiënte databasestructuur. Om ervoor te zorgen dat de nieuwe site soepel verliep, hebben we een grondige databaseopruiming en -optimalisatie uitgevoerd.

• Oude Elementor-gegevens verwijderen

Zoals eerder vermeld, waren de stijlen en instellingen, zelfs na het deactiveren van Elementor, nog steeds ingebed in de database. We gebruikten aangepaste zoekopdrachten om deze overtollige gegevens te verwijderen en de database op te schonen. Bovendien hebben we ongebruikte mediabestanden verwijderd, revisies geplaatst en verlopen transiënten die zich in de loop van de tijd hadden verzameld.

• 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 de post_datum kolom versnelde zoekopdrachten met betrekking tot recente berichten, waardoor de prestaties van onze blogpagina's verbeterden.

Conclusie

De beslissing om een nieuwe website helemaal opnieuw te bouwen werd ingegeven door de beperkingen en inefficiënties van de oude site. Het simpelweg wisselen van thema was geen haalbare optie vanwege ontwerpinconsistenties, opgeblazen stijlen en prestatieproblemen veroorzaakt door Elementor. Door een nieuwe site te creëren met aangepaste ontwikkeling en geavanceerde aangepaste velden, hebben we een efficiëntere, samenhangende en professionele website bereikt 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.