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.
