Post hidden from Hashnode
Posts can be hidden from Hashnode network for various reasons. Contact the moderators for more details.
~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).
<tr>
<td>
<table class="darkmode_table" role="presentation" style="width: 100%; padding-top:10px;padding-right:30px;padding-bottom:10px;padding-left:30px; text-align: center!important; border: 0;">
<tr>
<td style="padding-top:10px;padding-left:20px;padding-bottom:10px; text-align: center; background-color: #CDEAED;">
<p style="font-size: 12px; Margin: 0; color: #000000;font-weight: 600;">FREE SHIPPING ON ODERS $75+</p>
</td>
</tr>
</table>
</td>
</tr>
If you need to make changes to the text in this section replace the text enclosed with the p tag.
Let's continue with changing the logo and nav links section
Logo
<table class="column darkmode_table" style="border-spacing:0;width:100%;max-width:250px;display:inline-block;vertical-align: top;" role="presentation">
<tr>
<td class="padding px-600-0" style="padding-top:10px;padding-right:0px;padding-bottom:0;padding-left:20px;">
<table class="content darkmode_table" style="border-spacing:0;width:100%;text-align:left;" role="presentation">
<tr>
<td class="centering" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;width:100%;text-align:left; width:250px;">
<a href="example.com"><img src="i.ibb.co/mB53XZF/Logo.png" alt="logo" width="120" style="border-width:0;max-width: 120px;border-radius: 3px;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
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
<table class="content centering darkmode_table" style="border-spacing:0;font-size:15px;font-weight:bold;text-align:right!important;" role="presentation">
<tr>
<td class="padding content centering" style="padding-top:0px;padding-right:0px;padding-bottom:0;padding-left:0px;width:100%;text-align:right; width:100px;font-size:15px;font-weight: 400;">
<p style="font-size:15px;font-weight:400;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank" style="text-decoration: none;">SHOP</a></p>
</td>
<td class="padding content centering" style="padding-top:0px;padding-right:0px;padding-bottom:0;padding-left:0px;width:100%;text-align:right; width:100px;font-size:15px;font-weight: 400;">
<p style="font-size:15px;font-weight:400;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank" style="text-decoration: none;">COUPONS</a></p>
</td>
<td class="padding content centering" style="padding-top:0px;padding-right:0px;padding-bottom:0;padding-left:20px;width:100%;text-align:right; width:100px;font-size:15px;font-weight: 400;">
<p style="font-size:15px;font-weight:400;Margin:0;display: inline;"><a class="atag" href="example.com" target="_blank" style="text-decoration: none;">SUBSCRIBE</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.
Hero Section
<table role="presentation darkmode_table" style="width: 100%; padding-top:5px;padding-right:30px;padding-bottom:10px;padding-left:30px; text-align: center!important; ">
<tr>
<td style="padding-top:5px;padding-right:20px;padding-bottom:5px;padding-left:20px; text-align: center;"></td>
<td style="width: 150px;text-align: center; ">
<p style="font-size: 12px;padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px; background-color: #CDEAED; Margin: 0; color: #000000; font-weight: 600;">BEST DEAL EVER!</p>
</td>
<td style="padding-top:5px;padding-right:20px;padding-bottom:5px;padding-left:20px; text-align: center;"></td>
</tr>
</table>
Change the text on this section by replacing words in the p tag.
<tr>
<td align="center">
<p class="atag" style="Font-size: 15px; line-height: 30px; Margin:0;padding-bottom:0px;">When You Spend %50+! </p>
<p class="atag" style="Font-size: 15px; line-height: 30px; Margin:0;padding-top: 0px;padding-bottom:0px; ">Find out whta's new in our store </p>
<p class="atag" style="Font-size: 15px; line-height: 30px; Margin:0;padding-top: 0px;padding-bottom:10px; ">Use Code <span style="text-decoration: underline;font-weight: bold;">SPECIAL30</span></p>
<p style=" border: 1px solid #ffffff; background-color: #000000;">
<a href="example.com" target="_blank" style="font-size: 15px;text-decoration: none;color: #ffffff;background-color: #000000;border:1px solid #000000;padding:5px 17px;display: inline-block;">Save Money</a>
</p>
</td>
</tr>
Change the text on this section by replacing words in the p tag. And the link that is found in the a tag.
Text & Button
<table class="content darkmode_table" style="border-spacing:0;width:100%;font-size:18px;text-align:center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;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 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=" padding:2px 15px;border: 1px solid #ffffff;" bgcolor="#000000">
<a href="example.com" target="_blank" style="font-size: 16px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #000000;padding:10px 25px;display: inline-block;">Save 39% off</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Text
Change the text on 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 Save 39% off text.
<tr>
<td align="center" class="darkmode-bg" style="padding:0;background-color: #ffffff;">
<table class="darkmode_table" width="100%" style="border-spacing: 0;" role="presentation">
<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: underline; color: #2d2d2d;font-weight: 600;">contact@spaceejk.com</a> or visit our <a href="example.com/faq" style="text-decoration: underline; font-weight: 600; color: #2d2d2d;">FAQS</a>. You can also chat with a real live human during our operating hours. They can answer questionsabout account.</p>
</td>
</tr>
</table>
</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
<tr>
<td style="padding-top:10px;padding-right:30px;padding-bottom:0;padding-left:30px; text-align: center;font-weight: 400; ">
<table class="darkmode_table" align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td>
<p style="font-size: 15px; Margin: 0;">You have received this email as registered user of SpacceJK. You can <a href="example.com" style="text-decoration: underline; font-weight: 500; color: #2d2d2d;">unsubscribe</a> from these emails <a href="example.com" style="text-decoration: underline; font-weight: 500; color: #2d2d2d;">Here</a></p>
</td>
</tr>
</table>
</td>
</tr>
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 2
<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!