Instructions | Blobit- Webflow HTML website template

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 utilizes the Webflow variables feature, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.

To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.

Changing fonts

The fonts used in this template are free to use.

Body (All pages): Changing the body font will affect all fonts on the entire site.
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.

Starter Page

The Utility Pages directory contains a page titled "Starter Page". You can start building your pages with this template, which includes a header, footer, and blank section and container.

Duplicate the Starter Page and start editing or adding sections from other pages.

‍

Started page design — Make sure the parent folder is set correctly.

Template Support

We'll be glad to help you out with your queries. Please contact us at the Webflow template support page 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 Reach us out here.‍

Important notes:

SVG: For a superior visual experience, we suggest using SVG icons and logotypes. To find a wide selection of SVG icons, you can browse Icon Finder and use the free filter to refine your search.
Resize your Images: It is important to resize your images before adding them to your website, rather than simply downloading and placing them as they are. The size and resolution of an image can have a significant impact, and using an image size of 1200px x 800px for a content size of 300px x 200px 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.
Compress images to WebP: For a better loading site, compress existing image assets with the built-in WebP conversion tool. Please note, Webflow compression tool is currently not available within the CMS. You will need to manually convert them to WebP format and compress them separately.
Clean up: Clean up interactions and Clean up CSS styles before publishing your site.
Audit panel: Before going live with your site, find and fix accessibility issues with Webflow's Audit panel.
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. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.