Styling on different breakpoints
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:
Main Breakpoints:
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>
Webflow University links related to this topic
Elements hierarchy in the Navigator panel
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.
Size settings - em and vw 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.
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.
Webflow University links related to this topic
Symbol and instance overrides
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.
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.
Webflow University links related to this topic
Custom fullscreen menu
Most Metrik templates include a fullscreen (aside) menu. This menu is custom designed and developed for the template and is not native Webflow navigation.
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."
Webflow University links related to this topic
Custom designed Preloader
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."
Webflow University links related to this topic
3D triggers in web pages
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.
Webflow University links related to this topic
Recommends before publishing the website
I highly recommend deleting all unused sections and pages, cleaning up unused CSS classes in the Style manager, and cleaning up unused interactions.
Don't forget to clone the project before it 🤙🏻 For sure.
Webflow University links related to this topic