De visuele editor
Leer hoe je de drag-and-drop editor gebruikt om blokken toe te voegen, te bewerken en je pagina live te previewen.
De visuele editor is het hart van Webey. Hiermee bouw je pagina's door blokken te slepen en te configureren, terwijl je een live preview ziet van het resultaat.
🎬 Video volgt: De editor in actie — blokken slepen en bewerken
Overzicht van de editor
De editor heeft drie delen:
- Links — live preview van je pagina
- Rechts — instellingen van het geselecteerde blok
- Boven — toolbar met opslaan, preview-modus en status
Stap 1: Blokken toevoegen
Klik op de + knop in de blokkenlijst of op "Blok toevoegen". Een picker verschijnt met alle beschikbare bloktypen, gegroepeerd per categorie:
- Layout — Hero, Kolommen, Spacer
- Content — Tekst, Afbeelding, Video, Galerij
- Interactie — Formulier, CTA, Nieuwsbrief
- Data — FAQ, Testimonials, Team, Prijzen
- Navigatie — Navigation, Breadcrumbs, Footer
Stap 2: Blokken bewerken
Klik op een blok in de lijst rechts om het te selecteren. Het formulier toont alle instellingen voor dat bloktype. Elke wijziging wordt direct zichtbaar in de live preview.
Stap 3: Blokken herordenen
Sleep blokken in de lijst aan de rechterkant naar een andere positie. De live preview werkt direct mee. Je kunt ook de pijltjes omhoog/omlaag gebruiken om blokken te verplaatsen.
Stap 4: Responsive preview
Gebruik de preview-knoppen in de toolbar om te schakelen tussen desktop, tablet en mobiel formaat. Zo controleer je of je pagina er op elk apparaat goed uitziet.
💡 Tip: Sommige blokken hebben een Stijl-tabblad met extra opties zoals achtergrondkleur, padding en animaties.
Stap 5: Opslaan
Klik op Opslaan in de toolbar. Wijzigingen worden opgeslagen maar de pagina blijft in de huidige status (draft/pending/approved). Als de pagina al goedgekeurd is, zijn wijzigingen direct live.
⚠️ Let op: Niet-opgeslagen wijzigingen gaan verloren als je de editor verlaat. Sla regelmatig op!