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 add background color to any section with classes defined in the style guide. For example:
Section
BG Black
Section
BG White Smoke
Section
BG Gray C6
Section
BG Gray C5
Aside fullscreen menu
The symbol name of the aside fullscreen menu is "Fullscreen Menu Button." The menu is hidden by default. You can change CSS display to flex to edit the menu.
SEO
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.
Sizes of the 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.
Some typography has a “vw” (Viewport Width) in mobile breakpoints, a unit based on the viewport's width. The reason is consistent design, so the heading looks the same on different types of devices. When you change the content, don't forget to change the font size to fit the screen properly. For example, vw typography is used in the section with colleges of title and images.
Webflow University lessons:
BreakpointsBody sizeWebflow university
We highly recommend the Webflow University library. Great resources and tutorials for beginners and experts as well.