Technische analyse

Vijf secties erbij is geen vijf keer meer werk

De nieuwe secties komen één keer in de template van de collectie; de inhoud per pagina komt uit velden — een rich-text veld voor de vragen, een beeld- of referentieveld voor de logo's, een lijst voor de stappen. Een pagina die een sectie niet nodig heeft laat het veld leeg, en de sectie verdwijnt automatisch.

De omgekeerde richting heeft geen eigen veld nodig

Om de realisaties per expertise te tonen zet je op de expertise-template een Collection List die filtert op Expertises = huidig item. Dat werkt via hetzelfde MultiReference-veld op de case. Een tweede referentie in de andere richting aanmaken geeft twee lijsten die uit elkaar kunnen lopen, en een kip-en-ei bij het aanmaken.

Datzelfde geldt voor “meer van deze klant”: dat kan Webflow niet, want een Collection List filtert op het huidige item via een referentieveld en niet via een tekstveld. Klant blijft een gewoon tekstveld in de feitenrij.

navbar7 — mega menu, vier kolommen

4 clusters → lg:grid-cols-4, vijf rijen per kolom (kop + vier links); het grootste cluster (vier expertises) past exact. Elke link draagt ook de omschrijving van die expertise. Afgevallen na het lezen van de broncode van 32 navbars: navbar30 (md:grid-cols-3 hardcoded, wikkelt het vierde cluster), navbar27 (lange titels breken over drie regels), navbar31 (rendert submenu's plat) en navbar25 (max. twee kolommen).

De menutitel zelf is geen link maar een knop die het menu opent; /expertises is bereikbaar via de knop in de voettekstbalk van het menu en via de footer.

De kop “23 realisaties binnen standenbouw” is native, maar verbuigt niet

In het UX-plan is dat één stuk tekst; in Webflow zijn het twee Finsweet-elementen met een vast woord ertussen. Visueel identiek, maar enkelvoud en meervoud — “1 realisatie” — verbuigen niet mee zonder een snippet.

Grijp niet naar de filters-componenten van Relume (filters1 tot filters6). Die zien er op papier uit als het filter dat je wil, maar het zijn lege scaffolds: nul props, alle opties hardcoded, en op de plek van de collectie een gestippelde placeholder. Het filteren komt nog altijd van Finsweet.

Twee dingen die makkelijk vergeten worden

De omleiding van http:// naar https:// en van plugnplay.be naar www werkt vandaag, maar moet opnieuw ingesteld worden. Search Console toont de http-homepage nog altijd met 174 klikken en 9.535 vertoningen per jaar: die versie staat dus nog los in de index.

Voor de Franse en Engelse adressen geldt hetzelfde stel omleidingen, met de vertaalde slugs. Dat is ongeveer zestig regels per taal. Blijven die sites bestaan, dan hoeft er alleen omgeleid te worden waar de slug wijzigt.

Wat er in de Relume-broncode mis is, en terugkomt bij elk nieuw component

Omgekeerde spread. In layout621, layout623, layout627, layout639, layout651, layout675 en layout237 stond { ...props, ...Defaults }, waardoor de defaults ná de props komen en alles wat je doorgeeft genegeerd wordt: het component toont dan Lorem ipsum. Zeven van de zeven uit de 600-reeks die we opgehaald hebben. Controleer dit bij elk nieuw component.

Hergebruikte lijstitems. layout627 rendert vier kaarten maar hergebruikte listItems[0] en [1], waardoor items 3 en 4 nooit verschenen.

Een grid dat maar één aantal aankan. layout621 en layout623 staan op md:grid-cols-[1fr_auto_1fr_auto_1fr]: drie kolommen met twee scheidingslijnen, en niets anders. Een vierde item schuift in de max-content kolom van een tweede rij en wordt samengedrukt. layout627 leest listItems[0] tot [3] rechtstreeks uit en wil er dus precies vier. Tel de items voor je een component kiest.

Kopniveaus die niet kloppen. logo1 zet zijn strookkop in een <h1> met de klasse text-h6 — een tweede H1 op elke pagina, en alle zes logo-secties hebben het. layout639 zet subkoppen in een <h6> direct onder een <h2>. In de Designer zet je de tag van dat tekstelement gewoon goed; de klasse blijft.

Relume schrijft voor Tailwind v4. Classes als size-3.75 en var(--color-scheme-background) bestaan daar vanzelf en in v3 niet — de class staat er dan wel, maar doet niets: de bol van de timeline werd 0 bij 0 pixels. In Webflow speelt dit niet, maar het bepaalt wel of je in een prototype ziet wat het component eigenlijk doet. En de Tailwind-preset zet container.screens.sm en .md op 100%, waar Tailwind @media (min-width: 100%) van maakt — ongeldige CSS die de productiebuild laat crashen op minificatie, terwijl de dev-server het slikt.