Getting Started

Introduction

If you are unfamiliar with Webflow, we recommend you spend some time reviewing the lessons and tutorials on the Webflow University.

Flowbase templates are designed to be made for Webflow users of all levels. That means our templates are suitable for beginners getting started in the Webflow world, all the way to enterprise businesses serving millions of customers daily.

Colors

By using color swatches, you can change all the colors on this template with a few clicks.

• Go to style tab on sidebar
• Scroll to colors in typography section.
• Click color and edit them to be updated site wide.

Updating the swatch, will change the color in the locations it has been used across all pages.

Typography

By using color swatches, you can change all the colors on this template with a few clicks.

1. Go to style tab on sidebar
2. Scroll to colors in typography section.
3. Click color and edit them to be updated site wide.

Updating the swatch, will change the color in the locations it has been used across all pages.

Fonts

You can instantly change the font used site wide.

1. Add a google font or your own custom font inside project settings > fonts.
2. Back in the designer, click the orange selector option
3. Select the Body (All Pages) selector.
4. Change the font to the one you installed

Images & Graphics

If you update the color swatches, you may notice that the colors used in some graphics did not update. This is because  Webflow CSS styling does not affect image assets like png, webp, jpg, svg images. We recommend either downloading them and editing them in your preferred design software or replacing them with your own graphics and image.

Meta Title, Desc & Featured Image

You can easily disable interactions, like the fade in on scroll and much more.

1. Click on the element where the interaction is applied (it should have a lightning bolt icon).
2. Deselect the interaction

Icons

Generally, our icons will be a html embed and not an image. This makes it much easier to update colors,

1. Click settings on the html embed
2. Change the svg fill color to your hex code

CMS & Ecommerce

Content that is regularly updated such as blogs, store items etc are managed through Webflows CMS and Ecommerce interface. Any changes you make will dynamically update.

Symbols

Symbols are for elements that are reused in many places. Allowing you to update the symbol once and it apply everywhere it has been used.

1. Click edit component
2. Start designing!

Interactions

You can easily disable interactions, like the fade in on scroll and much more.

1. Click on the element where the interaction is applied (it should have a lightning bolt icon).
2. Deselect the interaction

Backups

If you make a mistake and are not sure how to fix it, you can easily revert back to a previous copy of the site.

1. Click on the element where the interaction is applied (it should have a lightning bolt icon).
2. Deselect the interaction