Custom HTML Mailings right column

Creating HTML Mailings
2 columns

Before beginning your mailing,
sketch out a basic design to see
if the overall design works better
with a single column or two columns.
Our sample here is based on two
columns. The main one with the
invitation & closing text with 3
featured speakers in between.
Then the right column with the
specific in formation for each day.
For a one-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 background colors, borders and formatting.
Here in the sample you can see the 4 main tables we have used for this design.
1. Background
2. Primary content
3. Secondary content
4. Right column

1. Background
The “background” table needs to in- 1.
clude enough rows for:
2.
1. the ‘read online’ text
2. the banner
3. a cell to hold the primary content
4. company info
5. unsubscribe

3.

4.
5.

1. Background
Click the ‘Table’ icon to add the holding table. This table has 5 rows and 1 column
and will hold the ‘read online’ text, the banner, a cell to hold the content of your mailing, and footers .
The holding table is set to 600px. Select ‘center’ in the Alignment dropdown to display the mailing in the center of your browser, mailing program, or email.

1. Holding Table
Right 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 #.
The first row we will leave without a set color. The rest of the rows are set to white by
using the color code rgb(255, 255, 255) or #ffffff.

1. Background
The top cell contanis the ‘read online’ text. To add the hyperlink, highlight the text and
click the ‘Link’ icon . To center the necesary cells got to ‘Cell Properties’ and in ‘Horizontal Alignment’ choose ‘Center’.
To add the banner make sure you are in the next cell, and click the ‘Image’ icon
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.
The last two cells are for
the domain name , domain address, and opt
out for mailing.

. If

2. Primary Content
The table for “primary content” needs to include enough rows and columns for all the
content blocks, plus the separator rows. In our sample, the primary content takes up
to 7 rows and 2 columns.
If you are not sure how many
rows you need, don’t worry! You
can insert more rows while you
are puting in your primary content.
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.
7.

2. Primary Content
Add the “primary content” table by placing the cursor inside the cell right under the
banner, and click the Table icon to add another table. This table will be set for 7
rows and 2 columns.

Set the width to 600px and
the alignment to center.
Cell spacing of 10px adds
some spacing between the
text and the table borders.

2. Primary Content
Set the width of the columns by right-clicking on the top cell and go to ‘Cell’ then ‘Cell
Properties’.
The width on the left column is set to 450px. The width on the right column is set to
150px, Horizontal Alignment ‘center’ and Vertical Alignment ‘top’. This will ensure
that all elements are properly aligned.

2. Primary Content
Center the text and change the color of the cells that will be holding headers to gray
by right-clicking in the cell to access the ‘Cell Properties’. Set Horizontal Alignment to
‘Center’ and set the Background Color by using rgb(240, 240, 240) or #f0f0f0.

Click the ‘Text Color’ icon
to change the color to
blue. Add in your text and
then set the font and font
size.
Add in the intro and closing text. In the ‘Cell Properties’ you can choose to
align it to the Left, Center,
or Right as well as the vertical alignment.
The images for the sponsors should be no wider
than 130px.

3. Secondary Content
The forth cell which was left blank will be used to insert the 3rd table that features the
‘Speakers’. This table is 410px. and contains 3 rows and 2 columns with Cell Spacing of
10px.

1.
2.
3.
1.

2.

3. Secondary Content
The left column is used to hold the images. Set each cell to 70px. The images uploaded
for the 3 featured people shouln’t be wider than 50px.

To align all the descriptive
text to the top, set the ‘vertical alignment’ in the ‘Cell
Properties’.
Add the hyperlinks by highlight the text or image and
click the ‘Link’ icon
Links can be used for email
addresses or URLs.

4. Right Column
In the right column we will insert the 4th table for additional information. Dates,
time, and featured speakers. This talbe contains 4 rows and 1 column.

4. Right Column
Before inserting the 4th table we merge the cells. To do this right click on the first cell,
go to ‘Cell’ then ‘Merge Down’. You will need to do this in each cell.

Set the back ground color to
gray by right-clicking in the
cell and in ‘Cell Properties’ set
the color by using rgb(240,
240, 240) or #f0f0f0

4. Right Column
Now we insert the 4th table with 4 rows and 1 column. The width is set to 140px, Cell
spacing 5px, and Alignment to Center.

Set the ‘Horizontal Alignment’ in each cell to Center
by going to ‘Cell Properties’
To add the ‘Programm &
RSVP’ buttons or other images place your cursor in
the cell and click the ‘Image’ icon
Change the text color to
blue by clicking the ‘Text
Color’ icon
Insert a text break by clicking on the ‘Insert Horizontal Line’ icon
To add othe images such as
the social media ones, go
to the desired cell and click
the ‘Image’ icon

Tips & Best Practices
Background color, border color, & text alignment (left, right, or center)
should be set in the cell properties not in table properties.
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 spacing 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

Custom HTML Mailings right column

More Related Content

Similar to Custom HTML Mailings right column (20)

More from TallyFox (16)

Recently uploaded (20)

Custom HTML Mailings right column