How To Customize Prebuilt HTML Templates

Using custom, prebuilt HTML templates for your website are a great way to save time and money. These templates usually get you 90% to the finish line with no time investment, and little financial investment (compared to learning to code on your own or hiring a designer or developer).

These templates come with their own color palettes and design components, so it’s completely understandable that you feel like you are limited in expressing yourself on your website when using a pre-built HTML template. However these templates are usually easy to customize, to fit your brand’s identity.

So while purchasing templates may seem like a no-brainer, it’s important to note that you may need to get your hands a little dirty as well. Adjusting the color palette and adding/changing copy on the site will require a little bit of CSS. But no worries, we got you covered!

We’ll go through the basics of styling design elements on a webpage using HTML and CSS. If you’re considering purchasing a template, then chances are that you value your time. So we won’t waste your time with advanced concepts.

Brief Overview

The file types we will be looking at are .html/.php, and .css. The first two are the files that hold our content, and the last file type holds the styling for our content. 

Customize HTML Templates Using ID’s

ID’s are used to style one element on our site. This means that it can only be used once. ID’s are great for styling elements like our headers, footers, or if you want to target individual text elements.

In order to style an element with an ID, go through the .html or .php file and find the element you want to style. Here are some examples of elements with an ID attached to them.

Customize HTML Templates Using ID’s

If for whatever reason you’d like to add an ID to an element add this syntax: id=”idName”, where ‘idName’ can be anything you’d like as long as it hasn’t been used elsewhere on the site. Once the ID is created, head over to the style.css file and add this syntax: #idName {  }.

CSS ID Syntax

We’ll go through some common CSS properties that you can change, like color and font size, later on.

Customize HTML Templates Using Classes

Classes are used to style more than one element at once. So you can use this same class as many times as you want throughout your site. Classes are typically used to style reusable elements like headings and subheadings, text blocks, and containers. 

In order to style an element with a class, go through the .html or .php file and find the element you want to style. Here are some examples of elements with a class attached to them.

Custom HTML templates using classes

Adding classes and styling them works similarly to adding ID’s. The only difference, is the syntax to add classes in your .html or .php files is: class=”className” and to add them in your .css file is: .className.

CSS Class Syntax

Common CSS Properties For Customizing Prebuilt HTML Templates

When using prebuilt HTML templates, there are some common properties that you might be interested in customizing. Here are some examples:

Background Color

Background Color CSS Syntax

Font Color

Font Color CSS Syntax

Font

Font Family CSS Syntax

Font Size

Font Size CSS Syntax

You should not have to feel constricted when using prebuilt HTML templates. Chances are you’ll find one that fits the needs of your business, but just needs a little tinkering to fit the business brand identity. What we’ve gone through here should be more than enough to help you tinker with templates.

If you have any questions about customizing our prebuilt templates, please do not hesitate to reach out to info@webplate.io. We’d be more than happy to help!