html editing

Manually Editing HTML Email Template Using Text Editor

by emailmug in Knowledgebase on June 15, 2020

Even if you have HTML knowledge editing an email template with a text editor can be a headache, the easy ways to do it is by using a text editor which has a live preview feature such as Brackets, it’s free and open source you can get it here.

Getting Started

Before we get started you need Brackets installed on your PC. Make sure your email HTML file has been named index.html since Brackets will use index.html file as the default file to generate live preview.

1. Now it’s time to begin; open Brackets click on File > Open Folder locate your folder that contains you index.html file

2. Once you succeed loading your folder, now you will be able to generate live preview click on the live preview icon.

3. Once the icon have been clicked a new web web page will appear, the page that appear should have 127.0.0.1 address if it is not then you have to close Brackets and the web page. Then try to re-open it until the live preview generated page has 127.0.0.1 address.

If the address 127.0.0.1 has shown on live preview web page now you can try to click anywhere you want on the web page and the Brackets will show you the exact location code of the element you clicked.

Changing Image Background

To change an image background very easy to do, just place your cursor on the outer layer of the section that has image background then click it see attached screenshot with rounded green. Once it has been clicked the Brackets code bar will scroll it self into the location of image background code. There are two image links that you have to replace with your own image link.

Changing Text

To change the text is easy like a charm just place your cursor on the text that you desired to be changed click on it, then Brackets code bar will scroll it self into the right text area. You can change the text there.

Changing Colors

To make the template suits your brand color changing template colors will be needed, it’s easy as changing text you just have to place your cursor into the right area it can be text, background color or button background color.

In this case we will change a button background color place your cursor into the body of the button, as usual the Brackets code bar will scroll it self into the right location of the line code. Now you can replace the color hex code with your own. Find your desired color hex code here

Removing Unwanted Blocks/Sections

Removing unwanted blocks or section maybe necessary in order to make your template lighter here’s how to do it.

1. Place your cursor into the outer layer of the section then click it. After that you will see this tag <!–module–> it is where a section begin now click on the triangle icon just below the tag that we mentioned before.

2. Then it will minimize the section code from the beginning till the end. Now you can block those code and delete them.

Move and Duplicate Blocks/Sections

Moving or duplicating a block or sections has the same tutorial as removing an unwanted section or block what makes it different is; instead of deleting it you will move or duplicating it to different location.

Changing links

Changing links is very important to directing your customer to your own site a link on an email template could be on the text, button or image. Here’s how to change a link on an email template.

Find the element which you want to add or change it’s link then click it, find the code element on the Brackets code bar and replace it with your link.

After a while editing the template using Brackets I’m pretty sure you’ll get used to it even if you don’t have any HTML knowledge it will be easy because of the live preview feature. If you have any questions feel free to contact us via contact page or comment section.

Categories: Knowledgebase

Share Your Valuable Opinions