ABC of our new Design editor

Our new editor embraces a new principle of design creation – dragging blocks to sections.

So what’s a section?

A section is basically a column layout with content elements (blocks) inside. You can add as many sections to your email as you wish. All of the sections are vertically aligned, so they go below/above one another.

The red dotted line is a section. The blue dotted line is the block in the section. The section in this picture has a single column, hence contains only a single block horizontally.

You can insert a section with up to four columns for your blocks. You can only add extra blocks vertically, not horizontally. If you wish to add extra blocks horizontally, you need to select a section with extra columns.

Watch the GIF for illustration:

Each ‘Drop blocks here’ square is a column. A column has to contain blocks. If the size or formatting changes when dragging a block into a different section, just format it again.

Blocks are the basis for content you’re going to insert into the section. Here are the current types of blocks:

More types of blocks will be added when necessary.

So, an email is comprised of three parts:

Sections, columns, and blocks.

Blocks are dragged and dropped into the columns.

Columns are located in sections. A section has 1-4 columns.

To add blocks horizontally, you need a clean column. To add a block vertically, simply drag it into the place you want it to be. 

Let’s see how adding sections looks like.

When adding a new section, you can choose whether to add it from the current template’s section library, the Section library or to simply start from scratch with an empty layout.

Here’s how you add a new empty section:

Drag and drop the elements (blocks) into, well, where it says ‘Drop elements here’.

As previously said, a section can be comprised of up to four columns. Here’s how a section with two columns looks like:

Let’s try inserting a text block and some buttons to a section:

You can even play around with the blocks – they are interchangeable:

If you want to customize the content, for example, you can do it in several ways. You can use the ‘Apply to all’ button in the button’s settings (Block settings are accessed by simply clicking a block), or simply adjust the Block defaults:

So, the principle of the new Design editor is creating sections and dragging blocks into columns of the sections. Easy enough.