How to use Webflow templates: Guide for beginners

Juraj Carnecky - Webflow designer, blog author

Author

Juraj Carnecky

Role

Webflow Designer

Updated

September 12, 2023

Discover how to effectively use a Webflow website template with these tips, including font customization, color management, and optimizing for speed and SEO.

Read
Metrik templates offer an impressive range of website designs.

Some examples of screens from Metrik's Webflow templates

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 covered you, from basics to some skilled tips and I'll try to keep this tutorial updated.

In this ultime 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
  • Save unused pages as drafts
  • Speed up the site
  • Customize the content and images
  • 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.

Hero designs from the Sprint template
Hero designs from the Sprint template

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.

Webflow official marketplace landing page
Webflow official marketplace landing page

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? Is he providing support?
Webflow marketplace author profile with templates
Author profile with a showcase of templates

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.

Webflow templates browse menu
Webflow templates browse menu

Purchase the template

Once you have found the perfect template, it's time to purchase it. Webflow templates range in price from $19 to $149, depending on the complexity and features. Once you've purchased, you can customize the template to fit your brand.

Buy the template page
Buy the template page

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.

How to duplicate (clone) the Webflow project
How to duplicate (clone) the Webflow project in the 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.
Google fonts in the project settings
Google fonts in the project settings


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.
Custom fonts in the project settings
Custom fonts in the project settings

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

Webflow has a global swatches feature that allows you to manage colors easily. You can create a set of colors that you can use throughout 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.

Please note that if you want to change color in the swatches feature of Webflow, you'll need to click on the "pen" button next to the color swatch, choose the desired color, and then save it for the change to take effect.

Webflow global swatches settings
Webflow global swatches settings

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.

Save as draft button in Webflow
Save as draft button in Webflow

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 the styles in the Style Manager (shortcut: G key) and animations in the Interactions tab (shortcut: H key). 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 size of 2500px - When uploading images to your Webflow project, it's essential to ensure they are manageable in dimensions. I recommended a maximum width size of 2500px to ensure the images are optimized for the web and don't negatively impact page load times.
  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 through the Webflow Designer or the Webflow Editor.
  4. Compress files again with the Webflow native compress feature. Finally, Webflow offers a native conversation feature that can further reduce the file size of your images and convert them to webp, a compressed image format optimized for the web. I highly recommend using this feature for every jpg and png image.

The same principles apply to videos:

  1. Max width size of 1920px
  2. Compress the video - I recommend Ssemble online tool for compressing videos
To optimize the performance of Webflow websites, I recommended 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.

Webflow minifying options

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.

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.

Example of Webflow static content in the Designer
Example of Webflow static content in the Designer

CMS Content

CMS content is managed through a Webflow content management system (CMS). It can be easily edited or updated via the Webflow Designer and Webflow Editor. 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.

Example of content in Webflow CMS
Example of content in Webflow 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. In Webflow, you can set breakpoints to define how your site will look at different screen sizes. You can create custom breakpoints to ensure your site looks great on every device.

Webflow breakpoints panel
Webflow breakpoints panel

How to use Webflow breakpoints?

To use breakpoints in Webflow, you'll need to access the "Breakpoints" panel in the Designer. This panel allows you to define how your website will look at different screen sizes. Add, delete, or modify breakpoints to ensure 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) is crucial for any site to rank well in search engine results pages (SERPs). To optimize a Webflow template for SEO:

  1. Use relevant keywords in the content, meta descriptions, and title tags.
  2. Ensure a clear and concise URL structure and use header tags (H1, H2, H3) to structure the content.
  3. Use alt text to describe the images on the project, and ensure that the site's speed is optimized.

Webflow offers a range of SEO tools that make it easy to optimize your site. Visit the Webflow University lessons for more information on optimizing a Webflow template for SEO.

Optimizing a Webflow template for search engines is crucial for increasing visibility and attracting traffic to the site. Here are some essential steps to take when optimizing a Webflow template for SEO:

  1. Keyword Research - Before optimizing the project for search engines, it is important to identify the right keywords to target. Conduct thorough research to find the most relevant and popular keywords related to the site's content and target audience. Use tools like Google's Keyword Planner or Ahrefs to identify the right keywords to target.
  2. Meta Descriptions and Title Tags - Meta descriptions and title tags are essential to on-page SEO. Make sure to include the target keywords in the meta description and title tag, as this will help search engines understand what the page is about. Also, ensure the meta description and title tag are well-written and accurately describe the page's content.
  3. URL Structure - The URL structure of a site plays a significant role in SEO. Create a clear and concise URL structure that includes the target keywords. A clear URL structure can make it easier for search engines to understand the page's content and improve the site's visibility in search engine results pages.
  4. Header Tags - Header tags (H1, H2, H3) are essential for structuring the page's content and improving its readability. Use header tags to structure the content and include the target keywords in the header tags.
  5. Alt Text for Images - Alt text is a short description of an image that appears when the image fails to load. Including target keywords in the alt text can improve the site's visibility in image search results.
  6. Speed - Site speed is an essential factor in search engine rankings. Make sure to optimize the site's speed by compressing images, minimizing CSS and JavaScript files, and reducing the use of third-party scripts.
  7. Mobile-Friendliness - With the increasing use of mobile devices, ensuring the site is mobile-friendly is essential. A mobile-friendly site can improve its visibility in search engine results pages and attract more traffic.

In conclusion, optimizing a Webflow template for SEO is a critical step in improving the website's visibility in search engine results from pages. Following the above steps, site owners can improve their rankings and attract more traffic. Webflow offers a range of SEO tools that make it easy to optimize a site, making it an excellent option for those new to SEO.

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 recommended 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 range of free and paid plans to suit the needs of different types of sites. When choosing a plan, it is essential to consider the features you need and the size of your site. The most popular plan is the CMS site, which costs $29 per month and will probably be the choosen plan for most template customers.

Webflow plans pricing
Webflow plans pricing

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.

Webflow website publishing
Webflow website publishing

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.

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.

Juraj Carnecky - Webflow designer, blog author

Hi, my name is Juraj Carnecky

I have been working as a professional web designer since 2011 and as a Webflow developer since 2016. Now, I am a full-time professional Webflow template creator.