In case you are 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 tips on how to make beauty and textual content adjustments to a template.
These methods can be utilized with any of the free templates we provide in our Sources Heart. For the needs of this weblog, we’ll be customizing the Espresso Store template. We’ll 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 appears 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 need to use Notepad (or TextEdit on Mac) for this function. I actually like Notepad++, which is free and has nice options.
You can too use our model new E-mail Editor to do that total tutorial. Simply choose “Select a template” and choose the Espresso Store template from the record. The editor will present you a dwell preview of your code, and in addition permits for immediate testing.
Step 2: Lower Undesirable Sections
The very first thing you’ll wish to do is determine any undesirable sections which are 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 a different way, so that you’ll need to 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 total 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 seem like this:
<!-- ======= begin divider ======= -->
<!-- one other remark -->
For this instance, we’ll lower 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%" type="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%" type="background-color: #ded6bf;" bgcolor="#ded6bf">
...extra code right here...
</desk>
<!-- ======= finish three column ======= -->
Go forward and lower these two sections. Be sure to chop the feedback, too, as these gained’t be wanted.
Step 3: Change Photographs
Now we’re going to exchange the photographs with ones for our sushi restaurant. Let’s begin with the emblem. You’ll find the emblem picture within the code by utilizing Ctrl+F and trying to find “Brand.”
The picture tag ought to seem like this:
<img border="0" type="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photographs/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 similar dimensions, all it is best to have to alter is the src attribute of the picture. You need to use a emblem with totally different dimensions, simply ensure that to alter the inline width type. Our new emblem will seem like this:
<img border="0" type="show: block; width: 136px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photographs/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 ensure that every picture is saved in the identical dimensions as the unique.
You can too use photographs 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 photographs for iOS gadgets. The beneath instance exhibits the code you’d have to set a picture to show at 200px extensive, regardless of being saved at 400px extensive.
<img border="0" width="200" type="show: block; width: 200px;" src="https://www.emailonacid.com/weblog/article/email-development/how-to-customize-an-html-email-template/https://www.emailonacid.com/photographs/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 superb with all of those shiny sushi photographs.
We’ll start by altering the background shade of the e-mail. Background colours in e-mail are set primarily utilizing background-color type and bgcolor attribute. To make this alteration, discover the physique tag of the e-mail. The physique tag follows the closing head tag. You possibly can see the background shade is about to #4d3e39. A background shade is usually set in a couple of place, normally to get a constant show throughout all e-mail shoppers. On this case, the colour is about in three locations (on the finish of every line).
<physique type="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#4d3e39;">
<middle class="wrapper" type="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" type="background-color:#4d3e39;" bgcolor="#4d3e39;">
Let’s change all three of these to a pleasant, wealthy #9e3212.
<physique type="Margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#9e3212;">
<middle class="wrapper" type="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" type="background-color:#4d3e39;" bgcolor="#9e3212;">
Now we’ll edit the background shade of the primary content material column of the e-mail. Search for the “begin principal physique” remark within the code. That is the desk that accommodates many of the content material of the e-mail and confines it to a central column. As you possibly can see, this shade is about to #ded6bf.
<!-- ======= begin principal physique ======= -->
<desk class="outer" align="middle" cellpadding="0" cellspacing="0" border="0" type="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 principal physique ======= -->
<desk class="outer" align="middle" cellpadding="0" cellspacing="0" border="0" type="border-spacing:0;font-family: Verdana, sans-serif;shade:#333333;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#EBF1E5">
Use Ctrl+H to exchange all situations of #ded6bf with #EBF1E5.
Now we’ll wish to edit textual content colours, particularly headings. Textual content shade is about utilizing the shade type. At present, 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 type as follows.
<p type="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; 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 about as a bgcolor, background shade and border shade.
<desk border="0" align="middle" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="middle">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="middle" bgcolor="#fe7c24" width="150" type="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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 type) determines what font textual content ought to be in, in addition to some acceptable fallback fonts for shoppers that don’t have your most popular font. The best solution to edit the font stack is to search out an instance of it within the e-mail, after which use Ctrl+H to exchange each occasion of it. Within the Espresso Store template, the heading font stack appears like this:
font-family: Georgia, sans-serif;
Seek for this string within the e-mail utilizing Ctrl+H, after which change 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
This can be a pretty straightforward step. You’ll wish to determine the textual content blocks within the e-mail code and change out the textual content along with your desired content material. All the remaining textual content ought to 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 example.
Inside article 1, you’ll discover the “Uncover our distinctive blends” headline. It appears like this within the code.
<p type="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Uncover our distinctive blends</p>
Let’s change that to learn, “Strive our new mega sushi roll!”
<p type="font-size: 28px; line-height:40px; text-decoration: none; shade: #fe7c24;font-family: Georgia, sans-serif;text-align:middle; text-transform:uppercase;font-weight:daring;Margin-top:10px;">Strive our new mega sushi roll!</p>
You may additionally wish to add preheader textual content. Search for the “PREHEADER TEXT HERE” remark. The code ought to seem like this.
<tr>
<td type="width:100%;show:none !necessary;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 Completely satisfied 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 type="width:100%;show:none !necessary;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 Completely satisfied 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 example.
<desk border="0" align="middle" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tbody>
<tr>
<td align="middle">
<desk border="0" cellpadding="0" cellspacing="0" type="Margin:0 auto;">
<tr>
<td align="middle" bgcolor="#fe7c24" width="150" type="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.instance.com" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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" type="padding: 10px;width:150;show: block;text-decoration: none;border:0;text-align: middle;font-weight: daring;font-size: 14px;font-family: Arial, sans-serif;shade: #ffffff;background: #fe7c24;border: 1px strong #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 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 all the time finest to check. Don’t have a fast and dependable method to do this? Strive our 7 day free trial! By our platform, you possibly can check your template in a variety of e-mail shoppers and cell gadgets in seconds.
Writer: The E-mail on Acid Crew
The E-mail on Acid content material staff 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.
Writer: The E-mail on Acid Crew
The E-mail on Acid content material staff 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.
