Foresight - Webflow HTML Website Template

Blank Starter Template

Inside the "Template" directory, you'll find a page titled "Blank Starter Template". This template includes a navigation bar and a footer - the ideal starting point for your pages.

1. Duplicate the Blank Starter Page template

Note: Be sure to change the Parent Folder to the desired location.

2. Copy and paste blocks to the newly created page:

Copy Sections from any page, then paste them into the body of your newly created page. Also you may copy sections from any page listed on the main landing page.

Style Guide

The Style Guide page demonstrates the display of all base elements found in the template and is a good place to start familiarising yourself with the template.

You'll also find a section demonstrating how to correctly use the associated utility classes.

Editing Typography Styles

Setting heading styles

Instead of using classes, you must click the header then in the Selector drop-down where you would type in the class name, select “All H1 Headings” then make your change. Same goes for all base heading elements. Click the element, choose “All heading 5”, then any changes you make to that will be reflected across all in the site.

Setting Body Text and paragraph styles

Follow the same procedure for body text and paragraphs - which are specified on the Body element. Select the body element, and from the Selector dropdown, choose “Body (All Pages)” and change the typography settings for that element. These styles then flow through to the paragraphs and other generic text elements in the site.

Grid System

The template uses a desktop-first 12 column grid system. Easily contain content to grid containers. It is recommended that you also place a unique class on a column element so you can easily control its width on other breakpoints:

1 Column: This container limits content to 8.33% of the page.
2 Columns: This container limits content to 16.67% of the page.
3 Columns: This container limits the content to 25% of the page.
4 Columns: This container limits the content to 33.3% of the page.
5 Columns: This container limits the content to 41.67% of the page.
6 Columns: This container limits the content to 50% of the page.
7 Columns: This container limits the content to 58.33% of the page.
8 Columns: This container limits the content to 66.67% of the page.
9 Columns: This container limits the content to 75% of the page.
10 Columns: This container limits the content to 83.33% of the page.
11 Columns: This container limits the content to 91.67% of the page.

SVG Icons

Unfortunately Webflow does not allow dynamic coloring of SVG icons and dividers. To change the icon or divider color from the default:

Download the icon SVG file
Open the SVG file in a text editor
Change the hex value to your desired color
Save, and reupload the icon.

Custom Code

Inside the Project Settings, in the Custom Code tab you'll notice some style code has been added to the head of each page:

Font Rendering Custom Code

This code is to ensure that the text rendering is smooth and consistent across all browsers. It does not require any action on your part.

More Information

For further information, please consult the Webflow documentation or reach out to us via our support page.