04 October 2022

How to create an HTML email signature

Anton Diduh
Anton Diduh Content writer & Video content creator at Stripo
Table of contents
  1. How to create an HTML email signature for your personal correspondence
  2. Email signature generator tools
  3. How to create an email signature for newsletter emails with Stripo
  4. Wrapping up
How to create an HTML email signature for your personal correspondence

A professionally made HTML email signature helps to promote a personal and company brand, gather listeners for webinars, sell products, consult, keep the brand identity, and much more. For example, 82% of digital marketers use email signatures for brand awareness campaigns. In order to boost your email campaigns, we decided to put together a special guide on adding an HTML email signature to your personal emails in Gmail, Outlook, Apple Mail, and Yahoo, as well as teach you how to add email signatures to your newsletters using Stripo.

How to create an HTML email signature for your personal correspondence

1. HTML email signature in Gmail

Now, let's start with adding an HTML email signature in Gmail. We'll go through all the needed steps to show you the simple process of adding a signature design.

How to create HTML email signature for your Gmail account:

  • go to settings;

  • then click the “settings” again;

  • at the bottom page, you will see “Signature”;

  • insert image;

  • choose the “small” size;

  • upload images of the social media icons;

  • add links to them;

HTML Signature in Gmail

(Source: Gmail)

  • at the bottom of the page, click Save Changes;

  • done.

I tested my Gmail signature: I sent out messages to different email clients and opened them on various desktop and mobile devices. It worked!

Now your email signatures will be creative and beautiful!

You may also create HTML signatures for your personal or personal correspondence with an external email signature designer.

2. HTML email signature in

Now it is time to talk about the process of adding an Outlook signature to your email.

How to create a professional signature in your Outlook account:

  • go to the "Settings";

  • then choose "View all Outlook settings";

Outlook com email signature

(Source: Outlook)

  • then go to the "Mail" tab;

  • open the "Compose and reply" tab;

  • in a new window, search for the "Email signature" section;

  • enter necessary text;

  • to add social media, upload their icons as regular images;

Settings Signature for Outlook com

(Source: Outlook)

  • highlight each icon and insert respective links;

Adding Links to Signature Outlook

(Source: Outlook)

  • if you want to automatically include this signature in your Outlook email, be sure to click both checkboxes as shown below;

Choosing Where to Include Signatures Outlook

(Source: Outlook)

  • choose "HTML" as message format, or else will only include the textual part of your Outlook signatures with no icons and links;

  • click "Save."

Saving Signatures in HTML Format

(Source: Outlook)

Please be advised that you can add a number of custom signatures to this email client. If you do, you will need to select a signature when sending your personal email.

3. HTML email signature in Apple Mail

You can add only textual elements to your email signature in the Apple email provider. And, of course, you can add a link to it. Now, let’s see how you can do it.

How to create an HTML email signature in Apple Mail:

  • click Mail in the top left corner;

  • then Preferences;

  • enter the Signatures tab;

Setting Customized Email Signature in Apple Mail

(Source: Apple Mail)

  • if you want to add a link to your email signature in Apple Mail, please highlight a necessary piece of text;

  • right-click on it and paste your link.

Adding Link to Signature Apple Mail

(Source: Apple Mail)

Please be advised that you can add a number of signatures to this email client. If you do, you will need to select signature when sending your personal email.

Custom Email Signature for Apple Mail

(Source: Apple Mail)

If necessary, you can edit the HTML signature before sending an email.

4. HTML email signature in Yahoo

Currently, you cannot add photos and images to your email signature in the Yahoo email client. Consequently, no social media icons are allowed to be used either.

However, you can add a link to your own signature in Yahoo Mail.

How to create a custom HTML signature in Yahoo Mail:

  • click the Settings menu icon;

  • enter the Writing email tab;

  • toggle the Signature button;

  • enter your custom signature text;

Create Custom Signature to Email in Yahoo

(Source: Yahoo)

  • paste links.

You can add as many social media links to your custom email signature as possible.

Example of Signature in Stripo

(Source: Email from the Point)

Besides that, you can edit your HTML signature at any time.

Email signature generator tools

In addition to the standard methods we told you about above, you can use the HTML email signature generator tools to quickly create an HTML signature for your email. At the moment, there are quite a few different popular tools on the market:

  • Rocketseed (paid);

  • (free);

  • Hubspot Email Signature Generator (free);

  • MailSignatures (paid);

  • WiseStamp (paid);

  • MySignature (free and paid);

  • Newoldstamp (paid);

  • Gimmio (paid);

  • Designhill (free);

  • Signature Maker (paid);

  • (paid);

  • Email Signature Rescue (paid).

They will easily help you create an email signature template you can use later in the email platform of your choice.

How to create an email signature for newsletter emails with Stripo

So, we told you about the ways to add had signatures to your personal emails. However, what if you need a signature for a global email list. And not ordinary, which everyone has, but custom. In this section, we will show how to create an HTML email signature, aka footer, for HTML newsletter emails with the Stripo email design platform.

There are three easy ways to do that:

Way 1. Using Stripo's prebuilt Modules

Stripo has prepared many ready-to-use Email Signature Modules. 

Choose any, easily customize it, and your signature is ready.

Email Signature Modules Stripo

(Source: Stripo)

Use our prebuilt Modules with email signatures to save time on email production
Join Stripo

Way 2. Using professional email signature templates

For your convenience, we’ve built a number of paid and free email signature templates with various email signature examples.

Pick the best email signature format in our templates to create your own right away

Choose a necessary email signature format, use it in your HTML emails or use it for inspiration and create a new signature from scratch.

Way 3. Building a professional email signature from scratch using Stripo as an email signature generator

If none of the HTML email signature templates we built meets your requirements, you can create one from scratch.

Most importantly, it's not time-consuming at all, and you don't need to know CSS code or have any other technical skills in order to create a signature using Stripo.

We'll show to build a signature similar to the one given below.

Email Signatures _ Building Signatures from Scratch

(Source: Stripo)

To build this email signature design with contact details, you need to:

  • drag a two-column structure in your template;

Email Signature Design _ Dragging Structures into Templates

(Source: Stripo)

  • drag the Image block;

  • upload your image of a necessary shape;

  • into the second container, you add the Image block for the photo of your handwritten signature;

  • below, you pull in a Text block to enter your name. Be sure to set necessary styles in the toolbar;

Email Signature _ Designing Signatures

(Source: Stripo)

  • to add a phone number and site name with icons to your email signature template, you need to drag a Menu block and set the "Icons and Links" menu type;

Links in Email Signatures

(Source: Stripo)

  • upload your custom icons;

  • in the "Item" fields, enter your site name, phone number, etc.;

Email Signature Design _ Menu Blocks

(Source: Stripo)

  • to add links to social media accounts, pull the "Social" block in your template;

  • design it according to your needs;

  • add a link to your social profile;

  • to add the horizontal divider, click the left container with your photo;

  • enable "Border" in the side settings panel;

  • set necessary border style for the "Left" side of this container.

You can also add your company logo if you like.

Designing Email Signature with Stripo _ Adding Borders

(Source: Stripo)

Save your entire email signature for further use

Be sure to save this Module to your personal Modules library to use across future email campaigns.

You’ll just have to pull this email signature into your template and slightly edit design elements if necessary.

(Source: Stripo)

Wrapping up

As you can see, creating email signatures is quite a simple process, and you don't need to know cascade style sheets and have technical knowledge. However, adding an email signature is important to maintain the brand identity, promoting your company, services, or you as a person. And with Stripo, creating and adding a signature has never been easier.

Make your own email signature with the Stripo email design platform
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
Md. Galib Hossain 7 months ago
To see this tutorial, I have just made an Email Signature through stripo. But after pasting the code in Gmail, It informed too long code. Not work finally.
Anton Diduh 5 months ago
Hi. This article is aimed to show how to create a signature without using code or signature generators. If you need a better solution, we have a dedicated email signature generator with full-fledged guide in using it.
Strops Marketing (Strops) 1 year ago
Can I build a nice e-mail signature in Stripo then export the HTML for use in my personal e-mails? Like Apple Mail or Gmail?
Hanna Kuznietsova 1 year ago
Hello, Strops Marketing. Thank you for your question. Yes, you can. We released an email signature generator a few weeks after we'd published this article. The generator is easy to use and has a step-to-step guide. We wish you the best of luck.
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.

Stripo editor

For email marketing teams and solo email creators.

Stripo plugin

For products that could benefit from an integrated white-label email builder.