Instructions

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.

Once you open the Project Settings link, You will get categories 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.

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.

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.

Icons used in template is Google font and 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.

Google icon font Github repo Link

Google icons work the same as the typography settings. In this template, you will get Google Icon's Sharp pack. You can change it if you want to. I have packed them in components to use them quickly by just changing the value.

Head over to the Google font website. Select any icon you want to use, and the right panel will open for a particular font. There you will find the icon name and copy that icon name.

In Webflow designer, click on the component, and on the settings tab paste the icon name you copied from the google icon website. You will get that icon in the design.

Please note that in the template, the size of Google font is 16px which is coming from Body (All pages). If you want to change the icon size select the icon and click on the edit component there you will get the selector.

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 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 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.

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 settings, you will get an option to change the image.

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

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.

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.

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