- 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 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"><img src="i.ibb.co/rFKppxx/Logo.png" alt="logo" width="120" style="border-width:0;max-width: 120px;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="" attribute in a, 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" id="ghost" style="width:100%; width:70px;"></td>
    <td class="padding content centering" style="padding-top:10px;padding-right:0px;padding-bottom:0;padding-left:0px;width:100%;text-align:right; width:100px;font-size:15px;font-weight: 600;">
        <p style="font-size:15px;font-weight:600;Margin:0;display: inline;"><a class="atag"  ref="example.com" target="_blank" style="text-decoration: none;">About Us</a></p>
</td>
            <td></td>

    <td class="padding content centering" style="padding-top:10px;padding-right:0px;padding-bottom:0;padding-left:20px;width:100%;text-align:right; width:100px;font-size:15px;font-weight: 600;">
                    <p style="font-size:15px;font-weight:600;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank" style="text-decoration: none;">Account</a></p>
            </td>
</tr>

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>
      <table align="center" class="darkmode_table" width="100%" style="border-spacing:0;padding-top: 0px; padding-right: 30px;padding-bottom: 0px; padding-left: 30px;" role="presentation">
          <tr>
              <td background="i.ibb.co/q05pcf2/Hero-shoe.jpg" width="600" height="329" style="background-position: center center; background-size: cover; padding: 0px 15px;">

                  <!--[if (gte mso 9)|(IE)]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:369px;">
                      <v:fill type="tile" src="i.ibb.co/q05pcf2/Hero-shoe.jpg" />
                      <v:textbox inset="0,0,0,0">
                  <![endif]-->

                  <!--[if (gte mso 9)|(IE)]>
                      </v:textbox>
                      </v:rect>
                  <![endif]-->

              </td>
          </tr>
        </table>
    </td>
</tr>

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.

<tr>
    <td style="padding:10px 10px 20px 10px;">
        <p style="font-size: 20px; font-weight: bold; Margin: 0;">We are offering 50% Off!</p>                                  
    </td>
  </tr>
<tr>
    <td align="left" style="padding-left: 10px;">
        <table class="darkmode_table" align="center" border="0" cellpadding="0" cellspacing="0" 
role="presentation" style="border-spacing:0;">
            <tr>
                <td align="center" style="border-radius:25px; padding:2px 15px;" bgcolor="#FF3D36">
                    <a href="example.com" target="_blank" style="font-size: 16px;font-weight:bold;text-decoration: none;color: #ffffff;background-color: #FF3D36;padding:10px 25px;border-radius: 25px;display: inline-block;">JOIN NOW</a>
                </td>
            </tr>
        </table>
    </td>
</tr>

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

Button

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

Paragraphs

<tr>
   <td style="vertical-align:middle;padding: 0 30px 0 30px; text-align: center;">
      <p class="atag" style="font-size: 15px;color: #26292B;letter-spacing:.2px;font-weight: 400;">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>
   <tr>
       <td style="padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left: 30px; text-align: center;">
           <p style="font-size: 15px; font-weight: 400; Margin: 0;">· This Offer ends February 20,2022</p>
       </td>
   </tr>
   <tr>
       <td  id="padding_sm_1" style="padding-top:0;padding-right:40px;padding-bottom:20px;padding-left:40px; text-align: center;">
           <p style="font-size: 15px;  Margin: 0;">If you have any questio please email us at <a href="contact@spaceejk.com" style="text-decoration: none; color: #55ACEE;font-weight: 600;">contact@spaceejk.com</a> or visit our <a href="example.com/faq" style="text-decoration: none; font-weight: 600; color: #55ACEE;">FAQ</a>. You can also chat with a real live human during our operating hours. They can answer questionsabout account.</p>
       </td>
</tr>

Change the text on these paragraphs in this section by replacing words in all p tags. Also in the a tags href attribute change these links [contact@spaceejk.com and example.com/faq ].

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 Links 1

<table border="0" class="content " style="border-spacing:0;font-size:12px;text-align:center;" role="presentation"> 
   <tr> 
      <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding left:0;width:100%;text-align:center; width:120px;font-size:12px;"> 
         <p style="font-size:12px;Margin:0;display: inline;padding-right:10px;">
            <a class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">SpacceJK</a></p> 
       </td> 
         <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:12px;"> 
         <p style="font-size:12px;Margin:0;display: inline;padding-right:10px;">
          <a class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">FAQS</a></p>
      </td> 
      <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:200px;font-size:12px;"> 
     <p style="font-size:12px;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">Terms & Conditions</a></p> 
    </td> 
  </tr>
</table>

In this section, 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.

Footer Text

<td>
    <p style="font-size: 15px;  Margin: 0;">You have received this email as registered user of SpacceJK. You can unsubscribe from these emails <a href="example.com" style="text-decoration: none; font-weight: 500; color: #55ACEE;">Here</a></p>
</td>

If you need to make changes to the text in this section replace the text enclosed with the p tag. Also in the a tag href attribute change these links [example.com].

Footer Links

<table border="0" class="content darkmode_table" style="border-spacing:0;font-size:12px;text-align:center;" role="presentation">
   <tr>
      <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:120px;font-size:12px;">
         <p  style="font-size:12px;Margin:0;display: inline;padding-right:10px;border-right: 1px solid #868686"><a   class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">20 Dancun st</a></p>
      </td>


      <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:200px;font-size:12px;">
         <p style="font-size:12px;Margin:0;display: inline;padding-right:10px;border-right: 1px solid #868686"><a  class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">Toronto ON Canada</a></p>
      </td>

      <td class="padding content" style="padding-top:0px;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:center; width:100px;font-size:12px;">
         <p style="font-size:12px;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank"  style="text-decoration: none;color: #2d2d2d;font-size:12px;">Canada</a></p>
      </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.

Copyright

<td style="padding-top:40px;padding-right:50px;padding-bottom:30px;padding-left:50px; text-align: center; ">
   <p style="font-size: 15px;  Margin: 0;">© SpaceJK,Inc.</p>
</td>

Change the text on this 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!