De Vraag
Morris & Bella is een plant-based restaurant met een sterke visuele identiteit. Ze zaten vast aan een Squarespace website die traag was en beperkt in mogelijkheden. Elke aanpassing kostte moeite, de laadtijden waren slecht, en ze hadden geen echte controle over hun eigen site.
Ze wilden:
- Snelle website - geen Squarespace traagheid meer
- Volledige controle over elke sectie
- Zelf content beheren zonder afhankelijk te zijn van een developer
- Premium uitstraling die past bij hun merk
Wat Ik Gebouwd Heb
Een volledig custom WordPress theme met eigen Gutenberg blocks. Geen Elementor, geen WPBakery, geen plugins. Pure WordPress met moderne development practices.
Ik heb Next.js gebruikt om snel te prototypen en het design uit te werken. Daarna alles vertaald naar een production-ready WordPress theme.
De klant beheert nu zelf hun menu's, afbeeldingen en teksten - via de native WordPress editor. En de site laadt in een fractie van de tijd vergeleken met hun oude Squarespace.
Custom Gutenberg Blocks
Ik heb 9 custom blocks gebouwd die de klant vrij kan gebruiken:
| Block | Functie |
|---|---|
| Hero Section | Fullscreen beeld met overlay en animaties |
| Info Section | Tekst met feature cards en prijzen |
| Menu Carousel | Swipeable menu items met touch support |
| Suppliers | Leveranciers met alternerende layout |
| Contact Form | Formulier + Google Maps + openingstijden |
| Newsletter | Email signup met validatie |
| Blog Grid | Dynamische WordPress posts |
| Menu Items | Gerechten met prijzen en dieet-info |
| Press Section | Badges en persaandacht |
Elke block is volledig aanpasbaar via de WordPress editor. Geen code nodig.
De Technische Aanpak
Design → Prototype → WordPress
- Design in Next.js - Snel itereren en experimenteren
- Goedkeuring klant - Live prototype om feedback te verzamelen
- WordPress conversie - Elk component vertaald naar Gutenberg block
Next.js Prototype → WordPress Theme ├── React JSX → edit.js (editor) ├── Props → block.json (attributes) ├── Render → render.php (frontend) └── Interactivity → view.js (animaties)
Modern Build System
Geen handmatige CSS bestanden. Alles draait op:
- Tailwind CSS v4 - Snelle styling
- npm scripts -
npm run buildvoor productie - Hot reload - Wijzigingen direct zichtbaar
Performance First
Hun Squarespace site was traag. Deze niet:
- Geen zware plugins
- Geoptimaliseerde assets
- Lazy loading afbeeldingen
- Minified CSS/JS
Wat De Klant Nu Kan
Zelf Beheren
- Menu items toevoegen en aanpassen
- Afbeeldingen uploaden en croppen
- Teksten wijzigen
- Blog posts publiceren
- Openingstijden aanpassen
Zonder Developer
- Geen code kennis nodig
- Drag & drop blocks
- Live preview in editor
- Revisies en undo
Technologie Stack
| Categorie | Technologie |
|---|---|
| CMS | WordPress 6.4 |
| Editor | Gutenberg (native) |
| Blocks | Custom React components |
| Styling | Tailwind CSS v4 |
| Colors | OKLCH color space |
| Build | npm + webpack |
| Fonts | Cormorant Garamond + Inter |
| PHP | 8.0+ |
Squarespace vs Custom WordPress
| Squarespace | Custom WordPress | |
|---|---|---|
| Snelheid | Traag | Snel |
| Flexibiliteit | Beperkt | Onbeperkt |
| Eigenaarschap | Gehuurd | Eigen bezit |
| Maandkosten | €20-40/maand | Alleen hosting |
| Controle | Template-gebonden | Volledige vrijheid |
Waarom Custom Blocks?
De meeste WordPress developers gebruiken pagebuilders: Elementor, Divi, WPBakery. Waarom ik niet?
Pagebuilders:
- Laden 500KB+ extra JavaScript
- Maken sites traag
- Locken je in hun ecosysteem
- Complexe, verwarrende interface
Custom Gutenberg Blocks:
- Native WordPress, geen plugins
- Minimale overhead
- Volledige controle over output
- Cleane, onderhoudbare code
Het kost meer tijd om te bouwen, maar het resultaat is een site die jarenlang snel en stabiel blijft.
Van Squarespace naar een snelle, flexibele WordPress site. Neem contact op voor een gesprek.