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.

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. Background2. Primary content3. Secondary content4. Footer

1. BackgroundTo 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.

1. BackgroundOnce 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.

2. Primary ContentThe 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.

2. Primary ContentTo 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.

2. Primary ContentThe 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.

2. Primary ContentTo 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.

2. Primary ContentNow, 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.

3. Secondary ContentThe 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.

3. Secondary ContentRight-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.

4. FooterThe footer table has 1 row and 2 columns.

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. FooterFor 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.

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.

Congratulations!

Your mailing is ready to be sent!

For more information:

Check out our Support Library

Or fill out our Contact Form