1. Creating HTML Mailings
2 columns
Before beginning your mailing,
start by sketching out a basic de-
sign to understand where you’d
like to put the main elements,
and to see if the overall design
works better with a single main
column or two columns.
Our sample here is based on two
main column. For a one-col-
umned design, click here.

2. The basic layout for any HTML mailing begins with tables.
In the sample bellow you can see the 4 main tables we have used for this design.
Tables keep all the elements of your mailing aligned and allow more options for back-
ground colors, borders and formatting.
1. Background
2. Primary content
3. Secondary content
4. Footer

3. 1. Background
To add the background table, click the ‘Table’ icon. This table is simply 1 row and 1 col-
umn: this makes a single-celled table where we can add the rest of the elements into.
The background table will be a bit larger than the size of the mailing content so we set
it to 700px. By aligning it to the center, the mailing will be displayed in the center of
the browser, email and mailing.

4. 1. Background
Once the table is set up, right click to access the cell properties and set the back-
ground color. This gray could be set by using the color code rgb(240, 240, 240) or
#f0f0f0.

5. 2. Primary Content
The table for “primary content” needs to include enough rows for the banner, all the
content blocks, plus the separator rows. In our sample, the primary content takes up
to 3 rows.
If you are not sure how many
rows you need, don’t worry! You
can insert more at any time.
Simply right-click where you
want to insert the new row, and
under the ‘row’ options you’ll
be able to insert one before or
after.
1.
2.
3.

6. 2. Primary Content
To insert the “primary content” table into our background table, click inside the back-
ground and add a new table. This table will be set for 3 rows and 2 columns.
The width of 600px will
allow the background to
show on the sides.
Alignment is set to center
to fix it in the middle of the
background table
Cell padding of 3px ensures
that text is not squashed
up right against the table
borders.

7. 2. Primary Content
The first two rows have only one column, so you will need to combine the cells.
To combine the first two cells into one, right-click and under the cell options choose
‘merge right’. For the next row you will do the same.

8. 2. Primary Content
To add the banner make sure you are in the first cell, and click the ‘Image’ icon. If the
banner is one you have used before you can ‘browse server’ to retrieve it.
If it’s a new image, go to ‘upload’, select the file from your computer and ‘Send it to
the server’.
Make sure the image width matches the width you set when setting up the table, in
our case, we set it to 600px.

9. 2. Primary Content
Now, let’s set the color of the title cell, for instance to a light blue: Right-click to ac-
cess the cell properties and set the background color by using rgb(211, 217, 229) or
#d3d9e5, and paste in your text.
To set the Title to the
middle of the cell, set the
Horizontal Alignment to
‘Center’ in the cell prop-
erties.

10. 3. Secondary Content
The third row cells will be used to insert the main email text on the left column, and
on the right a button that takes you to a specific document plus the contact info.
1. 2.
2.1.

11. 3. Secondary Content
Right-click on the left cell to access the cell properties and set the left cell width to
450px, and the horizontal alignment to ‘left’. Change the background color to white
by using rgb(255, 255, 255) or #ffffff, and paste in your text.
For the right cell, right-
click again, access the cell
properies and set the cell
width to 150px, change the
background color to blue
by using rgb(211, 217, 229) or
#d3d9e5. Add the ‘down-
load’ button by clicking the
‘image’ button and paste
your contact info.
To align all the descriptive text to the top, adjust the ‘vertical alignment’ in the cell
properties.
To add the hyperlinks, highlight the text or image and click the ‘Link’ icon. You can use
links for email addresses or URLs.

12. 4. Footer
The footer table has 1 row and 2 columns.

13. In the left column write in
the unsubscribe text and
other information.
In the right column click
the ‘Image’ icon to add
your images. This cell is set
to ‘Horizontal Alignment:
Center’.
To link the unsubscribe,
highlight the text and click
the ‘link’ icon, then add the
opt-out token {action.op-
tOutUrl} instead of a URL.
4. Footer
For this we will start with a table of 2 columns and 1 rows, change the background
color to white and set the size in each cell: left cell 450px, right cell 150px. Write in the
unsubscribe text and other information.

14. Background color, border color, & text alignment (left, right, or center)
should be set in the cell properties not in table properties.
Tips & Best Practices
Images should always be uploaded in the exact size required for the mailing.
Some mail programs do not recognize custom scaling.
To find the perfect width for your images, take the total pixel width of the
cell and subtract the cell padding for both the left AND right sides.

15. Congratulations!
Your mailing is ready to be sent!
For more information:
Check out our Support Library
Or fill out our Contact Form