This guide will walk you through the process of creating an HTML email signature for Gmail, starting from the basic layout and ending with tweaking its styles. We’ll show you how to add your signature to Gmail, as well as give you a useful tool for a fast email signature design process.
According to statistics, 89.9% of email users use one signature in their emails, and 8.6% use more than one email signature or two different ones in their newsletters. We often see signatures in promotional emails, work newsletters, business emails, and other scenarios. This shows that now is the time to learn how to create your own signature from scratch. We'll show you all the things you need to make your own professional email signature and HTML code. Let’s get into it.
Why should your business email have an HTML email signature?
First of all, let's deal with the question of why you should have a professional email signature for your newsletters. Beyond just being a simple way to organically close an email, signatures offer several benefits that you can use to achieve your goals.
An email signature helps maintain brand identity
The first thing that comes with an email signature to your emails is consistent branding. An email signature that complements the overall design of your email template would create a new, stylish look to your emails. Moreover, a consistent signature design that fits seamlessly with the rest of your email visuals would help maintain the overall visual style of your brand in your emails.
An HTML email signature can be used as a lead generation tool
Style is good, but we send emails to gain an audience and clients. As strange as it may sound at first, an email signature is a great lead generation tool that should not be neglected. Signatures often contain CTA elements, which can be additional sources of leads. For example, Lawyers can place a CTA in their signatures to sign up for a consultation. Meanwhile, popular influencers need signatures that include an invitation to discuss collaboration. Therefore, the usefulness of these signatures are limited only by imagination.
Gmail HTML signature is a great field for social media integration
Finally, these days, it’s difficult to name a company or business that doesn’t have a social media account. Everyone needs additional platforms for communicating with the audience and promoting services, and social networks are now full-fledged sources of virality, brand awareness, and leads. The only hitch is that they need to be promoted, and customizing email signatures is a great way of achieving this purpose. How many times have you seen signatures of various brands where cute icons of social networks are lined up in a row, immediately redirecting you the corresponding network upon clicking the icon? You can do the same yourself.
Step-by-step guide on creating a Gmail HTML signature
Now, let's get down to business, namely creating your email signature template. We'll walk over each step and HTML code piece you need to create a Gmail signature for this email client.
Basic layout of the email signature
First, we need to make a general outline of the future signature using HTML code. In our example, we’ll create a basic signature that will consist of contact details (name, job title, phone number, and email), photos, and links to social networks. At this stage, we will mark the styles in the code and where the main content of the signature will be located.
<html>
<head>
<style>
/* Optional inline styles for customizing the look */
.email-signature {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.email-signature img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.email-signature a {
text-decoration: none;
color: #1a73e8;
}
.social-icons img {
width: 20px;
height: 20px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="email-signature">
<!-- Content will go here -->
</div>
</body>
</html>
Since our Gmail signature is pretty simple, here we have only two things to discuss, so you have an understanding, why this email signature layout looks like that.
We have a <style></style> so you can edit the looks of your email signature like fonts (font-family; font-size; color; line-height;) text decorations for hovering effects, and others if you need them (text-decoration), options for tweaking images (everything within email-signature img {}), as well as the social media icons (everything within social-icons img {}).
The main content of our email signature, like texts, images, and links, will go inside div class="email-signature".
Adding contact information
The next step is to add all the contact information our email signature needs, such as name, job position, company name, personal phone number, and email address. The code piece for this section will look like this:
<div class="email-signature">
<p><strong>John Doe</strong><br>
Software Developer<br>
Example Corp<br>
<a href="tel:+1234567890">+1 (234) 567-890</a> | <a href="mailto:john.doe@example.com">john.doe@example.com</a>
</p>
</div>
The whole code piece goes to the dedicated section that we created in advance when building the whole signature layout. This section is pretty basic, but its nuances should be discussed, including why phone numbers and email addresses are created with href, which is usually used for links. The answer is simple: Creating your contact information with link functionality allows recipients to contact you quickly. Clicking on the phone number link will open a dialer with your number prefilled. The email address link opens your default email client and creates an email draft with a filled email address field.
Keep in mind that the content used in this section only serves as an example. You need to enter your own information.
Adding a profile picture
It's hard to imagine an HTML email signature without a profile picture, but it's not that hard to add it to your code. It's a simple code line that goes to the same section as the previous one:
<div class="email-signature">
<p>
<img src="https://www.example.com/profile.jpg" alt="John Doe">
<strong>John Doe</strong><br>
Software Developer<br>
Example Corp<br>
<a href="tel:+1234567890">+1 (234) 567-890</a> | <a href="mailto:john.doe@example.com">john.doe@example.com</a>
</p>
</div>
Let’s quickly break down this piece of code. For instance, src="https://www.example.com/profile.jpg" is needed to automatically pull in your profile picture from an external source, so you don’t have to manually attach your image or company logo each time you send your email. Instead of our example URL, paste your own URL image address. Meanwhile, the alt attribute is standard for describing images and displayed when the image does not load. Thus, it is important that recipients know how the image in your signature is supposed to look like.
Adding social media links
Now it's about time to add those precious social media links to promote your brand. As mentioned earlier, these links appear as small media icons that will lead recipients to the corresponding social media pages when clicked on. Here’s how the code piece will look:
<div class="email-signature">
<p>
<img src="https://www.example.com/profile.jpg" alt="John Doe">
<strong>John Doe</strong><br>
Software Developer<br>
Example Corp<br>
<a href="tel:+1234567890">+1 (234) 567-890</a> | <a href="mailto:john.doe@example.com">john.doe@example.com</a>
</p>
<div class="social-icons">
<a href="https://www.linkedin.com/in/johndoe">
<img src="https://www.example.com/linkedin-icon.png" alt="LinkedIn">
</a>
<a href="https://twitter.com/johndoe">
<img src="https://www.example.com/twitter-icon.png" alt="Twitter">
</a>
</div>
<p><a href="https://www.example.com">Visit my website</a></p>
</div>
Each link is a separate code piece that looks exactly like the one needed to add profile images, except for the href line made for each image. As you may have already guessed, it is necessary to add the links to your social media networks so that when recipients click the icon, they are transferred to the corresponding page.
Tweaking styles
Now, let's talk about how you can change the look of your email signature by tweaking its styles section. This section looks like this.
<style>
/* Optional inline styles for customizing the look */
.email-signature {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.email-signature img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.email-signature a {
text-decoration: none;
color: #1a73e8;
}
.social-icons img {
width: 20px;
height: 20px;
margin: 0 5px;
}
</style>
First of all, you can change the font of your whole signature by adding your own to the font-family line. The same goes for font-size, color, and line-height, where you can paste font px, color code number, as well as the line height number to change the basic looks of your Gmail signature texts.
Meanwhile, .email-signature img is needed for tweaking the looks of your Gmail HTML signature photo:
- weight and height in px for changing its dimensions;
- border-radius in % to make your image more rounded or square-shaped;
- margin-right in px to change the position of your photo.
The text-decoration option was discussed earlier. It is needed for different effects of your texts, and you can change the colors of these effects (for example, make hovering effects in various colors).
The last but not least is .social-icons img, responsible for your social media icons' look. You can:
- change the width and height in px;
- set the margin around icons also in px.
And that's pretty much it. These options seem pretty basic at first glance, but they do the job if you need to make your signature in Gmail more unique.
Full Gmail HTML signature code
Once you add all the components of your Gmail signature together, the whole email signature code will look like this.
<!DOCTYPE html>
<html>
<head>
<style>
.email-signature {
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
line-height: 1.5;
}
.email-signature img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.email-signature a {
text-decoration: none;
color: #1a73e8;
}
.social-icons img {
width: 20px;
height: 20px;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="email-signature">
<p>
<img src="https://www.example.com/profile.jpg" alt="John Doe">
<strong>John Doe</strong><br>
Software Developer<br>
Example Corp<br>
<a href="tel:+1234567890">+1 (234) 567-890</a> | <a href="mailto:john.doe@example.com">john.doe@example.com</a>
</p>
<div class="social-icons">
<a href="https://www.linkedin.com/in/johndoe">
<img src="https://www.example.com/linkedin-icon.png" alt="LinkedIn">
</a>
<a href="https://twitter.com/johndoe">
<img src="https://www.example.com/twitter-icon.png" alt="Twitter">
</a>
</div>
<p><a href="https://www.example.com">Visit my website</a></p>
</div>
</body>
</html>
You can use this code however you like. Train yourself in coding your own Gmail signature, modify it to match your needs, or use it straight away for your own email newsletters.
Adding your HTML code to Gmail
The final touch is adding your signature to your Gmail account. We’ll show you how to add the code you created. It’s the same easy process as that used in creating your standard Gmail signature.
- log in to your Gmail account;
- click on the settings gear icon to open Gmail settings;
- after that, click on the See all settings button to open the advanced settings window;
- as you have transferred to the advanced settings window, the General section will appear by default, so you need to scroll down to the Signature section, where all email signature settings can be adjusted;
- click on the Create new button;
- name your signature and click the Create button.
Now, the important thing you need to know is that Gmail doesn’t support raw code in its email signature settings, so you can’t just paste your whole email signature code and call it a day. To add your created signature, you have to make small workarounds.
Open any text editor or word processing software, such as Notepad, on your device, and paste the whole email signature code there.
After that, save it as an HTML file on your computer. You can simply change the file extension from .txt to .html, and that will do the job.
After that, open this file. You'll see a new browser tab with your email signature how it will look like. Basically, you “rendered” your email signature code in your browser.
Important note: Your signature will have all the images and other data, as we created this guide using our example code, which contains fake image links and information.
Now, let’s get back to adding your signature to your Gmail account:
- just copy your rendered signature and paste your email signature template into this window;
- after that, scroll to the bottom of this section and click Save changes.
Voilà, you have your new signature set up in Gmail. Each of your new messages will now have your set email signature in Gmail that you created from scratch. This approach works for both desktops and the Gmail mobile app.
From now on, all Gmail messages you compose will have a fancy signature that is visible to all Gmail inbox users. The signature also provides an option to engage with it by clicking on the contact information links or social media icons.
Important note: If you have multiple signatures, set the right one for both new emails and replies in the Signature default settings.
How to create an HTML email signature without coding skills?
Not everyone has the knowledge and experience of writing HTML codes to create email signatures. Let’s face it, sometimes even with experience, coding a signature from scratch is simply not something we desire to do. It is precisely for this reason and to make the lives of marketers and ordinary email users easier that many email signature generators are made available on the market. One of these is our signature generator from Stripo.
Our free email signature generator is a separate product in our ecosystem. This means that you don’t need to have a Stripo account to use it. However, we recommend registering, as this provides access to more convenient options for creating your professional signature).
The main idea of this email signature editor is that you don't need coding or design skills to create your new signature. All you need to do is pick from the free email signature templates, fill in the fields corresponding to the personal details you want to include in your signature in Gmail, tweak the colors and fonts, and you’re done! We’ll then send you your email signature to your email account. The email signature can be automatically appended to your emails using the guide presented earlier. You can then start using it in your newsletters and emails.
For example, you can pick from four different pre-defined email signature templates that suit your needs the most.
Once picked, you need to enter the personal information like your name, job title, and more in the corresponding fields.
All information you enter is immediately displayed in the email signature preview, so you can see how it will look at the end of the creation process.
Keep in mind that the photo and logo must be added as URL links to these images. You can save them anywhere you want, but our generator must have access to these images via URL. Besides that, images must be under 3 MB in size.
When basic information is set, it’s time to add contact information to your email signature. The process is the same, as you need to fill in the needed input fields.
Important note: If you don’t need (or don’t want) to show some information, you can always turn off the switch near the corresponding input field that is responsible for including or excluding information from the email signature.
The finishing touch in the email signature creation process is turning off the link to our website (or you can leave it, we don’t mind, seriously), and it’s done.
Enter your email address in this input field so we can send you your created email signature.
You’ll receive an email with a link for downloading the HTML file with your email signature, which you can then add to your Gmail using the process we explained earlier.
Wrapping up
We’ve made this guide to make the life of marketers much easier, and those who don’t know the code well could easily create email signatures in no time. By following our guide, you can make and add your own signature in Gmail app, enhancing the appearance of your newsletters with this beautiful piece of design. However, if you don’t want to code at all, you can always use our email signature generator for free to create your own email signature that suits your needs.
0 comments