Whether you just bought Gridfolio template, or are simply having a look, we are happy to have you here. As you might know, Gridfolio is built on Webflow - the powerful no-code tool for creating websites. If you are already familiar with it, I'm sure editing this template will be a piece of cake.
On the other hand, if it's your first time using Webflow, you might want to have a look at Webflow university and their 101 crash course.
Below you can find some general rules regarding styling your template.
In Gridfolio's template we've used Color Swatches. It means that you can change color in one place, and it will be applied to all the elements that share the same swatch.
To change color swatches:
See the video below for mini-tutorial.
Gridfolio is using two additional fonts: Sentient and Satoshi. Both of them can be downloaded at Fontshare. These fonts are 100% free for personal and commercial use.
Satoshi font is applied to the Body of the website, and because of that, is automatically applied to all paragraphs and text blocks. You can change it globally by:
See the video below for mini-tutorial:
Sentient font is applied to H1-H3 headings. You can also edit it the same way by:
All of the icons are in the .svg format, so changing the Color Swatches on the website will not affect them. You can download these icons from the "Assets" tab, and edit them in your design software (Photoshop, Figma, Sketch etc.). You can also upload your own icons directly.
Below you can find some general tips on editing template's copy and images.
When it comes to copy, in Webflow we distinguish two different copy types - static content and dynamic content (CMS).
To quickly distinguish these copy types you can have a look in the navigator tab, where static content will be displayed using white font.
And dynamic content will be displayed using purple font color.
You can also directly see which element is static and which dynamic, by directly hovering over it in the designer space. The static content will have a blue border around it.
And dynamic content's border will be purple.
Every copy, but the projects related one, is a static content. It means that you need to edit it directly on the page.
You can edit static content in two ways:
Check the video below to see how to edit static content in the "Designer mode".
Note: we cover in detail editing the projects collections lower on this page in "Template specific" section.
Editing dynamic content is very easy, but can be a little confusing at the beginning. This type of content you will need to edit through collections. Once you get it, it's as simple as filling in the web form.
To edit dynamic content:
You can read more about editing collections and working with Webflow CMS on their university page.
There's two different image types used in this template - normal image and background image. You might notice that we used normal images mostly for icons, and the big images are implemented as a background image.
To edit normal image:
To edit background image:
Have a look at the video below to see how we edit background image on Home V1.
Editing your eCommerce products is very similar to editing dynamic content.
To edit your products:
To save you time and give you the best experience, below we deep dive into specific elements and pages in this template.
In Gridoflio we use two different symbols for navigation - Navigation White and Navigation Black. Please note that editing one of the symbols will not affect the other one. Same goes for mobile navigation. So if you are using these two different symbols, you will need to edit them separately to have the same structure.
In the Home V1 you might notice the navigation bar that's visible on-scroll-down the page. We thought some of you might need such a navigation, and we decided to show it only on the first homepage.
To edit this navigation:
See the video below showing how we do it.
Enable scroll navigation on the page:
You can enable the scroll navigation on any page by applying interaction to the first section on this page.
See video below to see how we do it:
We suggest editing mobile navigation from the "Tablet" viewport so the changes get applied to all the smaller viewports as well.
To edit mobile navigation:
See video below to see how we do it:
Project template page gives you a lot of flexibility. If you go to the project collection, you will notice number of different inputs and galleries.
The required fields to add a new project are:
All remaining fields are optional and if you leave them empty, the section related to it, will be hidden. So it's really up to you how you use them; depending on your needs. you might decide to use all of the sections or none of them. Images below show, which optional fields in CMS relate to which section. As an example we use "Lost in dance" project.
Below we list some of the tips, tricks and "don't forget's".
In our opinion the most efficient way to start, is to purchase hosting plan for your website, at the beginning. That way, even on free Webflow plan, you will be able to add more pages to your project. That's important, so you can copy/paste sections to your newly added pages, so you don't change original template pages. That way you can always reuse the original layouts.
Before you publish your website make sure to change your meta titles, descriptions and images. You'll need to do it per page and it's very important for your SEO.
To do that:
We understand that you might want to turn off some interactions. You can easily distinguish elements with interactions applied. In the navigator tab, they will have a little bolt icon visible. In the designer area, after selecting specific element, you will see green bolt icon as well. After you select such an element, go to interactions tab on the right and delete the interaction by clicking the bin icon.
Before you publish your website save all unused template pages as draft so they don't get listed in search engines like Google.
If you purchased Gridfolio template we offer you basic support. For questions directly related to our template please leave us an email on firstname.lastname@example.org
On the other hand if you would like us to customize your template the way you need it drop us a line at email@example.com