Instructions
Hey! I'm Nikolai, a Webflow Professional Partner currently based in Edinburgh. I'm also a template designer, so I create templates just like this one. I wanted to do a really interesting template this time, so let me explain how it works.
The homepage
The homepage to the website is simpler than you think.
You'll see a bunch of page link boxes at the bottom:
These are symbols that have link blocks on top. This is so you can use a form, or a CMS collection, or any type of content for these links. You shouldn't edit these blocks on this page, other than changing the links.
If you remove these blocks, you'll see the page is actually a pretty standard section-by-section page. There is a simple interaction to hide these blocks when you scroll down, which you'll find in the interactions panel.
Once you've changed your name at the top of the page, you'll want to adjust the size so it fits the full page, and adjust for the different screen-sizes.
The blocks page
These are the symbols that are used on the homepage, and you can edit the symbols here. Just double click on any symbol, edit it, and it will update on the homepage.
The figma file
If you want to add more stickers, signatures, or play around with the design at all, then just email me with the receipt of the template, and I'll send that to you.
Naming Conventions
I've built a naming convention system that will make it easy to edit and add new content and sections as you go through and create new pages. The layouts are built using a 12 column grid (which you can read more about here), and also using grid blocks.
I've found that these are the best ways to create complex sections and beautiful pages, without having to completely reinvent the wheel by adding in hundreds of different classes. Find out more about how they work below.
Column naming conventions
Columns are a great way to be able to build hundreds of different unique layouts, all while keeping within the same simple system.
All you need to do is set up a "Column" class, then set up the different sizes for on desktop, tablet, and mobile. It's best to build on a 12 Column layout, as this is the structure that is currently most commonly used throughout the web, and most website designs are initially built on a 12 column layout.
This is much more flexible than using the built in Column element, as if you use the built in Columns, you'll find their limitations when you get stuck building a complex layout.
Grid naming conventions
Grids are another great way to structure content, and the built-in Webflow grids are easy to use. These layouts are great for card layouts, such as blog posts cards.
I use a very similar structure to columns, with first defining the element as "Grid", and then defining how many columns each grid section has for the different screen sizes.
By defining all grids with a main "Grid" class, you can adjust all grid sections at once if you ever need to change their margin, gap size, or even background colour.
I've created layouts for grids with 4, 3, and 2 columns, but have also defined special layouts with one side of the grid bigger than the other, such as 1-1.5 and 1-2. These can come in handy for feature or hero sections.
To find out more about naming conventions used across my templates, read this blog post on naming conventions.
Customizable to suit your brand
Feel like changing something in the template? All of our templates where built using Webflow without writing code. That means you can customize them in every way to suit your brand. Learn more about how to customize Webflow sites at Help Center