Jouw Ai – .HTML
Bewerkbaar in WordPress.
>7,50 -15 euro <
Ik bouw elke HTML-pagina om naar Gutenberg of Elementor.
Wat betekent dat?
Een AI-tool levert een HTML-bestand. Het ziet er goed uit, maar je past het alleen in code aan. Ik bouw het na met echte WordPress-blokken of Elementor-widgets. Daarna wijzig je tekst, beeld en knoppen gewoon met de muis.
Lees over
<nav>…</nav>
<section class=”hero”>
<h1>Welkom bij Studio Vera</h1>
<p>Fotografie voor merken…</p>
<a class=”btn”>Boek nu</a>
<img src=”hero.jpg”>
</section>
<div class=”grid-3″>…</div>
HTML uit je AI-tool Gutenberg-blokken
Werkwijze
Van HTML-bestand naar een site die je zelf bijhoudt
AI-tools zoals ChatGPT, Claude, Gemini, v0, Lovable en Bolt maken in een paar minuten een mooie pagina. Die pagina is losse code. Wil je een tekst aanpassen, dan moet je in die code zoeken. Ik zet de pagina over naar WordPress, zo dat elk onderdeel een los, aanklikbaar blok wordt.
1
Je stuurt je HTML
Het bestand of de map die je AI-tool maakte, met de afbeeldingen erbij. Los of als één zip. Een link naar een live preview mag ook.
2
Ik lees de opbouw
Ik bepaal welke delen secties zijn en wat een kop, tekst, afbeelding, knop, lijst of formulier is. Kleuren, lettertypen en afstanden haal ik uit de CSS.
3
Ik bouw het na in blokken of widgets
Geen HTML-blok met de oude code erin geplakt. Elke kop wordt een Kop-blok of Heading-widget, elke knop een echte knop. Zo blijft het ontwerp gelijk en is alles bewerkbaar.
4
Stijl wordt een instelling
Je kleuren en lettertypen komen in de globale stijlen: bij Gutenberg in de Site-editor (theme.json), bij Elementor in de Site Settings. Eén keer aanpassen, en het verandert overal.
5
Mobiel en tablet nalopen
Ik controleer de pagina op desktop, tablet en telefoon en stel per schermbreedte bij waar nodig.
6
Eerst bekijken, dan betalen
Je krijgt een link naar je site in WordPress, op onze hosting. Ben je tevreden, dan betaal je pas. Daarna pas je alles zelf heel eenvoudig aan.
Wat wordt wat
Elk HTML-onderdeel krijgt een vaste plek
Zo vertaal ik de code uit je AI-tool naar de bouwstenen van WordPress. Links wat er in je bestand staat, rechts wat je straks in de editor ziet.
| In je HTML | Gutenberg | Elementor |
|---|---|---|
<section> <div> | Groep, Rij of Stapel | Container |
| kolommen (grid / flex) | Kolommen of Raster | Container (rij) of Grid |
<h1> t/m <h6> | Kop | Heading |
<p> | Paragraaf | Text Editor |
<img> | Afbeelding (naar je mediabibliotheek) | Image |
<a class="btn"> | Knoppen | Button |
<ul> <ol> | Lijst | Icon List of Text Editor |
<nav> | Navigatie (WordPress-menu) | Nav Menu Pro |
<details>, FAQ | Details | Accordion |
| video, YouTube | Video of Insluiten | Video |
<form> | Formulierplugin (bijv. WPForms) | Form Pro |
| CSS-animaties | Eigen CSS-klasse op het blok | Motion Effects |
| kleuren, fonts | Globale stijlen (theme.json) | Global Colors en Fonts |
| JavaScript-onderdelen | Eigen HTML-blok | HTML-widget |
Pro betekent dat dit onderdeel Elementor Pro nodig heeft, met een eigen licentie. Zonder Pro kies ik een alternatief, zoals een WordPress-menu in de header van je thema.
Route 1
Gutenberg: de blokeditor van WordPress zelf
Gutenberg zit standaard in elke WordPress-installatie. Je hebt geen extra plugin en geen licentie nodig. Je pagina bestaat uit blokken die je verschuift, dupliceert en aanpast in de zijbalk.
Wat je krijgt
- Je pagina opgebouwd uit standaardblokken: Groep, Kolommen, Kop, Paragraaf, Afbeelding, Knoppen
- Kleuren, lettertypen en afstanden als globale stijlen in de Site-editor
- Terugkerende delen, zoals een call-to-action of footer, als patroon dat je overal hergebruikt
- Header en footer als sjabloondelen, als je een blokthema gebruikt
- Snelle, lichte pagina’s zonder zware page builder
Goed om te weten
- Werkt het best met een blokthema, zoals Twenty Twenty-Five
- Je sleept minder vrij dan in Elementor; de opbouw is strakker en voorspelbaarder
- Heel specifieke effecten krijgen een eigen CSS-klasse, die ik voor je vastleg
Route 2
Elementor: visueel slepen en direct zien
Elementor is een page builder-plugin. Je bewerkt de pagina zoals hij eruitziet, sleept widgets waar je ze wilt en stelt per scherm (desktop, tablet, mobiel) apart in hoe iets eruitziet.
Wat je krijgt
- Je pagina opgebouwd uit Flexbox-containers en widgets: Heading, Text Editor, Image, Button
- Je kleuren en lettertypen als Global Colors en Global Fonts in de Site Settings
- Per schermbreedte ingesteld, dus mobiel ziet er net zo verzorgd uit
- Secties opgeslagen als templates in je bibliotheek, klaar voor nieuwe pagina’s
- Met Elementor Pro: header en footer via de Theme Builder, formulieren en animaties
Goed om te weten
- Voor de meeste pagina’s is de gratis versie genoeg
- Header, footer en formulieren vragen Elementor Pro (eigen licentie)
- Iets zwaarder dan Gutenberg; ik adviseer het lichte thema Hello Elementor
Welke kies ik?
Allebei goed. Het hangt af van hoe jij werkt.
Gebruik je al een van de twee? Kies die dan. Je hoeft niets nieuws te leren en je site blijft één geheel.
Kies Gutenberg als…
- je geen extra plugins of licenties wilt
- snelheid en een lichte site voorop staan
- je vooral teksten en foto’s wisselt
- je site lang mee moet gaan met WordPress zelf
Kies Elementor als…
- je graag visueel sleept en direct ziet wat je doet
- je vaak nieuwe pagina’s of layouts maakt
- je per scherm alles precies wilt instellen
- je al Elementor (Pro) gebruikt
Twijfel je nog? Zet in je mail wat je met de site wilt doen. Ik adviseer welke het best past.
Prijs
Eerst zien, dan pas betalen
De omzetting gebeurt geautomatiseerd. Daardoor blijft de prijs laag en heb je snel resultaat. Je bekijkt eerst je omgebouwde site. Pas als je tevreden bent, betaal je.
Eenmalig
€ 7,50 – € 12,50
Voor het ombouwen van je HTML naar Gutenberg of Elementor. De prijs hangt af van de omvang van je pagina.
Per maand
€ 2,65
Hosting, verplicht en inbegrepen. Je site draait bij ons; je hoeft zelf niets te regelen.
Zo gaat het
1
Je stuurt je HTML
Eén mail met je bestanden of een link naar de preview.
2
Je bekijkt het resultaat
Je krijgt een link naar je omgebouwde site in WordPress en ziet precies wat je krijgt.
3
Tevreden? Dan betaal je
Pas daarna betaal je de eenmalige omzetting en start de hosting.
4
Zelf aanpassen
Teksten, foto’s, knoppen en kleuren wijzig je daarna heel eenvoudig zelf in WordPress. Zonder code.
Vragen
Wat je waarschijnlijk wilt weten
Ook wat wel en niet kan. Liever vooraf duidelijk dan achteraf verrast.
Ziet het er daarna precies hetzelfde uit?
Zo goed als. Blokken en widgets regelen afstanden op hun eigen manier, dus soms verschilt iets een paar pixels. Ik stem af tot het klopt met je ontwerp.
Van welke AI-tools kan de HTML komen?
Van elke tool die HTML maakt: ChatGPT, Claude, Gemini, Copilot, v0, Lovable, Bolt, of HTML die je zelf of iemand anders schreef. Het maakt niet uit of de CSS in het bestand staat, los is of via Tailwind gaat.
Mijn site is gemaakt met Lovable, Bolt of v0. Kan dat ook?
Ja, voor de pagina’s zelf. Die tools bouwen vaak een React-app. Stuur de export of een link naar de live preview, dan neem ik de pagina’s over. App-functies zoals inloggen, een database of betalingen vallen erbuiten; die vragen een aparte oplossing.
Wat gebeurt er met JavaScript, sliders en tabs?
Waar een blok of widget hetzelfde kan, gebruik ik dat (bijvoorbeeld een accordion of galerij). Echt eigen onderdelen, zoals een rekentool, zet ik in een eigen HTML-blok. Die blijven werken, maar pas je alleen in code aan. Ik zeg vooraf welke delen dat zijn.
Heb ik al een WordPress-site nodig?
Nee. Hosting is inbegrepen en verplicht (€ 2,65 per maand). Je site draait bij ons op WordPress; je hoeft zelf niets te installeren.
Werkt het met mijn huidige thema?
Elementor werkt met bijna elk thema; het lichte Hello Elementor geeft de minste botsingen. Voor Gutenberg is een blokthema het fijnst, maar een klassiek thema kan ook. Dan komen header en footer uit je thema.
Blijven mijn koppen en afbeeldingen goed voor Google?
Ja. Ik houd de koppenstructuur (H1, H2, H3) aan, zet alt-teksten bij de afbeeldingen en plaats de afbeeldingen in je mediabibliotheek.
Kan ik er daarna zelf mee verder?
Dat is het hele idee. Je past teksten, foto’s, knoppen en kleuren zelf aan, voegt secties toe en maakt nieuwe pagina’s in dezelfde stijl.
Wat kost het en hoe lang duurt het?
De omzetting is geautomatiseerd en kost eenmalig € 7,50 tot € 12,50, afhankelijk van de omvang. Daarbij komt de verplichte hosting van € 2,65 per maand. Je ziet eerst het resultaat en betaalt pas daarna.
Aanleveren
Stuur je HTML, dan hoor je wat het wordt
Eén mail is genoeg. Je krijgt eerst het resultaat te zien en betaalt pas als je tevreden bent: eenmalig € 7,50 tot € 12,50, plus hosting à € 2,65 per maand.
b-t-w.top@proton.me
Opent je mailapp niet? Kopieer dan het adres.
Zet in je mail
- Je HTML-bestand(en) met afbeeldingen, los of als één zip, of een link naar de preview
- Gutenberg of Elementor, en of je Elementor Pro hebt
- Welke onderdelen je later vaak wilt aanpassen