Register

What is a Spacer and how can I use it to design my newsletter?

A Spacer is a tool which allows you to add a space, a block of colour or a line between two Elements of your newsletter design. By utilizing Spacers you can fine tune your sketch before, while, or after fleshing it out, so that it looks exactly right!

You'll find Spacers along with the other available design Elements inside the Elements category on the left side of your Editor page.  

To add and customize the Spacer element just follow the steps below:

 

A. Adding the Spacer element

1. Click on the Elements button on the vertical menu, located on the left side of your Editor page. Add Spacer Step 1 : Click on the Elements button

You will find the Spacer element among the options available on the list that appears.

2. Drag-n'-drop the Spacer in-between the elements you want to distance. Add Spacer Step 2 : Drag n drop the Spacer inbetween the elements

 

B. Customizing the spacer element

A Spacer's default setting is set to transparent with a 40 px height, this can be changed through the Editor General Settings, but you can fully customize each Spacer's style to fit your exact needs.

1. Click on the Spacer element inside your design.
Customize the Spacer Step 1 : Click on the Spacer element

The Spacer Settings instantly come to view on the left side of the Editor.

2. Click on the Background Color field of the Spacer Settings if you want to select a background colour for your current design. Customize the Spacer Step 2 : Click on the Background color and select a color of your choice

The transparent option will suit most occasions, but the option to change to colour is there in case you ever need it!

3. Click on the up/down arrows of the Height field of the Spacer Settings to increase or decrease the size of your Spacer.
Customize the Spacer Step 3 : Click on the up-down arrows to adjust the height of the spacer

You can also type-in the exact number of pixels inside the Height field.


4. Drag the double pointed arrow, located at the bottom of the Spacer to adjust its height.
Customize the Spacer Step 4 : Drag the double pointed arrow to adjust the height of the spacer

Keep in mind that using the double pointed arrow you have a minimum setting of 5 px, but by using the Height field you can go as low as 1px.