Voluit Suite Geavanceerd: Stappenplan website nabouwen

Kopieer de hele prompt. Vul alleen het eerste deel in en pas de rest niet aan.

=== VUL ALLEEN DIT IN ===
Mijn website: 
Pagina's (maximaal 5): 
=== HIERONDER NIETS AANPASSEN ===

WIE IK BEN
Ik ga mijn website opnieuw bouwen in Voluit Suite. Ik ben geen designer en niet technisch. Van te veel vaktermen of getallen tegelijk raak ik in de war.

MIJN DOEL
Ik wil snel het framework van mijn nieuwe site neerzetten: een basistemplate met menu, footer en een set bouwblokken in mijn eigen stijl. Overal dezelfde maten. Bijzondere designeffecten besteed ik later uit aan iemand anders.

WAT JE VOOR ME DOET
Je bekijkt mijn huidige website en maakt één handleiding van mijn site, met 6 hoofdstukken:
1. Standaardmaten: één set maten, kleuren en lettertypes die ik overal aanhoud.
2. Menu en footer: hoe ze eruitzien en wat erin staat.
3. Bouwstenen: welke soorten blokken ik moet maken.
4. Paginaoverzicht: per pagina de blokken van boven naar beneden.
5. Bijzondere effecten: de bewuste designkeuzes, als lijstje dat ik kan doorsturen naar een designer.
6. Afbeeldingen: welke foto's en illustraties er zijn.
De handleiding en alle afbeeldingen krijg ik samen in één zip-bestand.

HOE JE TEGEN ME PRAAT (in de chat én in de handleiding)
- Eenvoudig Nederlands en korte zinnen, alsof ik nog nooit een website heb gebouwd.
- Gebruik geen vaktermen. Moet het toch, leg het dan direct uit. Bijvoorbeeld: "kleurcode (#66BABD): die plak je straks in de kleurkiezer".
- Zeg "computer", "tablet" en "telefoon".
- Geen code, geen namen van websitebouwers, geen uitleg over hoe je gemeten hebt.
- Rond getallen af. Zeg bij elk getal in gewone woorden wat het betekent.
- Vertel me niet welke maten nu door elkaar lopen. Geef me alleen de maat die ik aanhoud.
- Noem alleen "Voluit Suite", nooit HighLevel of GoHighLevel.

VERLOOP IN DE CHAT
1. Zeg kort dat je begint, en dat het 5 tot 15 minuten duurt, afhankelijk van het aantal pagina's. Zeg erbij dat ik ondertussen iets anders mag doen.
2. Bekijk en meet alles. Stel me tussendoor geen vragen.
3. Geef daarna in de chat maximaal 5 korte zinnen: hoeveel pagina's, bouwstenen, bijzondere effecten en afbeeldingen je hebt gevonden.
4. Vraag dan precies dit: "Mag ik je handleiding en je foto's in één zip-bestand in je Downloads-map zetten?"
5. Na mijn ja: download de zip. Zeg dan: "Kijk in je Downloads-map en dubbelklik op het zip-bestand. Je krijgt een map met je handleiding en je foto's. Dubbelklik op website-handleiding.html om hem te openen. Staat alles er?"
6. Staat de zip er niet? Zeg dan precies dit: "Chrome heeft de download waarschijnlijk tegengehouden. Kijk rechts in de adresbalk van het tabblad met je website. Zie je een icoontje met een downloadpijltje en een rood kruisje? Klik erop, kies 'Altijd toestaan dat [adres van mijn site] meerdere bestanden downloadt' en klik op Klaar. Zie je het icoontje niet? Typ dan chrome://settings/content/automaticDownloads in de adresbalk en haal je website weg bij 'Niet toegestaan'. Laat me weten als het gelukt is." Probeer het daarna opnieuw.
7. Wil ik daarna iets anders, bijvoorbeeld een andere kleur of maat? Pas de handleiding aan en maak een nieuwe zip, met een versienummer in de naam (bijvoorbeeld website-handleiding-v2.zip). Wordt die tegengehouden, volg dan stap 6.

HOE JE WERKT (dit is voor jou, niet voor mij)
Over Voluit Suite:
- Voluit Suite is een white label van HighLevel (GoHighLevel). Ik bouw mijn site dus in de website- of funnelbuilder van HighLevel. Gebruik je kennis van die builder.

Meten:
- Heb je browsertools, zoals Claude in Chrome? Open de site dan zelf. Meet op 1440px breed (computer), 900px (tablet) en 390px (telefoon). Lees de waardes uit de opmaak van de pagina (computed styles). Lukt het niet om het venster zo breed te maken, laad de pagina dan in een onzichtbaar venster van die breedte (een iframe buiten beeld).
- Wil je de pagina zelf zien om de indeling te begrijpen? Zet dat onzichtbare venster dan tijdelijk verkleind in beeld en maak screenshots.
- Bekijk elk blok ook echt op de telefoonbreedte (390px), zodat je kunt beschrijven wat er op de telefoon verandert.
- Sluit popups en cookiebanners zonder iets te accepteren of in te vullen.
- Heb je geen browsertools? Vraag me dan om screenshots: per pagina 4 à 6 stukken van het scherm op de computer, en 2 à 3 op de telefoon. Leg in maximaal 5 korte stappen uit hoe ik die maak. Schat de maten, en zeg eerlijk dat het geschat is.
- Verzin nooit een waarde. Weet je iets niet zeker, zet dan "zelf checken".
- Staan er in een formulier op mijn site al gegevens ingevuld door de browser? Neem die nergens over.

Standaardmaten bepalen:
- Kies per onderdeel één waarde voor de computer, één voor de tablet en één voor de telefoon. Neem de waarde die het vaakst voorkomt op de site. Is er geen duidelijke winnaar, gebruik dan de vuistregels hieronder, en kies liefst een waarde die al op de site staat.
- Ondergrenzen, die gaan altijd voor wat er op de site staat:
  - Gewone tekst is minimaal 16 pixels, op elk apparaat.
  - De grote kop is op elk apparaat groter dan de tussenkop, en de tussenkop groter dan de kleine kop.
  - Maximaal 3 lettertypes: één voor koppen, één voor gewone tekst, en eventueel één voor kleine teksten in hoofdletters (menu, labels, knoppen). Gebruikt de site er meer? Kies de 3 die het meest voorkomen, en laat de rest dezelfde lettertypes gebruiken.
  Pas je een maat aan door een ondergrens? Zet in de kolom "Komt van" dan "aangepast", en zeg in één zin waarom (bijvoorbeeld "beter leesbaar op de telefoon").
- Ruimte: meet per blok de afstand die je ziet tussen de rand van het blok en de eerste of laatste tekst of afbeelding, en de ruimte tussen twee blokken. Maak daar één standaard van: padding boven en onder van de sectie, per apparaat één getal, en marge tussen blokken 0. Alle ruimte zit dan in de padding.
- Breedtes van het middenstuk: hier mogen er meer zijn, omdat ze bij een soort blok horen. Geef elke breedte een naam (smal, normaal, tot de schermrand) en zeg bij welk soort blok hij hoort.
- Vuistregels: middenstuk 1140 tot 1200 pixels breed; lange tekst maximaal ±720 pixels breed; padding van een sectie 80 tot 120 pixels op de computer, 64 tot 80 op de tablet en 48 tot 64 op de telefoon; gewone tekst 17 à 18 pixels op de computer en 16 op tablet en telefoon; ruimte aan de zijkant op de telefoon ±24 pixels; korte stukken gecentreerd, tekst van meer dan 3 regels links uitgelijnd; één knopstijl.

Bijzondere effecten herkennen:
- Een bijzonder effect is een bewuste keuze die je met het oog ziet. Voorbeelden: een foto of element dat over de rand van een blok steekt; een kop die precies op de naad tussen twee blokken staat; blokken of foto's die elkaar overlappen; een foto met een bijzondere vorm (bijvoorbeeld een boog); een achtergrond die halverwege een blok stopt; een schuine of golvende rand; een foto tot de schermrand in een verder ingekaderde site; een element dat blijft staan als je scrollt; een gekanteld of gedraaid element.
- Een verschil in ruimte of grootte zonder zichtbaar effect is geen bijzonder effect. Dat trek je gelijk met de standaardmaten, en daar meld je niets over.
- Verschillen tussen computer, tablet en telefoon meld je alleen als het effect daar anders werkt of verdwijnt.
- Leg alleen uit hoe je het effect maakt als dat met de gewone instellingen van de builder kan en je zeker bent van de stappen. Is het moeilijk, of is er code (CSS) voor nodig? Schrijf dan: "Dit laat je het beste maken door iemand met design- of CSS-kennis." Gok niet.

Kennis over de builder (gebruik dit in de handleiding en als ik vraag waar ik iets instel):
- De breedte van het middenstuk stel je in bij de rij (Width), op computer en tablet. Op de telefoon loopt een rij altijd over de hele breedte en komen kolommen onder elkaar, dus de ruimte aan de zijkant maak je daar met padding.
- Bij tekst stel je per apparaat in: lettergrootte, dikte, regelhoogte (tab Algemeen) en marge, padding, uitlijning en containergrootte (tab Stijlen).
- Bij secties, rijen en kolommen: marge en padding per apparaat (tab Stijlen).
- In de mediabibliotheek kun je meerdere bestanden of een hele map in één keer uploaden.
- Komt een formulier op mijn site uit een ander systeem? Zeg dan dat ik het in Voluit Suite opnieuw maak, zodat aanmeldingen in mijn eigen contactenlijst komen.

Afbeeldingen verzamelen:
- Veel sites laden afbeeldingen pas als je ernaartoe scrolt. Scroll daarom de pagina helemaal door. Werkt dat niet (bijvoorbeeld omdat het tabblad op de achtergrond staat)? Lees de adressen dan uit de verborgen kenmerken van de afbeeldingen in de code (zoals data-src, data-lazy-src en srcset).
- Verzamel alle foto's, illustraties, logo's en iconen van de pagina's die ik noemde. Neem ook achtergrondafbeeldingen mee (afbeeldingen die als achtergrond van een blok staan) en het logo in menu en footer.
- Sla emoji's over, en kleine standaardplaatjes die van een andere server komen dan mijn site. Die zijn niet van mij.
- Zoek steeds de grootste versie van een afbeelding, niet een verkleinde kopie.
- Geef elke afbeelding een nieuwe naam die zegt wat erop staat, bijvoorbeeld "home-hero-achtergrond.jpg".
- Zie je in een oorspronkelijke bestandsnaam de naam van een fotograaf of een stockfotosite? Noem dat in hoofdstuk 6.

De zip maken:
- Maak de zip in de browser op de pagina van mijn site: haal de afbeeldingen op en start één download. Chrome houdt meerdere losse downloads achter elkaar vaak tegen, zonder dat ik dat merk.
- Inhoud van de zip: een map "website-handleiding" met daarin het bestand website-handleiding.html en een map "afbeeldingen" met alle afbeeldingen.
- Na de eerste download van een website houdt Chrome volgende downloads van diezelfde website stil tegen, tot ik toestemming geef. Zie stap 6 van het verloop.
- Moet je de pagina opnieuw laden voor een nieuwe versie? Bewaar de handleiding dan eerst tijdelijk in de browser (sessionStorage), zodat je hem niet opnieuw hoeft op te bouwen.
- Lukt een zip niet, download de bestanden dan los en wacht een paar seconden tussen elke download. Lukt downloaden helemaal niet, zet de handleiding dan in de chat en geef de links naar de afbeeldingen.
- Sluit het tabblad pas als ik heb gezegd dat alles binnen is.

DE HANDLEIDING (website-handleiding.html)
Opmaak:
- Eén HTML-bestand dat werkt zonder internet. Rustige opmaak: witte achtergrond, één leesbaar lettertype, ruime regelafstand, duidelijke tabellen. Gebruik bij kleurcodes een gekleurd vierkantje naast de code.
- Bovenaan een header met paarse achtergrond (#5D378C) en witte tekst. Daarin: de titel, de datum met welke pagina's je bekeken hebt, en deze zin: "Gemaakt met de website-verhuisprompt van Voluit Suite. Zo bouw je je website stap voor stap na in Voluit Suite."
- Uitlegblokken (zoals "Zo gebruik je deze handleiding" en de uitleg over padding) krijgen een lichtpaarse achtergrond (#F6F2FA) en een paarse rand links (#5D378C). Links zijn ook paars (#5D378C).
- Laat afbeeldingen zien vanuit de map "afbeeldingen" (bijvoorbeeld afbeeldingen/home-hero-achtergrond.jpg), klein en klikbaar. Zet bij elke bouwsteen de foto's die erin staan.
- Zorg dat de pagina netjes afdrukt, inclusief de paarse header en de gekleurde vierkantjes, zodat ik er met Cmd+P of Ctrl+P een PDF van kan maken.

Na de header:
- 2 à 3 zinnen: welke pagina's je hebt bekeken en wat je in grote lijnen ziet.
- Uitlegblok "Zo gebruik je deze handleiding": begin bij hoofdstuk 1 en werk naar beneden. Hoofdstuk 5 kun je overslaan tot je site live staat. Wil je iets anders dan in de handleiding staat? Vraag het in de chat, dan maak ik een nieuwe versie.
- Een inhoudsopgave met links naar de hoofdstukken.

Hoofdstuk 1: Standaardmaten
- Eén tabel met 5 kolommen: Wat | Computer | Tablet | Telefoon | Komt van
  Zet in de kolom "Wat" de naam van het onderdeel, met tussen haakjes een uitleg van maximaal 8 woorden.
  Rijen:
  - Breedtes van het middenstuk (waar je tekst en foto's in staan): per naam de breedte en bij welk blok hij hoort
  - Breedte van een tekstblok
  - Padding van een sectie, boven en onder (ruimte binnen een blok)
  - Marge tussen blokken (altijd 0)
  - Ruimte aan de zijkant (tablet en telefoon)
  - Lettertypes: koppen, gewone tekst, en eventueel kleine teksten in hoofdletters
  - Grote kop, tussenkop, kleine kop, gewone tekst: grootte
  - Knop: kleur, tekstkleur, vorm, hoogte, lettertype
  In de kolom "Komt van" staat: "je site" (gemeten op je site), "vuistregel" (je site had geen duidelijke maat), "aangepast" (met de reden) of "zelf checken".
- Daaronder een tabel "Kleuren": kleurvierkantje met kleurcode | waarvoor de kleur gebruikt wordt.
- Daaronder een uitlegblok, letterlijk:
  "Padding is de ruimte binnen een blok. De achtergrondkleur van het blok loopt erdoor. Marge is de ruimte tussen twee blokken. Die zetten we op 0, dan zit alle ruimte in de padding en hoef je per apparaat maar één getal te onthouden."

Hoofdstuk 2: Menu en footer
Menu (de balk bovenaan):
- Wat staat erin, van links naar rechts: logo, menu-items, knop. Welke items klappen uit?
- Achtergrondkleur, hoogte, lettertype en grootte van de menu-items, kleur van de menu-items en van de pagina waar je op bent.
- Blijft het menu staan als je scrollt?
- Op de telefoon: hoe ziet het menu eruit (bijvoorbeeld een knop met drie streepjes) en wat staat er zichtbaar?
Footer (het blok onderaan):
- Hoeveel kolommen, en wat staat er in elke kolom (bijvoorbeeld logo, links, contactgegevens, socials, nieuwsbrief).
- Achtergrondkleur, tekstkleur, lettergrootte. Hoe zien de social-icoontjes eruit?
- Wat staat er in de onderste regel (bijvoorbeeld copyright, privacyverklaring, algemene voorwaarden)?
- Op de telefoon: komen de kolommen onder elkaar, en in welke volgorde?
Sluit af met een uitlegblok: "Menu en footer bouw je één keer en sla je op als universele sectie. Dan verandert hij op alle pagina's mee als je hem aanpast."

Hoofdstuk 3: Bouwstenen
Deel de blokken op mijn site in bij deze 9 bouwstenen:
1. Hero: het grote blok bovenaan met kop, subkop, knop en beeld
2. Tekst met beeld, beeld links
3. Tekst met beeld, beeld rechts
4. Drie voordelen naast elkaar, met icoon, kop en korte tekst
5. Testimonial: een ervaring van een klant
6. FAQ: veelgestelde vragen die openklappen
7. CTA-balk: een gekleurde band met één zin en één knop (CTA betekent call to action, een oproep)
8. Checkout-blok: waar iemand betaalt
9. Formulier: waar iemand zich aanmeldt
Per bouwsteen een kaart:
- Naam, plus één zin wat het is.
- Waar je hem ziet: pagina, bloknummer en de kop van het blok.
- De foto's die erin staan, uit de map "afbeeldingen".
- Hoe hij eruitziet: alleen wat niet in de standaardmaten staat (achtergrondkleur, beeld links of rechts, hoe breed het beeld is, ronde of rechte hoeken, de stijl van de iconen). Hoort er een bijzonder effect bij? Noem de letter, en zeg hoe ik het blok eerst eenvoudig bouw.
- Komt hij in varianten voor? Beschrijf ze kort en doe één voorstel.
- Op de telefoon: één zin, bijvoorbeeld of het beeld boven of onder de tekst komt.
- Staat de bouwsteen niet op de site? Schrijf dan: "Dit blok staat nog niet op je site. Zo zou ik hem maken:" en geef een voorstel op basis van de standaardmaten. Verzin geen voorbeeld dat er niet is.
Daarna een kopje "Blokken die nergens bij passen": per blok waar het staat, en in één zin je advies: een extra bouwsteen maken, of het blok bouwen met een van de 9.
Sluit af met een uitlegblok: "Elke bouwsteen sla je op als sjabloon (template). Dan voeg je hem op elke pagina opnieuw in en pas je alleen de tekst en foto aan."

Hoofdstuk 4: Paginaoverzicht
Begin met: "Op elk blok gelden de standaardmaten. Bijzondere effecten bouw je eerst eenvoudig, die staan in hoofdstuk 5."
Per pagina één tabel, met elk blok van boven naar beneden.
Kolommen: Nr | Wat staat erin (de kop of een paar woorden) | Bouwsteen | Middenstuk | Achtergrond | Effect
- Middenstuk: de naam uit hoofdstuk 1 (smal, normaal, tot de schermrand).
- Achtergrond: kleurvierkantje met kleurcode, "foto" met de bestandsnaam, of "geen" (dan zie je de achtergrond van de pagina).
- Effect: de letter uit hoofdstuk 5, of leeg.

Hoofdstuk 5: Bijzondere effecten
Begin met: "Deze effecten zijn niet nodig om je site live te zetten. Je kunt ze later laten maken. Dit hoofdstuk kun je zo doorsturen naar een designer."
Per effect een kaart, genummerd als Effect A, Effect B, enzovoort:
- Wat je ziet: één zin in gewone woorden.
- Waar: pagina, bloknummer en de kop van het blok.
- Hoe groot: bijvoorbeeld "de foto steekt 80 pixels boven het blok uit".
- Zo maak je het: maximaal 4 korte stappen, alleen als het met de gewone instellingen kan. Anders: "Dit laat je het beste maken door iemand met design- of CSS-kennis."
- Op de telefoon: houden of weglaten? Doe één voorstel.
Geen bijzondere effecten gevonden? Zeg dat in één zin.

Hoofdstuk 6: Afbeeldingen
- Een tabel: klein voorbeeld | bestandsnaam | wat het is (bijvoorbeeld "portretfoto in blok 2").
- Lukte een afbeelding niet? Zet hem in een lijstje "zelf downloaden" met de link.
- Daaronder een uitlegblok: "Neem alleen afbeeldingen mee waar je de rechten op hebt. Heb je stockfoto's gekocht? Check dan of je licentie ook voor je nieuwe site geldt." Zag je de naam van een fotograaf of stockfotosite? Noem die hier, en zeg dat ik bij hen check of ik de foto's op mijn nieuwe site mag gebruiken.
- Sluit af met: "Open de mediabibliotheek in Voluit Suite en upload de map 'afbeeldingen' in één keer. Dan staan al je foto's klaar om te gebruiken."

Wat levert het voorbereidende werk op?

In deze video laat je Claude je huidige website doorlichten. Je krijgt één handleiding met je maten, kleuren, lettertypes en bouwblokken, en al je foto's in één map. Daarmee bouw je je site in de volgende video's na in Voluit Suite.

Moet ik designer zijn om mijn website na te bouwen?

Nee. Ik ben zelf geen designer. Dit is de aanpak die ik gebruik als ik een website opnieuw bouw in Voluit Suite, en daarmee heb ik Claude geïnstrueerd om het moeilijke werk voor mij te doen. Het zijn vuistregels die voor mij werken, geen designwetten. Heb je een designer of een eigen huisstijlgids, dan gaan die keuzes voor.

Wat heb ik nodig om mijn website te laten analyseren?

Je hebt Claude nodig met de extensie Claude in Chrome. Daarvoor heb je een betaald abonnement op Claude nodig. Daarnaast heb je de prompt nodig. Dat is een lange prompt, je vindt hem onder deze video.

Wat vul ik in de prompt in?

Bovenin de prompt vul je in over welke website het gaat, je websiteadres en welke pagina's Claude gebruikt om je designblokken te analyseren. Dat hoeft niet je hele website te zijn. Een website bestaat uit blokken achter elkaar, en die blokken komen op andere pagina's terug met andere teksten. Het gaat om de designblokken.

Welke pagina's van mijn website kies ik?

Kies maximaal vijf pagina's waarop verschillende blokken staan. Je homepage of landingspagina heeft meestal de meeste verschillende blokken. Voeg je over mij-pagina, je aanbodpagina en je contactpagina toe (voor het formulier). Heb je checkoutpagina's, zet er dan één bij. Meer heb je niet nodig, want je site hoort overal dezelfde maten en afstanden te hebben.

Hoe lang duurt de analyse?

Reken op 5 tot 15 minuten nadat je de pagina's hebt ingevuld. Je kunt in de tussentijd iets anders doen.

Hoe start ik de analyse?

Kopieer de prompt en open Claude. Plak de prompt en vul je gegevens in. Bekijk je website om te bepalen welke pagina's verschillende blokken hebben en zet de URL's van die pagina's in de prompt. Daarna gaat Claude aan de slag.

Claude vraagt om toestemming. Wat moet ik doen?

Claude vraagt toestemming om je website te bekijken. Geef die toestemming. Kies je voor "Always allow actions on this site" (acties op deze site altijd toestaan), dan werkt Claude verder op je website zonder steeds opnieuw te vragen. Laat het tabblad met Claude openstaan. Daar verschijnt straks de samenvatting en de vraag om de handleiding te downloaden.

Wat krijg ik als Claude klaar is?

Claude geeft een samenvatting: welke pagina's zijn bekeken, welke bouwblokken zijn gevonden en welke bijzondere designeffecten zijn vastgelegd. Daarna vraagt Claude toestemming om de handleiding en de foto's als één zipbestand in je downloadsmap te zetten.

Het downloaden van de handleiding lukt niet. Wat nu?

Soms moet je in Chrome extra toestemming geven. Lukt het downloaden niet, dan staat er een icoontje in de adresbalk van je browser. Geef daar toestemming en vraag Claude het nog een keer.

Wat staat er in de websitehandleiding?

De handleiding beschrijft hoe je alle blokken maakt met de juiste kleuren en lettertypes, wat er in de menubalk en in de footer komt en hoe alles eruitziet. Aan het eind staan per pagina alle blokken op een rij, bijvoorbeeld voor de homepage en de aanbodpagina.

Wat doe ik met de bijzondere effecten uit de handleiding?

Voor sommige effecten heb je extra CSS-code of designkennis nodig. Lukt dat niet meteen, stuur dan de samenvatting van de bijzondere effecten naar een designer of iemand die met CSS werkt.

Wat doe ik met de map met foto's?

Alle afbeeldingen van je website staan in één map in je downloadsmap. Die hele map upload je in één keer in de Mediabibliotheek in Voluit Suite. Daarna gebruik je de foto's in je website in Voluit Suite.

Kan ik de handleiding laten aanpassen?

Ja. Ben je het ergens niet mee eens, of staat er een oude versie in? Vraag Claude om de handleiding bij te werken.

Kopieer de hele prompt. Vul alleen het eerste deel in en pas de rest niet aan.

=== VUL ALLEEN DIT IN ===
Naam van mijn account in Voluit Suite: 
Naam van mijn nieuwe website: 
Welke pagina bouwen we nu (bijvoorbeeld Home): 
Naam van de map met mijn foto's in de mediabibliotheek: 
Upload ook je bestand website-handleiding.html in deze chat.
=== HIERONDER NIETS AANPASSEN ===

WIE IK BEN
Ik bouw mijn website in Voluit Suite. Ik ben geen designer en niet technisch. Van te veel vaktermen of getallen tegelijk raak ik in de war. Ik heb een handleiding van mijn huidige site, gemaakt met de website-verhuisprompt van Voluit Suite.

WAT JE VOOR ME DOET
Je bouwt via Chrome één pagina van mijn website in de websitebuilder van Voluit Suite, volgens mijn handleiding. Eerst de basis (kleuren, lettertypes, menu, footer), daarna de blokken van de pagina van boven naar beneden. Is het menu en de footer er al, omdat ik eerder een pagina heb laten bouwen? Sla die dan over. Je publiceert niets. Dat doe ik zelf.

HOE JE TEGEN ME PRAAT
- Eenvoudig Nederlands en korte zinnen.
- Geen vaktermen. Moet het toch, leg het dan direct uit.
- Noem alleen "Voluit Suite", nooit HighLevel of GoHighLevel.
- Zeg "computer", "tablet" en "telefoon".

VERLOOP IN DE CHAT
1. Lees de handleiding. Zeg in 2 zinnen welke pagina je bouwt en uit hoeveel blokken hij bestaat.
2. Zeg eerlijk hoe lang het duurt: reken op 15 tot 30 minuten per blok. Zeg erbij dat mijn computer en Chrome aan moeten blijven, en dat ik ondertussen iets anders mag doen.
3. Vraag me om in Chrome in te loggen in Voluit Suite en het juiste account te openen. Log nooit zelf in.
4. Bouw. Stel me tussendoor geen vragen. Lukt iets niet na 2 pogingen, sla het over, schrijf het op en ga door.
5. Stuur na de basis en daarna na elke 3 blokken een tussenstand van maximaal 3 zinnen.
6. Sluit af met: wat staat er, wat wijkt af van de handleiding en waarom, en wat ik zelf nog moet doen. Maximaal 10 korte regels.

HOE JE WERKT (dit is voor jou, niet voor mij)

Website en pagina aanmaken:
- Ga naar Sites > Websites. Bestaat de website nog niet, klik dan op Nieuwe website > Van nul beginnen en gebruik de naam die ik heb ingevuld.
- Voeg de pagina toe met Voeg een nieuwe pagina toe, en kies daarna Van nul beginnen.
- Sluit het paneel Vraag AI dat links opent.

De builder bedienen:
- De builder staat in een venster van een ander domein. Je kunt de knoppen en velden niet uitlezen. Werk met screenshots en klikken.
- Typ nooit zonder eerst te zien dat een invoerveld actief is. Toetsaanslagen buiten een veld zijn sneltoetsen en openen panelen. Klik op het veld, zoom in en kijk of de cursor erin staat. Typ pas daarna.
- Een lege pagina kun je niet opslaan. Voeg eerst een sectie toe, dan pas de rest.
- Sla op met het diskette-icoon rechtsboven, na elk blok. Kies nooit "pagina verlaten" als er wijzigingen openstaan. Dan ben je je werk kwijt.
- Schuift de hele pagina omhoog, zodat de bovenste balk verdwijnt? Scroll het venster dan terug naar boven met JavaScript (window.scrollTo(0,0)).
- Tekst aanpassen: klik op het element, klik nog een keer zodat er een cursor staat, klik er drie keer op om alles te selecteren, typ dan de nieuwe tekst.
- Marge en padding: klik op het getal in het vak. Er opent een venstertje met een invoerveld en vaste keuzes (0, 10, 20, 40, 60, 80, 100, 140).
- Sommige keuzelijsten reageren niet op klikken via Chrome. Sla die over en schrijf ze op voor mijn eindlijstje.
- Iets verkeerd toegevoegd? Maak het ongedaan met de pijl naar links rechtsboven.

Kleuren en lettertypes:
- Zet alle kleuren uit de handleiding als globale kleur: open een kleurkiezer > Globale aangepaste kleuren > Beheren > Aangepaste kleuren > Toevoegen > Nieuw toevoegen. Vul een naam in, plak de kleurcode, klik Opslaan. Globale kleuren gelden voor het hele account, dus zet de naam van mijn bedrijf voor elke kleur. Bestaan ze al, sla deze stap over.
- Lettertypes stel je in via Typografie in de bovenste balk: één voor koppen, één voor gewone tekst. Doe dit pas nadat er een sectie op de pagina staat, anders slaat de builder het niet op. Per element kun je alleen kiezen tussen die twee. Een derde lettertype (voor labels, menu en knoppen) kan dus niet. Gebruik daarvoor het lettertype van de gewone tekst in hoofdletters, en meld dat aan het eind.
- Paginaachtergrond stel je in via Achtergrond in de bovenste balk.

Menu:
- Maak een sectie met één kolom en zet daar het element Navigatiemenu in (zoek op "menu" bij Snel toevoegen). Het logo staat daarin altijd links en de menu-items rechts. Staat het logo op mijn huidige site in het midden? Meld dan dat het nu links staat.
- Zet Bedrijfsnaam uit. Kies het logo uit de mediabibliotheek en geef het een breedte en hoogte die bij de verhouding van het logo passen.
- Zet bij Stijlen > Achtergrond en kleur de achtergrond op doorzichtig en kies een tekstkleur die leesbaar is op de achtergrond van de sectie.
- Zet ook Achtergrondkleur mobiel, Achtergrondkleur pop-up en Achtergrondkleur pop-up mobiel op een kleur waarop de menutekst leesbaar is. Standaard zijn ze wit, en dan zie je op de telefoon niets.
- Menu-items: hernoem de bestaande items en voeg nieuwe toe met Item toevoegen > Nieuw menu. Zet de link op # zolang de pagina nog niet bestaat, en zet "Openen in een nieuw tabblad" uit.
- Een item onder een ander item zetten kan alleen met slepen. Dat lukt via Chrome slecht. Laat het over en zet het op mijn eindlijstje.
- Sla het menu op als universele sectie.

Footer:
- Bouw de footer onderaan de pagina, zoals hoofdstuk 2 van de handleiding hem beschrijft: per laag een eigen sectie, met het aantal kolommen uit de handleiding.
- Links in de footer: gebruik tekst of een navigatiemenu zonder logo. Zet de links op # als de pagina nog niet bestaat.
- Social-icoontjes: gebruik het element voor social media en zet de links naar de accounts uit de handleiding.
- Een aanmeldformulier maak je niet zelf. Zet een bestaand formulier uit mijn account in de footer. Is er geen, laat dan een lege plek over en zet het op mijn eindlijstje.
- Sla elke laag van de footer op als universele sectie.

Blokken:
- Nieuwe sectie: + linksboven > Onderdelen. Kies Volledige breedte voor blokken tot de schermrand, anders Breed.
- Rijen en elementen voeg je toe via + > Snel toevoegen. Kijk eerst wat er geselecteerd is: een rij toevoegen terwijl een kolom geselecteerd is, zet de nieuwe rij ín die kolom. Gebeurt dat, maak het dan ongedaan.
- Elementen die je toevoegt terwijl een kolom of element geselecteerd is, komen in die kolom terecht. Voeg ze toe in de volgorde van boven naar beneden: label, kop, tekst, knop.
- Achtergrondfoto: sectie > Achtergrond > Afbeelding. Kies bij Pasvorm "Volledig gecentreerd", nooit Parallax. Zet bij foto's met witte tekst erop een lichte verdonkering.
- Knoppen: zet de breedte op Vloeiend, zodat de knop zo breed is als de tekst. Uitlijnen doe je bij Stijlen > Uitlijningsknop.
- Tekstuitlijning zet je bij Stijlen > Uitlijnen.
- Foto's: controleer of een foto niet vervormd is. Is hij uitgerekt of platgedrukt, verwijder het element dan en voeg de foto opnieuw toe.
- Bijzondere effecten uit hoofdstuk 5 van de handleiding bouw je niet. Bouw het blok eenvoudig, zoals de handleiding zegt.
- Komt een bouwsteen twee keer of vaker voor? Sla de eerste versie op als sjabloon en gebruik die voor de volgende.

Telefoon:
- Kijk na elk blok in de telefoonweergave (icoon bovenin). Velden met een klein apparaat-icoon gelden alleen voor het apparaat dat je bekijkt.
- Pas op de telefoon de lettergroottes en de ruimte aan de zijkant aan volgens hoofdstuk 1 van de handleiding. De ruimte aan de zijkant zet je als padding links en rechts op de kolom.
- Ga daarna terug naar de computerweergave en kijk of daar niets veranderd is.

Veiligheid:
- Log nooit in, publiceer niets, verwijder geen andere websites of bestanden in mijn account.
- Formulieren maak je niet zelf.

Wat doet Claude bij optie 1?

Claude bouwt de basis van je website in de websitebouwer van Voluit Suite, op basis van de handleiding uit de vorige video. Je houdt een site over die je zelf aanpast met je eigen teksten, lettertypes en foto's.

Wat moet ik klaar hebben voordat Claude gaat bouwen?

Je hebt drie dingen nodig: de handleiding uit de vorige video, de map met foto's in de Mediabibliotheek van Voluit Suite en de extensie Claude in Chrome, zodat Claude in je browser kan werken.

Hoe upload ik een hele map met foto's in de Mediabibliotheek?

Klik in de Mediabibliotheek op "Uploaden" en kies "Map uploaden". Selecteer de map die Claude in de vorige video van je website heeft gehaald. Alle foto's staan dan in één keer in Voluit Suite.

Logt Claude zelf in op Voluit Suite?

Nee, Claude logt nooit zelf in. Nadat je de prompt hebt ingevoerd, vraagt Claude je om in te loggen in Voluit Suite.

Moet mijn computer aan blijven terwijl Claude bouwt?

Ja. Zodra Claude aan het werk is, moet je computer aan blijven. Zet je screensaver uit en zorg dat je scherm niet in slaapstand gaat. Anders stopt Claude met werken.

Wat vul ik in de prompt voor optie 1 in?

Je vult alleen het eerste deel in: de naam van je account in Voluit Suite, de naam van je nieuwe website, welke pagina Claude als eerste bouwt en de naam van de map met foto's in de Mediabibliotheek. Zet ook je websitehandleiding uit de vorige video in deze chat. Zo heeft Claude in een nieuwe chat meteen alle informatie over je website. Verander niets aan de rest van de prompt. Daarin staat hoe Claude de websitebouwer van Voluit Suite bedient en welke fouten Claude moet vermijden.

Hoe lang duurt het bouwen?

Dit kan lang duren. Start het bijvoorbeeld voordat je naar bed gaat, of als je twee uur in een vergadering zit en je computer niet nodig hebt. Claude werkt dan op de achtergrond door.

Kan ik zelf doorwerken terwijl Claude bouwt?

Ja. Zet Claude dan in een apart browservenster. Sleep het tabblad van Claude uit je browser. Je krijgt een nieuw venster met alleen de tabbladen van Claude, en Claude bouwt op de achtergrond alle blokken die nu op je website staan.

Hoe weet Claude welke kleuren en lettertypes mijn website gebruikt?

Claude heeft in de vorige video de handleiding gemaakt. Daarin staan de hexcodes en lettertypes, en de teksten haalt Claude van je huidige website.

Waar komen de kleuren van mijn website terecht?

De kleuren komen als globale kleuren in je account. Die kies je later met één klik. Claude zet de naam van de website bij elke kleur, zodat je weet bij welke website de kleuren horen.

Waarom slaat Claude de footer op als universele sectie?

Claude slaat alle onderdelen van de footer op als universele sectie. Die gebruik je op elke pagina opnieuw, en een wijziging doe je op één plek.

Wat gaat er nog mis in de mobiele weergave?

In de mobiele weergave zitten nog fouten, bijvoorbeeld een zwarte balk achter een blok of een foto die ontbreekt. Twee foto's die elkaar overlappen en die mobiel goed moeten werken, zijn lastiger designwerk. Zulke onderdelen bouwt Claude bewust eenvoudig, zodat je een startpunt hebt. Ook het logo kan te groot uitvallen.

Laat ik Claude de fouten ook corrigeren?

Dat kan, maar dan ben je langer bezig. Mijn advies: gebruik het resultaat als begin en pas het zelf verder aan met de instellingen aan de rechterkant van de websitebouwer. Kleine onderdelen kun je door een designer laten doen.

Wat staat er in het verslag van Claude?

Aan het eind meldt Claude wat er is gedaan, wat er is aangepast en waar Claude een andere keuze moest maken. Een voorbeeld: Claude corrigeerde een typefout. Een ander voorbeeld: de originele social media-icoontjes waren lichtgeel met donkerrood. Die stijl zit niet standaard in Voluit Suite, daarvoor heb je CSS nodig. Bekijk per punt wat je zelf nog wilt aanpassen.

Kloppen de links op de nagebouwde pagina?

Nog niet. Dit is de eerste pagina van je website, en de pagina's waar je naartoe linkt bestaan nog niet. Loop alle links en menu's na.

Wat is het verschil tussen optie 1 en optie 2?

Er zijn drie manieren. Bij optie 2 bouwt Claude het middenstuk van de pagina in HTML. Dat gaat sneller en ligt waarschijnlijk dichter bij het originele design, maar je past de pagina daarna minder makkelijk zelf aan. Bij optie 1 pas je elk element aan in de websitebouwer: tekst intypen, blokken verslepen. Bij één blok HTML zoek je de tekst op in de code en pas je alleen kleine stukjes tekst aan. Verander je meer in de code, dan verandert je hele design. Grotere wijzigingen geef je aan Claude, en je krijgt een nieuw blok HTML terug dat je opnieuw plakt.

Kopieer de hele prompt. Vul alleen het eerste deel in en pas de rest niet aan.

=== VUL ALLEEN DIT IN ===
De website die ik wil nabouwen: 
Welke pagina bouwen we nu (bijvoorbeeld de homepage): 
Header en footer (kies er één): ik heb ze al gemaakt in de websitebouwer, bouw alleen het middelste stuk / bouw ze ook in HTML
Mijn foto's (per foto een korte beschrijving van wat erop staat en waar hij op de pagina staat, met de link uit de mediabibliotheek):
- [beschrijving en plek]: [link]
- [beschrijving en plek]: [link]
Formulier (de insluitcode uit Formulieren > Integreren > Inline insluitcode, en waar het formulier moet komen): 
Links (per knop of link waar die naartoe gaat): 
=== HIERONDER NIETS AANPASSEN ===

Maak een standalone HTML-pagina met alle CSS en JavaScript in één bestand. De code wordt geplakt in een code-element in de HighLevel websitebuilder (Voluit Suite is de Nederlandse white-label van HighLevel). Gebruik geen <!DOCTYPE html>, <html>, <head> of <body> tags, want die voegt de builder zelf al toe. Zorg dat de pagina goed werkt op mobiel.

Bouw de pagina die ik hierboven noem na van de website die ik hierboven noem. Heb ik de header en footer al gemaakt? Bouw dan alleen het middelste stuk van de pagina.

De foto's staan al in Voluit Suite. Gebruik alleen de links die ik hierboven geef, op de plek die ik beschrijf.

Staat er bij een knop of link geen adres, of ontbreekt een formulier? Zet de link dan op # en noem aan het eind wat ik nog moet aanleveren.

Hoe werkt optie 2 met HTML van Claude?

Claude bouwt het middenstuk van je pagina als HTML-code, en die code plak je in een code-element in de websitebouwer. De prompt staat in het supportartikel Claude AI website hosten in Voluit Suite, onder Voluit Suite Geavanceerd: Websites.

Wat vul ik in de prompt voor optie 2 in?

Open een nieuwe chat in Claude en plak de prompt. Vul je websiteadres in. Geef aan of je de header en footer al hebt gemaakt. In dit voorbeeld heeft Claude die in de vorige video al in de websitebouwer gebouwd. Wil je dat Claude de header en footer ook in HTML bouwt, kijk dan eerst de video over Claude je website laten bouwen. Daarin leg ik uit hoe je de drie blokken maakt: de header met het menu, het middenstuk en de footer.

Kan ik de prompt aanpassen als Claude al bezig is?

Ja, bijna altijd. Stop Claude, bewerk de prompt en start opnieuw.

Hoe zorg ik dat Claude de juiste foto's op de juiste plek zet?

Beschrijf elke foto op de pagina en waar die staat. Bijvoorbeeld: achtergrondfoto in de hero (het bovenste deel van de pagina), of de foto met de sinaasappel bovenaan. Zo weet Claude welke foto op welke plek hoort. Dit kost wat extra tijd, maar het resultaat komt dan overeen met je originele pagina.

Hoe haal ik de link van een foto uit de Mediabibliotheek?

Ga naar de Mediabibliotheek en open de map met je foto's. Klik bij elke foto op "Link ophalen" en zet die link in Claude, bij de beschrijving van de foto. Claude maakt dan HTML met de juiste URL's naar de afbeeldingen.

Wat levert Claude op bij optie 2?

Claude vertelt wat er is gedaan, in dit geval het middenstuk van de homepage. Claude meldt ook taalfouten en wat je zelf nog moet doen. Je bekijkt het resultaat in Claude of opent het in Chrome. Ingewikkelde designonderdelen zijn nog niet perfect, maar animaties en de slider werken goed.

Waarom staat mijn formulier er niet in?

Claude kan een formulier pas inbouwen als je de insluitcode van het formulier meegeeft. Doe je dat in je eerste opdracht, dan zet Claude het formulier meteen op de juiste plek.

Hoe zet ik HTML van Claude in de websitebouwer van Voluit Suite?

Kopieer de HTML in Claude met de kopieerknop. Ga in Voluit Suite naar Sites, open de juiste website en klik op "Bewerken". Klik op het plusje, scroll in de elementen naar het code-element en sleep het onder het menu.

Welke instellingen zet ik op het code-element?

Voordat je de code plakt, zet je de opvulling (padding) en marge op 0. Dat doe je bij de sectie (de buitenste groene lijn), bij de rij (de blauwe lijn) en bij de kolom (de paarse lijn). Zet ook "Sta rij toe om de volledige breedte in te nemen" aan. Ga daarna naar de tabletweergave en de mobiele weergave en controleer of alles daar ook op 0 staat.

Waar plak ik de HTML-code?

Klik op het code-element. Open in het tabblad "Algemeen" de "Code Editor" en plak de HTML.

Waarom zie ik de HTML niet in de websitebouwer?

De websitebouwer toont de inhoud van het code-element niet. Sla op en open de preview. Die opent in een nieuw tabblad en daar zie je hoe je website eruitziet.

Wat is het verschil met de pagina uit optie 1?

Zet je de HTML boven de blokken uit optie 1, dan zie je in de preview het verschil. De HTML ligt dichter bij het originele design. Deze manier vraagt wel planning: je zoekt de URL's van de foto's op, en alle links moeten kloppen. Die geef je mee in de prompt. Moet er een formulier op de pagina, dan geef je de insluitcode van het formulier ook mee.

Hoe voeg ik een formulier toe aan HTML van Claude?

Ga naar Formulieren en open het formulier. Klik op "Integreren", kies "Inline insluitcode" en klik op "Insluitcode kopiëren". Ga terug naar Claude en vertel waar het formulier moet komen, bijvoorbeeld in de footer, en plak de code. Claude bouwt het formulier in je pagina en geeft nieuwe HTML terug.

Hoe vervang ik de HTML door een nieuwe versie?

Open de Code Editor van het code-element, verwijder de oude code helemaal en plak de nieuwe. Zo verwerk je elke wijziging via Claude.

Hoe zorg ik dat de links in de HTML kloppen?

Je moet weten waar elke link naartoe gaat. Bouw je je hele website in Voluit Suite, dan moet je vooraf weten hoe de URL's eruitzien. Misschien moet je die pagina's eerst aanmaken. Houd je dezelfde URL's als je huidige site, dan neem je de bestaande URL. Vertel Claude per knop waar die heen linkt, bijvoorbeeld dat de testknop naar de quiz gaat. Zo vul je alle ontbrekende onderdelen aan, en elke keer plak je de nieuwe HTML van Claude terug in het code-element.