Instructions

Contact Modal

The contact modal can be found and customized through the "Contact Modal (Fixed)" component on all pages. It's hidden as default, so simply double click into the component, select the outermost DIV element and change its "Display" setting from "None" to "Flex". When you're done customizing it, simply hide it again by setting its "Display" setting to "None".

In order for the contact modal to display properly (moving aside the whole page, while the modal takes over from the right) it's important to keep all sections and elements on each page inside a DIV with a class of "Page Wrapper".

Page Load Interaction

There are two page load interactions being used on the site - "Page Load - Index" and "Page Load - Subpage". The first one is used on both the homepage and the about page, while the second one is used on all other pages. If you change class names or remove any elements in the hero sections on any page, please make sure that the key frames attached to said element is removed from the page load interaction as well.

If you add any new element or heading lines on a page, make sure to wrap it inside a div with a class of "Page Load Transition Inner Wrapper" as well as a div with a class of "Page Load Transition Outer Wrapper". This will automatically make the new element reveal itself on page load. See the homepage hero title as reference.

Project Grid

Each project CMS item can be set as a "Horizontal", "Vertical" or "Standard" project with the flip of a switch inside the CMS. These switches makes it possible to sort out the fitting project in the irregular homepage "grid", which is made up of 3 different collection lists.