Marketing email section spacing and alignment

There are several layouts to choose from for any given section of a marketing mail template, such as one, two three or four column layouts. Below are instructions on how to add spacing and alignment within these section layouts. You can add spacing above or below, between columns, or control the spacing along the outer edges of the layout.

Within these sections, there are several options for spacing and alignment. You can tap on the link to jump to the specific spacing or alignment you'd like to use in a section.

• Top - Add padding above the section.
• Bottom - Add padding below the section.
• Above First Section - Add padding above the very first section of a template (outside the column).
• Below Last Section - Add padding below the very last section of a template (outside the column).
• Between Columns - Add spacing between columns.
• Edge Spacing - Control the spacing on the outer edges.
• Vertical Alignment - Top, Middle, or Bottom.

Top

Use the Top setting to add padding above the section (inside the column).

In this example, the 1/2 : 1/2 (two column) layout, the top spacing has been set to 40px. Note that because the spacing is added inside the column, the yellow background color is still visible.

Botton

Use the Bottom setting to add padding below the section (inside the column).

Above First Section

Use the Above First Section setting to add padding above the very first section of the template. This setting is especially useful if you have wrapped the outside of your template in color, like the example below (gray). The Above First Section spacing will add spacing above the first section in the template.

Below Last Section

Use the Below Last Section setting to add padding below the very last section of the template. This setting is especially useful if you have wrapped the outside of your template in color, like the example below (gray). The Below First Section spacing will add spacing below the last section in the template.

Between Columns

Use the Between Columns setting to add spacing between columns.

In this example, the spacing is set to 20px. 10px is added to each side of the column for a total of 20px between the columns. Edge spacing (see below) lets you control the spacing on the outer edges but still maintain spacing between the columns.

Edge Spacing

Use Edge Spacing to control the spacing on the outer edges.

There are two primary options:

1. 1/2 Between Columns - Half of the amount set between columns
2. Exact spacing - Set 0 - 50px on the outer edge

Edge Spacing - 1/2 Between Columns

This option divides the Between Columns amount in half and sets it as the outer edge spacing. In the example below the Between Columns spacing is 20px so the outer edges are 10px on each side.

Edge Spacing - Exact Pixels

You can also set the edge spacing from 0 - 50px.

In this example the edge space is set to 0px (and between columns set to 20px) so no background color is visible on the outer edges.

In this example the edge spacing is set to 10 px and the Between Columns set to 0px.

Vertical Alignment

Use the Vertical Alignment setting to align the section to the Top, Middle, or Bottom. In the example below, you can see how the button aligns to the top (a), middle (b), and bottom (c).