Getting Started

Use this page to get familiar with the basic components of your new template.

Basics for Webflow.

Before jumping into your template, we recommend a basic to intermediate understanding of the Webflow platform. This will help you take control of site changes and really get the most out of your website project.   We recommend the following resources -

Webflow University

The most up-to-date resource for webflow beginners and
experts.

Webflow Videos

Short and sweet videos to get you familiar with the
product.

Flowbase

Additional free resources, cloneable assets, advanced guides.

Global typography styles.

This template makes use of the global styles for your typography. Global styles allow us to specify the font size and colors for each of the typography tag types - H1, H2, H3, H4, H5, H6, Paragraph, Links, etc etc.

This way when we use a heading element, like H1 we can expect some certain styles. If you move components to a new project, it will inherit that projects global styles, meaning you will likely see design differences. Be sure to set the global typography styles for any project that you are copy sections into. You can learn more here

‍

Change Section Links (Work / About / Services)

Navigating to the work, about and service section uses the #ID tag. Similar to the scroll to section feature, these simply take the user to section they are looking for. Once you have deployed your site, or changed your URL you simply need to update these links to match the new URL. For example the work URL currently is - https://creator-template.webflow.io/#Work

When you change the URL you should update this to be - yourwebsite.com/#Work

‍

Change to Darkmode

We provide full .figma files and dark mode design for those that would like an alternative look. Simply contact our team at support@flowbase.co with your purchase receipt and we will provide those files. You will need to use the design to alter hex codes so we recommend a basic level of webflow skill.

‍

Interactions (Scroll In View)

This template makes use of easy scroll in-to-view animations. All elements that animate on the page, will have an interaction applied to it. You will notice the small lighting bolt icon in the layers panel to see the animated layer. These elements are linked to the scroll into view trigger animation. We generally use 3 different scroll into view animations, these just have slight variations in the timing to achieve staggered load effects.

We recommend using our default interaction options to simply apply animations to any selected element or wrapper. If you wish to remove these, simply click the item and delete the interaction on the right side.