Ah, the old signature. The best way to end an email. An email signature can have so much worthy info that it’s important to have a good one. You want your last line in an email to look pretty and contain all the necessary links to your channels. Right? Yeah. I have to be honest with you. I could certainly follow my own tips this time. This blogpost is actually a reminder to myself to get my email signature in order. But that’s just between us.
Especially if you’re a business, you want your email signature to contain certain contact information. We all know the corporate format: logo, name, job title, address and maybe a LinkedIn icon. Yawn. But necessary information nonetheless! If you’re in the creative field, or you just have more imagination in general, you might be able to craft a more original template.
The point is, you can create an email signature in WordPress! Or at least, you can design it in WordPress. I’m also going to teach you how to tweak it and style it to your wishes. If you don’t have a website (or WordPress/Joomla), you can skip the first couple steps and move on to step 5. However, if you’re going to use images in your signature, please make sure they are publicly accessible!
What you need to get started
A text editor. No, not Word, but something like TextMate 2.0 (for mac) or Sublime Text. The last two are meant to edit HTML. Don’t worry, this won’t be a difficult coding session, but we are going to edit some CSS. Exciting!
Don’t forget to get all of your images ready. You want your images to be publicly available (for example, on a website) so that your images are not attached to the email. You know how you receive emails sometimes and it says there is an attachment? Yeah, it’s not a document, it’s the signature. It’s 2017 people, we shouldn’t be doing this!
I added social media icons to my website. My logo was already in my database. (And I’m hoping yours are also already on your website and in your media database…it’s where they should be, at least).
Before you create an email signature in WordPress…
- Gather the information you want to put into your signature.
- Screens are getting smaller by the day. Make sure your signature has the right dimensions to show up on even the smallest smartphone. The smallest smartphone screen width is 640 pixels. It’s wise to stay under that. The most consistent size for email signatures (the ones that show up well on every screen) is 320 pixels wide. So if you’re adding images to your signature, make sure they are smaller than that. For example, my social media icons are 30 px by 30 px, and my logo is 125 pixels wide.
- Have the hex codes for your theme colors at hand (it’s the color code that starts with the hashtag #00000).
- Gather social media links.
- Not all HTML and CSS code is supported in every email client (Outlook, Yahoo, Gmail). Thank goodness for this amazing guide that shows you what code will work and what won’t.
Ok, let’s get cracking.
1. Create the layout that you want
Personally, I prefer putting my information in a table. You know, like in Word or Excel. I do this because it prevents information from floating around and I can align my images with my text perfectly. If you don’t have the option to add a table to your post, download the plugin TablePress. (You can always remove the plugin once you’re done creating your signature.)
Here are the steps to creating a signature in TablePress:
- Go to Plugins > TablePress > Plugin Page
- Add a new Table – create as many rows and columns as you want. I created 4 rows and 2 columns
- In the Table Content section, add the plain text you want in your signature in the column you want to see them in. In my signature, I want my name and job title (both plain text) in the top-right.
2. Add images and links
Alright, you’ve got the text down. High five! Now it’s time to add images and links. Let’s start with that logo of yours.
Go to the column/row you wan to place your logo. Click on “insert image” in the “Table Manipulation” area. Now add the image from your media database.
Do the same thing for adding your links. Go to the column/row you want to place your website (for example) and your email address and click on “insert link” in the “Table Manipulation” area. Create the links you want. TIP: add “mailto:” before your email address. If people click on your email address, their mail client will start up and it will open a new message with you automatically in the “to” field.
When you’re done filling your table, don’t forget to save it at the bottom of the screen.
3. Design your table
You are now going to design your table. Below “Table Manipulation”, you can find the “Table Options” menu. TablePress automatically has three boxes checked (see picture). You want to uncheck these boxes. All of these boxes should be empty!
If you have unchecked these boxes, save your table.
4. Export the table
Now it’s time to leave WordPress and get our coding game on! In the top menu of TablePress, click on “Export”. Select the table you want to export and make sure to select “HTML” in the export format. Then click “Download export file”.
In your downloads, you should have an HTML document. Don’t double click to open it. Use right click and select the text editor you want to open it in. Don’t mind the Dutch in the screenshot. But you get the point. Open your file in TextMate or Sublime.
5a. Style the images in your signature
Your screen should look something like this:
This is where the fun starts. We are going to style the images in your signature first.
In the image code, starting with <img src=” you will see alt=””. In between those two quotation marks, you should add a description of your image. Why? If the image fails to show up on the screen of your recipient, for whatever reason, it will have some text instead of the image. So for my logo, it is going to look like this:
<img src=”http://techinheels.com/MYLOGO” alt=”Tech in Heels” width=”125″ height=”65″ class=”alignnone size-full wp-image-1258″/>
Change the alt tag for every image you have in your signature. For social media buttons, I like to add the name of the social media platform in the tag.
Next, we’re going to add links to your images. If you have social media buttons, you want your recipient to click on the button and go to your social media page. Or you can add a link to your website from your logo. First, look for the image code you want to add a link to. I’m going to add a link to my Instagram button. The code looks something like this:
<img src=”http://YOURDOMAIN.com/Instagram.jpeg” alt=”Instagram” width=”30″ height=”30″ class=”alignnone size-full wp-image-1609″/>
To add the link, put this code in front of <img src=”:
Then add </a> after the image code. The final product should look like this:
<a href=”www.instagram.com/YOURACCOUNT”> <img src=”http://YOURDOMAIN.com/Instagram.jpeg” alt=”Instagram” width=”30″ height=”30″ class=”alignnone size-full wp-image-1609″/></a>
You can do this for all of the images you want to add a link to.
5b. Style the text in your signature
Now, let’s add some color and different font options to your signature. Look at this guide to see which tags are safe to use in your signature! In the code, find the plain text you added in the table (like your name).
You can style your text by changing the font, color, font size, the letter spacing, you name it. I’m not going to make it too difficult and fancy for my signature. I just want to change the font family, size and color. If you want to style your text, put this code in front of your plain text:
<span style=”font-size:10pt; font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; color:#000000;”>YOUR TEXT HERE</span>
Here are some examples of attributes you can change:
- font-size (use pt)
- font-family (font)
- color (use the hex code)
- font-weight (for example, light, normal, bold)
- font-style (for example, italic, oblique)
If you’re going to change the font family, keep in mind not all mail clients can read fancy fonts. So, say goodbye to your creative blog font. In order for your signature to show up in all different mail clients, use the following font families:
- Trebuchet MS
- Times New Roman
You can use the <span> tag in front of all the plain text you want to edit. Don’t forget to close with the sequence with </span>.
Once you have designed the text and images to your liking, you should save the document as an HTML file (.html extension).
6. Install your signature
After you’re done with your document, you can install your html signature in your email client (Outlook, Apple mail, Gmail etc.).
And that is how you create an email signature in WordPress. Ok, maybe not entirely, but you designed it in your CMS and even did some coding! Did you lose me during steps 5a and 5b? No worries, you can also download the code and add your own images and text:
Part 2 of this tutorial will be on how to install the email signature in different email clients! Because that, my dear nerd squad, is whole different story on its own. Of course I can answer all of your questions regarding installing your email signature, just send me an email: firstname.lastname@example.org.