How to Customize an HTML Template

So you just bought an HTML template and now you have to customize it before it goes online. But you’re inexperienced with code so you’re not sure how to do it. Don’t worry, because in this tutorial we will guide you on how to edit HTML templates.

We’ll work under the assumption you’ve never seen a line of HTML before, let alone edited it, so no matter how new you are to working with code, you’ll be shown exactly what to do at every step.

Get Yourself a Code Editor

Yes, it’s definitely possible to edit HTML in Notepad or a similar program, but things will go much smoother if you use the right code-editing application. One of the main reasons is that you will get colored highlights on your code, as you will soon see, which will make it easier to read and edit. we will use Sublime Text.

Download and View Your HTML Template

After selecting the HTML template you want to customize and downloading it, then extract the file (Most HTML templates come in a ZIP file). Then open the folders in it until you find the file “index.html” or “index.htm”.

In this article, we use Rometheme’s HTML template, namely Pyro – Writer Portfolio HTML Template. You can get it here.

In the example we are using, the file “index.html” is found in the “HTML” folder.

Now, open that file in Chrome because we’ll be working there.

Identify the Parts You Want to Change

This time we will only provide a few simple changes so that those of you who are using an HTML template for the first time can easily understand it.

To start, look at your template in Chrome and figure out which written elements and images on the page you need to change. If you want, you can set up a list so you can go through and check off each item as you make edits.

In the case of our CV template, we want to change:

  • Name
  • Profession
  • Personal picture

Now that we have a list of items to change, we can set the appropriate HTML tag locations in the code. Let’s start with the name.

Find the Tag in the Inspector

Right-click on the name, and select Inspect. A panel like this should open in your browser:

This panel gives you an interactive way of viewing the code. Hover your mouse over the line showing <h1>…</h1> and you will see the template name section highlighted as you can see in the image above.

By hovering your mouse over different lines of code and seeing which areas of the page light up, this panel helps you know which code corresponds to which element. You simply hover over different lines of code until the section you’re looking for lights up.

Edit the Tag in HTML

Now it’s time to open your HTML file for editing. Open the “index.html” file in Sublime Text and you will see something like this:

Scroll until you find code here that matches what you see in the Chrome inspector. Now you can edit the content between the tags to change the name and profession to your own.

Save your file then refresh the template in Chrome. You should see your changes appear like so:

Repeat to Edit Other Content

Now you have the basic process down:

  1. Inspect the content you want to change.
  2. Identify the corresponding tags.
  3. Locate those tags in your HTML file.
  4. Edit the code to suit.

Let’s repeat the process to edit the rest of the content we want to customize.

Add Your Own Image

Next, we will add our own image. Right-click the image examine it, and note the appropriate tags:

After knowing the tag that contains the image, go to sublime and change the image code to the name of the file to be replaced. Previously, make sure the photo file is in your HTML folder.

Save your file, refresh Chrome, and you should see your new picture show up:

Don’t forget to always save the files you have changed so that the content can be up to date.

Now You Know How to Edit HTML Templates

Easy isn’t it? Now you understand how to edit HTML and can adapt HTML templates to your own content. Don’t hesitate to make adjustments to the code. If an error occurs, you can view information and help online.

You can also get other HTML templates from rometheme here.


Source:

Visit our website to browse our stuff and follow our Instagram for great content!

Website: www.rometheme.net

Instagram: rometheme_studio

Share This

Leave a Reply

You might also enjoy
All-in-one Toolkit to create incredible websites With WordPress

Imagine where templates, widgets, contact forms, and icons are all in one place and available directly from your WordPress dashboard instead of expanding your website with many plugins.

Watch Tutorialg

Looking For Premium Template? Check Our Store Here

Explore our premium template kits and save up to hours of design work. Each kit offers marvelous quality and creativity to enhance your projects. Visit our store to find the perfect template kit for your needs.

[]