How To Do Templates In Web Design

Read Fourth dimension: sixteen mins Languages:

So you've but purchased an HTML template and now yous have to customize it before it goes online. But y'all're not experienced with code so you're not sure how to go almost it. Well, balance easy, because in this tutorial we're going to stride you through how to edit a HTML template.

We're going to exist working off the assumption you've never seen a line of HTML before, allow alone edited one, so no matter how new you are to working with lawmaking you'll exist shown exactly what to do every stride of the style.

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

If y'all're wondering where to find professional HTML5 website templates, scroll downwards after this tutorial. We've got a option of top HTML5 templates. Offset, you'll learn to edit ThemeForest templates and so, you'll meet some of the best from the marketplace.

What is HTML?

Let's start at the very beginning. Technically speaking the answer to this question is "Hyper Text Markup Language". However, for the purposes of customizing a template, you tin can consider HTML as a series 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, Front end End Developer</h1>

Sometimes, however, there are too stand lonely tags, with no closing partner, like this:

<img src="mypic.jpg">

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

To edit an HTML template all you need to know is which tags represent the parts of the page you want to modify, how to notice them in the code, and how to edit them then they testify what you lot desire.

Get Yourself a Lawmaking Editor

Yes, it'southward completely possible to edit HTML in Notepad or a like programme, but things will go much more smoothly for you if y'all use a proper lawmaking editing app. One of the main reasons is you'll get colored highlighting of your code, equally you lot'll see soon, which will make it much easier to read and edit.

I recommend Sublime Text, which you lot can download here: https://world wide web.sublimetext.com/3

Download and View Your HTML Template

Download the template you've purchased–in the case 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. But everything yous learn here tin can be applied to whatever HTML template.

If you're looking to build an online resume with a HTML template, here's a great option. Remember to roll down afterward this tutorial to find a selection of the all-time HTML5 responsive templates from ThemeForest.

Almost HTML templates will come in a Aught file - if so, go ahead and excerpt yours at present. Then await around inside the template'due south 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 up in Chrome. Even if Chrome isn't your default or preferred browser please use it anyway, because we're going to exist working with some tools it has in-congenital to help you lot with the editing process.

Place the Parts You Want to Change

If this is your offset fourth dimension learning to edit ThemeForest templates, try not to get drawn into the idea of tweaking the colors and layout merely notwithstanding. To practice that you lot accept to dig into CSS, the language responsible for page styling. It'southward a good idea to focus on one thing at a time when you're new to template customization, and HTML is the best place to beginning.

To get the ball rolling, take a look at your template in Chrome and effigy out which written elements and images on the page you need to change. If yous'd like, you can prepare a list then y'all can go through and cheque each item off as you make your edits.

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

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

Now nosotros accept a list of items to alter, we tin can set virtually locating their corresponding HTML tags in the lawmaking. Allow's start with the name.

Find the Tag in the Inspector

Correct-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 way of looking at the code. Hover your mouse over the line that shows <h1>...</h1> (heading level 1 tags) and you should see the name section of the template highlighted as y'all see in the screenshot above.

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

Now expand the h1 tags by clicking the fiddling triangle to their left and you should come across the content in between them, i.east. John Smith <pocket-size>Front end End Programmer</small>.

This wording matches up with what you come across on screen, and then y'all know you lot have constitute the correct part of the code.

Edit the Tag in HTML

It's now time to open up your HTML file for editing. Open up the "index.html" file in Sublime Text and you should see something similar this:

You want to find the code in here that matches what you saw in the Chrome inspector. Scroll through until y'all notice it on lines 61 - 64.

At present you tin can edit the content in between the tags to change the name and profession to your ain. First, edit "John Smith" to your own proper noun:

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

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

Repeat to Edit Other Content

Now y'all accept the basic process down:

Inspect the content you lot want to modify
Identify the respective tags
Locate those tags in your HTML file
Edit the code to suit

Let'due south repeat the process to edit the balance of the content we want to customize.

Add together Your Own Paradigm

Adjacent we'll add together our own image to the left of the name and profession area. Right-click the image and inspect it, and note the corresponding tag:

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

Yous tin can run across in the inspector window this line is direct above the lines we just changed:

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

For this tag, you'll need to change the value of the src attribute you see inside the img tag. You do this by editing what's in between its quotation marks. You lot'll exist changing it to the file proper 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 paradigm into the "_content" subfolder; it'south in the same folder as your "index.html" file.

Now, in your HTML file, change the value of the src attribute, replacing "140x140.png" with the file y'all only added to the "_content" subfolder. Be sure to check the file extension you type out is the same as the one on your file e.g. "png" / "jpg":

Relieve your file, refresh Chrome, and you should come across your new motion picture evidence up:

Edit Social Media Links

Now let'south edit the links on the social media icons in the height right corner of the template. Just like before, correct-click 1 of the icons and inspect it. In the window, look at the line higher up the i that'south highlighted and y'all'll come across it includes the text "facebook-icon". Nosotros're going to utilize this to find the lawmaking in our HTML file.

Back in Sublime Text, press CTRL + F and run a notice 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 within it determines where that link will go. Y'all'll need to change the value of that href attribute to your Facebook URL (for example: https://www.facebook.com/mylink).

Supplant the # that's at that place by default with your URL. Then practice the same thing for Twitter on line 79, Google+ on line 83 and LinkedIn on line 87.

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

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

Edit Contact Information

Next up allow'south alter the contact information correct below the social icons.

Get-go past inspecting the word "E-mail" so we can observe where this contact information department starts in the code. Take note of the line of lawmaking you've highlighted, and the line below that then you lot can match information technology in your HTML file.

In Sublime Text, press CTRL + F once again and this time search for "Email". You lot need to locate the instance of the word "Email" which is surrounded past code matching what you saw in the inspector window.

Yous'll detect information technology on line 94. Highlight the default email address "john@sitename.com" in the two locations on that line:

And then supplant it with your ain email address. On the next line you can also supervene upon the telephone number with your own, and on the line below that you tin replace the web accost with your own:

Edit CV Sections

Now let'due south get ahead and start editing the main CV sections of the template. At that place are a few parts to these sections, so nosotros're going to start by inspecting each of them so yous'll know what to look for in your code. This will also exist a chance for you to learn a little more well-nigh moving through the inspector window to find different parts of your site.

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

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

Next upwardly, we want to know what a whole department of text in a CV section looks like in lawmaking, non just individual paragraphs. In the inspector window, click on the line of lawmaking above the paragraph y'all just inspected and you should see all the text light upward:

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

Now inspect the CV section'due south title, "Professional Profile":

At beginning, all y'all'll run across is another ready of div tags. This is because the actual heading is nested in betwixt these tags.

Hit that lilliputian triangle on the end of the line to aggrandize it and see its contents, then do the aforementioned over again on the next line until you see the "Professional person Contour" text you're looking for. You'll notice information technology wrapped in <h2>...</h2> tags, which create a level two heading:

At present we know what the code looks similar for every part of this CV section, nosotros tin can go back to Sublime Text and start editing it.

Position your cursor right at the superlative of your HTML document then you tin start searching from the top. Press CTRL + F and search for "cv-item". Keep looking until you lot find the instance of of the code <div class="cv-detail"> that'southward right after the <h2>Professional Profile</h2> code you just identified.

Now you lot can supplant the text for the Professional person Profile section with your own. Wrap each paragraph of your text with <p>...</p> tags.

When you're done, make sure the opening paragraph tag of your final paragraph of the section includes the attribute class with the value last, like this: <p class="final">.....</p>. This applies a layout styling class from the template's CSS that volition make sure that the spacing under the department of text is handled correctly.

If y'all relieve your HTML document and refresh your site you should see everything in the peak ii sections has been customized.

At present we can move on to editing the remaining CV detail sections in the aforementioned manner nosotros only did with the "Professional person Profile".

Inspect each part of each department to familiarize yourself with the code that you should look for in order to edit them.

Inspect a job title:

Inspect a job flow:

Inspect a bullet list:

Employ the same approach as you did to edit the "Professional Contour" department to edit the content of the remaining CV sections. To edit chore titles, chore periods or bullet lists find the lawmaking that matches what you lot saw in the inspector window, just similar you've done with each edit then far.

Use p tags to create paragraphs, and equally with the "Professional Profile" section, if yous're ending a section with a paragraph make sure its <p> tag includes course="concluding", i.due east. <p class="final">...</p>.

Annotation: if you want to add new CV sections, or remove existing ones, you'll need to utilize the inspector to detect the code tags that wrap the unabridged section.

In this example you come across the whole department is wrapped with the tags <div class="cv-item">...</div>.

In your code y'all can now notice that entire cake of lawmaking and either copy and paste information technology to create a new particular, or delete the whole lot if yous desire to get rid if it.

Edit Copyright Message

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

So find the matching code in your HTML and edit it with the current year and your ain proper name:

Now You Know How To Edit a HTML Template

Well washed! You know how to edit HTML and you've just fully customized this HTML template to show your own content. I hope you're now feeling confident to take on more lawmaking customization in the time to come.

The HTML template we worked on might be a relatively unproblematic one, just remember the process for editing is always the aforementioned, no matter how complicated a template might seem. Merely inspect the template and identify the lawmaking for the part you want to modify, then find that lawmaking in your HTML file and edit it.

When y'all're editing, if you see an HTML tag you don't understand, don't let that concord you back. There's endless amounts of data online to help y'all acquire what each and every one does.

five Top HTML5 Responsive Templates From ThemeForest

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

This is the all-time marketplace to get general HTML templates. The HTML5 website templates you'll observe there are professionally designed and offer lifetime updates and back up.

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

i. Canvas - The Multipurpose HTML5 Template

Sail is one of the acknowledged general HTML templates. With over 60,000 sales, this is a crowd-favorite thanks to its endless possibilities.

You'll get over 1200 HTML5 templates. That's correct. Yous tin build annihilation you wish with its 100+ multi and one page demos. Sheet is a complete and fast HTML5 responsive template. Yous've got to check out its alive preview here.

Best template I ever purchased. -User flyersjoe

ii. Porto - HTML5 Responsive Template

Porto is another favorite HTML5 responsive template. This full 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 easy to customize and features a high speed performance. Learn more absurd detail in the live preview.

This is a great theme to piece of work with, from the quality of the code, range of features, and skillful documentation, it can save you time because it'south like shooting fish in a barrel to employ and customize, and information technology looks great. -User jack2008

3. BeTheme - Responsive Multipurpose HTML Template

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

This website code template comes with multiple layout grids, 20 customizable header styles and more than. Visit its live preview to cheque out more cool features.

four. Polo - Responsive Multipurpose HTML5 Template

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

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

5. 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 pattern.

Litho is a Bootstrap 4, fast HTML5 responsive template. Information technology comes with 200+ ready elements and 230+ pre-made templates. Litho is perfect for any kind of website project. Merely visit the live preview and meet 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 actress help forth the way, bank check out these great resources. You tin can also cheque the the courses thirty Days to Learn HTML & CSS and Introduction to HTML.

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

Did you find this post useful?

Kezz Bracey

Hi there. I'm a designer & coder who works in the areas of web design / development, game development and digital fine art. In the spider web space I'k a forepart all rounder but I have a particular specialization in theme creation, no matter the platform. I also honey finding the latest nearly efficient, user focused design and dev techniques of the solar day. In game development I'm fond to playing with every dissimilar engine, toolset and framework I can notice. In digital fine art I love everything from painting to vector work to pixel fine art to 3D modelling. In brusk, if it'southward creative and you can go far digitally, I honey it.