The Visual Editor
Learn how to use the drag-and-drop editor to add blocks, edit them, and preview your page in real-time.
The visual editor is the heart of Webey. It lets you build pages by dragging and configuring blocks while seeing a live preview of the result.
🎬 Video coming soon: The editor in action — dragging and editing blocks
Editor Overview
The editor has three parts:
- Left — live preview of your page
- Right — settings for the selected block
- Top — toolbar with save, preview mode, and status
Step 1: Adding Blocks
Click the + button in the block list or "Add block". A picker appears with all available block types, grouped by category:
- Layout — Hero, Columns, Spacer
- Content — Text, Image, Video, Gallery
- Interaction — Form, CTA, Newsletter
- Data — FAQ, Testimonials, Team, Pricing
- Navigation — Navigation, Breadcrumbs, Footer
Step 2: Editing Blocks
Click a block in the right-side list to select it. The form shows all settings for that block type. Every change is instantly visible in the live preview.
Step 3: Reordering Blocks
Drag blocks in the right-side list to a different position. The live preview updates immediately. You can also use the up/down arrows to move blocks.
Step 4: Responsive Preview
Use the preview buttons in the toolbar to switch between desktop, tablet, and mobile views. This lets you verify your page looks great on every device.
💡 Tip: Some blocks have a Style tab with extra options like background color, padding, and animations.
Step 5: Saving
Click Save in the toolbar. Changes are saved but the page stays in its current status (draft/pending/approved). If the page is already approved, changes go live immediately.
⚠️ Note: Unsaved changes are lost when you leave the editor. Save regularly!