De blok-editor gebruiken

De blok-editor is het hart van Webey. Hiermee bouw je pagina's op uit losse, herbruikbare blokken die je naar wens rangschikt, bewerkt en combineert. In dit artikel leer je alles over het werken met de editor, van je eerste blok toevoegen tot geavanceerde functies zoals sneltoetsen en live preview.

Hoe werken blokken?

Een blok is een op zichzelf staand onderdeel van je pagina. Elk blok heeft een eigen type, inhoud en instellingen. Denk aan een tekst-blok, een afbeelding-blok of een hero-blok. Door blokken te combineren, bouw je je pagina op als een stapel bouwstenen. Dit geeft je maximale flexibiliteit: je kunt blokken toevoegen, verwijderen, verplaatsen en dupliceren zonder dat de rest van de pagina wordt beïnvloed.

Blokken toevoegen

Om een nieuw blok toe te voegen, klik je op de + knop die verschijnt tussen bestaande blokken of onderaan de pagina. Er opent een paneel met alle beschikbare bloktypen, verdeeld over categorieën. Klik op het gewenste type om het blok in te voegen op die positie.

Je kunt ook blokken toevoegen via het blokkenpaneel aan de linkerkant van de editor. Sleep een bloktype naar de gewenste positie op het canvas voor een snelle workflow.

Blokken verplaatsen met drag-and-drop

Wil je de volgorde van blokken aanpassen? Pak een blok vast bij het sleephandvat (het pictogram met zes puntjes links van het blok) en sleep het naar de gewenste positie. Webey toont een visuele indicator waar het blok terecht zal komen wanneer je loslaat. Drag-and-drop werkt soepel dankzij de DnD Kit-integratie, zelfs bij pagina's met veel blokken.

Blokken selecteren en bewerken

Klik op een blok om het te selecteren. Het geselecteerde blok krijgt een blauwe omranding en het bewerkingspaneel opent aan de rechterkant van de editor. Hier bewerk je de inhoud van het blok:

• Inhoudsgedeelte — bewerk teksten, voeg afbeeldingen toe, wijzig koppelingen en andere blokspecifieke content.
• Instellingenpaneel — pas het uiterlijk aan met opties voor achtergrondkleur, padding, marges, uitlijning en andere visuele eigenschappen.

Elke wijziging die je maakt, is direct zichtbaar in de live preview rechts op het scherm.

Blokinstellingen configureren

Het instellingenpaneel verschilt per bloktype, maar bevat doorgaans de volgende opties:

• Achtergrondkleur — kies een kleur uit je merkpalet of voer een eigen kleurcode in.
• Padding en marges — bepaal de binnenruimte (padding) en buitenruimte (marges) rond het blok.
• Breedte — kies tussen volledige breedte, container-breedte of een aangepaste breedte.
• Zichtbaarheid — stel in of het blok zichtbaar is op desktop, tablet en/of mobiel.

Blokken dupliceren

Wil je een blok met dezelfde instellingen opnieuw gebruiken? Klik op het blok om het te selecteren en kies vervolgens Dupliceren uit het contextmenu (of gebruik de knop met het kopieer-pictogram in de werkbalk boven het blok). Het gedupliceerde blok verschijnt direct onder het origineel en kun je vervolgens bewerken en verplaatsen.

Blokken verwijderen

Om een blok te verwijderen, selecteer je het en klik je op de prullenbak in de werkbalk of kies je Verwijderen uit het contextmenu. Je wordt om bevestiging gevraagd voordat het blok definitief wordt verwijderd. Heb je per ongeluk een blok verwijderd? Gebruik dan Ongedaan maken om het terug te halen.

Sneltoetsen

Ervaren gebruikers kunnen hun workflow versnellen met sneltoetsen:

• Ctrl + Z — ongedaan maken (undo)
• Ctrl + Shift + Z — opnieuw uitvoeren (redo)
• Ctrl + D — geselecteerd blok dupliceren
• Delete / Backspace — geselecteerd blok verwijderen
• Ctrl + S — pagina opslaan

Deze toetscombinaties besparen je veel klikken, vooral bij het opbouwen van uitgebreide pagina's.

Ongedaan maken en opnieuw uitvoeren

Webey houdt een volledige geschiedenis bij van al je bewerkingen in de huidige sessie. Klik op de Ongedaan maken-knop (of Ctrl + Z) om een stap terug te gaan, en op Opnieuw (of Ctrl + Shift + Z) om een teruggedraaide actie alsnog uit te voeren. Dit werkt voor alle bewerkingen: tekstaanpassingen, blokverplaatsingen, instellingswijzigingen en verwijderingen.

Overzicht van alle bloktypen

Webey biedt meer dan 24 bloktypen die je kunt gebruiken om je pagina's mee op te bouwen:

• Hero — een opvallende kopsectie met titel, ondertitel, achtergrond en call-to-action.
• Tekst — een rich-text blok voor lopende tekst, kopjes en lijsten.
• Afbeelding — een enkel beeld met alt-tekst, onderschrift en uitlijning.
• Galerij — een raster of carrousel van meerdere afbeeldingen.
• Video — embed video's van YouTube of Vimeo.
• Knop — een opvallende actieknop met link.
• Spacer — lege ruimte om secties visueel te scheiden.
• Scheidingslijn — een horizontale lijn tussen secties.
• Kolommen — verdeel content over meerdere kolommen naast elkaar.
• Card Grid — een raster van kaarten met afbeelding, titel en tekst.
• Features — een overzicht van kenmerken of voordelen met pictogrammen.
• Testimonials — klantbeoordelingen en citaten.
• Prijzen — prijstabellen en pakketten vergelijken.
• FAQ — veelgestelde vragen in een uitklapbaar formaat.
• CTA — een opvallend call-to-action blok om bezoekers aan te sporen.
• Statistieken — toon cijfers en prestaties op een aantrekkelijke manier.
• Team — teamleden met foto, naam en functie.
• Tijdlijn — een chronologisch overzicht van gebeurtenissen of mijlpalen.
• Logo Cloud — een rij logo's van partners of klanten.
• Kaart — een ingebedde Google Maps-locatie.
• HTML — aangepaste HTML-code voor geavanceerde gebruikers.
• Formulier — interactieve formulieren met 10 veldtypen en presets.
• Tabel — gestructureerde gegevens in rijen en kolommen.
• Code — opgemaakt codeblok met syntax highlighting.

Live preview

De rechterhelft van de editor toont altijd een live preview van je pagina. Elke wijziging die je maakt — of het nu een tekstaanpassing is, een blokverplaatsing of een kleurwijziging — is direct zichtbaar in de preview. Je kunt de preview ook schakelen tussen desktop-, tablet- en mobielweergave om te controleren hoe je pagina eruitziet op verschillende apparaten.

Tips voor efficiënt werken

• Begin met de globale structuur (hero, secties, footer) en vul daarna de details in.
• Gebruik Dupliceren om snel vergelijkbare blokken aan te maken.
• Bewaar regelmatig met Ctrl + S om je werk niet kwijt te raken.
• Gebruik de preview om je pagina te controleren op mobiel voordat je publiceert.