Template instructions

You can find template instructions, videos, most asking questions by clients, useful links, and a few tips on the Metrik instruction web page.

Go to the instruction page ↗

Ready-made pages

Ready-made pages are example webpages include pre-built components (sections) and set-up CMS collections.


Components are static pre-built sections ready to use. You can use it for web pages from scratch, in addition to ready-made pages, or for html export.


You can choose the logo as typography or as an image. The typography logo is preset, and the logo image is hidden by default in each navigation. Choose the ones you want to use.

Naming Convention

We are using Webflow's recommended naming convention. Most elements use combo classes, especially for margins, paddings, sizing, and opacity.

Margin example. "MB 2em" means margin bottom 2em. Or "MT 3em" means margin top 3em. Or "MR 1em" means margin right 1em.

Padding example. "PB 1em" means padding bottom 1em.

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 interactions

Background colors

You can manage background colors in sections on pages with classes defined in the 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 size


You can use a custom-designed native Webflow menu or custom-developed aside menu. Or both.


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 description

Compress images

Don't forget to compress your images. We recommend 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.