How To

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!

iTunes Facebook LinkedIn RSS Twitter Vimeo YouTube

<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.

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.

    • dhartzler10 Reply

      Here’s my new signature: http://yourwebsiteengineer.com/signature

      Sep 24, 2012
    • GMailTricks Reply

      For signature i use Brandmymail ( http://www.brandmymail.com ), which has full control over email signature and overall template :)

      Sep 28, 2012
      • dhartzler10 Reply

         @GMailTricks Wow BrandMyMail looks pretty cool! I’d never heard of it before. Thanks for sharing!

        Sep 28, 2012
    • reaghanreilly Reply

      Thank you, I love you! 😀 I had to start up a WordPress account, yet ANOTHER social media button I’ll be able to add to my sig, but it was worth it.

      May 6, 2013
      • dhartzler10 Reply

        reaghanreilly Glad it helped!

        May 6, 2013
    • Ghammick Reply

      Hello,
      I have created a custom stationery for my company which includes a Page Background (GIF).  It looks great on laptops and desktops; however, when I try to view on an iPhone or iPad my background graphic does not show but there is a .gif file at the beginning.  I have tried using an Outlook 2010 theme to see if the graphic will show, and it does…how can I make my custom stationery view?

      May 13, 2013
      • dhartzler10 Reply

        Ghammick so you are trying to use a full page background image? I’m not sure how to do this as this is outside the scope of this blog post.

        May 13, 2013
    • migors1 Reply

      Thanks i did it with gmail and it work great. No more  attachments.
      How ever i tired add your example signature to outlook it looks nice, but when i recive this signature to gmail it has attachments. 
      I started look for this because my wife in work use outlook and one day i tried find one document and it was impossible, every mail sent or recived has fake attachments from signature.Because even if client responds the mesage has original copy and there is attachments. It is so wrong.
      I you can plese help
      Thanks
      Igors

      Jun 13, 2013
      • dhartzler10 Reply

        migors1 I don’t have access to Outlook, so unfortunately, I can’t be much help. What version are you using?

        Jun 19, 2013
    • ZunsanSun Reply

      That is an Image, but i want to use a code html :(
      this is code html but it’s only an image: <a href=”http://s1272.photobucket.com/user/vsangit/media/Chu%20ky/sanghosignate_zpsec684707.jpg.html” target=”_blank”><img src=”http://i1272.photobucket.com/albums/y393/vsangit/Chu%20ky/sanghosignate_zpsec684707.jpg” border=”0″ alt=” photo sanghosignate_zpsec684707.jpg”/></a>

      Jul 15, 2013
      • dhartzler10 Reply

        ZunsanSun Did you follow the steps above?

        Jul 16, 2013
    • frankcorn Reply

      This seems to be too simple!  Does the method  Wordpress really get round the problems normally associated with HTML in e-mail?

      Jul 24, 2013
      • dhartzler10 Reply

        frankcorn It works for me! Try it out and let me know if it works for you!

        Jul 24, 2013
    • researchnut Reply

      I use Gmail, but my client is Windows Live (formerly Outlook Express). I think I can do the WP sig. and then,  by saving it to my Public Dropbox. Any thoughts?

      Aug 27, 2013
    • dhartzler10 Reply

      researchnut that might work, but I’ve never tried it. Is Windows Live an online service (like Gmail) or software that runs on your computer?

      Aug 29, 2013
    • wildcardsystems Reply

      Hello, my name is Chigoziri TonyWhites, I am the webmaster at wildcardsystems.org. While promoting our new facebook page, http://www.facebook.com/wildcardsystems, we were posting FREE tips on facebook marketing using pages. kindly drop by to show some love. Thanks for sharing.

      Sep 7, 2013
    • dhartzler10 Reply

      Rizzofied probably the easiest way to do this is to make your whole signature (text and all) an image. Signatures are very finicky and that’s probably the best way to do it.

      Sep 27, 2013
    • Joe Janwijit Reply

      Hi, I need some help …..I done everything but when I put HTML to outlook it wont change to text…..any idea how to make it work thank you so much

      Nov 14, 2013
    • dhartzler10 Reply

      Joe Janwijit hi Joe, I’m not an Outlook expert…which version are you using of Outlook?

      Nov 15, 2013
    • Chiyo12345 Reply

      Hello, I know you are not Outlook expert…but I have a problem and I was wondering if you can help me. We have old outlook 2003. I created html file from photoshop, word, but nothing worked. 
      I researched on the web about outlook 2003, they said “There is a registry key HKEY_CURRENT_USERSoftwareMicrosoftOffice9.0OutlookSecurity. It contains a key called “OutlookSecureTempFolder “. When I deleted that key, all images began to show.”
      but I couldn’t figure out where it is,so I can not delete anything.
      I made slices and made links and made html on photoshop. Is this file suppose to work for signature?

      Nov 15, 2013
    • dhartzler10 Reply

      Chiyo12345 as long as the signature is in HTML and you’ve hosted the images somewhere, like on your WordPress site, it should work.
      Unfortunately, I can’t help with an Outlook specific issues.

      Nov 17, 2013
    • ComplementsPeru Reply

      Confidentiality Note:  This e-mail and any attachments are confidential and may be protected by legal privilege. If you are not the intended recipient, be aware that any disclosure, copying, distribution or use of this e-mail or any attachment is prohibited. If you have received this e-mail in error, please notify me immediately by returning it and delete this copy from your system. Thank you for your cooperation.

      Jan 7, 2014
    • Zain ul Abideen Reply

      Great work….!! Thank you Bro….!! Stay Blessed

      Feb 12, 2014
    • dhartzler10 Reply

      rmstyles  Awesome! Looks great!

      Feb 15, 2014
    • JPnut13 Reply

      tried this steps for our GoDaddy account and couldn’t get it to work. any suggestions?

      Feb 17, 2014
    • JPnut13 Reply

      tried these steps for our GoDaddy account and couldn’t get it to work. any suggestions?

      Feb 17, 2014
    • dhartzler10 Reply

      JPnut13  unfortunately no. GoDaddy does not support inlined HTML :(

      Feb 17, 2014
    • ScottyLording Reply

      How do you link an email address like info@… to an email client?  As in, click on the email address and new email opens with the link in the ‘To: ‘ field?

      Feb 23, 2014
    • dhartzler10 Reply

      ScottyLording  It would look something like this… without the ‘

      ‘<‘a href=”info[at]something[dot]com” ‘>’info[at]something[dot]com ‘<‘/’>’

      Feb 23, 2014
    • CCWTech Reply

      Gmail – in Signature box, Switch to HTML mode and copy code…

      How do you switch into HTML mode?

      Mar 10, 2014
    • dhartzler10 Reply

      CCWTech  You switch to HTML mode in WordPress, not Gmail.

      Mar 10, 2014
    • CCWTech Reply

      dhartzler10 CCWTech  Thanks!

      Mar 10, 2014
    • Choorel Reply

      I created a signature in photoshop CS6.  I sliced it up so I could link certain parts of it.  I made it at 450px but now its too big for a mobile phone when used in emails.  How can I resize html output from Photoshop to shrink the entire table to fit into the width of the screeen its on, if its smaller than 450?  Thank you!

      Mar 15, 2014
    • dhartzler10 Reply

      Choorel  formatting emails is extremely difficult since you have to think about all of the different options. I don’t think that there’s a perfect way to format for mobile.

      The only suggestion that I have is to make your entire signature small enough for mobile.

      Mar 20, 2014
    • sthawk Reply

      I am trying to get members of a coalition I work with to promote the coalition with a logo tag added to their email signature.  I remember a real old method thru Word to insert logo onto a blank doc then hyperlink.  The idea is to email this logo tag to all coalition members to have them add to their signatures and to fit all email formats.  Any way to do this?  I used to do this for an association back in the day but need to know if there are any new ways.

      Apr 30, 2014
    • dhartzler10 Reply

      sthawk  There’s not an easy way to do this. You’ll have to manually set up the signatures for everyone.

      May 11, 2014
    • Electronic signature Reply

      A good and interesting article.
      Thanks for the info.

      Sep 17, 2014
    • izuchukwu Reply

      please sir, i designed an email signature using html and css on my laptop, the images everything is on my laptop. when i open it on a browser, the image shows and text too, but when i copy and paste into gmail only the text shows the image is not there.

      Jun 22, 2015
      • Dustin Hartzler Reply

        You need to upload your images to a server somewhere so that the images will be displayed in your signature. That’s why I recommended uploading them to a WordPress site.

        Jun 22, 2015

Leave a Reply