This page contains instructions to help customize and further develop this template.
The first section on the homepage (the project section) is "fixed", meaning it gets hidden behind the footer when scrolling down the page.
In order for this to work correctly, the footer section needs to have a set background color, a set height and a higher z-index than the project section.
The project section itself also need to have a set height. It's set to 100vh (viewport height units) as default.
The floating navigation bar has an interaction that hides it when the user is scrolling down the page, and revealing it when scrolling back up.
These interactions can be found in the interaction settings panel to the right of the designer. They're found under "Page trigger" animations and are called "Floating Nav - Hide" and "Floating Nav - Show".
If you wish to edit the page load animation for either the homepage or the project template page, you'll find both of them under "Page trigger" in the interaction settings panel to the right of the designer.
In case you're removing elements of the site that are used in the intro animations (navigation bars, project lists etc.), make sure to remove these elements from the intro animations as well.
This template has 2 modals: About & Contact. These modals are hidden as default in the designer.
The modals can be customized and edited by visiting either the homepage or the project template page, double clicking either of the "About Modal" or "Contact Modal" component, selecting the outermost div element and setting its "display" setting to "flex".
The open/close interactions for both modals can be found in the interaction settings to the right in the designer.
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:
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.
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:
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.
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.