Esther de BoerOct 16, 2026
Website nabouwen in Voluit Suite - optie 2 html blok invoegen
Website nabouwen in Voluit Suite - optie 2 html blok invoegen
Esther de Boer
In deze video zie je hoe je met behulp van Claude AI en Voluit Suite een website nabouwt, inclusief het toevoegen van foto's, formulieren en HTML-code.
Website nabouwen in Voluit Suite - optie 2 html blok invoegen
Esther de Boer
In deze video zie je hoe je met behulp van Claude AI en Voluit Suite een website nabouwt, inclusief het toevoegen van foto's, formulieren en HTML-code.
Chapters
00:00
Introductie
Uitleg over het nabouwen van een website in Verluid Suite met Claude.
02:04
Foto's en Media Koppelen
03:14
Resultaat Bekijken
04:10
HTML Plaatsen in Verluid Suite
06:43
Formulieren Integreren
08:26
Afsluiting
Transcript
00:00
Voor deel 3 van deze video, of van deze website nabouwen in Voluit Suite, gaan we ook weer werken met Claude, maar op een andere manier.
00:11
Ik heb daar al eerder een supportvideo voor opgenomen, die heet Claude AI Website hosten in Voluit Suite.
00:17
Je vindt hem in Support onder Voluit Suite Geavanceerd: Websites.
00:22
En hier zie je een video, maar belangrijker is dit stukje, want dat is de prompt.
00:28
En dan gaan we weer naar Claude.
00:36
Maken we een nieuwe chat aan.
00:38
Plakken we de prompt erin.
00:40
En dan vullen we de prompt aan met de website is janneke.nl Dus ik heb instructie meegegeven dat.
00:51
Die dus naar jannekendeboer.nl moet gaan.
00:53
De voorbeeldwebsite waar we nu mee werken.
00:56
Dat ik de footer en de header zelf al heb gemaakt.
00:59
Als je wilt dat hij die ook nabouwt in HTML, dan kan dat natuurlijk.
01:05
Kijk daarvoor dan eerst even die video over dat je Claude je website laat bouwen.
01:11
Want daar leg ik het meer over uit hoe je dan die drie verschillende blokjes maakt.
01:17
Met de footer, de inhoud van het middenstuk en dan de header daarboven met het menu.
01:23
Wij hebben die nu al door Claude in de website beelden laten maken in de vorige video.
01:29
Dus ik ga hem aan de slag zetten.
01:31
En ik ben nog een klein stukje vergeten, dus ik ga hem nog even stoppen.
01:34
Je kan altijd de Claude stoppen en dan kan je hier gaan editen bij de prompt.
01:39
Bijna altijd kan dat.
01:41
De foto's die op de homepage staan, staan al in Voluit Suite.
01:52
Ja, en dan moet je ze dus gaan beschrijven.
01:55
Dus dat is het enige wat wel even meer werk is.
01:58
Maar ja, dan is het resultaat ook meteen helemaal hetzelfde.
02:01
Dus dat ga ik nu even doen.
02:02
En dan kom ik zo terug.
02:04
Alright, ik heb het zo gedaan.
02:05
Ik heb gekeken naar de website en heb ik elke foto even opgeschreven en benoemd.
02:13
Je ziet dat hier: achtergrondfoto in de hero-balk.
02:16
De hero-balk is eigenlijk altijd het stuk bovenin.
02:20
Foto sinaasappel rond de bovenkant, zodat Claude echt kan zien.
02:25
Oh ja, dat is die foto en dat is die foto en dat is die foto.
02:29
En dan weet hij ook welke foto op welke plek moet komen.
02:33
Vervolgens, dus ik had een heel lijstje met een beschrijving van elke foto op de homepage.
02:38
Vervolgens ging ik weer naar een voluit suite.
02:42
En dan voor elke foto haalde ik de link op.
02:46
Link ophalen.
02:47
Dus ik ben hier in de mediabibliotheek.
02:50
In de goede map.
02:51
Daar staan alle foto's, die heb ik daar zelf geüpload.
02:55
En dan haal ik voor elke foto, dus dit is de foto in de regenboogjurk.
03:00
En dan klik ik op link ophalen en die zet ik in Claude.
03:05
Claude kan nu dus HTML maken waarin de exact goede URL's staan naar de plaatjes.
03:10
Dus daar hoeft het niet meer op mis te gaan.
03:12
Nou, we zitten hem weer aan het werk.
03:14
Claude is klaar.
03:15
Hij vertelt wat hij heeft gedaan: het middelste deel van de homepage nagebouwd.
03:19
Bla bla bla.
03:22
Formulier, dat heeft hij dus nog niet.
03:26
Dus dat hadden we ook goed voor kunnen bereiden door.
03:30
Naar het formulier te gaan wat erin moest en dan de embedcode daarvan, de iframe-code, om die dan mee te geven in deze opdracht.
03:40
Dan kan hij hem gelijk op de goede plek erin verwerken.
03:43
Hij laat ook zien taalfoutjes en andere dingen wat je nog zelf moet doen.
03:49
En dan kun je erop klikken om te kijken hoe het eruit ziet.
03:52
En hier kun je hem openen in Chrome zelf.
03:55
Je ziet dat hij de wat ingewikkeldere designdingen nog niet perfect heeft gedaan.
04:03
Maar andere dingen zien er echt goed uit, animaties zien er goed uit.
04:08
De slider ziet er goed uit.
04:10
En hoe zet je dit nu in de vooruitzicht beelder?
04:13
Daarvoor ga je naar Claude en dan zeg je: kopie, want dan kopieert hij de HTML.
04:20
sites ga je dus naar voluit suite, naar sites, naar de juiste website en dan klik je op bewerken.
04:29
we hadden hier al een heleboel balken, maar we gaan gewoon even deze erboven zetten.
04:35
Dan kunnen we ook meteen het verschil zien.
04:37
Dan klik je op het plusje en dan scroll je in de elementen naar.
04:42
Het code-element, dat is deze.
04:45
Die sleep je onder het menu.
04:48
En voordat je iets erin doet, ga je eerst zorgen dat hij helemaal goed is door alle padding en marge, de opvulling en de marge, op nul te zetten.
05:00
En niet alleen van de buitenste groene lijn, maar ook van.
05:04
De blauwe lijn.
05:06
Dit leg ik ook allemaal in die andere video uit.
05:09
Maar we doen het gewoon nog een keer.
05:11
Die zit al op nul.
05:12
Dan hebben we nog een paarse.
05:15
En bij deze zet je ook nog "sta rij toe om de volledige breedte in te nemen".
05:21
En dan ga je naar de tabletmodus en daar check je ook even of alles op nul staat.
05:27
Ziet er goed uit.
05:29
Dan ga je naar de mobiele weergave en dan check je ook nog even of daar alles op nul staat.
05:34
En dan werkt het.
05:36
En dan klik je hier in het midden.
05:39
En dan in het tapje Algemeen heb je de Code Editor.
05:43
Daar klik je op.
05:44
En daar plak je dan wat er nog onder je copy-paste knop zit.
05:50
En dit is de website.
05:51
Nou, het nadeel hiervan is dus in de beelden zie je niet wat je hebt gebouwd.
05:56
Daarvoor moet je altijd even saven en naar de preview en dan opent het in een nieuwe tabblad.
06:03
Nou, en dan zie je hoe de website eruit ziet.
06:07
En hier volgen dus die blokken die.
06:10
Claude zelf heeft gebouwd.
06:11
Dus je ziet wel een groot verschil.
06:13
Dit is dus een hele makkelijke manier om je website te bouwen, maar het vergt planning.
06:20
Je moet dus de URL's zoeken, de plaatjes zoeken en alle linkjes die moeten ook kloppen, want hier zitten nog geen linkjes achter.
06:28
Dus dat moet je ook meegeven in de prompt.
06:31
Als er een formulier in de websitepagina moet zitten, dan moet je het iframe naar het formulier ook meegeven in de prompt.
06:40
Nou, dat gaan we even laten zien hoe dat dan werkt.
06:43
Je gaat daarvoor naar Formulieren en dan doen we hier de demo opt-in.
06:47
Stel dat we dit formulier zouden willen integreren in de pagina, dan klik je hier op Integreren.
06:55
En dan kies je voor de inline insluitcode.
06:59
En dan klik je hier op insluitkopieeren.
07:02
Ga je weer naar Claude en dan zeg je: Ik wil in de footer dat er een formulier zit.
07:12
Hier is code.
07:14
En dan gaat Claude dat formulier in jouw website bouwen.
07:20
En dan heb je aan het eind weer een hele nieuwe HTML-code die je weer in de plaats Dit blok zet.
07:29
Dus dan open je hem, haal je het in één keer weg en dan plak je de nieuwe daarin.
07:34
Dus zo kun je continu edits doen met Claude en wordt je website steeds gaver en beter.
07:42
Maar voor jou heb je dus de links nodig waar deze.
07:46
Pagina's heen gaan en als je je hele website in voluitzicht bouwt, dan moet je eerst weten hoe die URL's eruit komen te zien.
07:56
Dus moet je misschien eerst die pagina's aanmaken.
07:58
Als je al weet van nou, ik hou alle URL's gewoon hetzelfde, dan kun je gewoon de bestaande URL nemen en dan zeg je hij moet hierheen linken.
08:06
Dus dan Pak je hier de quiz en dan zeg je hier moet hij heen linken en dan voeg je dat zo toe.
08:15
De testknop moet gaan naar.
08:20
En zo vul je eigenlijk alle ontbrekende stukjes in van je website.
08:24
Totdat hij helemaal goed is.
08:26
En iedere keer plak je dan de nieuwe HTML-code die je van Claude krijgt weer terug hierin.
08:35
Dit was de video over hoe je je website nabouwt in Voluit Suite op de tweede manier.
08:42
Tot de volgende video.