Using the Block Editor

The block editor is the heart of Webey. It allows you to build pages from individual, reusable blocks that you can arrange, edit, and combine as you wish. In this article, you will learn everything about working with the editor, from adding your first block to advanced features like keyboard shortcuts and live preview.

How Do Blocks Work?

A block is a self-contained component of your page. Each block has its own type, content, and settings. Think of a text block, an image block, or a hero block. By combining blocks, you build your page like a stack of building blocks. This gives you maximum flexibility: you can add, remove, move, and duplicate blocks without affecting the rest of the page.

Adding Blocks

To add a new block, click the + button that appears between existing blocks or at the bottom of the page. A panel opens showing all available block types, organized by category. Click on the desired type to insert the block at that position.

You can also add blocks via the blocks panel on the left side of the editor. Drag a block type to the desired position on the canvas for a quick workflow.

Moving Blocks with Drag and Drop

Want to rearrange the order of blocks? Grab a block by its drag handle (the six-dot icon to the left of the block) and drag it to the desired position. Webey shows a visual indicator where the block will land when you release. Drag and drop works smoothly thanks to the DnD Kit integration, even on pages with many blocks.

Selecting and Editing Blocks

Click on a block to select it. The selected block gets a blue border and the editing panel opens on the right side of the editor. Here you edit the block's content:

• Content section — edit text, add images, change links, and other block-specific content.
• Settings panel — adjust the appearance with options for background color, padding, margins, alignment, and other visual properties.

Every change you make is immediately visible in the live preview on the right side of the screen.

Configuring Block Settings

The settings panel varies by block type, but typically contains the following options:

• Background color — choose a color from your brand palette or enter a custom color code.
• Padding and margins — control the inner spacing (padding) and outer spacing (margins) around the block.
• Width — choose between full width, container width, or a custom width.
• Visibility — set whether the block is visible on desktop, tablet, and/or mobile.

Duplicating Blocks

Want to reuse a block with the same settings? Click on the block to select it and then choose Duplicate from the context menu (or use the copy icon button in the toolbar above the block). The duplicated block appears directly below the original and can then be edited and repositioned.

Deleting Blocks

To delete a block, select it and click the trash icon in the toolbar or choose Delete from the context menu. You will be asked for confirmation before the block is permanently removed. Accidentally deleted a block? Use Undo to restore it.

Keyboard Shortcuts

Power users can speed up their workflow with keyboard shortcuts:

• Ctrl + Z — undo
• Ctrl + Shift + Z — redo
• Ctrl + D — duplicate selected block
• Delete / Backspace — delete selected block
• Ctrl + S — save page

These key combinations save you many clicks, especially when building extensive pages.

Undo and Redo

Webey keeps a complete history of all your edits in the current session. Click the Undo button (or Ctrl + Z) to go back one step, and Redo (or Ctrl + Shift + Z) to reapply a reverted action. This works for all edits: text changes, block moves, setting changes, and deletions.

Overview of All Block Types

Webey offers more than 24 block types that you can use to build your pages:

• Hero — an eye-catching header section with title, subtitle, background, and call-to-action.
• Text — a rich-text block for body text, headings, and lists.
• Image — a single image with alt text, caption, and alignment options.
• Gallery — a grid or carousel of multiple images.
• Video — embed videos from YouTube or Vimeo.
• Button — a prominent action button with a link.
• Spacer — empty space to visually separate sections.
• Divider — a horizontal line between sections.
• Columns — split content across multiple columns side by side.
• Card Grid — a grid of cards with image, title, and text.
• Features — a showcase of features or benefits with icons.
• Testimonials — customer reviews and quotes.
• Pricing — pricing tables to compare plans and packages.
• FAQ — frequently asked questions in an expandable accordion format.
• CTA — a prominent call-to-action block to encourage visitors.
• Stats — display numbers and achievements in an attractive way.
• Team — team members with photo, name, and role.
• Timeline — a chronological overview of events or milestones.
• Logo Cloud — a row of logos from partners or clients.
• Map — an embedded Google Maps location.
• HTML — custom HTML code for advanced users.
• Form — interactive forms with 10 field types and presets.
• Table — structured data in rows and columns.
• Code — formatted code block with syntax highlighting.

Live Preview

The right half of the editor always shows a live preview of your page. Every change you make — whether it is a text edit, a block move, or a color change — is immediately visible in the preview. You can also switch the preview between desktop, tablet, and mobile views to check how your page looks on different devices.

Tips for Working Efficiently

• Start with the overall structure (hero, sections, footer) and then fill in the details.
• Use Duplicate to quickly create similar blocks.
• Save regularly with Ctrl + S to avoid losing your work.
• Use the preview to check your page on mobile before publishing.