Instructions
Before publishing the website
We highly recommend deleting all unused sections and pages, cleaning up unused CSS classes in style manager, and cleaning up unused interactions as well. Don't forget to clone the template before it :)
Webflow University lessons:
style managerClean up unused interactionsBackground colors
You can manage background colors in sections on pages with classes defined in the guide.
Example. Most web pages in this template include div “Fixed BG” with div in it “Blur BG Silver.” All sections on the page will have a blurry designed background color. We want one section with a white background color. Add the class “BG White Smoke” to a section or another layout element to add a background color. Or you can add “BG White”, or another color class defined in this guide.
Change the size of all elements
In this web template, the unit em is used for most elements. The reason is better and faster size management and less CSS of the elements on the website. If you want to change an individual element, adjust its "Size". If you want to resize all elements on the entire website with one small adjustment, change the body element size.
Example. For breakpoint size “1920px and up” I want to enlarge everything. I change body element size from the template's default 15px to 16px. Every element on the website will be enlarged.
Webflow University lessons:
BreakpointsBody sizeSEO
Don't forget to rewrite meta titles and descriptions, change Open Graph Image for every static and CMS page.
Webflow University lessons:
Add SEO title and meta descriptionCompress images
Don't forget to compress your images. We recommend tinypng.com for compress JPG and PNG files. All images in this web template have been compressed. For icons, we recommend using SVG files type from google icon library.
Custom code
Webflow is powerful without any codes. But occasionally, you can get a good solution for fixing weird behaviors with a few lines of code 😉
If you want to disable body scrolling after triggering the side menu or full-screen menu, you can add custom JavaScript code before </body> tag on every page.. The function of this script adds/removes CSS overflow: auto to the body.
For ASIDE menu (navigation style 1 and 2)
For FULLSCREEN menu (navigation style 3)
Webflow University lessons:
Custom code in head and body tags
