William Naylor
posted this on September 02, 2011 04:30 pm
Designing an HTML email can be one of the most challenging tasks in your Databank. I assure you, this isn't because we are trying to make this difficult but is instead some of the baggage that comes with this non-standardized territory. To help navigate this world, we have created several templates that incorporate most of the best practices in html email design (from an html code standpoint). While these templates might strike you as not being very attractive, they are really designed for maximum customization. The templates built into your Databank were updated in August 2011 but in order to get the new versions, you will need to send a support request . If you are wondering if you have the new versions or not, look at the headline area of your template and if it matches the name of the template, you have the new version. The following is a process that someone might go through to customize one of our templates into their PowerMail template.

As an example I will be modifying Chalkboard because I want to have a right hand column. To see the rest of the available templates go to our Template Gallery.

Click your cursor into an open area with the background color that you want to change and right click. Then navigate to Cell Properties. On the cell properties dialog box that opens up, in Background Color, you can either enter your hex or rgb code directly or click Choose to visually choose a color. I chose white for my overall background. A common case is that you might not know the hex codes for your organizations colors. A tool that I really like which makes this easy is called Colorzilla. It's a free eyedropper for Firefox which allows you to click on a web page with the color you want and then paste that color code anywhere you want.

Put your cursor in the area where you want your image to appear and click the image icon in the toolbar to open up image properties. Click on the Upload tab, then click browse to find your image on your computer. Once you've selected your image, click Send it to the Server. This should bring you back to the main Image Properties box with your image loaded in the frame. Note that my header image is 600 pixels wide

There is a buffer around my image that I don't want to keep. To change this I can right click in the outlined space and go to Table Properties. In table Properties I changed my cell padding from 20 to zero. This will completely get rid of that buffer area.

To change the border, right click in the table and go to Table Properties. The border size can be changed on the box that opens up. I didn't want a border around this table so I'm going to switch the Border Size to 0.
In this template (and most) there are spaces in between the three tables that constitute the header, body, and footer. To remove them just click into that area and hit the backspace key on your keyboard.

If you click on Select All (in the top right corner of the editor) you can change all of your text at once. Very useful when changing the font. Highlighting the text you want to change and then updating a property will also make the changes.

Using the same steps as adding a header image, you can add your donation button and social media icons. To link an image, use your cursor to highlight the image and then click on the link button in the editor. Enter in the web page you want to link to and enter a click through tracking code.

You'll need to change the address information to your own. You can use the Form Links drop down to put your own Unsubscribe and Subscribe links into the footer. Please don't forget to do that!

Now's the time to pat yourself on the back. I recommend looking at your message using several different email programs but if you have mostly stuck to the template, your new design should be consistent across platforms.