Introducing the Design Canvas

Overview

The visual email editor builds every email from a small set of layout components that nest neatly inside each other. Structures are the centrepiece of that system — they handle column layouts and define the shape of each section. But Structures don't work alone. They sit inside Stripes, hold Editor Blocks, and together these three components form the full layout of any email you build.

Before we dig into Structures specifically, it helps to see how they all fit into the bigger picture.

How email building is structured

Every email you design is made up of three nested layers: Stripes, Structures, and Editor Blocks. Each one has a clear job, and they always fit together in the same order.

Here's what each layer does:

1. Stripe — a full-width horizontal band that spans edge to edge of the email viewport. Stripes hold Structures and are where you set backgrounds that need to extend beyond your main content area.
2. Structure — sits inside a Stripe and defines how that section is split into columns. This is where your layout takes shape.
3. Editor Block — the content that goes inside a Structure's columns. Text, images, buttons, dividers, social icons, and so on.

Once this clicks, the editor becomes much easier to navigate. When you're changing a background that runs to the edge of the screen, you're working with the Stripe. When you're setting column widths, you're working with the Structure. When you're editing text or swapping an image, you're working with an Editor Block.

‍

Stripes — the full-width backdrop

A Stripe is the outermost layer of every section in your email. Most email content sits within a fixed width (typically 600 pixels), but a Stripe stretches all the way to the edges of the screen. That makes it the right place to set background colours, gradients, or images you want to bleed beyond the central content area.

The good news is every Structure you drop onto the canvas automatically sits inside a Stripe, so you don't need to add them manually. You'll really only notice the Stripe when you want to customise the section background or give a particular block of content a distinct visual feel.

The four Stripes in your email

When you start a new email, the editor sets up four predefined Stripes for you, stacked from top to bottom. Each one plays a specific role, and knowing what each one is for makes it much easier to drop the right content in the right place.

‍

Customise a Stripe

1. Click on the area just outside your Structure's content (the Stripe band) to select it.
2. In the Content Settings panel on the right, adjust background colour, background image, border options. and responsive settings for desktop and mobile viewports.
3. In the Stripe settings that appear on the design canvas (three dots), click these settings to access the Delete, Copy, Move or Save Content Block functions.

Stripes come into their own when you want to separate sections visually. A dark Stripe behind the hero banner, a clean white one for the body content, and a soft grey one for the footer is a common pattern that takes seconds to set up.

‍

Structures — the column layout

Structures live in the right-hand panel of the editor under the Structures tab. You'll see a range of preset column layouts to pick from, anything from a single full-width row to four-column splits.

Add a Structure to your email

1. Open the Structures tab in the editor's right-hand panel.
2. Pick the column structure layout you want — one column, two equal columns, three columns, or one of the asymmetric splits.
3. Drag your chosen Structure onto the canvas and drop it where you'd like it to sit.
4. Drop your content Editor Blocks into each column to start filling it out.

That's it — your Structure is on the canvas and ready to hold content. You can rearrange Structures at any time by dragging them up or down the canvas.

‍

‍

Customise a Structure

1. Click anywhere on the Structure to select it.
2. In the Settings panel on the right, adjust column widths, padding, spacing, and background.
3. Toggle Hide Elemenet settings if you want columns to stack vertically on mobile, or stay side by side.
4. Use the device preview toggle at the top of the editor to check how it looks on mobile and desktop.
5. Your changes are saved as you go, so there's no separate save button to worry about.

Common Structure layouts

Here's a quick rundown of the layouts you'll reach for most often, and when each one earns its place.

‍

A note on columns and mobile
‍Any Structure with more than one column will automatically stack vertically on smaller viewports like mobile devices. So a two-column Structure becomes two stacked rows, a three-column Structure becomes three, and so on. It's worth previewing your design in mobile view before sending to make sure the stacked order still reads well.

‍

‍

Quick Way to Remember the Hierarchy
‍Stripes set the scene, Structures set the shape, Editor Blocks bring the content. If you ever lose track of which layer you're editing, click outwards from your content until you find the right one.

‍

Editor Blocks — the content inside your email

Editor Blocks are the actual content elements that bring your email to life. While Stripes and Structures handle the layout, Editor Blocks are where the words, images, buttons, and links live. Anything a recipient sees when they open your email started life as an Editor Block.

You'll find them in the right-hand panel of the editor under the Editor Blocks tab, sitting alongside the Structures tab you've already met.

Add an Editor Block to your email

1. Open the Editor Blocks tab in the right-hand panel.
2. Pick the type of content you want to add — Image, Text, Button, and so on.
3. Drag your chosen Editor Block into one of your Structure's columns.
4. Click on it to start editing the content or adjusting its styling in the Settings panel.

‍

One Quick Rule
Editor Blocks can only sit inside a Structure's column — they can't be dropped directly onto the canvas. If you're starting fresh, add a Structure first, then drop your Editor Blocks into it.

‍

What each Editor Block does

Here's a quick rundown of the Editor Block types you'll have available, and what each one is designed to do.

Why this hierarchy matters

Stripes, Structures, and Editor Blocks each do one thing well, and they're built to work together. Because Stripes and Structures handle responsive behaviour for you, your email will adapt cleanly across desktops, tablets, and phones, without you needing to write any CSS or wrestle with email client quirks.

It also makes updates a lot easier. Need to swap a two-column Structure for a three-column one? Drop in a new Structure, move your Editor Blocks across, and you're done. Want to change a section's background colour? Update the Stripe and you're sorted. The clean separation between layers means you can change one thing without breaking another.

What's next

Now that you've got a feel for how Stripes, Structures, and Editor Blocks fit together, the next step is filling them with content. Head to the guide on Editor Blocks to learn how to drop in text, images, buttons, and more, and how to style each one to match your brand.

‍