Instructions

This page contains instructions to help customize and further develop this template.

Interactions

Preloader

The preloader is present on every page of this template. You'll find it at the bottom of the page using the navigator to the left of the designer. If you want to remove it, simply delete the Preloader component from a page and delete its associated page load interaction called "Preloader - Page Load" in the interaction settings to the right of the designer.

Fixed navigation

The fixed navigation bar can be found as a component with a name of "Nav Fixed" at the bottom of each page. This nav bar has a couple scroll interactions - "Fixed Nav Scroll Down" and "Fixed Nav Scroll Up" that you can find in the interaction settings under "Page trigger" - "Page scrolled".

Class naming conventions

This template adheres to fairly strict class naming conventions that combines the best practices of BEM (Block Element Modifier) and naming conventions found in the Webflow's template guidelines (following a Title Case descriptive format).

Classes are composed of three main entities:

  • Block
  • Element
  • Modifier

The Block represents the overarching "container" or "parent" of an element, the Element is a nested part within the Block, and the Modifier is an optional addition that alters the styling of an element.

These naming conventions makes it easier to create, modify and manage the styles and functionality of elements throughout the project, promoting consistency and efficiency in the development process.

Grids

The 12-column grid (class: Grid) can easily be used for a variety of scenarios, whether you need 2, 3, 4, 6 or 8 column layouts. Webflow also offers the flexibility of manual child element placement, allowing you to create more advanced layouts with ease.

Grid column breakpoints:

  • Desktop - 12 columns
  • Tablet - 8 columns
  • Mobile landscape - 4 columns
  • Mobile - 2 columns

Combo classes (modifiers) can be used to change the amount of columns on different breakpoints, change column/row spacing or extend the grid's functionality in whatever way you may need.

Support

Did you find a bug in the template or is there a part of the template that remains unclear on how to work with? Feel free to send me an email and I'll make sure to take a look at it as soon as possible.

Bugs related to Webflow itself should be directed to Webflow support. Design related help can be found on the Webflow discourse forum.