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.
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 { }.
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.
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.
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
Font Color
Font
Font Size
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!
