In this brief guide, you will find all the information to customise this template according to your brand or personality.

If you are new with Webflow, I would recommend you to watch courses from Webflow, its completely free.


In the left-top corner, If you hover over the Webflow icon you will get an option to open the menu. From that menu navigate to the Project Settings menu to access all the settings related to the project.

Project settings link
Project settings link

Once you open the Project Settings link, You will get sorts of settings in a tab format. Please head over to the Fonts tab to access the font settings.

You can add Google fonts or add custom fonts using the upload button.

Font setting tab in project settings
Font setting tab in project settings

Once you upload your desired font, Please navigate to Webflow Designer (You can find a button on the top right corner near to Publish button).

Open any page and select Body from the Navigator (Keyboard shortcut is Z to open Navigator). After selecting the Body element, head-over to the Selector (right side panel) and select the Body (All Pages).

If you look down, you will find the Typography Styling section. You can select the font (Uploaded fonts will be displayed there)for the body of all pages. It means this font will be the base font for all the pages unless you override it for any particular element.

Body (All page) selector with typography settings
Body (All page) selector with typography settings

For accessibility reason color used on interactive elements (Such as Buttons, Forms, and Links) will be different for their different states.

These color shades will be added during development of the template. You can find the color swatch by selecting any element and clicking on the color-changing properties (Typography, Backgrounds, etc.)

At the bottom of the color picker, you can find the name of the color and on the right side, you will find Unlink, Edit, and Delete buttons.

Color swatches list of current template
Color swatches list of current template
Typography usage
Neutral 900
Neutral 600
On Interactive
Neutral 300
Neutral 400
Green 300
Layer usage
On Background
Neutral 50
Subtle Border
Neutral 100
Accent Background
Green 300
Interactive usage
Green 300
Green 400
Green 500
Neutral 200

Icons used in templates are Google font and Static SVG image. SVG icons will have template color you can download them and change the color to your need also you can easily customize using any vector software.

Naming Convention
Class names

Every class and components names follow Title Case. Class names used in the template are pretty straightforward and self-explanatory, It defines its identity and properties, for example, the Section class has combo classes for Padding, Color, and Height properties which can be utilized with other section elements. And Home Hero Grid class is only being used one time which represents its identity.

Interaction names

Interaction names follow the Sentence case. Similar to class names every interaction names are self-explanatory, which represents the triggering element's name and description.

Aspect Ratio

Aspect ratio helps achieve image and video to maintain a specific size for pixel-perfect responsive design.

Aspect ratio defines the ratio of width to its height, For the a:b aspect ratio, the image has a unit of width and b unit of height. Aspect ratio - 7:9 means, the image or video have 7 unit of width and 9 unit of height. A list of used aspect ratios used in this template will be available on the Style Guide page.

Static Content

Editing static content is very easy as working on a .doc file. simply double-click it and edit the text or select any image and under setting, you will option to change the image.

CMS Content

CMS content is easy to identify. Any selected element with the Purple indicator shows its source is from the CMS collection.

Purple color shows it's CMS data
Purple color shows it's CMS data

Top parent element of the selected element will show you from which CMS collection data is coming. CMS content needs to be updated from the CMS collection panel. You can find it in the left side panel of the designer.

CMS data source
CMS data source

Backups in Webflow are automatically saved. We don't have to worry about keeping a manual backup of small changes. However, you can also backup manually.

You can access all the backups from the settings panel next to Font tab. If you stuck anywhere and want to override the old settings it's just one click away.

Webflow automatic backup and restore point
Webflow automatic backup and restore point

If you find any issue, need help, or feedback, or just want to say hi, feel free to send me an email at, I read every response and reply to them.