Using the Spacer Component in Your Email Design

Details

The spacer component is a great way to break-up an email design by creating sections. It can also be used to "reset" an email design that uses multiple row of columns - especially when column heights aren't displaying equally.

How-to Guide

We do not recommend using a spacer to the left or right of another component. It is not designed for this and will cause issues with column widths as well as for those viewing your email on a mobile.

Insert a Spacer Component Into Your Email Design

1. Open your desired email for editing.
2. Drag a spacer component (from the Components panel) into your design.
3. Use the Settings panel to the right to set the spacer colour and height.
   

Use a Spacer Component to Reset Column Heights

As column heights act independently of one another, stacking multiple rows of columns on top of one another can cause the column heights to become out of alignment. To prevent this, we recommend placing a spacer between each row of columns.

1. Open your desired email for editing.
2. After every row (or set) of columns, drag a spacer component (from the Components panel) into your design before you begin the next row of columns.
3. Use the Settings panel to adjust the spacer colour and height; you can set the spacer height to be very small, if you wish.
   
4. After placing your spacer, continue with another row of columns. Then another spacer... and so on.

Below we've provided two side-by-side examples; the left email design doesn't use a spacer between the two rows of columns. Notice how the column heights are out of alignment in the second row? The right email design has a thin spacer between the rows of columns (we've made it red so you can see it - but normally you would make it the same colour as your email).

The spacer essentially "draws a line" and resets the sections, so the height of a section in one part of the email design doesn't affect another part.

Use a Spacer Component to Visually Spilt an Email Into Sections

1. Open your desired email for editing.
2. Drag a spacer component (from the Components panel) into your design.
3. Use the Settings panel to the right to set the colour to be that of your email background colour. You can also adjust the spacer height here.
   

In the example below, you can see a dark grey spacer component being used to visually separate the email into two sections.

Further Reading

Tips & Tricks When Working With Columns