How do I add spacers in the Drag & Drop Email Editor?

Looking to create well-designed emails that are visually appealing? Adding white space between the elements is a favorite tip of our graphic designers. And it’s easy to do by adding spacers to your e-blasts! Choose the jump start method or skip to dive in deeper and get a few pro tips.

Jump start:


If your template has a spacer placeholder, just click on it and the spacer settings will open.

Is the Dynamic spacer toggle on? You can easily adjust the height of the spacer by clicking and dragging right in the template.

Want to add more definition to your spacer? Toggle off Dynamic spacer and set a line thickness and style.

Pro tip! Use white space, such as spacers and padding, to balance the elements of your e-blast and organize the content. Adequate white space improves the user experience and helps with accessibility.

Dynamic spacer


Line spacer



Deeper dive


Insert new Spacer Block: Drag and drop a Spacer Block into an existing Structure in the e-blast. Click it to open the Spacer settings menu.






Dynamic spacer: For a spacer without a line, click to toggle on. Adjust the height of the Dynamic spacer by clicking and dragging right in the template.




Background color of block: To change the background color, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Line: Use the + and - controls to set a line thickness. Use the drop-down to select a line style. To set the line color, click the color box. Enter a color hex code, use one of the preselected colors, or use the color picker.


Width: To set the line width, use the + and - controls or enter a numerical value.


Alignment: To align the spacer within the container, select left, center, or right alignment.  

To set a different alignment for mobile view, click the mobile icon then set the alignment.

Pro tip! Some elements look good on desktop devices when center-aligned but may not look as good on mobile devices. You may want to set different alignments for certain elements on mobile and desktop devices. Click the Device Preview icon to preview how your email will look on desktop and mobile devices. 


Responsive spacer: The option allows the spacer to adjust to the width of the screen of the mobile device.

NOTE: Adaptivity only works on devices that support it.


Padding: Padding refers to the margin around elements. To add padding to the edges of a Spacer Block, use the + and buttons to adjust the padding for all edges.
 
To adjust the padding for each edge separately, click More to toggle on.   

Click the mobile icon to adjust padding for the mobile version.

Pro tip! Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use padding for containers and structures to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it may make those elements less attractive. So, you may want to remove padding for mobile devices. Click the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.


Add an anchor link: Anchor links allow viewers to jump to specific areas within the email. To add an anchor link to the spacer, click to toggle on Add an anchor link and enter a name for the anchor.

Next, click on the Block that you would like linked to this anchor.
  • To link a piece of text in a Text Block, highlight it and click the Change Link icon on the formatting toolbar. In the settings menu, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.

  • To add the link to other Blocks, in the settings menu for that Block, go to Link and click the Site drop-down menu. At the bottom of the drop-down, select the anchor.
NOTE: Anchor links are not supported in some email clients: iOS Gmail app, iOS Apple Mail, Outlook app on Android, Outlook app for macOS and AMP Emails. 
 

Hide element: If you wish to hide a spacer from view on either desktop or mobile devices, select the corresponding icon in the Hide element section.  

Pro tip! There are a few reasons why you might need this option. For example, you may want to hide some menu tabs on mobile devices to avoid horizontal scrolling, which could happen if you apply a large font size to the text. Click on the Device Preview icon at the top of the page to see how your email will look on desktop and mobile devices.


Include in: By default, the image will be included in both HTML and AMPHTML emails. This is shown in the Include in setting. We do not recommend you change this setting.  


Delete: To delete a Spacer Block, hover over it in the e-blast. A menu tab will appear on the right side of the block. Click on the tab then the trash can icon. 


Feedback and Knowledge Base