How To Create A Free Email Signature Template (2018 UPDATE)

Share this:

Whether you are an individual or business, an awesome and clickable Email Signature can leave a lasting impression at the end of your email. It just like one business card that will make you stand out in the crowd. We will make the html Signature without any signature template generator.

Don’t overthink it, you don’t need to have any HTML coding skills before creating it, you just need to follow our step by step guide to finish creating your own signature template. And then we will learning how to set up (or change) the Email Signature into your Gmail, Outlook, Office 365, Yahoo, Thunderbird, Mac Mail, Hotmail or just add signature to your web mail only. Finally, we will try some free email signature generators for somebody who want to whip up his(her) own email signature in very short time.

1. Get Our Free Signature Templates

Our web UX/UI Designer had designed some free Email Signature Examples for you, they are simple but professional, and they fit any type of business or individual. All our templates are royalty free for use in both personal and commercial projects, you should modify these free templates to fit into your project, you can download them below. [if you don’t want to edit it yourself, you can get a pay support from our web Designer here. ]

email signature temples (1590 downloads)

email signature template 01email signature template 02 email signature template 03 email signature template 04 email signature template 05 email signature template 06 email signature template 07

2. Create A Email Signature Template From Scratch

In this section, we will talk about the first one, its final look as shown in the below picture. Before we get started, we need install an essential text editor on our PC(or Mac) to edit the Signature HTML code. I strongly recommend Notepad++ (an open source editor on Windows) and Sublime Text (both available on OS X and Windows). Of course you can choose other one you feel well, such as UltraEdit, TextMate(OS X), Coda2(OS X).

For clarity, We mark the place where we need to be modified or replaced from No. 1 to No. 7, both in the final email signature template picture and the html code picture, there is a One-to-One correspondence between them. You can ignore the other parts of the signature template html code except these marked.

email signature design structures
email signature design structures

Note: Please edit the signature html code follow the steps listed below, remember to save the file after editing them. If you have any questions, you can comment at the end of this post.

Email signature example html code
Email signature example html code

1. In Picture One, we use a clearly contrasting color to underline the signature logo link(http://todolib.com/wp-content/uploads/2017/05/logo.png) which marked as NO.1(➀). You should replace the logo image with your own, the logo image must be perfectly square (height:width=1:1), meaning that the photo itself is square, for example: 800px:800px, otherwise the layout of the Email Signature will be disrupted. You have to host your logo image somewhere publically available, such as imgur, dropbox, flickr, Google Photos, imgbb or some other free image hostings you like.

 

email signature example html code picture one
Email signature example html code Picture One

The images URL must end with .jpg or .png( e.g. http://example.com/logoImage.jpg, http://example.com/logoImage.png), don’t use URLs like this(http://example.com/str0dgz5kb), it will make Email Signature not work. If you logo image URL is “https://i.imgur.com/logoimage.png”, just replace the signature template default logo URL with it in the html code. The final code should be like this <img src=”https://i.imgur.com/logoimage.png” style=”border-radius: 50%; border: solid 2px #d3d3d1;” alt=”logo” height=”80″ width=”80″> .

2. In Picture Two, you need to replace the signature name and title(which had been underlined and marked as NO.2(➁)) with you own. For example, your name is “Tom” and title is “CEO”, the only work you need to do is chang “David K. Williams” to “Tom” and change “Marketing manager” to “CEO”, that’s all.

 

Email signature example html code Picture Two
Email signature example html code Picture Two

3. In Picture Three, we only need to replace the signature template default company name “Todolib, Inc.”(which had been underlined and marked as NO.3(➂)) with “your company name”.

Email signature example html code Picture Three
Email signature example html code Picture Three

4. In Picture Four, we need to replace the signature template default address “7890 Fairmont Avenue Armstrong, todolib.123456″(which had been underlined and marked as NO.4(➃)) with “your address” .

Email signature example html code Picture Four
Email signature example html code Picture Four

5. In Picture Five, we need to change two things(which had been underlined and marked as NO.5(➄)), the telephone number and the phone number. For example, if you telephone number is (123)123123, you should change “href=”tel:4561237890″” to “href=”tel:123123123″” and change “(456) 123-7890” to “(123)123123”. The “href=”tel:123123123″” will make the telephone number clickable to call when your Windows(or OS X) has skype installed or you open the Email Signature in your phone directly. The phone number is the same as above.

Email signature example html code Picture Five
Email signature example html code Picture Five

6. In Picture Six, we should replace the signature template default email address and web site URL (which had been underlined and marked as NO.6(➅))with your own. For example, if your mail address is tom@yourmail.com and web URL is website.com, you need to change “mailto:email@todolib.com” to “mailto:tom@yourmail.com” and change “email@todolib.com” to “tom@yourmail.com”. Likewise, we will change “https://todolib.com” to “http://website.com” and change “todolib.com” to “website.com”.

Email signature example html code Picture Six
Email signature example html code Picture Six

7. In Picture Seven, we need to change social media links and social media icons(which had been underlined and marked as NO.6(➆)) to your own. For example, if your facebook link is “https://facebook.com/youfacebookname”, you should change the signature template default facebook social media link “https://facebook.com/todolib” to “https://facebook.com/youfacebookname”, the other social media links are the same as facebook.

Email signature example html code Picture Seven
Email signature example html code Picture Seven

In summary, we only need to modify these who were underlined and marked, and without having to care about other parts of the template html code. If you follow the steps one by one, Congratulations! you now have a good looking and professional email signature.

3.1 How To Add Or Change An Email Signature In Gmail(Inbox)?

1. First of all, you should open the email signature html file with your web browser, I recommend Chrome and Safari, just double click on the html file!

2. Right-click to choose [Select All] or use shortcut Ctrl+A( Mac: ⌘Command-A ), then choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy the highlighted email signature.

add email signature in gmail picture 01
add email signature in gmail picture 01

3. Clicking on the Settings Gear Icon [⚙] at the upper right of your Gmail, select [Settings] from the dropdown menu and go to it.

add email signature in gmail picture 02
add email signature in gmail picture 02

4. Go to [General tab], scroll down to the “Signature” section, make sure the checkbox is selected under “Signature” section. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the signature into the text box.

add email signature in gmail picture 03
add email signature in gmail picture 03
add email signature in gmail picture 04
add email signature in gmail picture 04

5. Scroll down to the end of the Settings page, click [Save Changes] to save the signature. Your signature will now appear at the bottom of email when you compose a message.

add email signature in gmail picture 05
add email signature in gmail picture 05
add email signature in gmail picture 06
add email signature in gmail picture 06

6. Other: If you are using Google inbox, go to the main menu [☰] In the top left, then scroll down to the left side of the inbox and choose [⚙ Settings ].

7. Right-click [⚙ Settings ], Select Signature when you see the setting menu pop up, make sure the signature setting is switched to On.

8. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the email signature into the text box, click [DONE] to save the signature.

add email signature in gmail picture 07
add email signature in gmail picture 07
add email signature in gmail picture 08
add email signature in gmail picture 08

3.2 How To Add Or Change An Email Signature In Outlook(Hotmail)?

1. Opening the signature html file with your web browser(such as Chrome, Firefox, Safari, IE).

2. Right-click to choose [Select All] or use shortcut Ctrl+A( Mac: ⌘Command-A ), then choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy the highlighted signature.

change email signature in hotmail picture 01
change email signature in hotmail picture 01

3. Click on the Settings Gear Icon [⚙] at the upper right of your Outlook(hotmail), select [Options] from the dropdown menu and go to it.

change email signature in hotmail picture 02
change email signature in hotmail picture 02

4. scroll down to the “Layout” menu in the [Options] page, click on it and choose [Email signature] section (or select [Shortcuts -> Add an email signature] ).

5. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the email signature into the text box.

change email signature in hotmail picture 03
change email signature in hotmail picture 03
change email signature in hotmail picture 04
change email signature in hotmail picture 04

6. click [Save] to save the signature, you will see the signature when you compose a new message.

change email signature in hotmail picture 05
change email signature in hotmail picture 05
change email signature in hotmail picture 06
change email signature in hotmail picture 06

3.3 How To Add Or Change Signature In Yahoo Mail?

1.Open your Yahoo mail, Click on the Settings Gear Icon [⚙] ,select [Settings] from the dropdown menu.
2. Click [Accounts] from left of Settings panel.
3. Click Yahoo account that you are currently using.
4. Scroll down, select [Append a signature to the emails you send].
5. Copy the email signature and Paste it into the Signature field.
6. Click Save button to save the signature.

3.4 How To Add Or Change An Email Signature In Mac Mail?

1. Open the mac mail and then choose [Mail] -> [Preferences].

add html email signature in mac mail picture 01
add html email signature in mac mail picture 01

2. Click [Viewing] panel, make sure the “load remote content in messages” section is selected.

add html email signature in mac mail picture 02
add html email signature in mac mail picture 02

3. Click [Composing] panel, select “Rich text” from [Message Format].

add html email signature in mac mail picture 03
add html email signature in mac mail picture 03

4. Click the plus [+] icon to create a new Apple Mail signature placeholder(Signature #1).

add html email signature in mac mail picture 04
add html email signature in mac mail picture 04

5. Select an account in the left column, and click the Choose Signature pop-up menu to choose the signature you had created In the previous step, then quit you Apple Mail.

6. In your OSX finder, choose [Go] –> [Go to folder]

add html email signature in mac mail picture 05
add html email signature in mac mail picture 05

7. Type in the file path “~/Library/Mail/V3/MailData/Signatures/” in Mac OS X EL Capitan 10.11, “~/Library/Mail/V4/MailData/Signatures/” in macOS sierra 10.12 and “~/Library/Mail/V5/MailData/Signatures/” in macOS High Sierra 10.13, you should be inside the [Signatures] folder now.

add html email signature in mac mail picture 06
add html email signature in mac mail picture 06

8. In the [Signatures] folder, open “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mailsignature” file and your email signature html file(xxxx.html) with text editor(I recommend Sublime Text) at the same time.

add html email signature in mac mail picture 07
add html email signature in mac mail picture 07

9. Replace the placeholder with your own html signature, use shortcut [⌘Command-A] to select the signature html source code.

add html email signature in mac mail picture 08
add html email signature in mac mail picture 08

10. Use shortcut [Mac:⌘Command-C] to copy them, then delete everything below the “Mime-Version: 1.0” line.

add html email signature in mac mail picture 09
add html email signature in mac mail picture 09

11. Use shortcut [Mac: ⌘Command-V] to paste the html source code into it.

add html email signature in mac mail picture 10
add html email signature in mac mail picture 10

12. Right-click “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mailsignature” to choose [Get info].

add html email signature in mac mail picture 11
add html email signature in mac mail picture 11

13.  click [General] panel [▸] to check the Locked button.

add html email signature in mac mail picture 12
add html email signature in mac mail picture 12

14. Open Mac Mail again, due to security reasons, you won’t be able to see the images in the Signature Preferences Pane, but when you create a new message, everything looks as it should.

add html email signature in mac mail picture 13
add html email signature in mac mail picture 13
add html email signature in mac mail picture 14
add html email signature in mac mail picture 14

3.5 How to add or change an email signature in Microsoft Outlook 2016 for Mac?

Important Note: 

1. In Outlook for Mac 2016 15.22+, Microsoft replaces the Webkit with Word Rendering Engine to render emails, we can’t add email signature as usual, if you still want that, you may need visit [here] to get help. We use Microsoft Outlook 2016 for Mac 15.14 on this post.

2. If you get message “Outlook can’t upgrade your database” when first launching Outlook app, I recommending visiting [upgrade outlook database] to fix this problem.

1. Open the Microsoft Outlook, choose [Outlook] -> [Preferences].

change email signature in outlook picture 01
change email signature in outlook picture 01

2. Under Email, click [Signatures].

change email signature in outlook picture 02
change email signature in outlook picture 02

3. Click Add [+] icon to create a new signature.

change email signature in outlook picture 03
change email signature in outlook picture 03

4. Opening the email signature html file with your web browser, copy the email signature, and then Paste your signature into signatures box.

change email signature in outlook picture 04
change email signature in outlook picture 04

5. Under [Choose default signature], select the email Account for which you’ll set a default signature.

change email signature in outlook picture 05
change email signature in outlook picture 05

6. Open a new message, you will see it there.

change email signature in outlook picture 06
change email signature in outlook picture 06

3.6 How to install or change an email signature in Thunderbird?

1. Open the Thunderbird, click on the menu [Tools] and select [Account Settings] from the dropdown menu.

add email signature to Mozilla Thunderbird picture 01
add email signature to Mozilla Thunderbird picture 01

2. Click on your email account name e.g. signaure@todolib.com and then you can see the [Signature text] box under the account section.

add email signature to Mozilla Thunderbird picture 02
add email signature to Mozilla Thunderbird picture 02

3. Open the signature html file and Right-click to choose [Show Page Source].

add email signature to Mozilla Thunderbird picture 03
add email signature to Mozilla Thunderbird picture 03

4. Use shortcut Ctrl+A( Mac: ⌘Command-A ) to select the html source code, finally, right-click to choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy them.

add email signature to Mozilla Thunderbird picture 04
add email signature to Mozilla Thunderbird picture 04

5. Place your cursor inside the [Signature text] box, Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the html source code into it.

add email signature to Mozilla Thunderbird picture 05
add email signature to Mozilla Thunderbird picture 05

6. click [OK] to save the signature, you will see the signature when you compose a new message.

add email signature to Mozilla Thunderbird picture 06
add email signature to Mozilla Thunderbird picture 06

4. Get a free online email signature generator

If you just want to get a simple email signature and create it in minutes, there is a lazy way to finish that. You can search a lot of signature generator sites by using Google, many of them are free, but for some other sites, you need to pay extra fees for full features.

I recommend four Generators: [exclaimer, hubspot, htmlsig,  mail-signatures]. In the Signature Generator Page, enter your personal and corporate information which you would like to appear in signature, some of them are providing multiple templates that have different layouts, fonts, colors, custom logo, you can choose the one you like to customize your signature. if you finished filling out the form required above to populate your signature, simple click ” Create Signature” to generate an email signature.

5. Get a Premium professional email signature

Want a unique personalised and customized email signature? or convert your PSD, SKETCH, AI, JPG, PNG into a working responsive html signature? Fortunately, I think we can meet you, our professional web designers can help you do this job. You will get the best and lowest-cost choice for your needs, so GET IN TOUCH now…

Note: This post Updated 02-25-2018

 

Share this:

Leave a Reply

css.php