Create an HTML Email Signature (with images and colors)

Probably the most frequent question I get via emails is “How do you create a signature like yours?” Or put another way, “How can I create an HTML email signature for my emails?”

I never really know how to respond to those messages as it’s significantly tricky to describe, because there are so many different email clients out there.

But today, I’m going to show you two different ways to add a great looking signature to the end of each email you send. The first way is to generate the HTML that you can paste into your mail client of choice and the second is how to add a HTML signature to gmail.

Plus, the cool thing is, you can use your current WordPress website to help you 🙂

Create Your Signature

First things first, let’s decide what should be in your signature. Here’s what mine has looked like for the past year:

I like to only include the essential information here. As you can see, I don’t have my email address in my signature. Most likely if someone wants to email me, they will simply reply to my message. I do include my business phone number in case someone would rather contact me via phone.

Of course promote my websites, but I’m not shouting, “Come check me out, NOW!” My websites are there in case someone is interested in finding out more information about me or my company.

All of those things can be done with a basic signature. It’s the next thing that trips up most people; adding the images.

I’ve included different networks of where people can find me, for their convenience, in a compact matter by using images.

Now some email clients like Outlook have the ability to add an image to your signature. But this isn’t the way to do this. This is the incorrect way because then every email you send will have that many attachments and we don’t want that.

We want to host your file on a web server somewhere. And we will get to this in the next step.

Okay, so take a few minutes and create your signature on paper, before moving on to the next step.

Add a New WordPress Page

Now that you have your signature designed, open up WordPress and create a new page and name it Signature. (Don’t worry, about people finding this page. If you don’t want people to find it, you can delete the page after you’ve created your signature).

Now using the visual editor, start creating the signature digitally.

Start by adding your text and your hyperlinks, just like you would for a blog post. Once that’s completed, it’s time to add your images.

Adding images is just like adding an image to a blog post. Find the icon or image you want to use, add it via the media library.

For my signature, I used a space between each social media icon, so the edges don’t touch each other.

Once you are happy with the way your signature looks, save the page.

Use HTML Signature

With some email clients you can simply paste in HTML code. If this is the way your email client works, then this is the step for you. If you are using Gmail, skip this step and go on to the next one.

From the page editor, select the HTML editor and you will see the HTML that was generated while you built your signature with the visual editor.

Copy this generated code and paste into the custom signature area in your email client.

Save it and check it out. You should have a great looking signature that pulls the images from your server so you aren’t adding unnecessary attachments to every message.

Gmail Signature

If you are using Gmail, here’s what you need to do.

First go into your Gmail Settings. Currently, this is under the gear in the upper righthand corner.

Under General settings, scroll down until you see “Signature.”

Now go back to WordPress and view your Signature page you just created. You should be able to see exactly what your signature is going to look like. You will also see all the rest of your website.

While viewing this page in your browser, highlight and copy your signature only. Now paste this into the Signature window inside of Gmail and save the settings.

With my testing, this works most of the time. If it doesn’t work for you, try one more thing.

Paste HTML into signature.html

I found out in my own testing, that certain CSS properties, may not allow the images to show up in your new signature.

From your Signature page editor, switch to HTML mode and copy all of the code and paste it in a new document called signature.html. After saving, open the file in your web browser (you should be able to double-click).

If the formatting is off, you might have to use some simple inline css to do the trick. Here’s the code I am using for my newly created signature:

Dustin R. Hartzler

YourWebsiteEngineer.com
P: 937.881.4865

Let’s Connect!

<img src="http://yourwebsiteengineer.com/icons/Helmet.png" style="padding: 4px; margin: 0 7px 2px 0; display: inline; float: left;"><p style="padding:0px; margin:0px; color: #FF6600; display:inline; font-size:16px; font-weight:800">Dustin R. Hartzler</p> <br>
<a href="http://ywe-new.dev" style="color: #358298; display:inline">YourWebsiteEngineer.com</a><br>
P: 937.881.4865<br>


<h3 style="margin-bottom:0px;">Let's Connect!</h3>
<a href="http://itunes.apple.com/us/podcast/your-website-engineer-resource/id410342775" target="_blank"><img src="http://yourwebsiteengineer.com/icons/iTunes.png" width="32" height="32" alt="iTunes" /></a> <a href="http://www.facebook.com/pages/Your-Website-Engineer/150328031692067" target="_blank"><img src="http://yourwebsiteengineer.com/icons/facebook.png" width="32" height="32" alt="Facebook" /></a> <a href="http://www.linkedin.com/in/dhartzler10" target="_blank"><img src="http://yourwebsiteengineer.com/icons/linkedin.png" width="32" height="32" alt="LinkedIn" /></a> <a href="http://feeds.feedburner.com/YourWebsiteEngineer" target="_blank"><img src="http://yourwebsiteengineer.com/icons/rss.png" width="32" height="32" alt="RSS" /></a> <a href="http://www.twitter.com/dustinhartzler" target="_blank"><img src="http://yourwebsiteengineer.com/icons/twitter.png" width="32" height="32" alt="Twitter" /></a> <a href="http://vimeo.com/user5706400" target="_blank"><img src="http://yourwebsiteengineer.com/icons/vimeo.png" width="32" height="32" alt="Vimeo" /></a> <a href="http://www.youtube.com/user/YourWebsiteEngineer" target="_blank"><img src="http://yourwebsiteengineer.com/icons/youtube.png" width="32" height="32" alt="YouTube" /></a>

Now, highlight your signature and paste into Gmail.

Compose a new message and see your fancy new signature.

I just created a great looking email signature (with images) by following these simple steps: http://t.co/Sqpvzs7n

— Dustin Hartzler (@DustinHartzler) September 24, 2012

Share Your New Signature

Did the above steps work for you? I’d love to see your new signature. Post in the comments section below with the link to your Signature Page. I’ll start off and my new signature is below.