Table of Contents

HTML Template for Emails

Abby Updated by Abby

In order to create a more customized email for our leads, we can use HTML, by using it we'll be able to add our logo, header etc...

To add HTML in the email you'll just select the brackets and then you can add the following, or your own HTML.

Full Body Example

Here's what this example will look like:

Of course, you can add as many paragraphs as you want. I'll add a few in the sample HTML so feel free to delete as many as you don't need

<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="emailbody" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">
<! - Preheader text --> This is preheader text. Some clients will show this text as a preview. </span>
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 5px;">

<! - Here you'll add your image URL, be sure to use a publicly hosted image without a hyperlink and with a valid extension -->
<img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png" alt="Logo Image">

<! - This is the first paragraph, to add more just copy and paste from the beginning to the end of the p tags -->

<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 10px;">This is my email, welcome! </p>

<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 10px;">Here I will put a lot of content so you can read this just as you would any other email. I hope you like it! </p>

<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Here's another paragraph, feel free to delete it, or copy and paste this section to add another one! </p>
</body>

Logo Example

Keep in mind that some email services such as AOL might block HTML, if you'd like to be on the safe side you can use a combination of HTML and regular text, if for example you'd like to display your company logo but don't want to risk that the end user doesn't receive anything.

Here's what you can add

<head> <meta name="viewport" content="width=device-width"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <img src="https://imagizer.imageshack.com/v2/100x75q90/924/mft3SL.jpg" alt="Logo Image"> </body>

Below this you'll be able to type out the body of your email

Here's the result:

How did we do?

Question: Email block

Contact