Instructions

It’s great to see you! This Quick Start Guide will show you basics on how to get started editing your website.

If you are just beginning with Webflow, we highly recommend you to take Webflow 101 Crash Course, as this introductory course by Webflow University offers the overview of the basics and the most essential information you need to learn to get up and building your first Webflow website.

‍

Customizing colors

This template is built using Global Color Swatch feature, means you can easily edit primaries and grays colors to be updated everywhere on the site instantly.

To change the colors of your choice, simply go to Style tab > Typography and select the color you want to change. Click the edit icon in the lower right. Choose color and click Save. That's it.


SVG element color

In order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.
‍

Changing fonts

The Template uses the custom free fonts from Fontshare.com and fonts.google.com:

  1. Body (All pages): Changing the body font will affect all fonts on the entire site.
  2. Heading (All headings): Changing the heading font will affect all heading fonts on the entire site.

In case you want to change fonts, you can always go to Project Settings > Fonts and you will be able to upload any custom fonts, can use Google Fonts or even you can connect your Adobe Fonts account.‍

Once upload font from Project Settings, click on the orange selector option in the top right of the Style tab and select Body (All Pages). Now go to the Typography section below and change the font as per your need. Changing the body font will affect all fonts on the entire site.

‍

Template Support

We'll be glad to help you out with your queries. Please generate a ticket through Our support portal and you shall hear back very soon.
‍

Custom Design & Development

If you are looking for Custom Design & Development with Webflow, feel free to reach us via Our support portal.
‍

Important notes:
  • SVG: For a high-quality visual experience we recommend using SVG icons and logotypes. You can visit Icon Finder and find plenty of SVG icons by applying a free filter.
  • Resize your Images: Do not just Download an Image & place it as it is in your site without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px.
  • Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
  • Compressing Images: For a better loading site, we recommend optimizing all your images using services like Tinypng.com
  • SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. Visit Add SEO title and meta description and SEO and Webflow: the essential guide.