Creating HTML Mailings

Before beginning your mailing, sketch out a basic design to see if the overall design works better with a single column or two col-umns.

Our sample here is based on one main column for introduction & closing text, with 3 featured frames in between.

For a two-columned layout, click here.

The basic layout for any HTML mailing begins with tables.

Tables keep all the elements of your mailing aligned and allow more options for back-ground colors, borders and formatting.

Here in the sample you can see the 4 main tables we have used for this design.

1. Background2. Primary content3. Secondary content4. Footer

1. BackgroundClick the ‘Table’ icon to add a background table of 1 row and 1 column. This creates a single celled table that we will add the rest of the elements into.

The background table will be a bit larger than the mailing content so we set it to 700px. Select ‘center’ in the Allignment dropdown to display the mailing in the center of your browser, mailing program or email.

1. BackgroundRight click inside the table to access the table options, and in the ‘Cell’ dropdown choose ‘Cell Properties’ to set the background color. Colors are set by using either the RGB numbers or the HTML #.

This gray could be set by using 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 this sample, the primary content takes up 6 rows.

If you are not sure how many rows you need, don’t worry! You can add 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.4.

5.6.

2. Primary ContentAdd the ‘primary content’ table by placing the cursor inside the background table, and click the Table icon to add another table. This table layout is 6 rows and 1 column.

Set the width to 600px and the alignment to center to display the background color on both sides.

Cell padding of 3px adds a bit of spacing between the text and the table borders.

2. Primary ContentTo add the banner, place your cursor in the first row 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 the tab ‘Upload’ to select the file from your computer and ‘Send it to the server’.

Make sure the width of the banner matches the width of the table, in this case 600px.

2. Primary ContentTo change the color of the cells that will be holding body text to white by right-click-ing in the cell, and in the cell properties set the color to white by using rgb(255, 255, 255) or #ffffff. Then add in your text.

The header “Find out how” remains on the gray background.

To center the header, set the Horizontal Alignment to ‘Center’ in ‘Cell Properties’.

3. Secondary ContentThe center white cell which was left blank will be used to insert the 3rd table for the featured items. This table contains 4 rows and 3 columns.

1.

2.3.

4.

1. 2. 3.

3. Secondary ContentThe top row will be used to hold the images. Set each cell to 200px and the horizontal alignment to ‘center’. The images uploaded for the 3 featured items shouldn’t be wider than 190px to ensure they do not break the cell alignment of your mailing.

Center the titles in the cell properties, and change the text color to orange by click-ing the ‘Text Color’ icon

To align the text in the third row to the top, change the ‘vertical alignment’ in ‘Cell Properties.

To add hyperlinks, highlight the text or image and click the ‘Link’ icon

Links can be used for email addresses or URLs.

4. FooterThe footer table starts off with two rows and two columns.

11

2

2

To add in the hyperlink, highlight the text and click the ‘Link’ icon

Instead of pasting a URL, add the opt-out token {action.optOutUrl} and change the protocol to ‘other’ from the dropdown.

4. FooterFirst add in the unsubscribe text in the first cell, and the company logo in the second cell. Change the background color of both cells to white.

4. FooterTo combine the two cells from the last row, right-click in the first one and under the cell options choose ‘merge right’. Change the background color to white and add a company description.

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