{"id":70905,"date":"2021-06-02T21:00:00","date_gmt":"2021-06-02T11:00:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=43225"},"modified":"2025-11-11T17:49:59","modified_gmt":"2025-11-11T06:49:59","slug":"how-to-customize-an-html-template","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/how-to-customize-an-html-template","title":{"rendered":"How to Customize an HTML Template"},"content":{"rendered":"\n

So you\u2019ve just purchased an HTML template and now you have to customize it before it goes online. But you\u2019re not experienced with code so you\u2019re not sure how to go about it. Well, rest easy, because in this tutorial we\u2019re going to step you through how to edit an HTML template.<\/p>\n\n\n\n

We\u2019re going to be working off the assumption you\u2019ve never seen a line of HTML before, let alone edited one, so no matter how new you are to working with code you\u2019ll be shown exactly what to do every step of the way.<\/p>\n\n\n\n

\"Canvas,<\/a>
Build a modern online magazine with Canvas<\/a>, an HTML5 responsive template.<\/figcaption><\/figure>\n\n\n\n

If you’re wondering where to find professional HTML5 website templates, scroll down after this tutorial. We’ve got a selection of top HTML5 templates<\/a>. First, you’ll learn to edit ThemeForest templates and then, you’ll see some of the best from the marketplace.<\/p>\n\n\n\n

What Is HTML?<\/h2>\n\n\n\n

Let\u2019s start at the very beginning. Technically speaking the answer to this question is \u201cHyper Text Markup Language<\/a>\u201d. However, for the purposes of customizing a template, you can consider HTML as a series of opening and closing tags like this:<\/p>\n\n\n\n

<h1>  <\/h1><\/code><\/pre>\n\n\n\n
Tags are indicated with <<\/code> and ><\/code> signs, and the closing tag always includes a \/<\/code>. Pairs of tags have content in between them like this:<\/p>\n\n\n\n
<h1>John Smith, Front End Developer<\/h1><\/code><\/pre>\n\n\n\n
Sometimes, however, there are also standalone tags, with no closing partner, like this:<\/p>\n\n\n\n
<img src=\"mypic.jpg\"><\/code><\/pre>\n\n\n\n
Different HTML tags make different types of content appear on a web page. The above example of <h1><\/h1><\/code> tags would create a large heading reading \u201cJohn Smith, Front End Developer\u201d, and the example <img><\/code> tag would make the image file \u201cmypic.jpg\u201d appear on the page.<\/p>\n\n\n\n
To edit an HTML template, all you need to know is which tags represent the parts of the page you want to change, how to find them in the code, and how to edit them so they show what you want.<\/p>\n\n\n\n
Get Yourself a Code Editor<\/h2>\n\n\n\n
Yes, it\u2019s completely possible to edit HTML in Notepad or a similar program, but things will go much more smoothly for you if you use a proper code editing app. One of the main reasons is you\u2019ll get colored highlighting of your code, as you\u2019ll see shortly, which will make it much easier to read and edit. I recommend Sublime Text<\/a>.<\/p>\n\n\n\n
Download and View Your HTML Template<\/h2>\n\n\n\n
Download the template you\u2019ve purchased\u2013in the case of this tutorial we\u2019ll be using this clean CV template to demonstrate. Note: the HTML template used for this tutorial is no longer available on ThemeForest. But everything you learn here can be applied to any HTML template.<\/em><\/p>\n\n\n\n
If you’re looking to build an online resume with an HTML template, here’s a great option<\/a>. Remember to scroll down after this tutorial to find a selection of the best HTML5 responsive templates<\/a> from ThemeForest.<\/p>\n\n\n\n
\"cv<\/figure>\n\n\n\n
Most HTML templates will come in a ZIP file – if so, go ahead and extract yours now. Then look around inside the template\u2019s folders until you find the \u201cindex.html\u201d or \u201cindex.htm\u201d file.<\/p>\n\n\n\n
In our example CV template, the \u201cindex.html\u201d file is found in the \u201c01.html-website\u201d directory.<\/p>\n\n\n\n
\"open<\/figure>\n\n\n\n
Now, open that file up in Chrome. Even if Chrome isn\u2019t your default or preferred browser please use it anyway, because we\u2019re going to be working with some tools it has in-built to help you with the editing process.<\/p>\n\n\n\n
Identify the Parts You Want to Change<\/h2>\n\n\n\n
If this is your first time learning to edit ThemeForest templates, try not to get drawn into the idea of tweaking the colors and layout just yet. To do that you have to dig into CSS, the language responsible for page styling. It\u2019s a good idea to focus on one thing at a time when you\u2019re new to template customization, and HTML is the best place to start.<\/p>\n\n\n\n
To get the ball rolling, take a look at your template in Chrome and figure out which written elements and images on the page you need to change. If you\u2019d like, you can prepare a list so you can go through and check each item off as you make your edits.<\/p>\n\n\n\n
In the case of our CV template, we want to change:<\/p>\n\n\n\n