Gmail has some great functionality but one thing I never liked was the plain email signature .. so I finally did something about it and I’m sharing it with you. Here’s how to make a stylish signature for your free Gmail account. Firstly you need to make a stylish signature using HTML. Secondly, you need to add that to Gmail and this was my sticking point until I found this article: Gmail Setup For Advanced Custom Signatures by Jaime Contreras.
This is how my old signature used to look:
___________________________________________
Photographer & Designer in York, UK
www.cathieheart.com
www.theheartsdesign.com
@cathieheart
Still, as email signatures go, it was better to have one consistent signature than no signature at all! So let’s help you make your Gmail signature better too.
First Phase – Signature Design
First .. you do need to know a little bit about HTML if you wish to make something look good within your signature beyond making text bold or larger. Not to fear I’ve got three designs for you to copy and edit your content into. All you need to do is copy the code into your notepad and edit the content to your details. If you have a business logo, place that into the img src code.
Clean & Simple
Grab the code for this design on CodePen: Clean & Simple
Professional Block
Grab the code for this design on CodePen: Professional Block
Split Colour
Grab the code for this design on CodePen: Split Colour Design
This colourful split design is my new email signature. I am so much happier with it as it clearly shows my two businesses, eventually I’m going to add social media logo and links in time but for now, this is so much better than the old style I shared at the beginning.
How to put your own logo in the signature.
Within the code is a part that looks like this:
<img src="https://www.cathieheart.com/BioPic-CathieHeart.png" alt="Cathie Heart" width="120" height="120">This is the code that finds and put the logo into the signature. The src is the URL where the image is stored. Upload your image to your website or image sharing space like Flickr and grab the URL of where the image is and paste it into this code src between the two ” “. Change the width and height to match the size of your image, I would suggest no bigger than 200 pixels for a signature.
Second & Final Phase – Putting it into Gmail Signature.
This part I learned from this article here: Gmail Setup For Advanced Custom Signatures by Jaime Contreras, its a great article with snapshots. Go visit to follow the instructions with images, I’ve done a simple text prompt below. It’s seven simple steps and soon you’ll have a gorgeous new email signature.
Step 1 – Go to Gmail Settings via the Cog.
Step 2 – Scroll down to the signature block.
Step 3 – Right-click in the signature block, then click Inspect.
Step 4 – This should take you directly to the aria-label=”Signature” div, right-click and then click ‘Edit as HTML’.
Step 5 – Paste in your HTML code, click out of the HTML window.
Step 6 – Within the signature block in Gmail there is a blank paragraph right at the top, click on that space and add a new paragraph / line by hitting enter and then remove it by clicking delete.
Step 7 – Save and you’re done.
The reason for adding and then deleting a line in Step 6 is so that Gmail recognises the new HTML code you’ve added. Click save and you have a brand new boss signature to show off you in your business.
A great email signature is a subtle nod to being professional, something we subconsciously see and respect as a good quality in a business.
0 Comments