All templates are designed for larger, desktop, tablet, and mobile breakpoints.

Only Body Size is applied to screens 1440px wide and above, 1920px and above. You don't need to override the styles of any element in these breakpoints. All elements scale up by Body Size.

If you want to resize all the elements on the website for larger screens, you must change the Body Size. This slight change affects all elements because the template uses "em" unit size.

Breakpoints that using only Body Size:

• 1920px: styles applied to screens 1920px wide and above
• 1440px: styles applied to screens 1440px wide and above
  

Main Breakpoints:

• Desktop (base): styles apply to all devices unless overridden at other device breakpoints
• Tablet: styles applied to screens 991px wide and below
• Mobile landscape: styles applied to screens 767px wide and below 
• Mobile portrait: styles applied to screens 478px wide and below

Uselful tip

You can delete larger breakpoints with Finsweet Extension to prevent accidentally changing element settings on the larger breakpoints and add custom code to the Global Style symbol (embedded code symbol, included on all templates).

Custom code that can replace the native Body Size settings on larger breakpoints:

<style>
@media only screen and (min-width: 1920px) {body {font-size: 16px;}}
@media only screen and (min-width: 1440px) {body {font-size: 15px;}}
</style>

The Navigator displays the current page's content in the Designer in a hierarchical tree structure. All Metrik templates have the same element hierarchy in the Navigator panel.

You can easily copy the div called "Page Wrapper" with nested elements and then paste it on a new web page. Div called "Main" contain all Sections - separate blocks of content in the structure, CTA Sections (like form and newsletter), and Footer.

EMs units

All Metrik templates are designed in EM units.

EMs are practical when you want to set proportional padding on an element with text. Every browser has a default font size, which is usually 16px. Ems look to their parent element and scale the font size proportionally.

It is often sufficient if the EM is used for an element on Desktop breakpoints and changing the EM on other breakpoints is not necessary.

Viewport-based units (VW)

Templates use Viewport-based units (VW) font size for Desktop breakpoint. VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.

Advantages of uisng VW unit

VW units will cause the design to remain the same on the Desktop breakpoint. The elements decrease and increase with the width of the user's monitor. In practice, this means that if you write the title exactly on 2 lines, it will remain on the desktop on 2 lines at any width. The content does not wrap to the next line.

Metrik templates include symbols that have override fields for backgrounds, titles, paragraphs, or links. A handy feature for larger projects where the symbol is often used with unique content and images for the page.

About instance overrides

Override fields let you define specific elements within a Symbol that can be overridden with unique content on a Symbol instance. This is great for recurring layout patterns whose structure should be uniform, but that have unique content in each instance.

Most Metrik templates include a fullscreen (aside) menu. This menu is custom designed and developed for the template and is not native Webflow navigation.

Where is a fullscreen menu located

The fullscreen menu is located in the Navigator and is hidden by default (display is set to "none"). You can double-click on the symbol "Fullscreen menu" (in the Navigator panel) and change the display to Flex in Layout display settings (located on the right-side panel). Now a fullscreen menu will be visible. Change what you need, and then set the display of the Fullscreen menu back to "hidden."

How to get to a fullscreen menu

Where is a Preloader located

The Preloader is located in the Navigator panel and is hidden by default (display is set to "none"). You can double-click on the symbol or a static div called "Preloader" (in the Navigator panel) and change the display to Flex in Layout display settings (located on the right-side panel). Now a Preloader will be visible. Change what you need, and then set the display of the Preloader back to "hidden."

How to get to a Preloader

If the web page contains an element in 3D, animation "Mouse move in viewport" must be applied in the Interaction panel for a Page Trigger.

The animation is usually called "3D For Text" and "3D For Images". The default is set on all pages where there is a 3D element. All pages where a 3D element is set-up by default so don't worry about settings. You have to setup 3D only for new pages.

Delete unused elements and classes

I highly recommend deleting all unused sections and pages, cleaning up unused CSS classes in the Style manager, and cleaning up unused interactions.

Clone the project

Don't forget to clone the project before it 🤙🏻 For sure.