If you’re new to e-mail improvement, the work of customizing a template can appear overwhelming. However don’t fear. We’ve written this weblog to stroll you thru the best way to make beauty and textual content adjustments to a template.
These strategies can be utilized with any of the free templates we provide in our Assets Middle. For the needs of this weblog, we’ll be customizing the Espresso Store template. We are going to change the template from a espresso store theme to 1 that advertises a sushi restaurant. Click on on the photographs beneath to see what the entire e-mail seems like, earlier than and after.
Step 1: Open the HTML File
You’ll want a textual content editor to work in. Don’t use Phrase for this! You should utilize Notepad (or TextEdit on Mac) for this function. I actually like Notepad++, which is free and has nice options.
You may as well use our model new E-mail Editor to do that complete tutorial. Simply choose “Select a template” and choose the Espresso Store template from the listing. The editor will present you a stay preview of your code, and likewise permits for fast testing.
Step 2: Reduce Undesirable Sections
The very first thing you’ll wish to do is determine any undesirable sections which might be included within the template you’re utilizing. On this template, every part is constructed right into a single desk, so we’ll wish to take away the entire desk to eliminate the part.
Each template is coded in another way, so that you’ll must assess precisely what to take away on a case by case foundation. It’s possible you’ll have to take away a row, desk cell or complete desk to eliminate undesirable sections. Use feedback to information you as you attempt to discover the start and finish of an undesirable part. On this case, the Espresso Store template is properly commented which makes it straightforward to determine the start and finish of every content material block.
HTML feedback appear like this:
<!-- ======= begin divider ======= -->
<!-- one other remark -->
For this instance, we’ll minimize the three column content material block (which seems simply above the footer), in addition to the divider that precedes it.
<!-- ======= begin divider ======= -->
<desk class="one-column" border="0" cellpadding="20" cellspacing="0" width="100%" fashion="border-spacing:0;background-color: #ded6bf;" bgcolor="#ded6bf">
...extra code right here...
</desk>
<!-- ======= finish divider ======= -->
<!-- ======= begin three column ======= -->
<cellpadding="0" cellspacing="0" border="0" width="100%" fashion="background-color: #ded6bf;" bgcolor="#ded6bf">
...extra code right here...
</desk>
<!-- ======= finish three column ======= -->
Go forward and minimize these two sections. Make sure that to chop the feedback, too, as these gained’t be wanted.
Step 3: Change Photos
Now we’re going to switch the photographs with ones for our sushi restaurant. Let’s begin with the brand. You’ll find the brand picture within the code through the use of Ctrl+F and looking for “Brand.”
The picture tag ought to appear like this:
<img border="0" fashion="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/pictures/emails/coffeeshop/coffee-shop-logo.png" alt=""/>
The “src” attribute is what controls the picture that’s displayed. After internet hosting your picture, you’ll wish to use absolutely the path, or URL, to show the picture in your e-mail.
So long as your new emblem is identical dimensions, all it’s best to have to vary is the src attribute of the picture. You should utilize a emblem with totally different dimensions, simply be certain that to vary the inline width fashion. Our new emblem will appear like this:
<img border="0" fashion="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/pictures/blog_images/Emailology/2016/cust_template/sushi-logo.jpg" alt=""/>
You’ll wish to change the src attributes for the remainder of the photographs within the template. Simply be certain that every picture is saved in the identical dimensions as the unique.
You may as well use pictures saved in the identical proportions (a 400×200 picture in a 200×100 spot) so long as you set the peak and width that you really want it to show at utilizing HTML attributes. This may allow you to make use of retina pictures for iOS gadgets. The beneath instance exhibits the code you’d have to set a picture to show at 200px vast, regardless of being saved at 400px vast.
<img border="0" width="200" fashion="show: block; width: 200px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/pictures/an-image.png" alt=""/>
Step 4: Customise Colours
Now that the photographs have been changed, it’s time to repair the colours. The earth tones used for our espresso store e-mail don’t look excellent with all of those vibrant sushi pictures.
We’ll start by altering the background shade of the e-mail. Background colours in e-mail are set primarily utilizing background-color fashion and bgcolor attribute. To make this alteration, discover the physique tag of the e-mail. The physique tag follows the closing head tag. You may see the background shade is ready to #4d3e39. A background shade is usually set in multiple place, normally to get a constant show throughout all e-mail shoppers. On this case, the colour is ready in three locations (on the finish of every line).
<physique fashion="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#4d3e39;">
<heart class="wrapper" fashion="width:100%;table-layout:fastened;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#4d3e39;">
<desk width="100%" cellpadding="0" cellspacing="0" border="0" fashion="background-color:#4d3e39;" bgcolor="#4d3e39;">
Let’s change all three of these to a pleasant, wealthy #9e3212.
<physique fashion="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#9e3212;">
<heart class="wrapper" fashion="width:100%;table-layout:fastened;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#9e3212;">
<desk width="100%" cellpadding="0" cellspacing="0" border="0" fashion="background-color:#4d3e39;" bgcolor="#9e3212;">
Now we’ll edit the background shade of the principle content material column of the e-mail. Search for the “begin essential physique” remark within the code. That is the desk that incorporates a lot of the content material of the e-mail and confines it to a central column. As you may see, this shade is ready to #ded6bf.
<!-- ======= begin essential physique ======= -->
<desk class="outer" align="heart" cellpadding="0" cellspacing="0" border="0" fashion="border-spacing:0;font-family: Verdana, sans-serif;shade:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ded6bf">
Let’s change this to one thing that may match our new shade scheme higher, like #EBF1E5.
<!-- ======= begin essential physique ======= -->
<desk class="outer" align="heart" cellpadding="0" cellspacing="0" border="0" fashion="border-spacing:0;font-family: Verdana, sans-serif;shade:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#EBF1E5">
Use Ctrl+H to switch all situations of #ded6bf with #EBF1E5.
Now we’ll wish to edit textual content colours, particularly headings. Textual content shade is ready utilizing the shade fashion. At the moment, the headings are #222. Let’s change them to match our new sushi colours. A shade of orange, like #fe7c24 ought to stand out properly. Discover every heading within the e-mail and edit the colour fashion as follows.
<p fashion="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Lastly, let’s change the button shade. We had been utilizing #db7447, however let’s brighten that as much as #fe7c24 to match our headings. The button shade right here is ready as a bgcolor, background shade and border shade.
<desk border="0" align="heart" cellpadding="0" cellspacing="0" fashion="Margin:0 auto;">
<tbody>
<tr>
<td align="heart">
<desk border="0" cellpadding="0" cellspacing="0" fashion="Margin:0 auto;">
<tr>
<td align="heart" bgcolor="#fe7c24" width="150" fashion="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" fashion="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Be taught Extra</a>
</td>
</tr>
</desk>
</td>
</tr>
</tbody>
</desk>
Step 5: Change Font(s)
The font stack (or font-family fashion) determines what font textual content must be in, in addition to some acceptable fallback fonts for shoppers that don’t have your most popular font. The simplest method to edit the font stack is to seek out an instance of it within the e-mail, after which use Ctrl+H to switch each occasion of it. Within the Espresso Store template, the heading font stack seems like this:
font-family: Georgia, sans-serif;
Seek for this string within the e-mail utilizing Ctrl+H, after which substitute it with:
font-family: Arial, helvetica, sans-serif;
We gained’t change the paragraph font for this tutorial, as this font already works properly with the template.
Step 6: Edit Textual content
It is a pretty straightforward step. You’ll wish to determine the textual content blocks within the e-mail code and change out the textual content together with your desired content material. The entire remaining textual content must be in paragraph or anchor (hyperlink) tags. We’ll wish to edit each textual content block within the template, however I’m simply going to make use of the primary one for instance.
Inside article 1, you’ll discover the “Uncover our distinctive blends” headline. It seems like this within the code.
<p fashion="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Let’s change that to learn, “Attempt our new mega sushi roll!”
<p fashion="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:heart; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Attempt our new mega sushi roll!</p>
You might also wish to add preheader textual content. Search for the “PREHEADER TEXT HERE” remark. The code ought to appear like this.
<tr>
<td fashion="width:100%;show:none !vital;visibility: hidden;mso-hide:all;font-size:1px;shade:#333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
<!-- ======= PREHEADER TEXT HERE ======= -->
</td>
</tr>
Let’s change that to learn, “$2 Rolls – Sushi Glad Hour 4-6pm Each day”. Don’t neglect to delete the remark tags! If the textual content is commented out, it gained’t seem as a preheader.
<tr>
<td fashion="width:100%;show:none !vital;visibility: hidden;mso-hide:all;font-size:1px;shade:#333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
$2 Rolls - Sushi Glad Hour 4-6pm Each day
</td>
</tr>
Step 7: Change Hyperlink Locations
Lastly, let’s take a look at altering an anchor hyperlink‘s href. The href controls what web page URL the hyperlink factors to. We’ll use a button for instance.
<desk border="0" align="heart" cellpadding="0" cellspacing="0" fashion="Margin:0 auto;">
<tbody>
<tr>
<td align="heart">
<desk border="0" cellpadding="0" cellspacing="0" fashion="Margin:0 auto;">
<tr>
<td align="heart" bgcolor="#fe7c24" width="150" fashion="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" fashion="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Be taught Extra</a>
</td>
</tr>
</desk>
</td>
</tr>
</tbody>
</desk>
The linked a part of this button is the “a” tag, or anchor tag.
<a href="http://www.instance.com" fashion="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Be taught Extra</a>
We’ll edit the href to level this to a brand new web page.
<a href="http://www.happysushirestaurantplace.com" fashion="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: heart;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px stable #fe7c24;-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;line-height:17px;text-transform:uppercase;letter-spacing: 1px;" class="button_link">Be taught Extra</a>
Now the hyperlink factors to the restaurant, serving to to drive site visitors there.
Conclusion
We now have a template that matches the model colours and fonts of a distinct firm. By avoiding adjustments to the construction of the template as a lot as doable, the template ought to nonetheless render reliably.
Nonetheless, everytime you make adjustments to a template, it’s at all times finest to check. Don’t have a fast and dependable method to do this? Attempt our 7 day free trial! By way of our platform, you may check your template in a variety of e-mail shoppers and cellular gadgets in seconds.
Creator: The E-mail on Acid Crew
The E-mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
Creator: The E-mail on Acid Crew
The E-mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
