How to customize your template

Learn how to customisation your template. Including changing the typography, colors and container sizes.
Couldn't find what you need?
Reach out to our friendly team and we'll get back to you as fast as we can!

Monday - Friday AEST

This article provies you with a quick introduction to the customisation of your template. This includes changing the typography, colors, and container sizes. For more detailed customisation it's best you start with some layout lessons from the Webflow university.

How to change the typography

One of the easiest ways to customise the vibe of your template is to make changes to the typography style. This can be done in just a few simple steps and be applied across all your pages.

Firstly upload your custom type face, or select a font from Google in your project settings area

Once your font has been added, you can simply target the <body> element (click on the top layer on the left side) and here you can set a base font for all pages. This will set the primary typography for the pages, but you might need to change the defaults for the H1, H2, H3 etc.

How to change the colors

Although you can easily click through each of your pages and apply color changes individually, by editing the global color swatches you can more easily change the color across the whole template.

Changing the global swatch will change every instance where that color is used across the template. To get started find an element where the color you want to change is in use.

Once you have selected the color swatch that you want to change, you can simply click the edit button and begin changing this color swatch. Remember that any changes here will apply to all the locations where that color swatch has been used.

For example, if you change this primary blue to a red, all buttons and areas where the blue has been used will now be red. While in the edit mode, you can change the swatch name and the hex code, but be sure to click save to lock in any changes.

How to change the containers

All templates use a simple container system to hold the primary content.

These are often refered to as;

  • Container
  • Container (Large)
  • Container (Small)
  • Container (Extra Small)

To edit these, simple select the container element and change the max-width to your desired size. This will allow you to very quickly change the size of your website containers across all pages.

How to remove interactions

Some of our templates come with interactions straight out of the box. We know that not all customers want, or like these default interactions - but luckily they can easily be removed.

Frequently Asked Questions

Frequently Asked Questions

Do you offer custom services & customisation?

Unfortunately, we do not currently offer custom services and customisation. We suggest vetting your own freelancers via proven channels.

Does Component Club work with Safari?

Our copy+paste functionality is not supported with Safari. Component Club is accessible on Chrome, Firefox and Edge.

Are Templates included in the Component Club

No, Premium Templates are sold individually and must be purchased directly through as our official template partner. Check out all our templates on their marketplace!

How many daily copies do we get?

You can copy up to 20 components in a 24 hour period. Please respect our strict policy around component usage. If you need an urgent reset, just reach out to our friendly team via chat.

Do you offer refunds?

No, we do not offer refunds for digital goods. Please ensure you are 100% confident in your purchase. All products allow for detailed previews. If you need additional details about a product, please contact us prior to purchase.

Reminder, you can cancel your subscription at any time. We cannot provide refunds for subscriptions that have not been cancelled or used. Please ensure you cancel these when not in use.