How to use Webflow templates: Guide for beginners

If you are new to Webflow, customizing a website template can be challenging. However, with the proper guidance, it can be a breeze. I wrote this article that will guide you through the steps to customize a Webflow template to suit your needs. As a Webflow template designer, I have you covered, from the basics to some expert tips, and I'll keep this tutorial updated.

Last updated: May 2026.

In this ultimate guide I will cover the following topics:

1. Webflow template basics

• What are Webflow templates
• Where to buy Webflow templates
• How to find a suitable Webflow template
• Purchase the template

2. How to use a Webflow website template

• Duplicate (clone) the template for a backup
• Change the font in a Webflow template
• Manage colors in a Webflow template
• Variables
• Save unused pages as drafts
• Speed up the site
• Customize the content and images
• Components
• Interactions and animations
• Static vs. CMS content in Webflow
• Different screen sizes (fully responsive design)
• Optimize a Webflow site template for SEO
• Style guide page
• Blank page
• Site settings
• Choose the right plan for your Webflow site
• Publish a Webflow Template

1. Webflow template basics

As businesses shift towards online channels, having a professional-looking website has become more crucial. Building new sites can be daunting, but Webflow offers a solution that simplifies the process. Templates are a great starting point, offering you a wide range of ideas, inspiration, and details that you can use to create your site.

Webflow templates are pre-designed layouts easily customized to fit your needs.

What are Webflow templates

Templates are pre-designed website layouts with basic building blocks that can be easily customized to fit your brand. Professional Webflow designers and developers create them, so you don't have to start from scratch. Webflow templates include all the essential pages your new site need, such as the homepage, services, solutions, about, blog, portfolio, contact, and more. They also have pre-built UI and components such as navigation menus, hero sections, content sections, listings, forms, testimonials, etc.

Where to buy Webflow templates

The Webflow marketplace is the official place to find templates. You can search for the available templates using the search bar or browsing the categories. The categories include Portfolio, Business, Design, Travel, Medical, Beauty, and more similar sites. Each category (themes) contains templates that are specifically designed for that industry.

How to find a suitable Webflow template

When looking for a good template, it is essential to consider the following factors:

• Industry-specific: Choose a template that is relevant to your industry or niche.
• Design: Look for a template with a design that matches your brand. It should be visually appealing and professional.
• Features: Consider the features that come with the template, such as interactions, complexity, and components.
• Preview site: Check the template's demo preview version to see if it matches your expectations.
• Author: Check the author of the template before purchasing. Is the author skilled? Do they provide support?

Low-quality vs. bad-quality templates

While most Webflow templates on the Marketplace are high-quality, some are better than others. When choosing a template, it's essential to consider the creativity and complexity of the design. Low-quality templates may look cheap and generic, while high-quality templates are more unique and professional.

A template's quality also depends on the author who created it. Some authors focus on quality, creating professional templates that stand out from the crowd. Other authors may focus on quantity, creating many templates with little thought to design. When choosing a template, look for authors who have a good track record of creating high-quality templates.

Choose a template that fits your business needs

While exploring templates, it's important to keep in mind that some categories or themes may have a large number of options, while others may have only a few. It's also worth noting that similar sites may be categorized differently, so it's important to browse through a range of templates to get a sense of the available options. Each template is unique, so it's essential to avoid dismissing templates based solely on their category or title. By browsing and experimenting with different templates, you can find the one that best fits your needs and helps you achieve your site goals.

Purchase the template

Once you have found the perfect template, it's time to purchase it. Webflow templates range in price from around $49 to $169, depending on complexity and features (some specialized templates go higher). Once you've purchased, you can customize the template to fit your brand.

Newly purchased template

How to make the most of a newly purchased template to create a beautiful, functional, and optimized professional website with a powerful website builder? Let's jump into the next main chapter.

2. How to use a Webflow website template

One of the great things about Webflow is that it offers a variety of templates that you can use to create sites. In this chapter, I'll guide you through how to begin with Webflow templates to initiate your new project. So, let's dive in and get inspired by these ideas.

Duplicate (clone) the template for a backup

Before you start customizing the Webflow template, it is crucial to duplicate it for a backup. Cloning the template means having a backup version if you make any mistakes while customizing. To clone the template, click the "Duplicate" icon in the site settings.

Change the font in a Webflow template

Fonts are an essential part of any site's design. Webflow offers two ways to add custom fonts - adding a Google font or uploading a custom font.

Google Fonts

Webflow offers integration with Google Fonts, a free library of fonts that can be used on your site. To add a Google Font to your site in Webflow, you'll need to access the "Fonts" in the site settings. You can select a font from the Google Fonts library and add it to your new project. Webflow will automatically generate the necessary code to use the font on your site.

Metrik templates utilize Google Fonts for their typography.

Pros:

1. Wide selection - Google Fonts offers a vast library of free fonts, which can provide a large variety of options for your site's typography.
2. Easy integration - Google Fonts can be easily integrated into your Webflow new project through the native setting in the "Fonts".
3. Cross-platform compatibility - Since Google Fonts are widely used, they are compatible with most devices and browsers.

Cons:

1. Lack of uniqueness - Because Google Fonts are so widely used, there is a possibility that your site's typography may lack originality and uniqueness.
2. Limited customization - It may not provide the level of customization that some users are looking for.
3. Page speed - It can slow down your site's page loading speed because it needs to connect to external sources.

If you prefer to use Google Fonts in your Webflow template, I recommend to download the font files directly from the Google Fonts site and upload them to Webflow as custom fonts.

This approach is also recommended by Webflow. Google Fonts allows font files to be downloaded without requiring a license, making it a simple and straightforward process. By uploading Google Fonts as custom fonts in Webflow, you can easily customize the font settings to fit your site's design and optimize them for web use.

Custom Fonts

Webflow also allows you to use custom fonts on your site. To add a custom font to your project in Webflow, you must upload the font files to your project. Webflow will automatically generate the necessary code to use the font on your site.

Pros:

1. Originality - Using custom fonts can provide uniqueness and creativity to your site's typography.
2. No external connections - Since custom fonts are stored within sites, there is no need for external connections, which can improve page loading speeds.
3. Possibility to reduce the size - Using custom fonts, you can reduce the size of font files. One way to achieve this is by removing unused characters from the font. By doing so, you can significantly reduce the size of the font file and speed up your site's loading time. Several apps and programs, such as FontLab, and Glyphs, can help you remove unused characters from your custom font files.

Cons:

1. Licensing - it can be expensive to use licensed fonts.

Here are some tips for using fonts in Webflow effectively:

• Choose fonts that are easy to read and match your site's style.
• Use max two different fonts on your site to avoid clutter and confusion, also speed.
• Use font hierarchy to make important content stand out.
• Test your fonts on other devices and screen sizes to ensure they look legible.

Manage colors in a Webflow template

The recommended way to manage colors in Webflow, along with fonts and spacing, is with Variables (covered in the next section). Webflow also has an older global swatches feature that lets you manage colors: create a set of colors you can reuse across the site without remembering their values. To create a swatch, click the "Swatches" button in the color picker, name the swatch, and select a color.

Even if you change the primary colors of your Webflow template, specific elements may have their own color sets. In this case, you'll need to edit these elements individually.

If you need color inspiration for your projects, I recommend visiting those pages and apps Coolors, Colorhunt, and Colorsupplyyy.

Variables

Variables are the modern way to manage a design system in Webflow. They let you store your colors, fonts and spacing in one central place and reuse them across the whole site. Change a variable once, for example your primary brand color, and every element that uses it updates at the same time.

This is the easiest and fastest way to rebrand a template to match your business. You can find Variables in the Webflow Designer, and Webflow University covers them in detail.

Save unused pages as drafts

If there are pages in the template you do not plan to use, it is best to save them as drafts. This will prevent these pages from appearing in search engines or the website's sitemap. To save a page as a draft, click the "Settings" button in the Webflow Designer, select "Draft," and save the changes.

Speed up the website

One of the most important aspects of a site is its speed. To speed up the Webflow template, delete the sections that you are sure you will not use in the template. Then clear unused styles in the Style Manager and remove unused animations in the Interactions panel. By doing so, you will lighten the code and reduce the load.

Also, a fast site provides a positive user experience and improves search engine rankings. Here are some tips for speeding up a Webflow template:

Reduce page weight

The weight of a page can have a significant impact on its speed. Compress images and videos to reduce their size and use appropriate file formats. Avoid using large files, such as uncompressed images, audio, or video, as this can slow down the site's loading time. 

When it comes to images on your site, optimizing them for the web is essential. Optimizing images and videos can reduce the file size and improve page load times. Here are the recommended steps for optimizing images on your Webflow project:

1. Max width of around 1920px - When uploading images, keep them reasonable in size. A maximum width of around 1920px is plenty for most full-width images, since Webflow automatically generates smaller responsive versions for each screen size.
2. Compress through tinyjpg.com - The next step is to compress the image to reduce its file size. My favorite app for compressing images is tinyjpg.com. This tool is fast, handy, browser-based, free to use (also paid plan), and compresses your images without sacrificing quality. You can compress jpg, webp, and png files in this online app.
3. Upload to Webflow - After compressing your images, the next step is to upload them to Webflow. This can be done in the Webflow Designer.
4. Convert with the Webflow native conversion feature. Finally, Webflow offers a native conversion feature that can further reduce the file size of your images and convert them to AVIF or WebP, modern formats optimized for the web. I highly recommend using this for every jpg and png image.

The same principles apply to videos:

1. Max width size of 1920px
2. Compress the video

To optimize the performance of Webflow websites, I recommend that you compress each image before uploading it.

Optimize CSS and JavaScript

CSS and JavaScript files can slow the site's loading time. Webflow provides a simple and effective way to minimize HTML, CSS, and JavaScript files. By using Webflow's native settings, you can easily compress these files to reduce their size, which can help to improve your site's loading speed and overall performance. This feature can be accessed through Webflow's settings menu, making it a straightforward process that can have a significant impact on your site's performance.

Native Webflow features to speed up the web

Webflow provides several native features that can help speed up websites:

1. Content Delivery Network (CDN) - A CDN can help improve the site's speed by distributing the content across a network of servers. This can reduce the site's loading time for users in different locations.
2. Cache Content - Caching can help speed up the site by reducing the number of requests to the server. Webflow has a built-in caching system that can help improve the project's speed.
3. Automatically generated image sizes - One of the great features of Webflow is its ability to automatically generate different image sizes for different screen sizes. When you upload an image to your Webflow site, the platform automatically creates several different image versions in various sizes. This means your site will load smaller, optimized images on smaller screens and larger, high-quality images on larger screens. This can reduce page load times and provide a better user experience for your visitors.

Monitor your websites speed

It is essential to monitor the site's speed regularly to ensure it is fast enough for users. Use tools like Google's PageSpeed Insights or GTmetrix to monitor the site's speed and identify areas for improvement.

Customize the content and images

Once you have made the necessary changes to the site's design and structure, it's time to customize the content and images. Use the Webflow Designer to edit the content and replace the images with your own. Webflow offers a user-friendly interface that makes it easy for beginners to make these changes. Remember to keep the content and images consistent with your brand's message and design.

Components

Components are reusable building blocks, such as the navigation, footer, cards or call to action sections. You build or edit a component once, and every place it is used updates automatically. This keeps your design consistent and makes editing much faster.

My newest Metrik templates are built around components, so you can change a shared section in one place instead of editing every page by hand. To learn more, see the Webflow University lesson on Components.

Interactions and animations

Animations bring a site to life and guide attention. Webflow lets you build interactions visually, with native, code-free animations triggered by scroll, hover, click and more.

My newest Metrik templates use smooth GSAP-based animations, built natively in Webflow, so the motion feels custom without any custom code to maintain. To learn the basics, see the Webflow University lesson on Interactions.

Static vs. CMS content in Webflow

Webflow offers two types of content for sites - static content and CMS content. Here's what you need to know about each:

Static Content

Static content is hard-coded into the site and does not change frequently. This can include things like text, images, and videos. Static content is typically used for the homepage, services, solutions, about page, and contact page. Static pages also can include CMS connections and Collection lists.

CMS Content

CMS content is managed through a Webflow content management system (CMS). It can be easily edited or updated directly in Webflow, without touching the design. This can include blog posts, service detail pages, solution detail pages, testimonials, product listings, etc. You or your client can easily add, edit, or remove content with CMS.

Different screen sizes (responsive design)

Responsive design is essential to modern web design, allowing sites to adapt to different screen sizes and devices. Webflow offers a range of features that make it easy to create responsive websites, including breakpoints. Here's what you need to know about using breakpoints in Webflow:

What are breakpoints?

Breakpoints are specific points in the screen size spectrum at which the layout of a site changes to accommodate different devices. Webflow has a fixed set of breakpoints, a main desktop breakpoint plus tablet, mobile landscape and mobile portrait, and you can also enable larger breakpoints such as 1280, 1440 and 1920 pixels for bigger screens.

How to use Webflow breakpoints?

To work with breakpoints in Webflow, switch between them at the top of the Designer. Styles you set on the main desktop breakpoint cascade down to smaller screens, and you adjust each smaller breakpoint as needed so your site looks great on every device. You can also use the "Hide" and "Show" options to hide or show specific elements at different screen sizes.

Metrik templates breakpoint rules

Don't miss if you are using Metrik templates - How to styling on different (responsive) breakpoints in Metrik website templates.

Optimize a Webflow website template for SEO

Search engine optimization (SEO) helps your site rank well in search engine results pages (SERPs). Here are the key steps to optimize a Webflow template for search:

1. Keyword Research - Identify the right keywords to target before you optimize. Find the most relevant and popular keywords related to your content and audience, using tools like Google's Keyword Planner or Ahrefs.
2. Meta Descriptions and Title Tags - Include your target keywords in the meta description and title tag so search engines understand the page. Keep them well-written and accurate to the page's content.
3. URL Structure - Create a clear, concise URL structure that includes your target keywords. This makes it easier for search engines to understand the page and improves visibility.
4. Header Tags - Use header tags (H1, H2, H3) to structure your content and improve readability, and include target keywords where it makes sense.
5. Alt Text for Images - Alt text describes an image when it cannot load. Including relevant keywords in alt text can improve visibility in image search.
6. Speed - Site speed is an important ranking factor. Compress images, minimize CSS and JavaScript, and reduce third-party scripts.
7. Mobile-Friendliness - Make sure the site works well on mobile. A mobile-friendly site ranks better and attracts more traffic.

Webflow also includes built-in SEO settings for titles, meta descriptions, Open Graph and more. For deeper guidance, see the Webflow University SEO lessons.

Style guide page

High-quality Webflow templates often come with a style guide page that outlines the design specifications of various elements, such as color schemes, typography choices, rich text formatting, icons, and other visual elements. This style guide is a reference for maintaining visual consistency throughout the website or application and ensuring that all design elements align with the desired brand image.

Blank page

In addition, a Webflow template must include a blank page with essential sections such as the hero section, footer, and content area. This blank page should also have animation triggers so that when users duplicate the page, the animations are replicated as well. This feature not only saves time but also ensures consistency throughout the site. Using a blank page, designers can quickly create a new page by copying the necessary sections from the UI kit with just a few clicks. This is a feature that I often use myself when designing templates.

Site settings

To access the page settings in Webflow, you can do so via the Dashboard. Before publishing a page, it is essential to make several changes to each template, such as setting the favicon, webclip, and email notifications for form submissions. Additionally, I recommend minimizing the HTML, CSS, and JavaScript in the Publishing tab to optimize the page's performance.

Choose the right site plan for your template

Webflow offers a free Starter plan plus paid Site plans for publishing on a custom domain. For a content-rich, CMS-driven template you will want a plan that includes the CMS (the CMS / Premium tier), which is the usual choice for most template customers. Webflow updated and simplified its Site plans in 2026, so check the official Webflow pricing page for the latest plans, prices and limits.

Publish a Webflow Template

Once you have customized the Webflow template, it's time to launch it. To publish the site, go to the Webflow Designer and click the "Publish" button. Webflow offers various hosting options, from hosting on their platform to exporting the website's code and hosting it elsewhere. Test the site thoroughly before publishing it to ensure it is fully functional.

Final thoughts

Webflow is a great website builder to save time and effort when building a site. Following the steps outlined in this guide, you can be inspired to use templates effectively, optimize the project for SEO, and create websites that look great and perform well on all devices.

Start your project

Ready to launch? Browse the full collection of Metrik Webflow templates, or get them on the Webflow Marketplace. Building more than one site? Check the bundles to pay less. And if you ever get stuck, you get support directly from the author.

Documentation

Essential resources, inspirations and ideas for beginners to know if you are using Webflow templates.

For beginners who wish to use Webflow templates, as a template creator, I highly recommend (based on the most frequent questions from customers) exploring the courses, lessons, and articles that are available on Webflow University, completely free:

Course:

Webflow 101 crash course - An overview of the basics and get started on building your first website.

Getting started:

Intro to the Designer - Learn your way around the Webflow Designer.

Layout and design:

Display settings - Adjust display properties to determine the fundamental layout behavior of an element.

Components - Use components to manage recurring layouts and content more efficiently across your site.

Interactions:

Intro to Interactions - Use interactions to make your site more dynamic and engaging.

CMS:

Intro to dynamic content - An explanation of static and dynamic content.

CMS Collections - A CMS Collection is a grouping of content types with a customizable structure in the Webflow CMS, like blog posts, authors, or help articles.

Collection list - Use a Collection list to add a Collection's dynamic content to your site.

Collection pages - Structure and style Collection pages that work like templates and automatically update your design.