How To Edit Colorlib Templates

Read Fourth dimension: sixteen mins Languages:

Then y'all've just purchased an HTML template and now you take to customize it before it goes online. But you lot're non experienced with code so you're not sure how to get nearly it. Well, rest piece of cake, because in this tutorial we're going to step you through how to edit a HTML template.

We're going to be working off the assumption you've never seen a line of HTML earlier, allow lone edited ane, and so no matter how new you are to working with code yous'll be shown exactly what to do every footstep of the way.

Build a modern online magazine with Canvas, a HTML5 responsive template.

If you're wondering where to find professional HTML5 website templates, scroll downward after this tutorial. We've got a selection of tiptop HTML5 templates. First, yous'll learn to edit ThemeForest templates then, you'll meet some of the best from the marketplace.

What is HTML?

Allow'south starting time at the very showtime. Technically speaking the answer to this question is "Hyper Text Markup Linguistic communication". However, for the purposes of customizing a template, you lot tin can consider HTML as a serial of opening and endmost tags like this:

<h1>  </h1>

Tags are indicated with < and > signs, and the closing tag always includes a /. Pairs of tags have content in betwixt them like this:

<h1>John Smith, Forepart Developer</h1>

Sometimes, however, there are also stand alone tags, with no closing partner, similar this:

<img src="mypic.jpg">

Different HTML tags make different types of content announced on a web folio. The above example of <h1></h1> tags would create a big heading reading "John Smith, Front end End Programmer", and the example <img> tag would make the image file "mypic.jpg" appear on the page.

To edit an HTML template all y'all need to know is which tags correspond the parts of the page you lot want to change, how to find them in the code, and how to edit them so they show what you want.

Go Yourself a Code Editor

Aye, it'due south completely possible to edit HTML in Notepad or a similar program, but things will go much more smoothly for you if you employ a proper code editing app. One of the main reasons is y'all'll get colored highlighting of your lawmaking, as you'll see shortly, which will brand it much easier to read and edit.

I recommend Sublime Text, which you can download here: https://www.sublimetext.com/iii

Download and View Your HTML Template

Download the template yous've purchased–in the instance of this tutorial we'll be using this clean CV template to demonstrate.Note: the HTML template used for this tutorial is no longer bachelor on ThemeForest. Simply everything yous acquire hither can be applied to any HTML template.

If yous're looking to build an online resume with a HTML template, here'due south a neat option. Recall to ringlet downwardly after this tutorial to find a selection of the best HTML5 responsive templates from ThemeForest.

Most HTML templates will come in a Zip file - if and then, go ahead and excerpt yours now. Then expect around inside the template's folders until you find the "index.html" or "index.htm" file.

In our instance CV template the "index.html" file is found in the "01.html-website" directory.

Now, open that file upward in Chrome. Even if Chrome isn't your default or preferred browser please utilize it anyhow, because we're going to be working with some tools it has in-built to assist you with the editing process.

Identify the Parts Yous Want to Change

If this is your first time learning to edit ThemeForest templates, try not to get fatigued into the idea of tweaking the colors and layout just yet. To do that y'all accept to dig into CSS, the language responsible for page styling. Information technology'due south a expert idea to focus on one thing at a fourth dimension when you're new to template customization, and HTML is the all-time identify to start.

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 lot need to change. If yous'd like, you tin can prepare a list and then you tin can go through and check each item off as y'all make your edits.

In the instance of our CV template we want to change:

Name
Profession
Personal picture show
Social media links
Contact information
CV sections: "Professional Contour", "Work Experience", "Technical Skills" and "Education"
Copyright message

At present we have a list of items to alter, we tin can set virtually locating their corresponding HTML tags in the lawmaking. Let'south start with the name.

Find the Tag in the Inspector

Right-click on the name, which reads "John Smith" by default, and select Inspect:

A panel like this should open in your browser:

This panel gives you an interactive manner of looking at the code. Hover your mouse over the line that shows <h1>...</h1> (heading level i tags) and you should meet the name department of the template highlighted equally you see in the screenshot in a higher place.

By hovering your mouse over different lines of code and seeing which areas of the page light upward, this panel helps you to figure out which code corresponds with what element. Yous just proceed hovering over unlike lines of lawmaking until the office you're looking for lights up.

Now expand the h1 tags by clicking the picayune triangle to their left and you lot should see the content in betwixt them, i.e. John Smith <small>Forepart End Developer</modest>.

This wording matches upwards with what you see on screen, and then yous know you have constitute the right office of the lawmaking.

Edit the Tag in HTML

It's now fourth dimension to open up up your HTML file for editing. Open the "index.html" file in Sublime Text and yous should see something like this:

You want to find the code in here that matches what you saw in the Chrome inspector. Whorl through until you lot find information technology on lines 61 - 64.

Now you can edit the content in betwixt the tags to modify the name and profession to your own. Get-go, edit "John Smith" to your own proper name:

Then, in between the <pocket-sized></small> tags, alter "Front End Programmer" to your ain profession.

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

Repeat to Edit Other Content

Now yous have the basic process downwards:

Inspect the content yous want to change
Identify the corresponding tags
Locate those tags in your HTML file
Edit the code to suit

Let's echo the process to edit the remainder of the content we want to customize.

Add Your Own Image

Next we'll add our own image to the left of the proper name and profession surface area. Right-click the image and inspect it, and note the respective tag:

<img src="_content/140x140.png" alt="">

You lot can run into in the inspector window this line is directly to a higher place the lines we simply changed:

Become to your HTML file and locate the tag on line 59:

For this tag, you lot'll demand to modify the value of the src attribute you come across inside the img tag. Yous do this past editing what's in between its quotation marks. You'll be changing it to the file name and location of your own image.

Grab an image of yourself that's 150px by 150px in size, (ignore that the filename there says 140x140.png, the size is really 150x150).

Drop your image into the "_content" subfolder; it's in the aforementioned folder as your "alphabetize.html" file.

Now, in your HTML file, alter the value of the src attribute, replacing "140x140.png" with the file you simply added to the "_content" subfolder. Exist sure to check the file extension you type out is the same as the one on your file east.thousand. "png" / "jpg":

Save your file, refresh Chrome, and you should meet your new picture prove up:

Edit Social Media Links

Now let'south edit the links on the social media icons in the meridian right corner of the template. Just similar earlier, right-click one of the icons and inspect it. In the window, look at the line above the i that's highlighted and yous'll come across information technology includes the text "facebook-icon". Nosotros're going to use this to find the code in our HTML file.

Back in Sublime Text, press CTRL + F and run a observe for "facebook-icon". You should find information technology on line 75.

The a tag on line 75 is what creates the link on the icon, and the href attribute you see inside it determines where that link will go. You'll demand to modify the value of that href attribute to your Facebook URL (for example: https://world wide web.facebook.com/mylink).

Supervene upon the # that's there by default with your URL. Then do the same thing for Twitter on line 79, Google+ on line 83 and LinkedIn on line 87.

If there is an icon y'all'd like to remove entirely, highlight its link starting at the opening <a> tag and finishing at the endmost </a> tag, so delete that code.

Now save and refresh your site, and then when you click the links they should go off to the correct location.

Edit Contact Information

Side by side up permit's change the contact information right beneath the social icons.

Showtime by inspecting the word "Electronic mail" so we can find where this contact information section starts in the lawmaking. Have notation of the line of code yous've highlighted, and the line below that so you can match it in your HTML file.

In Sublime Text, press CTRL + F once more and this time search for "Email". You demand to locate the example of the give-and-take "Email" which is surrounded by code matching what yous saw in the inspector window.

You'll find it on line 94. Highlight the default electronic mail address "john@sitename.com" in the two locations on that line:

So supersede it with your own email address. On the next line you tin also supersede the phone number with your own, and on the line beneath that you can replace the web address with your own:

Edit CV Sections

At present allow'southward go ahead and start editing the main CV sections of the template. There are a few parts to these sections, so we're going to starting time past inspecting each of them and so you'll know what to look for in your code. This will also be a chance for you to learn a trivial more about moving through the inspector window to discover different parts of your site.

Roll down to the "Professional Profile" section, right-click in the paragraph of text and inspect it.

In the inspector you'll see information technology has highlighted a p tag–this tag is responsible for creating paragraphs in your text.

Next up, we want to know what a whole section of text in a CV section looks like in lawmaking, non just private paragraphs. In the inspector window, click on the line of code to a higher place the paragraph you just inspected and you should meet all the text light up:

This tells yous that each section of code is wrapped in the tags <div class="cv-particular">...</div>. A div is short for a partition, and these tags are used to control layout and styling.

Now inspect the CV department's title, "Professional Contour":

At commencement, all you'll meet is another set of div tags. This is because the actual heading is nested in between these tags.

Hit that lilliputian triangle on the end of the line to expand it and see its contents, and then do the same over again on the next line until y'all see the "Professional Profile" text you're looking for. You'll observe information technology wrapped in <h2>...</h2> tags, which create a level 2 heading:

At present nosotros know what the code looks like for every role of this CV department, we can go back to Sublime Text and start editing information technology.

Position your cursor correct at the superlative of your HTML document so you can start searching from the top. Press CTRL + F and search for "cv-particular". Keep looking until you lot find the instance of of the code <div course="cv-item"> that'south right later the <h2>Professional person Profile</h2> code you merely identified.

Now you can replace the text for the Professional Contour section with your own. Wrap each paragraph of your text with <p>...</p> tags.

When you lot're washed, make certain the opening paragraph tag of your last paragraph of the section includes the aspect class with the value last, similar this: <p class="terminal">.....</p>. This applies a layout styling course from the template's CSS that will make certain that the spacing under the section of text is handled correctly.

If you lot relieve your HTML certificate and refresh your site you should see everything in the top two sections has been customized.

Now we can move on to editing the remaining CV item sections in the aforementioned way we just did with the "Professional Contour".

Inspect each office of each department to familiarize yourself with the code that you should await for in lodge to edit them.

Inspect a job title:

Inspect a job period:

Inspect a bullet list:

Utilise the aforementioned approach as you did to edit the "Professional Contour" section to edit the content of the remaining CV sections. To edit job titles, chore periods or bullet lists find the code that matches what y'all saw in the inspector window, just like you've done with each edit so far.

Use p tags to create paragraphs, and as with the "Professional Profile" department, if you're ending a department with a paragraph make sure its <p> tag includes class="last", i.e. <p grade="concluding">...</p>.

Note: if you desire to add new CV sections, or remove existing ones, you'll need to use the inspector to find the code tags that wrap the entire section.

In this instance you see the whole section is wrapped with the tags <div class="cv-item">...</div>.

In your code you tin at present find that entire block of code and either copy and paste it to create a new item, or delete the whole lot if you want to go rid if it.

Edit Copyright Bulletin

With your CV sections edited we're down to the concluding item on our list of changes; the copyright message in the footer. Once over again we'll be using the same process. Right-click the copyright bulletin and audit it:

Then discover the matching code in your HTML and edit it with the current yr and your own proper noun:

At present You Know How To Edit a HTML Template

Well washed! You know how to edit HTML and y'all've merely fully customized this HTML template to show your ain content. I hope you're at present feeling confident to accept on more lawmaking customization in the future.

The HTML template nosotros worked on might be a relatively simple one, merely remember the process for editing is always the aforementioned, no matter how complicated a template might seem. Only inspect the template and identify the code for the function you want to change, then find that code in your HTML file and edit it.

When you're editing, if you see an HTML tag you don't sympathize, don't let that hold you dorsum. There'south countless amounts of information online to help you lot learn what each and every i does.

v Height HTML5 Responsive Templates From ThemeForest

You lot've learned how to edit a HTML template. Now you know more most how to use HTML5 templates and how to edit ThemeForest templates. If you're ready to get HTML5 website templates and y'all don't know where to start, check out ThemeForest.

This is the best marketplace to become full general HTML templates. The HTML5 website templates you lot'll find at that place are professionally designed and offer lifetime updates and support.

Hither's a selection of HTML5 responsive templates. Customize them to fit all your needs and easily build your HTML project.

1. Canvas - The Multipurpose HTML5 Template

Canvas is ane of the best-selling full general HTML templates. With over 60,000 sales, this is a crowd-favorite thanks to its countless possibilities.

Yous'll get over 1200 HTML5 templates. That'due south right. Y'all tin can build annihilation yous wish with its 100+ multi and ane page demos. Canvas is a consummate and fast HTML5 responsive template. You've got to check out its alive preview here.

All-time template I ever purchased. -User flyersjoe

ii. Porto - HTML5 Responsive Template

Porto is some other favorite HTML5 responsive template. This general HTML template offers plenty of customization options.

Porto's latest updated includes 75+ demos and 600+ HTML files. This HTML5 basic template is very like shooting fish in a barrel to customize and features a high speed performance. Acquire more cool detail in the alive preview.

This is a peachy theme to piece of work with, from the quality of the code, range of features, and good documentation, it can save you fourth dimension considering it'due south like shooting fish in a barrel to use and customize, and information technology looks neat. -User jack2008

iii. BeTheme - Responsive Multipurpose HTML Template

If you've got multiple websites to build, consider BeTheme. This general HTML template comes with 600+ pre-built websites, ready to utilize.

This website lawmaking template comes with multiple layout grids, xx customizable header styles and more. Visit its live preview to check out more cool features.

4. Polo - Responsive Multipurpose HTML5 Template

There are hundreds of website code template to choose from on ThemeForest. And Polo is a fantastic option.

This HTML5 bones template comes with 220+ layout demos, 700+ templates, reusable elements and it's super lightweight and fast. If you similar HTML5 website templates with lifetime support and updates, this is for y'all. Learn more details visiting the live preview.

v. Litho – Multipurpose HTML5 Template

Litho is one of the newest HTML5 website templates. This general HTML template stands out with its make clean and mod blueprint.

Litho is a Bootstrap four, fast HTML5 responsive template. Information technology comes with 200+ ready elements and 230+ pre-made templates. Litho is perfect for whatsoever kind of website project. Just visit the live preview and encounter for yourself.

Discover More HTML Templates, Tutorials and Resources

I hope you enjoyed this tutorial about how to edit HTML and the selection of HTML5 basic templates. For some extra aid forth the way, check out these not bad resources. You lot can also check the the courses thirty Days to Acquire HTML & CSS and Introduction to HTML.

Editorial Annotation: This post has been updated with contributions from Maria Villanueva. Maria is a staff author with Envato Tuts+.

Did you lot find this post useful?

Kezz Bracey

Hi there. I'm a designer & coder who works in the areas of spider web design / development, game development and digital art. In the web space I'grand a front end all rounder but I have a item specialization in theme creation, no matter the platform. I also dear finding the latest nearly efficient, user focused design and dev techniques of the day. In game development I'thousand fond to playing with every different engine, toolset and framework I can find. In digital fine art I dear everything from painting to vector work to pixel art to 3D modelling. In curt, if it's creative and you can brand it digitally, I dearest information technology.