How_to_Design_a_Signature_for_Your_Emails___Cover_Image___Stripo
timer ~ 7 min read
5959 views
rate it
04 October 2022

How to create an HTML email signature

Stripo / Blog / How to create an HTML email signature

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 a professional 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 Outlook.com

Not 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 Outlook.com 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);

  • Signature.email (free);

  • Hubspot Email Signature Generator (free);

  • MailSignatures (paid);

  • WiseStamp (paid);

  • MySignature (free and paid);

  • Newoldstamp (paid);

  • Gimmio (paid);

  • Designhill (free);

  • Signature Maker (paid);

  • Signatu.re (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.

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

Strops Marketing (Strops) 1 month 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 commented to Strops Marketing (Strops) 1 month 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. https://stripo.email/signature-generator-tool/ We wish you the best of luck.

You might be interested in

previous next
banner9
06 June 2022 · 15 mins read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
best-fonts-for-email-cover-image-stripo
24 May 2022 · 18 mins read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 mins read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 mins read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s