Custom Email Signature

This is the ultimate guide for you if you want to take your email signature to the next level! 💯

Tools

When it comes down to the tools for editing this template you can use like

Windows Notepad
Adobe Dreamweaver (what I am using)
Notepad++
etc… (anything that allows you to edit text really)

Other things you may need

All of your social links handly, such as instagram.com/designwithphoenix
Your image hosted externally you can use (Imgur, Google drive set to public sharing, using your own website logo that you have it hosted on, rip things from google images, what ever you find you can use basically)

How to use your website’s logo to host it & bring into to be used in your email signature

Go to whatever website you want to use, it could be your own, it could be someone else, even a corporate company website you work with for a company email signature.
Once your there just right click, select “inspect element”

Look for where it begins to say “src="https://….”

Right click the blue link then, press “Edit Attributes”

Highlight everything up until .png, .jpg, .webp and then your should be good.

This is our logo we can then use in the signature. We have now found the source image domain where its hosted, basically on a server/ other computer where it can be pinged.

Template

Anywhere where you see brackets being used make sure you remove them, or you code may not work correctly.

Making it

Just go through the template I have created and you will see slowly but surely what to fill in. I have used html comments to try and help point out and like label things easily.

Understanding different html targets

Attribute Values:

_blank: It opens the link in a new window.
_self: It opens the linked document in the same frame.
_top: It opens the linked document in the full body of the window.
framename: It opens the linked document in the named frame.

<a href="https://www.designwithphoenix.com" target="_blank">Visit Design With Phoenix Website>

“_blank” This Code snippet is designed now so that if you were to click it from a webpage it would open up in a new tab for the users who click it.
“_self” Just means it doesn’t open in a new tab and would just take to a completely new page as a type of redirect. Think of it as if you were locally shopping in the city of let’s say new york on a street. When you go into this place to click this specific type of link it would be like instantly deporting them to china. 900 feet up off of the ground without any warning and with out and sense of direction to get back to new york where they first entered in from. thank god for the back button in browsers in these modern times we live in.
“_top” This would be a command to open up a pop-up window that would be displayed up and on top and overlaid of what the user is seeing.
“framename” This briefly opens up a new tab but then also a file explorer window to like download a file.

Applying it

Now that you have completed your new fancy email signature your going to want to save it where you can easily access it.

Remember where you saved it? Now just open it with Chrome/Firefox/Safari/Microsoft Edge Locally on your computer and you with then be ready for the next step.

Just highlight everything on the page by doing Ctrl + A/ Command + A and you will be basically selecting everything on your screen.

Do Ctrl + C/ Command + C to copy

Go to Gmail Settings which is a Cog wheel in the in the top right area normally.