Visuele bouwer

De visuele bouwer heeft een moderne interface met vier gebieden: • Topbar – Opslaan, publiceren, responsive preview (mobiel/tablet/desktop), thema wisselen • Zijbalk (links) – Tabs voor Pagina's, Lagen, Media en Blokken • Canvas (midden) – Je pagina zoals bezoekers die zien • Inspector (rechts) – Instellingen voor het geselecteerde blok Klik op een blok in het canvas om het te selecteren. De instellingen verschijnen rechts.

Het Pagina's-paneel (linker zijbalk) toont alle pagina's van je website. Klik op een pagina om die te openen in de editor. De huidige pagina is gemarkeerd. Je kunt zoeken op paginanaam.

Het Lagen-paneel toont de boomstructuur van alle secties op de huidige pagina. Klik op een laag om de bijbehorende sectie in het canvas te selecteren (en omgekeerd). Handig voor complexe pagina's met veel secties.

• Media-paneel – Blader door je mediabibliotheek en sleep afbeeldingen naar het canvas • Blokken-paneel – Alle beschikbare componenten per categorie. Sleep een blok naar het canvas om het toe te voegen Componenten zijn gegroepeerd in categorieën zoals Basis, Layout, Formulieren en Media.

Klik op de mobiel-, tablet- of desktop-iconen in de topbar om te zien hoe je pagina eruitziet op verschillende schermformaten. Gebruik Ctrl+1 (mobiel), Ctrl+2 (tablet) of Ctrl+3 (desktop) als sneltoets.

De editor ondersteunt sneltoetsen voor veelgebruikte acties. Sneltoetsen werken niet als je in een tekstveld typt (behalve Escape). • Ctrl+S – Opslaan • Ctrl+Shift+P – Publiceren • Ctrl+Z – Ongedaan maken • Ctrl+Shift+Z – Opnieuw uitvoeren • Ctrl+K – Command palette openen • Ctrl+D – Geselecteerde sectie dupliceren • Delete / Backspace – Geselecteerde sectie verwijderen • Ctrl+1 – Mobiel weergave (375px) • Ctrl+2 – Tablet weergave (768px) • Ctrl+3 – Desktop weergave (100%) • Ctrl+\ – Zijbalk in-/uitklappen • Ctrl+Shift+\ – Inspector in-/uitklappen • Escape – Selectie opheffen of overlay sluiten

Druk op Ctrl+K (of Cmd+K op Mac) om het command palette te openen. Typ een actie om snel te navigeren of acties uit te voeren: • Opslaan / Publiceren • Thema wisselen (donker/licht) • Naar Pagina's gaan • Versie-historie openen • Zijbalk of inspector in-/uitklappen • AI Chat in-/uitschakelen • Mobiel / Tablet / Desktop weergave Navigeer met pijltjestoetsen en druk op Enter om een actie uit te voeren. Escape sluit het palette.

De zijbalk en inspector zijn aanpasbaar in breedte. Sleep de rand tussen een paneel en het canvas om de breedte aan te passen. • Zijbalk: minimaal 200px, maximaal 400px • Inspector: minimaal 240px, maximaal 480px De breedte wordt direct aangepast terwijl je sleept (geen vertraging).

Selecteer een sectie in de editor en zoek het veld "Animatie" in de inspector. Kies een preset: • Fade – Geleidelijk zichtbaar worden • Slide up/down/left/right – Inschuiven vanuit een richting • Scale / Zoom – Inzoomen • Bounce – Stuiteren Kies bij "Trigger" of de animatie afspeelt bij scrollen of bij laden. De animatie is alleen zichtbaar op de live website.

De editor bevat een heading-analyzer die waarschuwt als je koptekst-hiërarchie niet klopt (bijv. een H1 gevolgd door een H3 zonder H2). Dit is belangrijk voor toegankelijkheid en SEO.

Veel blokken hebben nu granulaire instellingen waarmee je tientallen variaties kunt maken zonder een nieuw blok te kiezen. Open een blok in de inspector en je ziet extra velden: • HeroSection – layout (centered/left/right/split), mediaType (image/video/none), badge, 2 CTA-knoppen, overlay, inline stats • FeatureCardsSection – columns (2-6), iconPosition (top/left/inline/none), cardStyle (elevated/bordered/flat/glass), hoverEffect (none/lift/glow/border-color), contentAlign • TestimonialSection – layout (grid/carousel/masonry/single), avatarShape (circle/square/rounded), quoteStyle, rating-weergave • PricingSection – highlightStyle (border/background/badge/glow), billing toggle, priceSize, checkStyle • CTABannerSection – layout (centered/left-right/stacked/minimal), backgroundType, urgency badge, icon-positie • FooterSection – layout (simple/columns/centered/minimal), socialPosition, newsletter-veld, divider-stijl Alle instellingen zijn optioneel — bestaande blokken blijven werken met hun standaardwaarden.

Met het VideoHeroSection-blok kun je een video als achtergrond instellen. Ondersteunde bronnen: • YouTube – Plak een YouTube-URL (bijv. https://youtube.com/watch?v=...) • Vimeo – Plak een Vimeo-URL • MP4 – Upload een .mp4 bestand of plak een directe URL De video speelt automatisch af (gedempt, in een loop). Op mobiel wordt een poster-afbeelding getoond voor snellere laadtijden. Instellingen in de inspector: • videoUrl – De URL van je video • posterImage – Fallback-afbeelding (wordt getoond tijdens laden en op mobiel) • overlayOpacity – Hoe donker de overlay over de video is (0-100%) • overlayColor – Kleur van de overlay • contentAlign – Tekst links, gecentreerd of rechts • showVideoOnMobile – Toon video ook op mobiel (standaard uit)

Elk blok heeft nu een "Geavanceerd" paneel in de inspector met een _customCSS tekstveld. Hier kun je vrije CSS schrijven die alleen op dat specifieke blok wordt toegepast. Voorbeelden: • Glasmorfisme: background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); • Aangepaste schaduw: box-shadow: 0 20px 60px rgba(0,0,0,0.3); • Rand-animatie: border: 2px solid transparent; transition: border-color 0.3s; De CSS wordt automatisch ge-scoped zodat het alleen dit blok beïnvloedt, niet de rest van de pagina.

Elk blok ondersteunt nu twee animatie-velden: • _animation – Het type animatie (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, bounce) • _animationTrigger – Wanneer de animatie afspeelt (scroll of load) Deze velden vind je in de inspector onder het geselecteerde blok. De animatie is alleen zichtbaar op de live website, niet in de editor. Bij een URL-import worden animaties automatisch gedetecteerd en toegewezen aan de juiste blokken.

Elk blok heeft nu meer styling-opties via StyleOverrides. Deze vind je in de inspector onder "Stijl": • textColor – Tekstkleur overschrijven • accentColor – Accentkleur voor highlights • buttonBackground / buttonTextColor / buttonBorderRadius – Knop-styling • paddingTop / paddingBottom – Verticale ruimte boven/onder het blok • marginTop – Ruimte boven het blok • borderColor – Randkleur • backdropFilter – Achtergrondeffecten (blur, saturate, brightness, etc.) • backgroundImage – Achtergrondafbeelding (alleen gradiënten, geen externe URL's) Voor kaart-componenten (FeatureCards, ServiceCards, Pricing, Team, BentoGrid) zijn er ook hover-states: • cardHoverBoxShadow – Schaduw bij hover • cardHoverTransform – Transformatie bij hover (bijv. scale(1.02)) • cardHoverBorderColor – Randkleur bij hover

Je kunt per site een donkere modus inschakelen. Als de site dark mode ondersteunt, verschijnt er een zon/maan-icoon op de website waarmee bezoekers kunnen wisselen. Zo stel je het in: 1. Ga naar de site-instellingen → Design Tokens 2. Vul de darkColors in (achtergrondkleur, tekstkleur, primaire kleur voor dark mode) 3. Sla op — de toggle verschijnt automatisch op de website De voorkeur van de bezoeker wordt opgeslagen in localStorage en blijft behouden bij een volgend bezoek. Als er geen darkColors zijn ingesteld, wordt de toggle niet getoond.