Table of contents
  1. Creating email signatures for personal emails
  2. Email signature generator tools
  3. How to create an email signature for newsletter emails with Stripo
  4. Wrapping up
How-to
8 days ago

Create an HTML email signature in no time. All possible ways explained

Author
Anton Diduh
Anton Diduh Content writer and video content creator at Stripo
Create an HTML email signature in no time. All possible ways explained
Table of contents
1.
Creating email signatures for personal emails

Most people set up their email signature once, get confused halfway through, and end up with something they're not happy with or skip it altogether. However, an email signature is not only a way to introduce yourself and add a more human touch to your email, but also a great place to include all the necessary contact information, so skipping it seems like a missed opportunity. And the best part is, email signatures are quite simple to create, and in this article, we'll show you all the possible ways. Without further ado, let’s get started.

Creating email signatures for personal emails

If we're talking about email signatures, it's worth covering the basics. Personalized emails will also benefit from a signature, and the best part is that creating one takes no more than a couple of minutes. Every email provider offers the necessary tools. Well, not exactly tools, but simple and straightforward functionality for adding one.

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.

First of all, click on the Settings button marked with the gear icon to open a drop-down menu. After that, click on the See all settings option.

Gmail settings

You’ll see a page with all possible Gmail settings, and for the Signature one, you need to scroll the whole page down.

Gmail settings page

Scroll down until you see a Signature section. That’s where you create your own, and the whole process is pretty straightforward.

Gmail email signature settings

Click on the Create new button and set a name for your signature.

Signature name input field

After that, you’ll have a whole black canvas before you. This is your editing field where you can add your text, images, and links. Besides that, each element to match your needs.

Gmail signature editing window

For example, here’s our basic text-only signature content that we just typed in. For some people, this signature will do fine, but don’t forget that you can upgrade it with the tools panel this small editor provides you.

Gmail signature toolbar

Now, from left to right you can:

  • change your font style;
  • tweak your font size;
  • set the right style like bold, italic, and underline;
  • choose the font color;
  • add links;
  • attach images;
  • set the text alignment;
  • add numbered or bulleted lists;
  • make quotations and set indents.

Tweak it to your heart’s content and create a perfect one for your personal emails.

Edited Gmail signature

Besides that, don’t forget to set your created email signature to the right types of emails. You can set it only for new emails, only for replies/forwards, or both types at the same time.

Options to include signature for different emails

HTML email signature in Outlook.com

Now it is time to talk about the process of adding an Outlook signature to your email. First things first, click on the Settings button.

Outlook settings

After that, go to Account and click on the Signature section. That’s where your signature is created. Click on the Add signature button to open the signature editor.

Outlook signature settings

This editor works pretty much the same way as the Gmail one. Add a name for your signature in a special field, then in a separate one type in your signature copy and edit it using a toolbar above.

Outlook signature editing window

Since the tools you can use to edit your text are the same for the most part, we’ll number the ones that differ in this signature editor:

  • add superscript and subscript texts;
  • set the Justify text alignment;
  • strikethrough your text;
  • tweak the spacing of your signature text;
  • set the text to Right-to-Left and Left-to-Right reading.

As you can see, you have a bit more options to make a unique email signature, so use them to the fullest and create the one that fits your idea. You can also set each signature you create to specific types of emails, like only for new messages, only for replies and forwards, or apply your signature to both types.

Outlook signature settings to include it in different emails

Once you finish editing, just click the Save button. And that’s pretty much it.

HTML email signature in Apple Mail

You can add only textual elements to your email signature in the Apple email provider and add links to them. Now, let’s see how you can do it.

First of all, go to Settings and click on the Signature tab. You’ll see a small window on the right, and that’s where you add your signature text.

Apple Mail signature settings

If you want to add a link to your email signature in Apple Mail, just highlight the necessary piece of text, right-click on it, and paste your link.

Adding links for Apple Mail signature

And here you are, your Apple Mail signature is ready.

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. To create your Yahoo signature, click on Settings, then on Writing email, look for the Signature section. 

This section will have a small editing window, but if you don’t see it, just flip the switch to enable the signature feature.

Yahoo signature settings

As you can see, the whole editor is pretty simple. You can add emojis, work a bit with text style and fonts, set the right alignments and indents, as well as add various lists.

Yahoo signature editing window

Links are also easy to add, as all you need to do is just highlight your text and click on the Link button to paste the one you need.

Adding links for Yahoo signature

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 but has paid plans);
  • HubSpot Email Signature Generator (free);
  • MailSignatures (free and paid);
  • WiseStamp (free but has paid plans);
  • MySignature (free and paid);
  • Newoldstamp (paid);
  • Gimmio (paid);
  • Designhill Email Signature Generator(free);
  • 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 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.  You have three easy ways to do that with Stripo.

Way 1. Using Stripo's prebuilt modules

To see our pre-built email signature modules, click on the Structure & Modules button.

Structure & Modules tab

After that, click on the Modules section and choose Signatures from the drop-down list. That’s where all our signature modules are stored.

Modules tab

Now you can drag and drop any module you like to start editing and designing it to match your needs and overall email look.

Pre-built signature modules

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. Go to the Templates section and choose the Pre-built tab.

Pre-built templates tab

After that, click on the filtering button and in the Type choose Signature, and here you are. All templates made by our designers with a wide variety of email signatures to use.

Pre-built signature templates

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 meet 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 you how to create a simple email signature like this.

Email signature example

First of all, you’ll need a structure with two containers inside. Structure holds containers, and containers hold all of your content. You can drop it from Structure & Modules.

Perfect structure of your email signature

After that, add an Image block on the left and three Text blocks on the right.

Adding Image and Text blocks

To add your image, click on the added Image block and choose it from your device.

Adding image

Once it’s done, your image will be attached. You can make tweaks to its size and radius to make it more suitable for your signature.

Image settings

Now for the Text blocks. Just type in your signature copy inside each block.

Adding texts

If you want to add more text to your signature, don’t be shy to drop more Text blocks.

Adding more text blocks

Now it’s time to tweak your text styles. Settings tab allows you to set Paragraph styles, alignments, indents, and other things related to the whole block.

Tweaking texts

Meanwhile, the Styles tab provides you with tools for more design-wise experiments related to fonts like its exact style, weight, color, and much more. So feel free to experiment to achieve the result you need.

Customizing text design

To make your signature more interactive, you should add links. Attaching links is easy, as you need to highlight the needed part of the text and click on the Link button. After that, paste the link you need into the respective field.

Adding links

All you have to do is tweak paddings and margins both for the whole structure and for each block you dropped inside to make everything look good.

Tweaking paddings and margins

And don’t forget to save your creation as a module. Hover over your signature structure and click on the Save as Module button.

Saving email signature as a module

Give your module a name and click on the Save button. And that’s pretty much it. Now your email signature is saved as a module, so you can reuse it in other emails whenever you want, without the need to redesign it from scratch every time.

Tab for saving the module

Just find it in the Modules section, drop it into your email, and you are all set.

My modules tab

Wrapping up

As you can see, creating email signatures is quite a simple process, and you don't need to have technical knowledge. However, adding an email signature is important to maintain the brand identity, promoting your company, services, or you as a person. With Stripo, creating and adding a signature has never been easier. If you want something reusable across multiple campaigns, save your Stripo signature as a module: you'll only need to design it once.

Create exceptional emails with Stripo
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
0 comments

Stripo editor performs its best on desktop

How about we send you a reminder to test Stripo later on your computer?

I still want to test on mobile