Free Webinar

Replay Now Available!
How to Build a WordPress Plugin
Watch Today!

Webinar Replays

Miss the live version?
Watch the Video Replay Now!
View Today!

Hi! I'm Dustin

My Goal is to Inspire You to
Do Amazing Things with WordPress
Learn More about Me

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://yourwebsiteengineer.com" 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.

Published on: 24 Sep | Blog | 39 responses| Tags: , ,

Subscribe and Never Miss an Episode

               
37 comments
sthawk
sthawk

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.

Choorel
Choorel

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!

CCWTech
CCWTech

Gmail - in Signature box, Switch to HTML mode and copy code...


How do you switch into HTML mode?

ScottyLording
ScottyLording

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?

JPnut13
JPnut13

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

JPnut13
JPnut13

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

ComplementsPeru
ComplementsPeru

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.

Chiyo12345
Chiyo12345

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_USER\Software\Microsoft\Office\9.0\Outlook\Security. 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?

Joe Janwijit
Joe Janwijit

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

researchnut
researchnut

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?

frankcorn
frankcorn

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

migors1
migors1

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.

If you can, plese help

Thanks

Igors

Ghammick
Ghammick

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?

reaghanreilly
reaghanreilly

Thank you, I love you! :D 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.

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

@ScottyLording  It would look something like this... without the '


'<'a href="info[at]something[dot]com" '>'info[at]something[dot]com '<'/'>'

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

@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?

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

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

dhartzler10
dhartzler10 moderator

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>