12 Column Layout System

The 12 column system is based on Bootstrap’s 12 column grid system. Using this system has more flexibility to create dynamic layouts and easily made to be fully responsive across all screen sizes.

The width of the screen is split into 12 equal columns covering 100% width. Learn more about the 12 column grid system

Changing Images

To replace images that are not facilitaed to the site through the CMS (images added to CMS) one simply clicks on the image to highlight it and then go to the settings panel in the right side and go down to 'replace image'. Here is Webflow's guide to adding and replacing images.

‍

Finding Images in the navigator

Not all images on this site can be accessed just by clicking on it. Some images are behind other elements and need to be selected in the navigator. These images are positioned fixed or wrapped in a div block with the class name 'BG Image Wrapper'.

Icons

The icons used in this site can be customized.

There is an icon template sheet here on Figma. There is a quick video tutorial below to demonstrate how to customize your icons.

All you need to do is select an icon, change the fill color in the right panel and then export the png file. This png image is already set for the web and can be dragged and dropped into the assets panel in the Webflow designer.

‍

‍