~~HTML Email Template Documentation.~~
Hello! I hope you're well and healthy. Let's see how you'll add the content of your own to this email template. First thing first you have to use a code editor like [VS code studio] code.visualstudio.com/download), Sublime Text, and Atom to edit this template.
Let's start with Preheader.
<!-- Preheader -->
<div style="font-size: 0px;color: #ffffff;line-height: 1px;mso-line-height-rule:exactly;display:
none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
Add Preheader Text Here (85-100 characters in length)
</div>
<!-- End Preheader -->
Add your custom preheader text by removing Add Preheader Text Here (85-100 characters in length).
Let's continue with changing the logo and nav links section
Logo
<tr>
<td style="padding:0; ">
<table width="100%" style="border-spacing:0; padding-top:15px;padding-right:15px;padding-bottom:0;padding-left:15px;" role="presentation">
<tr>
<td style="background-color: #F0DFCD;padding: 20px 0 5px 0;text-align: center;">
<a href="example.com" target="_blank">
<a href="example.com"><img src="i.ibb.co/mB53XZF/Logo.png" alt="logo" width="125" style="border-width:0;max-width: 165px;border-radius: 3px;"></a>
</a>
</td>
</tr>
</table>
</td>
</tr>
Let's begin by linking your logo to your preferred website by enclosing your link between the href=""
attribute in a
, then change the logo image by putting the hosted URL of your image in the src attribute of the image tag.
Navbar Links
<table class="column " style="border-spacing:0;width:100%;max-width:330px;display:inline-block;vertical-align:top;" role="presentation">
<tr>
<td class="padding px-600-0" style="padding-top:18px;padding-right:15px;padding-bottom:0;padding-left:0;">
<table class="content " style="border-spacing:0;font-size:15px;font-weight:bold;text-align:center;" role="presentation">
<tr>
<td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
<p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" style="text-decoration: none;color: #26292B;">Shop</a></p>
</td>
<td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
<p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" style="text-decoration: none;color: #26292B;">About Us</a></p>
</td>
<td class="padding content" style="padding-top:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:15px;font-weight: bold;">
<p style="font-size:15px;font-weight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" style="text-decoration: none;color: #26292B;">Account</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
The only change that needs to be made, is on the links redirecting to your selected web pages and their corresponding alias, in the a
tag look for the href
attribute and that's where to change the link and the alias representing that link and rename it.
Hero Section
<tr>
<td class="padding-sm" style="padding-top:15px;padding-right:20px;padding-bottom:20px;padding-left:20px; text-align: center;">
<p style="font-size: 25px;font-weight: bold; Margin: 0; color: #26292B; ">25% Off.</p>
<p style="font-size: 25px;font-weight: bold; Margin: 0; color: #26292B; ">Claim Yours Today</p>
</td>
</tr>
<tr>
<td class="padding-sm" style="padding-top:0;padding-right:20px;padding-bottom: 20px;padding-left:20px; text-align: center;">
<p style="font-size: 15px; Margin: 0; color: #26292B;">Don't be left out on the trends. SpacceJKgives you an opportunity to change your look, so you'll leave a good impression wherever you go. Enjoy this offer of 50% Off before it ends.</p>
</td>
</tr>
Change the text on this section by replacing words in the p tag.
Button
<tr>
<td class="padding-sm" style="padding-top:0;padding-right:20px;padding-bottom:40px;padding-left:20px; text-align: center;">
<a class="atag_1" href="example.com" target="_blank" style="font-size: 12px;font-weight: 500;text-decoration: none; color: #26292B;padding:5px 17px;display: inline-block; border: 2px solid #FFFFFF;">
<p style="Margin:0;border: 1px solid transparent; Padding: 10px 20px;">Save 30% Off</p>
</a>
</td>
</tr>