1 Een converterende landingspagina bouwen
Een landingspagina is de eerste indruk die bezoekers van je bedrijf krijgen. Met de juiste prompt maak je in één keer een professionele pagina die bezoekers overtuigt. De truc zit in het meegeven van de juiste structuur — Claude weet precies hoe een goede landingspagina is opgebouwd als je het de juiste context geeft.
Wat maakt een goede landingspagina?
- Hero sectie — Je belangrijkste boodschap + call-to-action, direct zichtbaar zonder te scrollen
- Social proof — Logo's, reviews, cijfers die vertrouwen wekken
- Voordelen/features — Wat levert het de bezoeker op?
- Hoe het werkt — Stappen die laten zien hoe eenvoudig het is
- Testimonials — Echte ervaringen van klanten
- Sluitende CTA — Herhaal je call-to-action onderaan
De prompt
Kopieer
Maak een professionele landingspagina in HTML en CSS voor [JOUW BEDRIJF/DIENST].
Bedrijf: [naam]
Wat we doen: [beschrijving in 1-2 zinnen]
Doelgroep: [wie zijn je klanten]
Gewenste actie: [wat moet de bezoeker doen? Bellen, formulier invullen, bestellen?]
De pagina moet bevatten:
1. HERO: Pakkende kop, ondertitel die het probleem benoemt, primaire CTA-knop, secundaire link
2. SOCIAL PROOF: Rij met 4-6 klantlogo's of een "X+ tevreden klanten" balk
3. VOORDELEN: 3-4 kaarten met iconen die uitleggen wat je krijgt
4. HOE HET WERKT: 3 genummerde stappen die het proces versimpelen
5. TESTIMONIALS: 2-3 reviews met naam, functie en sterren
6. PRICING: Duidelijk wat het kost (of "Vraag offerte aan")
7. FAQ: 4-5 veelgestelde vragen in een accordion
8. AFSLUITENDE CTA: Herhaal de belangrijkste call-to-action met urgentie
9. FOOTER: Contactgegevens, KVK, social media links
Design:
- Modern en clean, veel witruimte
- Mobile-first responsive (werkt perfect op telefoon én desktop)
- Kleurenschema: [jouw kleuren, of "donkerblauw met wit en een accentkleur"]
- Sticky navigatie die meescrollt
- Smooth scroll naar secties bij klikken op menu
Zet alles in één HTML-bestand met inline CSS. Geen externe libraries.
Bedrijf: [naam]
Wat we doen: [beschrijving in 1-2 zinnen]
Doelgroep: [wie zijn je klanten]
Gewenste actie: [wat moet de bezoeker doen? Bellen, formulier invullen, bestellen?]
De pagina moet bevatten:
1. HERO: Pakkende kop, ondertitel die het probleem benoemt, primaire CTA-knop, secundaire link
2. SOCIAL PROOF: Rij met 4-6 klantlogo's of een "X+ tevreden klanten" balk
3. VOORDELEN: 3-4 kaarten met iconen die uitleggen wat je krijgt
4. HOE HET WERKT: 3 genummerde stappen die het proces versimpelen
5. TESTIMONIALS: 2-3 reviews met naam, functie en sterren
6. PRICING: Duidelijk wat het kost (of "Vraag offerte aan")
7. FAQ: 4-5 veelgestelde vragen in een accordion
8. AFSLUITENDE CTA: Herhaal de belangrijkste call-to-action met urgentie
9. FOOTER: Contactgegevens, KVK, social media links
Design:
- Modern en clean, veel witruimte
- Mobile-first responsive (werkt perfect op telefoon én desktop)
- Kleurenschema: [jouw kleuren, of "donkerblauw met wit en een accentkleur"]
- Sticky navigatie die meescrollt
- Smooth scroll naar secties bij klikken op menu
Zet alles in één HTML-bestand met inline CSS. Geen externe libraries.
Hoe gebruik je dit?
- Kopieer de prompt hierboven
- Vervang alles tussen [vierkante haken] met jouw eigen informatie
- Plak het in Claude
- Kopieer de gegenereerde code en sla op als
index.html - Upload naar Webnexus Sites via drag & drop
Pro tip: Na de eerste versie kun je Claude vragen om aanpassingen: "Maak de hero groter", "Verander de kleuren naar groen", "Voeg een video-sectie toe". Itereer tot je tevreden bent.
2 SEO-geoptimaliseerde pagina's maken
Gevonden worden in Google is het verschil tussen een website die werkt en een website die stof vangt. Met de juiste SEO-basis zorg je dat Google precies snapt waar je pagina over gaat. Het goede nieuws: Claude kan al het technische SEO-werk voor je doen als je de juiste prompt geeft.
Wat Google belangrijk vindt
- Title tag & meta description — Dit is wat mensen zien in Google zoekresultaten
- Heading structuur — Eén H1, logische H2's en H3's
- Snelle laadtijd — Statische sites (zoals op Webnexus Sites) scoren hier goed
- Mobielvriendelijk — Google rankt mobile-first
- Structured data — Helpt Google je content te begrijpen (schema.org)
De prompt
Kopieer
Optimaliseer mijn website voor SEO. Mijn site gaat over: [ONDERWERP/BEDRIJF]
Mijn primaire zoekwoord is: [ZOEKWOORD]
Mijn locatie is: [STAD]
Voeg het volgende toe aan mijn HTML:
1. TITLE TAG: Bevat het zoekwoord + locatie + bedrijfsnaam, max 60 tekens
2. META DESCRIPTION: Overtuigende tekst met zoekwoord, 150-160 tekens, met call-to-action
3. HEADING STRUCTUUR: EÊn H1 met zoekwoord, H2's voor elke sectie met gerelateerde termen
4. OPEN GRAPH TAGS: og:title, og:description, og:image, og:url voor social media sharing
5. CANONICAL URL: https://[jouw-domein.nl]
6. STRUCTURED DATA (JSON-LD): LocalBusiness schema met naam, adres, telefoon, openingstijden
7. ALT-TEKST: Beschrijvende alt-tags op alle afbeeldingen met zoekwoorden waar relevant
8. INTERNE LINKS: Anchor tekst met relevante zoekwoorden
9. SITEMAP HINT: Voeg robots meta tag toe (index, follow)
10. PERFORMANCE: loading="lazy" op afbeeldingen, defer op scripts, preconnect voor fonts
Geef me de complete aangepaste HTML, en leg per toevoeging kort uit waarom het helpt.
Mijn primaire zoekwoord is: [ZOEKWOORD]
Mijn locatie is: [STAD]
Voeg het volgende toe aan mijn HTML:
1. TITLE TAG: Bevat het zoekwoord + locatie + bedrijfsnaam, max 60 tekens
2. META DESCRIPTION: Overtuigende tekst met zoekwoord, 150-160 tekens, met call-to-action
3. HEADING STRUCTUUR: EÊn H1 met zoekwoord, H2's voor elke sectie met gerelateerde termen
4. OPEN GRAPH TAGS: og:title, og:description, og:image, og:url voor social media sharing
5. CANONICAL URL: https://[jouw-domein.nl]
6. STRUCTURED DATA (JSON-LD): LocalBusiness schema met naam, adres, telefoon, openingstijden
7. ALT-TEKST: Beschrijvende alt-tags op alle afbeeldingen met zoekwoorden waar relevant
8. INTERNE LINKS: Anchor tekst met relevante zoekwoorden
9. SITEMAP HINT: Voeg robots meta tag toe (index, follow)
10. PERFORMANCE: loading="lazy" op afbeeldingen, defer op scripts, preconnect voor fonts
Geef me de complete aangepaste HTML, en leg per toevoeging kort uit waarom het helpt.
Na het uploaden
Zodra je site live staat op je eigen domein:
- Meld je aan bij Google Search Console
- Dien je URL in voor indexering
- Maak een Google Mijn Bedrijf profiel aan (voor lokale SEO)
Pro tip: Vraag Claude ook om een
robots.txt en sitemap.xml te genereren. Upload deze als extra bestanden — Google vindt ze automatisch.
3 Conversie-optimalisatie (CRO)
Bezoekers naar je site krijgen is stap één. Ze laten converteren — bellen, formulier invullen, bestellen — is waar het geld zit. CRO (Conversion Rate Optimization) draait om het wegnemen van drempels en het versterken van overtuigingskracht. Claude kan je hele pagina analyseren en verbeteren.
De 6 overtuigingsprincipes op je website
- Schaarste — "Nog 3 plekken beschikbaar deze maand"
- Social proof — Reviews, klantenlogo's, aantallen
- Autoriteit — Certificeringen, media vermeldingen, ervaring
- Urgentie — "Vraag vandaag nog je gratis adviesgesprek aan"
- Wederkerigheid — Gratis waarde geven (checklist, advies, tool)
- Consistentie — Kleine stappen richting de conversie (micro-commitments)
De prompt
Kopieer
Analyseer en verbeter mijn landingspagina voor conversie. Hier is mijn huidige HTML:
[PLAK JE HTML HIER]
Mijn doel is: [GEWENSTE ACTIE: bellen / formulier invullen / product kopen]
Mijn doelgroep is: [WIE]
Verbeter de pagina op deze punten:
1. HERO CTA: Maak de primaire call-to-action groter, contrastrijker en boven de fold. Voeg een secundaire CTA toe voor wie nog niet klaar is (bijv. "Bekijk voorbeelden")
2. URGENTIE: Voeg subtiele urgentie toe die niet nep aanvoelt (bijv. "Beperkt aantal plekken" of "Reactie binnen 24 uur")
3. SOCIAL PROOF: Voeg een sectie toe met minimaal 3 reviews met sterren, naam en functietitel. Voeg ook een getal toe ("150+ bedrijven geholpen")
4. TRUST SIGNALS: Voeg trust badges toe (bijv. "Gratis adviesgesprek", "Geen verplichtingen", "Binnen 24u reactie")
5. STICKY CTA: Voeg een vaste balk onderaan het scherm toe op mobiel met een call-to-action knop die altijd zichtbaar is
6. FORMULIER OPTIMALISATIE: Als er een formulier is, minimaliseer het aantal velden. Voeg placeholder tekst toe die het makkelijk maakt. Voeg een privacy-tekst toe onder de submit knop.
7. VISUELE HIERARCHIE: Zorg dat het oog automatisch naar de CTA wordt geleid met kleur, grootte en witruimte
8. EXIT INTENT: Voeg een subtiele banner toe die verschijnt als de bezoeker de pagina wil verlaten (alleen op desktop)
Geef me de verbeterde HTML en leg per wijziging uit waarom het de conversie verhoogt.
[PLAK JE HTML HIER]
Mijn doel is: [GEWENSTE ACTIE: bellen / formulier invullen / product kopen]
Mijn doelgroep is: [WIE]
Verbeter de pagina op deze punten:
1. HERO CTA: Maak de primaire call-to-action groter, contrastrijker en boven de fold. Voeg een secundaire CTA toe voor wie nog niet klaar is (bijv. "Bekijk voorbeelden")
2. URGENTIE: Voeg subtiele urgentie toe die niet nep aanvoelt (bijv. "Beperkt aantal plekken" of "Reactie binnen 24 uur")
3. SOCIAL PROOF: Voeg een sectie toe met minimaal 3 reviews met sterren, naam en functietitel. Voeg ook een getal toe ("150+ bedrijven geholpen")
4. TRUST SIGNALS: Voeg trust badges toe (bijv. "Gratis adviesgesprek", "Geen verplichtingen", "Binnen 24u reactie")
5. STICKY CTA: Voeg een vaste balk onderaan het scherm toe op mobiel met een call-to-action knop die altijd zichtbaar is
6. FORMULIER OPTIMALISATIE: Als er een formulier is, minimaliseer het aantal velden. Voeg placeholder tekst toe die het makkelijk maakt. Voeg een privacy-tekst toe onder de submit knop.
7. VISUELE HIERARCHIE: Zorg dat het oog automatisch naar de CTA wordt geleid met kleur, grootte en witruimte
8. EXIT INTENT: Voeg een subtiele banner toe die verschijnt als de bezoeker de pagina wil verlaten (alleen op desktop)
Geef me de verbeterde HTML en leg per wijziging uit waarom het de conversie verhoogt.
Pro tip: Test twee versies van je pagina (A/B test). Maak een kleine wijziging (andere kop, andere knopkleur, andere CTA-tekst) en kijk welke beter converteert.
4 Responsive design & mobile-first
Meer dan 60% van je bezoekers komt op een telefoon. Als je site er niet goed uitziet op mobiel, verlies je meer dan de helft van je potentiële klanten. Google rankt mobiel-vriendelijke sites ook hoger. Met deze prompt fix je het in één keer.
De prompt
Kopieer
Maak mijn website volledig responsive. Hier is mijn HTML:
[PLAK JE HTML HIER]
Pas het aan voor drie breakpoints:
- DESKTOP (1024px+): Huidige layout behouden, max-width container van 1100px
- TABLET (768px - 1023px): 2 kolommen waar nu 3+ zijn, kleinere paddings
- MOBIEL (< 768px): Alles in één kolom, gestapeld
Specifieke aanpassingen voor mobiel:
- Navigatie wordt een hamburger menu (3 streepjes) met smooth open/dicht animatie
- Hero tekst wordt kleiner (max 2rem) maar blijft impactvol
- Knoppen worden full-width
- Afbeeldingen: max-width 100%, height auto
- Tabellen worden horizontaal scrollbaar
- Formuliervelden worden gestapeld met grotere touch targets (min 44px hoog)
- Font-sizes: body 16px (niet kleiner, anders zoomt iOS in)
- Padding: 1rem aan de zijkanten, niet meer
Gebruik CSS Grid en Flexbox, geen floats. Mobile-first benadering.
[PLAK JE HTML HIER]
Pas het aan voor drie breakpoints:
- DESKTOP (1024px+): Huidige layout behouden, max-width container van 1100px
- TABLET (768px - 1023px): 2 kolommen waar nu 3+ zijn, kleinere paddings
- MOBIEL (< 768px): Alles in één kolom, gestapeld
Specifieke aanpassingen voor mobiel:
- Navigatie wordt een hamburger menu (3 streepjes) met smooth open/dicht animatie
- Hero tekst wordt kleiner (max 2rem) maar blijft impactvol
- Knoppen worden full-width
- Afbeeldingen: max-width 100%, height auto
- Tabellen worden horizontaal scrollbaar
- Formuliervelden worden gestapeld met grotere touch targets (min 44px hoog)
- Font-sizes: body 16px (niet kleiner, anders zoomt iOS in)
- Padding: 1rem aan de zijkanten, niet meer
Gebruik CSS Grid en Flexbox, geen floats. Mobile-first benadering.
Testen
Na uploaden: open je site op je telefoon, of gebruik Chrome DevTools (F12 → telefoon-icoon). Check of alles leesbaar is, knoppen groot genoeg zijn, en er niet horizontaal gescrolld hoeft te worden.
5 Website snelheid optimaliseren
Elke seconde laadtijd kost je ~7% conversie. Google gebruikt snelheid als rankingfactor. Het goede nieuws: statische sites op Webnexus Sites zijn al snel omdat er geen database of PHP bij komt kijken. Maar er is altijd ruimte voor verbetering.
De prompt
Kopieer
Optimaliseer mijn website voor maximale snelheid. Hier is mijn HTML:
[PLAK JE HTML HIER]
Optimalisaties:
1. AFBEELDINGEN: Voeg loading="lazy" toe aan alle afbeeldingen behalve de eerste (hero). Voeg width en height attributen toe om layout shifts te voorkomen. Stel voor welke afbeeldingen naar WebP geconverteerd moeten worden.
2. CSS: Inline critical CSS (alles boven de fold) in een style tag in de head. Verplaats de rest naar een apart bestand dat async geladen wordt.
3. FONTS: Gebruik font-display: swap. Voeg preconnect toe voor Google Fonts. Limiteer tot maximaal 2 font families en 3 weights.
4. JAVASCRIPT: Voeg defer toe aan alle script tags. Verplaats niet-essentieel JS naar het einde van de body.
5. HTML: Verwijder onnodige comments en witruimte. Gebruik semantische HTML5 elementen (nav, main, section, article).
6. PRELOADING: Voeg preload hints toe voor de hero afbeelding en het primaire font.
Geef me de geoptimaliseerde HTML en een schatting van de tijdsbesparing per optimalisatie.
[PLAK JE HTML HIER]
Optimalisaties:
1. AFBEELDINGEN: Voeg loading="lazy" toe aan alle afbeeldingen behalve de eerste (hero). Voeg width en height attributen toe om layout shifts te voorkomen. Stel voor welke afbeeldingen naar WebP geconverteerd moeten worden.
2. CSS: Inline critical CSS (alles boven de fold) in een style tag in de head. Verplaats de rest naar een apart bestand dat async geladen wordt.
3. FONTS: Gebruik font-display: swap. Voeg preconnect toe voor Google Fonts. Limiteer tot maximaal 2 font families en 3 weights.
4. JAVASCRIPT: Voeg defer toe aan alle script tags. Verplaats niet-essentieel JS naar het einde van de body.
5. HTML: Verwijder onnodige comments en witruimte. Gebruik semantische HTML5 elementen (nav, main, section, article).
6. PRELOADING: Voeg preload hints toe voor de hero afbeelding en het primaire font.
Geef me de geoptimaliseerde HTML en een schatting van de tijdsbesparing per optimalisatie.
Pro tip: Comprimeer afbeeldingen voor upload met squoosh.app (gratis). Een foto van 3MB wordt vaak 150KB zonder zichtbaar kwaliteitsverlies. Dat is 20x sneller laden.
6 Contactformulieren & lead capture
Een contactformulier is je belangrijkste conversie-tool. Maar omdat Webnexus Sites statische hosting is, kun je geen e-mails versturen vanaf de server. De oplossing: externe formulier-diensten die gratis zijn en in 2 minuten werken.
Gratis opties
- FormSubmit.co — Gratis, onbeperkt, geen account nodig. Werkt met een simpele form action.
- Formspree.io — 50 berichten/maand gratis. Mooie interface, spam filtering.
De prompt
Kopieer
Maak een geoptimaliseerd contactformulier voor mijn website.
Mijn e-mailadres is: [JOUW@EMAIL.NL]
Gebruik FormSubmit.co als backend.
Het formulier moet bevatten:
- Naam (verplicht)
- E-mailadres (verplicht, met HTML5 validatie)
- Telefoonnummer (optioneel)
- Onderwerp (dropdown: Offerte aanvraag, Vraag, Samenwerking, Anders)
- Bericht (verplicht, textarea)
- Verzendknop met tekst "Verstuur bericht"
Optimalisatie:
- Voeg een honeypot veld toe tegen spam (verborgen veld, bots vullen het in, mensen niet)
- Voeg een _next redirect toe naar een bedankpagina
- Voeg _subject toe zodat het e-mail onderwerp duidelijk is
- Disable _captcha voor een betere gebruikerservaring
- Voeg client-side validatie toe met nuttige foutmeldingen in het Nederlands
- Voeg een loading state toe op de knop bij versturen
- Style het formulier modern: labels boven de velden, focus states, subtiele schaduwen
- Voeg een tekst toe onder de knop: "We reageren binnen 24 uur. Je gegevens worden niet gedeeld."
Maak ook een bedankpagina (bedankt.html) die zegt: "Bedankt voor je bericht! We nemen zo snel mogelijk contact met je op." met een link terug naar de homepage.
Mijn e-mailadres is: [JOUW@EMAIL.NL]
Gebruik FormSubmit.co als backend.
Het formulier moet bevatten:
- Naam (verplicht)
- E-mailadres (verplicht, met HTML5 validatie)
- Telefoonnummer (optioneel)
- Onderwerp (dropdown: Offerte aanvraag, Vraag, Samenwerking, Anders)
- Bericht (verplicht, textarea)
- Verzendknop met tekst "Verstuur bericht"
Optimalisatie:
- Voeg een honeypot veld toe tegen spam (verborgen veld, bots vullen het in, mensen niet)
- Voeg een _next redirect toe naar een bedankpagina
- Voeg _subject toe zodat het e-mail onderwerp duidelijk is
- Disable _captcha voor een betere gebruikerservaring
- Voeg client-side validatie toe met nuttige foutmeldingen in het Nederlands
- Voeg een loading state toe op de knop bij versturen
- Style het formulier modern: labels boven de velden, focus states, subtiele schaduwen
- Voeg een tekst toe onder de knop: "We reageren binnen 24 uur. Je gegevens worden niet gedeeld."
Maak ook een bedankpagina (bedankt.html) die zegt: "Bedankt voor je bericht! We nemen zo snel mogelijk contact met je op." met een link terug naar de homepage.
Pro tip: Wil je liever WhatsApp? Vraag Claude: "Voeg een floating WhatsApp knop toe rechtsonder die opent met een vooringevuld bericht naar [nummer]". Veel MKB-bedrijven krijgen meer reacties via WhatsApp dan via formulieren.
7 Social proof & vertrouwen opbouwen
92% van consumenten leest reviews voor een aankoop. Social proof is het krachtigste overtuigingsmiddel op je website. Zonder vertrouwenssignalen converteert zelfs het mooiste design niet. Met deze prompt bouw je alle vormen van social proof in.
Vormen van social proof
- Reviews/testimonials — Citaten van klanten met naam en foto
- Klantenlogo's — "Vertrouwd door..." met logo's van bekende klanten
- Cijfers — "500+ klanten", "10 jaar ervaring", "4.9/5 beoordeling"
- Certificeringen — Google Partner, ISO, branche-keurmerken
- Media vermeldingen — "Bekend van..." met media logo's
- Case studies — Concrete resultaten: "+147% meer conversies"
De prompt
Kopieer
Voeg social proof elementen toe aan mijn website. Hier is mijn HTML:
[PLAK JE HTML HIER]
Voeg deze elementen toe op de juiste plekken:
1. KLANTENLOGO'S: Direct onder de hero, een horizontale rij met 5-6 grijze logo placeholders op een lichte achtergrond. Tekst erboven: "Vertrouwd door [X]+ bedrijven"
2. STATISTIEKEN BALK: Een sectie met 4 animerende tellers die optellen bij scrollen: - [X]+ Tevreden klanten - [X] Jaar ervaring - [X]% Klanttevredenheid - [X]+ Projecten afgerond
3. TESTIMONIALS: Een sectie met 3 kaarten. Elke kaart bevat: 5 sterren (gold), een citaat in quotes, naam, functie/bedrijf, en een rond foto-placeholder. Gebruik een lichte achtergrond met subtiele schaduwen.
4. TRUST BADGES: Onder het contactformulier of de CTA, een rij met kleine badges: "Gratis advies", "Geen verplichtingen", "Reactie binnen 24u" met check-iconen ervoor.
5. RESULTATEN: Een "Onze resultaten" sectie met 2-3 mini case studies: bedrijfsnaam, wat we deden, en het resultaat als groot getal (bijv. "+89% meer leads")
Style alles consistent met de bestaande pagina.
[PLAK JE HTML HIER]
Voeg deze elementen toe op de juiste plekken:
1. KLANTENLOGO'S: Direct onder de hero, een horizontale rij met 5-6 grijze logo placeholders op een lichte achtergrond. Tekst erboven: "Vertrouwd door [X]+ bedrijven"
2. STATISTIEKEN BALK: Een sectie met 4 animerende tellers die optellen bij scrollen: - [X]+ Tevreden klanten - [X] Jaar ervaring - [X]% Klanttevredenheid - [X]+ Projecten afgerond
3. TESTIMONIALS: Een sectie met 3 kaarten. Elke kaart bevat: 5 sterren (gold), een citaat in quotes, naam, functie/bedrijf, en een rond foto-placeholder. Gebruik een lichte achtergrond met subtiele schaduwen.
4. TRUST BADGES: Onder het contactformulier of de CTA, een rij met kleine badges: "Gratis advies", "Geen verplichtingen", "Reactie binnen 24u" met check-iconen ervoor.
5. RESULTATEN: Een "Onze resultaten" sectie met 2-3 mini case studies: bedrijfsnaam, wat we deden, en het resultaat als groot getal (bijv. "+89% meer leads")
Style alles consistent met de bestaande pagina.
8 Branding & visuele identiteit
Een consistente visuele identiteit maakt je bedrijf herkenbaar en professioneel. Kleuren, lettertypen, stijl — het moet allemaal kloppen. Met deze prompt geef je Claude je merkidentiteit en krijg je een site die echt bij je past.
De prompt
Kopieer
Style mijn website volgens deze merkidentiteit:
Bedrijfsnaam: [NAAM]
Branche: [BRANCHE]
Uitstraling: [kies: modern/klassiek/speels/zakelijk/luxe/minimalistisch]
Kleuren:
- Primair: [kleurcode of beschrijving, bijv. "#1e40af" of "donkerblauw"]
- Secundair: [kleurcode]
- Accent: [kleurcode, voor knoppen en highlights]
- Achtergrond: [wit / lichtgrijs / donker]
- Tekst: [donkergrijs / zwart]
(Geen kleuren? Genereer een professioneel kleurenpalet passend bij de branche.)
Lettertypen (Google Fonts):
- Koppen: [lettertype of "kies iets dat past bij de uitstraling"]
- Tekst: [lettertype of "clean en leesbaar"]
Pas toe op mijn HTML:
[PLAK JE HTML HIER]
Extra:
- Gebruik CSS custom properties (--primary, --secondary, etc.) zodat ik kleuren makkelijk kan aanpassen
- Consistente border-radius op alle elementen (8px of 12px)
- Subtiele hover-animaties op knoppen en kaarten (0.3s ease)
- Box-shadows voor diepte op kaarten
- Gradient accent op de hero of CTA secties
Bedrijfsnaam: [NAAM]
Branche: [BRANCHE]
Uitstraling: [kies: modern/klassiek/speels/zakelijk/luxe/minimalistisch]
Kleuren:
- Primair: [kleurcode of beschrijving, bijv. "#1e40af" of "donkerblauw"]
- Secundair: [kleurcode]
- Accent: [kleurcode, voor knoppen en highlights]
- Achtergrond: [wit / lichtgrijs / donker]
- Tekst: [donkergrijs / zwart]
(Geen kleuren? Genereer een professioneel kleurenpalet passend bij de branche.)
Lettertypen (Google Fonts):
- Koppen: [lettertype of "kies iets dat past bij de uitstraling"]
- Tekst: [lettertype of "clean en leesbaar"]
Pas toe op mijn HTML:
[PLAK JE HTML HIER]
Extra:
- Gebruik CSS custom properties (--primary, --secondary, etc.) zodat ik kleuren makkelijk kan aanpassen
- Consistente border-radius op alle elementen (8px of 12px)
- Subtiele hover-animaties op knoppen en kaarten (0.3s ease)
- Box-shadows voor diepte op kaarten
- Gradient accent op de hero of CTA secties
Pro tip: Geen huisstijl? Gebruik coolors.co voor kleurenpaletten en fontpair.co voor lettertype-combinaties. Geef de resultaten aan Claude.
9 Overtuigende webteksten schrijven
De beste website ter wereld converteert niet als de tekst niet overtuigt. Goede webteksten zijn kort, scanbaar, en gericht op de bezoeker — niet op jezelf. Claude is uitstekend in copywriting als je de juiste context meegeeft.
Principes van goede webtekst
- Schrijf over de klant, niet over jezelf — "Jij krijgt..." in plaats van "Wij bieden..."
- Benoem het probleem eerst — Herkenning creëert verbinding
- Kort en scanbaar — Korte alinea's, bullets, vetgedrukte kernwoorden
- Eén CTA per sectie — Niet overweldigen met keuzes
- Concreet, niet vaag — "Bespaar 4 uur per week" slaat harder dan "Efficiënter werken"
De prompt
Kopieer
Schrijf overtuigende webteksten voor mijn website.
Bedrijf: [NAAM]
Wat we doen: [DIENST/PRODUCT]
Doelgroep: [WIE zijn je klanten? Wat is hun probleem?]
Gewenste actie: [WAT moet de bezoeker doen?]
Tone of voice: [Professioneel maar warm / Direct en resultaatgericht / etc.]
USP's: [Wat maakt jou anders dan de concurrent?]
Schrijf teksten voor deze secties:
1. HERO KOP: Max 8 woorden, pakkend, benoemt het resultaat
2. HERO SUBTITEL: 1-2 zinnen die het probleem benoemen en de oplossing hinten
3. CTA KNOP TEKST: Actief, specifiek (niet "Verstuur" maar bijv. "Ontvang gratis advies")
4. OVER ONS: 3-4 zinnen vanuit klantperspectief. Begin met hun probleem, eindig met jouw oplossing
5. DIENSTEN/FEATURES: 4 korte beschrijvingen (titel + 2 zinnen) die focussen op wat de klant er aan heeft
6. TESTIMONIAL QUOTES: 3 realistische klantquotes die specifieke resultaten noemen
7. FAQ ANTWOORDEN: 5 veelgestelde vragen met korte, eerlijke antwoorden
8. AFSLUITENDE CTA: Een urgente maar niet pushy afsluiting die motiveert om nu actie te ondernemen
Alle tekst in het Nederlands. Scanbaar: korte zinnen, actieve taal, geen jargon.
Bedrijf: [NAAM]
Wat we doen: [DIENST/PRODUCT]
Doelgroep: [WIE zijn je klanten? Wat is hun probleem?]
Gewenste actie: [WAT moet de bezoeker doen?]
Tone of voice: [Professioneel maar warm / Direct en resultaatgericht / etc.]
USP's: [Wat maakt jou anders dan de concurrent?]
Schrijf teksten voor deze secties:
1. HERO KOP: Max 8 woorden, pakkend, benoemt het resultaat
2. HERO SUBTITEL: 1-2 zinnen die het probleem benoemen en de oplossing hinten
3. CTA KNOP TEKST: Actief, specifiek (niet "Verstuur" maar bijv. "Ontvang gratis advies")
4. OVER ONS: 3-4 zinnen vanuit klantperspectief. Begin met hun probleem, eindig met jouw oplossing
5. DIENSTEN/FEATURES: 4 korte beschrijvingen (titel + 2 zinnen) die focussen op wat de klant er aan heeft
6. TESTIMONIAL QUOTES: 3 realistische klantquotes die specifieke resultaten noemen
7. FAQ ANTWOORDEN: 5 veelgestelde vragen met korte, eerlijke antwoorden
8. AFSLUITENDE CTA: Een urgente maar niet pushy afsluiting die motiveert om nu actie te ondernemen
Alle tekst in het Nederlands. Scanbaar: korte zinnen, actieve taal, geen jargon.
Pro tip: Lees je teksten hardop voor. Als het onnatuurlijk klinkt, is het te formeel. Vraag Claude om het "informeler te maken, alsof je het tegen een vriend vertelt".
10 Analytics & tracking klaarzetten
Zonder data vlieg je blind. Hoeveel bezoekers heb je? Waar komen ze vandaan? Wat doen ze op je site? Met Google Analytics en de juiste event tracking weet je precies wat werkt en wat niet. Zo kun je je site continu verbeteren op basis van feiten.
Wat je wilt meten
- Paginaweergaven — Hoeveel mensen bezoeken je site?
- Bouncepercentage — Hoeveel % verlaat je site direct?
- Conversies — Hoeveel mensen vullen je formulier in / bellen / kopen?
- Verkeersbronnen — Google, social media, direct?
- Klikgedrag — Waar klikken mensen op? Waar haken ze af?
De prompt
Kopieer
Voeg analytics en tracking toe aan mijn website. Hier is mijn HTML:
[PLAK JE HTML HIER]
Mijn Google Analytics ID is: [G-XXXXXXXXXX]
(Nog geen GA? Laat de ID als placeholder staan zodat ik het later kan invullen.)
Voeg het volgende toe:
1. GOOGLE ANALYTICS 4: gtag.js snippet in de head, met de juiste config
2. EVENT TRACKING op:
- Klik op de primaire CTA knop (event: "cta_click")
- Formulier verzending (event: "form_submit")
- Klik op telefoonnummer (event: "phone_click")
- Klik op e-mailadres (event: "email_click")
- Klik op WhatsApp knop (event: "whatsapp_click")
- Scroll diepte: 25%, 50%, 75%, 100% (event: "scroll_depth")
3. COOKIE BANNER: Een simpele, nette cookie-melding onderin het scherm die voldoet aan AVG/GDPR. Met knoppen "Accepteren" en "Alleen noodzakelijk". Bij "Alleen noodzakelijk" wordt GA niet geladen.
4. UTM SUPPORT: Lees UTM parameters uit de URL en stuur ze mee als GA parameters zodat je campagne-performance kunt meten.
Zorg dat analytics pas laden NA cookie-consent. Sla de voorkeur op in localStorage.
[PLAK JE HTML HIER]
Mijn Google Analytics ID is: [G-XXXXXXXXXX]
(Nog geen GA? Laat de ID als placeholder staan zodat ik het later kan invullen.)
Voeg het volgende toe:
1. GOOGLE ANALYTICS 4: gtag.js snippet in de head, met de juiste config
2. EVENT TRACKING op:
- Klik op de primaire CTA knop (event: "cta_click")
- Formulier verzending (event: "form_submit")
- Klik op telefoonnummer (event: "phone_click")
- Klik op e-mailadres (event: "email_click")
- Klik op WhatsApp knop (event: "whatsapp_click")
- Scroll diepte: 25%, 50%, 75%, 100% (event: "scroll_depth")
3. COOKIE BANNER: Een simpele, nette cookie-melding onderin het scherm die voldoet aan AVG/GDPR. Met knoppen "Accepteren" en "Alleen noodzakelijk". Bij "Alleen noodzakelijk" wordt GA niet geladen.
4. UTM SUPPORT: Lees UTM parameters uit de URL en stuur ze mee als GA parameters zodat je campagne-performance kunt meten.
Zorg dat analytics pas laden NA cookie-consent. Sla de voorkeur op in localStorage.
Na implementatie
- Maak een gratis account aan op Google Analytics
- Maak een GA4 property aan en kopieer je Measurement ID (G-XXXXXXX)
- Vervang de placeholder in je code
- Upload naar Webnexus Sites
- Test of events binnenkomen via GA4 → Realtime rapport
Pro tip: Stel in Google Analytics conversie-events in voor form_submit en phone_click. Zo zie je in één oogopslag hoeveel leads je site oplevert. Dit is de data die je nodig hebt om te beslissen of je meer in marketing moet investeren.
11 Frontend Development & Code Kwaliteit
Wil je meer dan een statische pagina? Met de juiste prompt maakt Claude interactieve componenten, animaties, formuliervalidatie en meer — puur in HTML, CSS en JavaScript, zonder frameworks. Perfect voor Webnexus Sites.
Wat je kunt bouwen
- Interactieve componenten — Modals, tabs, accordions, carousels, tooltips
- Formuliervalidatie — Real-time feedback, foutmeldingen, input masking
- Animaties — Scroll-triggered animaties, hover effecten, page transitions
- Dynamische content — Filtering, zoeken, sorteren zonder page reload
- Dark mode toggle — Licht/donker thema met localStorage opslag
De prompt
Kopieer
Bouw de volgende interactieve componenten voor mijn website in vanilla HTML, CSS en JavaScript.
Geen frameworks of libraries — alles moet werken als statische bestanden.
Componenten die ik wil:
1. HAMBURGER MENU: Responsive navigatie die op mobiel een animated hamburger menu wordt met smooth slide-in animatie
2. MODAL/POPUP: Een herbruikbare modal die opent bij klik op een knop, sluit met X of buiten de modal klikken, met fade-in animatie. Trap focus binnen de modal.
3. TABS: Tab-component die content wisselt zonder page reload, met keyboard navigatie (pijltjestoetsen) en ARIA attributen voor accessibility
4. FORMULIER VALIDATIE: Real-time validatie op een contactformulier met: - Verplichte velden markering - Email format check - Telefoonnummer format (NL) - Minimale berichtlengte - Foutmeldingen in het Nederlands, direct onder het veld - Visuele feedback (groen/rood border)
5. SCROLL ANIMATIES: Elementen die elegant infaden wanneer ze in beeld komen met Intersection Observer (geen externe library)
6. DARK MODE: Toggle knop die het kleurenschema wisselt en de voorkeur opslaat in localStorage. Respecteer ook prefers-color-scheme.
Belangrijk:
- Splits de code in aparte bestanden: index.html, css/style.css, js/main.js
- Gebruik semantic HTML5 en ARIA attributen
- Alles moet werken zonder build tools of npm
- Mobile-first responsive design
- Geen inline styles of scripts (behalve de link/script tags)
Geen frameworks of libraries — alles moet werken als statische bestanden.
Componenten die ik wil:
1. HAMBURGER MENU: Responsive navigatie die op mobiel een animated hamburger menu wordt met smooth slide-in animatie
2. MODAL/POPUP: Een herbruikbare modal die opent bij klik op een knop, sluit met X of buiten de modal klikken, met fade-in animatie. Trap focus binnen de modal.
3. TABS: Tab-component die content wisselt zonder page reload, met keyboard navigatie (pijltjestoetsen) en ARIA attributen voor accessibility
4. FORMULIER VALIDATIE: Real-time validatie op een contactformulier met: - Verplichte velden markering - Email format check - Telefoonnummer format (NL) - Minimale berichtlengte - Foutmeldingen in het Nederlands, direct onder het veld - Visuele feedback (groen/rood border)
5. SCROLL ANIMATIES: Elementen die elegant infaden wanneer ze in beeld komen met Intersection Observer (geen externe library)
6. DARK MODE: Toggle knop die het kleurenschema wisselt en de voorkeur opslaat in localStorage. Respecteer ook prefers-color-scheme.
Belangrijk:
- Splits de code in aparte bestanden: index.html, css/style.css, js/main.js
- Gebruik semantic HTML5 en ARIA attributen
- Alles moet werken zonder build tools of npm
- Mobile-first responsive design
- Geen inline styles of scripts (behalve de link/script tags)
Bestandsstructuur voor upload
Als je code in aparte bestanden hebt, upload je ze zo naar Webnexus Sites:
Structuur:
Of upload alles in één keer als ZIP bestand — de mappenstructuur blijft behouden!
index.html — Hoofdpaginacss/style.css — Maak eerst een map "css", upload dan style.css daarinjs/main.js — Maak eerst een map "js", upload dan main.js daarinimages/ — Map voor afbeeldingenOf upload alles in één keer als ZIP bestand — de mappenstructuur blijft behouden!
Pro tip: Splits je code in aparte bestanden zodra je pagina groter wordt dan ~200 regels. Dit maakt het makkelijker om aan te passen via de ingebouwde code editor in je dashboard. Vraag Claude: "Split deze code in aparte HTML, CSS en JS bestanden met de juiste link/script tags".
Klaar om te beginnen?
Kopieer een prompt, geef het aan Claude, upload het resultaat. Zo simpel is het.