Instructions
This page contains instructions to help customize and further develop this template.
This page contains instructions to help customize and further develop this template.
The animation when loading the homepage can be found under page trigger interactions in the interactions menu. It can easily be modified or disable all together.
The Project Card hover interaction is split into three separate interactions:
The Project Card Button & Contact Button has a mouse hover interaction in order to animate its icon when hovering it.
In order to change its icon, you need to change both (two) icons which both are contained inside a div with a class of Button Icons. The easiest way to change these icons is to find the icons in the navigator, pressing them one after one and change them from the settings panel to the right.
The About Modal is set as display: hidden as default. If you want to modify it, you can find it as a About Modal component at the bottom of the page in the page element navigator to the left in the designer.
The interaction for displaying it is can be found as a mouse click interaction on the about link in the navigation bar, and the interaction for hiding it can be found on the About Modal Close Button inside the modal itself.
In some cases, the Contact Button seem to be displayed for a split second before the homepage fully loads. In order to get rid of this, simply set the Contact Button to display: hidden as default in the designer.
The hero section on the homepage has a fixed position and gets hidden behind other content when scrolling down the page. In order to make it visible at the top of the page, a div element with a static position and a set height (Section Hero Static Visibility) is placed on top of it.
The Section Hero Static Visibility class decides the total height of the hero section since the same class is applied as a combo class on the hero section (Section Hero) as well. This needs to be a set height and not a min-height.
Please note that other sections below the hero all need a background color and a z-index of 2 or higher in order to be visible above the fixed hero section.
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 (combo class).
These naming conventions makes it easier to develop, 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.
Icons for the links in the navigation bar and social network link lists (on the home- and project pages) are native Webflow embeds containing SVG code for the icons. The reason for this is to be able to use the SVG attribute fill="currentColor" which allows for the icons to swap color when hovering the link.
If you want to change these SVG's, simply extract the SVG code from your own icons, apply the currentColor attribute and paste the code into the embeds.
Two elements in this template are SVG (vector files) instead of pure text elements. These are the stylized Julian Kennedy text in the footer, as well as the Julian Kennedy text with flowers at the bottom of the About Modal. Both of them are using the Bebas Neue font.
The reason for using SVG's is to make sure that the elements span 100% of their parent widths. Using text elements is possible, but may require some fiddling with viewport width units (vw units) between breakpoints.
When modifying these elements, I would recommend replacing them with your own exported SVG's.
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.
I'm a Product Designer at Lightcast, specializing in four main services: Visual Design, UX Research, Interactive Design, and Development. My background in advertising and branding has forged my skills in art direction, digital design, and integrated brand marketing – the secrets to unleashing my creative prowess.
What truly fuels my fire is crafting designs that make a positive impact on society. Whether it's creating stunning visuals or diving deep into user research, my ultimate goal is to connect and engage users on a meaningful level.
