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). This tutorial covers the process that someone might go through to customize one of our templates into their own PowerMail template.
In this lesson:
- Choose the template you want to modify
- Change the background color
- Upload a header image
- Change the cell padding
- Change a Table border
- Delete spaces between tables
- Change your default text
- Upload any additional images and link them
- Change your footer
- Send yourself a trial message
- Further resources for PowerMail
In this example, I will be modifying a template that has a right-hand column.
Move your cursor into an open area within the background color that you want to change and right-click to open the dialog box and navigate to Cell Properties. Change the cell Background Color in the Cell Properties dialog box by either entering your hexadecimal or RGB code directly or click Choose to visually choose a color.
A common case is that you might not know the hexadecimal code for your organization's colors. A useful tool which makes it easy to find web-based colors is called Colorzilla. It is a free eyedropper add-in for Firefox and Chrome which allows you to click the color you want on a webpage and get the RGB or hexadecimal code.
Move your cursor to the area where you want your image to appear and click the image icon in the toolbar to open up the image properties dialog box. First click 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 the maximum file size for an image upload is 350K
There is a buffer around my image that I don't want to keep. To change this I can right-click the outlined space and select Table Properties. In Table Properties I changed my Cell Padding from 20 to 0. This will completely get rid of that buffer area.
To change the border, right-click in the table and select Table Properties. The border size can be changed in the dialog box which opens. 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, select that area and hit the backspace key on your keyboard.
If you click Select All (in the top right corner of the editor) you can change all of your text at once. This is very useful when changing the font for your entire PowerMail. Highlighting the text you want to change and then changing the font using the Font button in your editor will also make these changes.
Using the same steps as adding a header image, you can add your donation button and social media icons. To link an image, move your cursor to the image and then click the link button in the editor. Enter the web page you want to link and a clickthrough tracking code (if desired).
You'll need to change the address information to your own. You can also use the Form Links menu to put your own Unsubscribe and Subscribe links into the footer.
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.