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 section Before inserting the logo, you must host your image on IMGBB.

<tr>
   <td style="padding:0;">
     <table class="darkmode_table" width="100%" style="border-spacing:0;" role="presentation">
        <tr>
          <td class="darkmode-bg" style="background-color:#fafdfe;padding: 20px 0 5px 0;text-align: center;">
             <a href="example.com" target="_blank"><img src="i.ibb.co/mB53XZF/Logo.png " alt="logo" width="125" style="border-width:0;max-width: 165px;border-radius: 3px;"></a>
          </td>
       </tr>
    </table>
  </td>
</tr>

Let's start by linking your logo to your preferred website by enclosing your link between the href="" tag, then change the logo image by putting the hosted URL of your image in the src attribute of the image tag.

Navbar Links

<tr>
   <td class="padding content" style="paddingtop:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:82px;font-size:15px;font-weight: bold;">

     <p style="font-size:15px;fontweight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" class="atag" style="text-decoration: none;color: #676868;">NEW</a></p>

   </td>

   <td class="padding content" style="paddingtop:10px;padding-right:0;padding-bottom:0;padding left:0;width:100%;text-align:center; width:82px;font-size:15px;font-weight: bold;">

     <p style="font-size:15px;fontweight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" class="atag" style="text-decoration: none;color: #676868;">MEN</a></p>

   </td>

<td class="padding content" style="paddingtop:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:82px;font-size:15px;font-weight: bold;">

   <p style="font-size:15px;fontweight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" class="atag" style="text-decoration: none;color: #676868;">WOMEN</a></p>

  </td>

   <td class="padding content" style="paddingtop:10px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:82px;font-size:15px;font-weight: bold;">

     <p style="font-size:15px;fontweight:bold;Margin:0;display: inline;"><a href="example.com" target="_blank" class="atag" style="text-decoration: none;color: #676868;">KIDS</a></p>

   </td>
</tr>

In this section, the only change that needs to be made are 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 you'll the alias representing that link and rename it.

<td class="darkmode-bg" style="background-color: #BC1A53!important;padding: 10px 0 10px 0;textalign: center;">

   <p class="atag" style="font-size:15px;Margin:0;display: inline; text-align:center;color: #ffffff;">LIMITED TIME OFFER · DON'T MISS OUT</p>

</td>

If you need to make changes to the text in this section replace the text enclosed with the p tag.

Hero Section

<td background="i.ibb.co/DQ5Ss7z/Hero.jpg" width="600" height="329" style="backgroundposition: center top; background-attachment: fixed; padding: 15px 15px;">
      <!--[if (gte mso 9)|(IE)]>
           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:330px;">
          <v:fill type="tile" src="i.ibb.co/DQ5Ss7z/Hero.jpg" />
           <v:textbox inset="0,0,0,0">
      <![endif]-->

Change the background by replacing the current background image link with a new one and also don't forget to replace it also in the src attribute of the v tag for outlook support.

<td align="center" style="padding-left: 10px;padding-right: 10px;padding-bottom:0px;">
     <p style="Font-size: 40px; color: #CB4F7A;Margin: 0;;Font-family: 'Kaushan Script';">EXPLORE </p>
     <p class="atag" style="Font-size: 25px; color: #676868;Margin: 0px 0 5px 0; Font-family: 'Kaushan Script';">NEW DESIGNS </p>
     <p style="Font-size: 25px; line-height: 20px; color: #CB4F7A;Margin:0 0 5px 0;">ENJOY $15 OFF</p>
     <p class="atag" style="Font-size: 20px; color: #676868;Margin:0;">EVERY $60 SPENT </p>
     <p style="border-radius:24px; border: 1px solid #ffffff; background-color: #26292B;">
       <a href="example.com" target="_blank" style="font-size: 15px;text-decoration: none; color:#ffffff;background-color: #26292B;border:1px solid #26292B;borderradius:24px;padding:5px 17px;display: inline-block;">SHOP NOW
       </a></p>
</td>

Change the text on this section by replacing words in the p tag.

<td style="vertical-align:middle;padding: 0 10px 0 0px;">

  <p class="atag" style="font-size: 20px;color:#26292B;letter-spacing:.2px;font-weight:300;color: #676868;">"This is the best responsive email template course and framework! I have
thoroughly enjoyed the email course."</p>

</td>

Change the text on the left paragraph in this section by replacing words in the p tag.

Button

<td align="center" style="border-radius:24px; text-align: center;" bgcolor="#BC1A53">

   <a href="example.com" target="_blank" style="font-size: 15px;font-weight:500;text-decoration: none;color: #ffffff;background-color: #BC1A53;border-radius:24px;padding:5px
17px;display: inline-block; border: 0;">SHOP NOW</a>

</td>

Start by changing the a tag link of the button and you may also change the button text by replacing the shop now text.

Products

<table class="content" style="border-spacing:0;text-align: left;" role="presentation">
   <tr>
      <td>
         <a href="example.com" target="_blank"><img class="two-col-img" src="i.ibb.co/KwQtKYV/ryan-hoffman-6-Nub980b-I3…" alt="" width="260"
height="300" style="max-width: 260px;" border="0"></a>
      </td>
</tr>
<tr>
   <td align="center" style="padding:10px 10px 20px 10px;">
      <p style="font-size: 17px;font-weight: bold;color: #BC1A53;Margin: 15px 0px 0px 0px;">ON SALE 25% OFF!</p>
      <p style="font-size: 15px;Margin: 5px 0px 5px 0px;">Plain Short Sleeve T-Shirt</p>
   </td>
</tr>
<tr>
   <td align="center" style="padding-left: 10px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-spacing:0;">
         <tr>
              <td align="center" style="border-radius:25px;" bgcolor="#BC1A53">
                 <a href="example.com" target="_blank" style="font-size: 13px;font-weight: bold;text decoration: none;color: #ffffff;background-color: #BC1A53;padding:10px 25px;border: 1px solid #BC1A53;border-radius: 25px;display: inline-block;"> BUY NOW</a>
             </td>
        </tr>
     </table>
   </td>
  </tr>
</table>

Change the product image by replacing the product image link in the scr attribute of the img tag.

To edit the product discount text and product description change the text in the p tag. Change the button link to redirect to your product page by editing the link in the href attribute of the a tag

Social Media

<td style="padding-top:0;padding-right:30px;padding-bottom:0;padding-left:30px; text-align:  enter;">

     <a href="example.com" target="_blank"><img src="i.ibb.co/bPLzh61/circle-facebook.png" alt="#" width="32" border="0"></a>
     <a href="example.com" target="_blank"><img src="i.ibb.co/sRH7TK2/circle-twitter.png" alt="#" width="32" border="0"></a>
     <a href="example.com" target="_blank"><img src="i.ibb.co/VQ9nCv3/circle-youtube.png" alt="#" width="32" border="0"></a>
     <a href="example.com" target="_blank"><img src="i.ibb.co/K5wbWBS/circle-linkedin.png" alt="#" width="32" border="0"></a>
     <a href="example.com" target="_blank"><img src="i.ibb.co/x8G1NMz/circle-instagram.png" alt="#" width="32" border="0"></a>

</td>

Change the links to your social media accounts by changing href attribute links of the a tag of on section.

Footer

<tr>
     <!--[if (gte mso 9)|(IE)]>
       <td style="padding-top:20px;"> </td>
     <![endif]-->
   <td style="paddingtop:0;padding-right:30px;padding-bottom:0;padding-left:30px; text-align: center;">
     <p class="atag" style="font-size:14px; color: #676868;">© Copyright SpaceJK. All rights reserved 
 </p>
  </td>
</tr>
<tr>
    <!--[if (gte mso 9)|(IE)]>
      <td style="padding-top:20px;"> </td>
    <![endif]-->
  <td style="paddingtop:0;padding-right:9px;padding-bottom:0;padding-left:9px; text-align:center;">
    <p class="atag" style="font-size:15px;color: #676868; Margin: 0">You're receiving this e-mail because you signed up to receive informations from SpaceJK.</p>
  </td>
</tr>
<tr>
    <!--[if (gte mso 9)|(IE)]>
      <td style="padding-top:20px;"> </td>
   <![endif]-->
      <td style="paddingtop:0;padding-right:0px;padding-bottom:0;padding-left:0px; text align:center;">
        <p class="atag" style="font-size:15px;color: #676868; Margin: 0"><a href="example.com" target="_blank" style="color:#55ACEE;">Change Subscrption Settings </a> or <a  ref="example.com" target="_blank" style="color:#55ACEE;">Unsubscribe Instantly.</a></p>
    </td>
</tr>

<tr>
    <!--[if (gte mso 9)|(IE)]>
      <td style="padding-top:20px;"> </td>
    <![endif]-->
     <td style="paddingtop:0;padding-right:30px;padding-bottom:0;padding-left:30px; text-align: left;">
       <p class="atag" style=" color: #676868;">Our Mailing Address is:</p>
       <p class="atag" style="font-size:14px; color: #676868;">20 Dancun st</p>
       <p class="atag" style="font-size:14px; color: #676868;">Totonto ON Canada</p>
       <p class="atag" style="font-size:14px; color: #676868;">XX XXX XX</p>
   </td>
</tr>

Change the text on every paragraph in this footer section by replacing words in the p tag.

If you still can't edit this template by yourself don't hesitate to contact us with all the information required we will edit it for you or if you need any assistance editing this template, contact us.

Thank you!