Templates For All

Using a Template

"How can I edit a website template?" That's one of the most common questions we receive by email. There are several ways to edit templates, but I have my own methods. This tutorial will show you the most logical way to edit a template.

This tutorial assumes that you know how to open a .zip file. We will not cover that in this tutorial.

Fig.1 Unedited Template

You also need an HTML editor for this tutorial. There are two types of editors. WYSIWYG editors, which you would edit HTML in a word processor like environment, are very popular. Another style is the text editor style, where you edit HTML like you would a text document. This is my preferred method.

I'm going to use Blue Griffon for this tutorial because it is probably the easiest way for a beginner to edit a template. Blue Griffon is a 100% free WYSIWYG editor. These steps should work with any editor.

The steps we are going to take:

  1. Create the navigation links
  2. Use the template file to create the rest of the pages
  3. Edit the content
  4. Test the navigation to make sure it works

Fig.2 Template In Editor

Step 1: Create the navigation links

Before you start, think about the pages you want to access from any page. I'm going to use Home, Products, Services, About Us & Contact. The template I chose already had those pages listed in the navigation. Go ahead and list the pages you want accessible from every page. Now we'll make a link to the pages using a one-word name followed by .html. For example, About Us would become about.html and Contact Us would become contact.html. Right click the page name and go to link properties. For the Home link I'll put index.html because that's the default file a web server loads when you go to a website. For the rest of the pages just enter your desired name for the page followed by .html. It's important to make sure the link is lower case. Save the file and proceed to the next step

Fig.3 Creating The Pages

Step 2: Use the template file to create the rest of the pages

The next step is pretty easy. We're now going to make a copy of the template file to make the other pages of the site. The easiest way to do that is right-click the index.html file and select copy. Then right-click a blank space in the folder and select paste. That will create a copy of index.html named index - Copy.html. This is shown in figure 3. Just rename that file to the second page of the site. We already have index.html which is the homepage. Now repeat that step for the rest of the pages.

Step 3: Edit the content

The next step is also very easy. Go ahead and enter all the content across all the pages. There are lots of places to get pictures for you to use on your site. Sites like PicJumbo and Pixabay have very good free photos you can use on our site without paying royalty fees.

Step 4: Test the navigation to make sure it works

We're at the last step. Now we want to test the navigation and make sure it all works. Just open index.html up in your favorite browser and click all the links in the navigation.

Fig.3 Completed site

We're done!

Congratulations, you now have your very own website. Now all you need to do is upload it to your web server so people can access it.