Creating and Managing Blocks in the Email Editor

The waypoint email editor uses a block-based system where you build emails by adding and arranging blocks.

Blocks are individual building blocks like text, images, buttons, and layout elements. You can add blocks by dragging them from the sidebar or clicking + icons throughout the canvas.

This guide covers how to add blocks, reorder them, and use containers to organize your email structure.

Adding Blocks via Drag & Drop

The Blocks sidebar shows all available block types organized into categories.

Click the Blocks icon in the toolbar to open the block library.

You'll see two categories: CONTENT (Text, Heading, Image, Button, Avatar, HTML) and LAYOUT (Spacer, Divider, Container, Columns).

To add a block, click and drag any block from the sidebar onto the canvas. As you drag, blue drop zones appear showing where you can place the block. These zones appear between existing blocks, above the first block, or below the last block.

The editor automatically selects newly added blocks and opens the Styles panel so you can customize them immediately.

Adding Blocks via + Icons

Click any blue + icon on the canvas to add a block at that specific location. The + icons appear in several places:

• Large centered + button in the empty state when you first open the editor
• Blue circle + icons between existing blocks when you hover over the canvas
• + icons inside containers and layout blocks

Clicking a + icon opens a popover menu with the same Content and Layout categories from the block library. Click any block type to insert it at that position. The editor selects the new block and opens the Styles tab for customization.

Reordering Blocks via Drag & Drop

Hover over any block on the canvas to reveal its drag handle. The cursor changes to a grab icon, indicating you can click and drag the block.

When you start dragging, blue drop zones appear between other blocks showing valid positions. Drag and drop the block to your desired location. The block moves to that position in the email structure.

You cannot drop a block directly on top of another block—only between blocks or inside container blocks at designated drop zones.

Using Containers

Containers are layout blocks that group other blocks together. They help organize your email structure and apply consistent styling to multiple elements at once.

What Containers Can Do

Containers serve as parent blocks that hold child blocks inside them. You can:

• Group related content blocks together
• Apply padding and styling to the entire grouped section
• Nest containers inside other containers for complex layouts
• Drag any content or layout block into a container

Containers have a minimum height of 100 pixels and show a dashed border in the editor to indicate their boundaries. Drop zones appear inside containers—before the first child, after the last child, and between existing children.

Creating Containers

There are two ways to create a container:

From the Blocks sidebar: Drag the Container block from the LAYOUT category onto your canvas, then drag other blocks into the container's drop zones.

From the + menu: Click any + icon on the canvas, then select Container from the Layout section. An empty container appears with a full-height + icon you can click to add child blocks.

Empty containers show a prominent + icon in the center, making it easy to start adding content immediately.

Using Column Containers

Column containers create side-by-side layouts for your email content. They're perfect for placing text beside images, creating multi-column text layouts, or building complex email designs with horizontal structure.

Creating Column Containers

There are three ways to create columns:

From the Blocks sidebar: Drag the Columns block from the LAYOUT category onto your canvas. This creates a default two-column layout with dashed outlines showing the column boundaries.

From the + menu: Click any + icon and select Columns from the Layout section.

Auto-wrap with side drop: Drag any block to the left or right edge of an existing block on the canvas. The editor automatically wraps both blocks into a new two-column container—the existing block in one column and your dragged block in the other.

Adding Blocks to Columns

Each column within the container acts like its own mini-canvas. You can add blocks to columns using the same methods as the main canvas:

Using + icons: Hover over an empty column to reveal an Add Block (+) button in the center. Click it to open the block menu and select any content or layout block. For columns that already have content, + icons appear between existing blocks.

Using drag & drop: Drag blocks from the sidebar directly into a column. Blue drop zones appear before existing blocks, after existing blocks, or filling the entire empty column area. You can drag any block type into columns—text, images, buttons, or even other containers.

Blocks inside columns can be reordered by dragging their handles to different positions within the same column.

Adjusting Column Layout

Select the column container (click on it to see the blue outline) to open the Columns Properties panel in the right sidebar. This panel gives you several layout options:

Number of Columns: Choose between 2, 3, or 4 columns using the number buttons. Adding columns creates new empty columns on the right. Reducing the column count removes columns from the right side and moves their content into remaining columns.

Column Ratio (2-column layouts only): Select from preset width ratios to control how much space each column takes:

• Fit | Fill — Left column fits content, right column expands
• 1:3 — Left column takes 25%, right takes 75%
• 1:1 — Equal width columns (default)
• 3:1 — Left column takes 75%, right takes 25%
• Fill | Fit — Left column expands, right column fits content

Column Gap: Use the slider to adjust spacing between columns from 0 to 50 pixels.

Vertical Alignment: Control how content aligns vertically within columns when they have different heights. Choose Top (default), Center, or Bottom.

Responsive: This toggle (on by default) controls mobile behavior. When enabled, columns stack vertically on mobile devices with screens narrower than 600 pixels. When disabled, columns remain side-by-side on all screen sizes.

Column Container Limitations

Column containers have a few restrictions to maintain clean email layouts:

You can create up to 4 columns maximum. The number of columns is limited to the preset buttons in the properties panel.

Column widths use preset ratios only—you cannot freely resize columns by dragging edges. Choose the ratio that best fits your content needs.

You cannot nest column containers inside other column containers. However, you can place column containers inside regular containers, and you can place regular containers inside columns.

When you delete a column container or reduce it to a single column, the editor automatically unwraps the structure and promotes the child blocks to the parent level.

Styling Individual Columns

Click on an individual column (not the entire column container) to access padding controls for that specific column. Each column has independent padding sliders ranging from 0 to 100 pixels, letting you control spacing within each column separately.

This is useful when one column needs more breathing room than another, or when you want to align content precisely across columns with different amounts of text or images.

Available Block Types

The editor provides these block types:

Content Blocks:

• Text — Paragraph text with inline editing
• Heading — Large header text
• Image — Upload or link to images
• Button — Call-to-action buttons with links
• Avatar — Profile images or icons

Layout Blocks:

• Spacer — Vertical spacing between elements
• Divider — Horizontal line separators
• Container — Groups multiple blocks together
• Columns — Side-by-side layout structure

Editing and Styling Blocks

After adding a block, customize it using the Styles panel on the right sidebar. Each block type has specific styling options like padding (0-100 pixels), colors, and font sizes (12-72 pixels for text blocks).

Content blocks like Text and Heading support inline editing—click directly on the text in the canvas to edit it. Other blocks require using the Styles panel or uploading assets.

Use the Preview tab to see how your email looks on desktop and mobile devices before sending.