What is Webflow? What is it used for, and what makes it better than any other visual designer?
Big questions, and it's a big tool with a ton of features.
But... luckily for you, it's simple to get started with and easy to learn everything you need along the way.
It was designed for individuals, agencies, and teams to work together effectively.
Here's deep dive into everything you need to know about Webflow's features. I've broken this down into 5 main categories:
Let's get started!
Over the last year (2022), Webflow had 42 new (major & minor) features, enhancements, and updates to their platform. Consistently releasing, at minimum, one per month.
I've gone through all of the release dates one by one. Aggregated and charted them to better visualize how often this happens.
Here are the results:
To provide some context...
Most software companies take 6 months to release major features. To combat that horribly large turn-around time, companies use frameworks to help them better practice the art of delivering software more quickly.
The leading example of best software practices is a popular methodology that helps companies reduce that down to releasing software every 6 weeks instead of 6 months.
Webflow releases something every month, and sometimes multiple releases per month. This is a very healthy pace, better than the average software company.
Further, you can see from the chart above that November spikes with 7 new releases.
This was due to Webflow's "No Code" conference. They released many new, major features right before the conference.
New features released during 2022 and during the conference include (but are not limited to):
These features, enhancements, and updates are primarily a result of Webflow users directly voting for what they want, and feedback given through their own forums.
Webflow reports a stream of all new features and updates. You can find that real-time list here.
I've reviewed their new feature releases, updates, enhancements, and bug fixes since 2013 (up until 2022) and charted the total amount per year.
This show's that Webflow has consistently updated its software based on user needs year over year since 2013.
Interestingly, with the massive amount of very large features they put out in 2022 (see the list above), 2020, 2019, 2018, and 2016 had the same amount, or more released.
Very impressive.
This aggressive cycle of consistent (and significant) feature releases has translated into Webflow growing faster than any of its competitors - from a search traffic perspective.
They've grown organic (not paid) search traffic by 78% over the last 2 years (as sourced from the top search engine marketing tool).
That's people going to Google, searching for a fix to their problem, and ending up on Webflow's site as the solution.
For context, Squarespace (a popular competitor) only grew by 9% over the last 2 years.
I researched thousands of independent user reviews for Webflow and its competitors, aggregating the most popular area's. These two features are consistently coming out on top compared to Webflow's competitors.
More reviewers reported Webflow being customizable than any other website builder.
Some of the most popular customizable features include (but are not limited to):
No plugins, add-ons, or third-party services are required.
Webflow includes everything needed out-of-the-box to rank as the top customizable website builder.
And this level of customization leads to a website that can be unique from any other site on the internet without writing code.
That's very important.
{{callout-02="/assets/callouts"}}
You're not building cookie-cutter sites. Nope, fully bespoke custom sites in a visual designer.
Some of the most popular advanced features reported by reviewers include (but are not limited to):
Again, no plugins or third-party services are required.
This all comes by default in Webflow, out-of-the-box, and ready for use.
Webflow doesn't post a public roadmap but has a public wishlist. In addition, they mention whether a feature is currently in development within that wishlist.
Check out the Webflow Wishlist for yourself.
Reviewing the top-voted features gives you a good indicator of what's important and how they are thinking to approach their next set of priorities.
Here's a breakdown of the top-voted features:
User login and subscriptions.
This had over 9,000 upvotes and 300+ comments from Webflow users. It was a popular feature request.
It was released as an open Beta during their 2022 No Code Conference and is included with every pricing plan Webflow offers.
Here are some of its features:
It's a solid offering voted on by Webflow users.
Multi-language sites and CMS fields.
With over 7,000 upvotes and 300+ comments, native multi-language support for your Webflow site and CMS is another popular request.
Because of this, Webflow announced they are actively working on this and will release it in 2023.
The solution is still being developed, but if you must use multiple languages on your Webflow site today, there are solutions available.
Webflow desktop and offline applications.
This request has been around for a while with over 4,600 upvotes and 100+ comments.
Honestly, I can't visualize Webflow doing this anytime soon. It's a significant technical challenge to take a web application with the complexity of Webflow and turn it into an offline desktop application.
Real-time filtering and sorting on a website with faceted navigation.
With almost 4,000 upvotes and 100+ comments, this is another contender for Webflow to tackle soon.
That said, while we wait... There are a few solid solutions by two of the most reputable products that integrate with (and only with) Webflow directly:
With over 3,300 upvotes and almost 200 comments, this component is yet another prime candidate for Webflow to tackle soon.
That said, it may be less likely now since they just released the new "Components" feature and a Component Library that anyone can contribute to (free or paid).
Webflow does have an HTML slider element, but the problem is it's not bound to the Webflow CMS. This is what people are voting for on the wishlist.
The direction they are moving in is to have solutions like these created by the community. And that's already the case with a great solution by the venerable Finsweet: https://finsweet.com/attributes/cms-slider.
With almost 3,000 upvotes, this was popular and asked for on the forums often.
People have been complaining about how expensive Zapier is becoming and wanted a native solution that could be more tightly integrated into Webflow's specific features.
And is included with every pricing plan Webflow offers.
This is Webflow's native automation tool to replace Zapier, Make, and Integromat.
European Hosting to comply with GDPR.
This would be amazing and something that seems realistic for Webflow to create.
They've currently applied a status of "reviewed" to this wishlist item, meaning they are thinking through how to solve this problem and provide this as a feature.
In the meantime, you can create your entire website in Webflow and export your clean, compliant code, ready to upload and host with a European hosting company.
So far, I've given you a good overview of the newest features Webflow offers. Some of the most popular features and categories they fall into. I've shown you where Webflow keeps its real-time list of updates and the top-voted wish list features - most of which have a solution.
Now it's time to dig into the current feature set Webflow offers.
Fair warning, this is a deep dive. It'll give you a comprehensive overview of all the features and allow you to skim through the specific parts you want.
I've broken down the features into some top-level categories:
Let's jump in and get started!
Fast Load Times
There are a lot of hosting features with Webflow, but fast load times are what really counts.
When your website loads slowly, visitors leave. Not only that, your rank is lower in the search engines. Google adds a lot of ranking value to sites that load fast.
Why?
Because you make Google look good. If they show your site as a top result, you click through, and it loads slowly. It looks like Google needs to do a better job.
{{callout-01="/assets/callouts"}}
So any top site will spend a lot of time making sure that its pages load fast, providing a great user experience.
Top 50,000 Webflow sites.
To give you a good example, I took 50,000 of the top sites created by Webflow and ran each through the Google Speed Test tool (I created custom software to do this š¤Æ).
This is what Google uses as a ranking factor for sites.
All of the labels in the chart above (first contentful pain, first input delay, etc...) are the individual tests that Google uses to rank a site's total User Experience score, which is really all about speed.
As you can see, Webflow, across 50,000 sites, performs exceptionally well.
Those are very high percentiles averaging across a lot of sites.
This is what leads to Webflow having the most sites listed in the top 1 million websites on the internet compared to its competitors:
The Webflow Designer.
This is the specific tool you use to create the layout and design of your website.
It's the central hub, the command center that contains all of the advanced and customizable features that Webflow is known for.
Elements
You start off with the Elements panel. This is where all of your raw HTML 5 elements reside. Then, you drag & drop them onto your Designers Canvas which opens up all of the customizations that HTML 5 and CSS 3 give you without writing any code to create them.
...and the list goes on.
Components
Elements are the building blocks for your website's design, and Components are the reusable containers that allow you to group them together.
Navbars, footers, menus, hero sections, headers, and anything you can think of can be components built from grouping elements. Drag and drop your components across your project's pages for a consistent look and feel.
Navigator
You've placed a bunch of elements throughout the page of your site. Grouped them into components. But now you need a way to visualize all of them, organize them, and quickly move and rename them.
The Navigator panel does this for you.
It lists every element you've placed on your page in a hierarchical tree structure. It allows you to select any element on your page, including elements that might be hard to select on the canvas.
Navigator will also allow you to move elements around and update theĀ element hierarchy on your page. The structure updates reflect on the canvas instantly.
Responsive Design
Responsive design, through breakpoints (also known as media queries), is built into the Webflow Designer, and everything you do is created within it. So when you build for the desktop, you get tablet and mobile for free.
"You can customize your site design for different screen sizes. When you load a site, the default breakpoint is the desktop view, but there are also 6 additional breakpoints." - Introduction to breakpoints: https://university.webflow.com/lesson/intro-to-breakpoints
You can allow Webflow to set the default or visually take control of anyone and design it for that specific view.
At this point, you've added elements to your page canvas. Grouped them into reusable components and organized them through the navigator panel. Confirmed that they're responsive across all devices and screen sizes.
Now... You need to control how and where they are placed on the screen.
Flexbox & CSS Grids
Webflow has visually integrated the 2 coding layout styles (supported by all web browsers) that web developers use - Flexbox and Grid.
They give you complete control over your designs without any coding.
Webflow created the first visual flexbox builder.
If Flexbox isn't the right approach for your design, they also give you the visual CSS Grid builder.
These are the 2 powerhouse internet standards that all browsers support, giving you the most flexibility, customization, and advanced feature to build a unique website for you and your clients.
Typography & Color Swatches
With your layout under control, it's time to create your site's typography and color pallet.
Globally add typography to your entire site, or change it within each element, for only that element.
Come up with a global color pallet and add that to your color swatches. Then, update every instance of a color swatch across your entire site with one edit.
Powerful.
Templates, Cloneables, Components & Libraries
...but that seems like a lot. What if you want to get started, fast, with something pre-built? No problem.
Webflow has over 1,500 templates (free and paid) ready to clone into the Designer.
An ever-growing, and community-shared, cloneable websites.
Dig through Webflow Libraries, ready to install.
Or start a little smaller, look through pre-made components.
Start with a blank canvas, or not. Then, you get to choose your difficulty level.
Publishing & Exporting Your Site
Your site is done. It's time to publish it to the world. Or maybe not... Maybe you want to see what it would look like before releasing it to the world.
Web developers typically preview their work in an as close to live environment as possible to make sure everything is just right. With Webflow hosting, you have such an environment.
It's called "staging."
You can publish your site to a staging domain (and even password-protect it) before launching it. Then, preview the entire site or the small changes you've made.
What if you want to avoid hosting your site with Webflow?
No problem. Webflow allows you to export your entire site. Download a zip file with all your HTML, CSS, Javascript, images, etc., then upload it to your own host. Easy peasy.
Interactions and animations.
Webflow Interactions. This feature is one (of the many) that puts the "no" into the "no code."
This used to be reserved for software developers. This is taking Javascript code and moving elements around on the page based on a user interacting with that page.
As just one small example...
Here's just one example, scrolling.
As the user scrolls down on your page, you can track the position of the scroll bar and move elements around on the page, in and out of the page, etc... based on that scroll position.
There is so much you can do with Interactions & Animations that Webflow exposes you to within the Designer.
For example, using motion design to create 3D transforms and animations.
Let's walk through a bunch of these.
That's a lot.
And none of those things requires you to learn how to code. Instead, they make all that available to you within the Webflow Designer.
This is one of their advanced "power" features and comes with every account (even the free Webflow account).
The Webflow Editor lets you update, add, and manage content within a simple interface. This is great for clients, teammates, or contributors (think blog authors) who don't need to learn or use the complexity of the Designer.
The purpose of the Editor is for just content, not design.
Client & Collaborator Course
When clients or collaborators need to learn how to use the Editor, you can either walk them through it yourself or point them to the client's guide to using the Webflow Editor. It's an excellent brief video course giving them a quick start into being productive.
What's interesting about the Editor is that you don't need to give anyone access to the Webflow Designer.
Instead, they go to the live site, and with permission granted to access it, all they need to do is add ?edit
to the end of the URL.
On-Page Editing
They'll be prompted to log in, and all of the Editor tools will pop up on their viewing page. An interactive edit mode (edit elements directly on the page) or an editor panel allows edits.
CMS
This edit mode also gives your clients & collaborators full access to the CMS. So if they are creating new blog posts, no problem, add the post directly into the CMS through the editor.
SEO
Editors may create or update SEO settings and Open Graph settings. Need to update your Twitter card? No problem. That Open Graph setting is available. Need to update your meta title and description? No problem. That SEO setting is available.
Publishing
You can grant or deny these editors permission on what they can edit and if they may publish their edits.
Need more time to make your blog post live? No problem set it to "draft" instead. Still viewable when in editor mode but never seen on the live site.
Form Submissions
Using Webflow's to collect form submissions? Perfect. View all of those from the editor too. Even download those submissions in a CSV file from the editor.
Takeaway
The Editor is a versatile tool used for collaborating on the content of your website versus designing the website.
It's purposely made to have a simple interface that encourages being productive quickly.
The Webflow CMS (content management system) is where all of your dynamic content is stored and maintained.
But what is dynamic content?
Dynamic content is content that changes when the site is already live. No need to republish your site to alter its content.
Whereas content that is not dynamic (we call this static content) gets published first and can only change once you republish your site.
An excellent example of this would be comments on a blog post. You can add a comment, which instantly shows up on the site. Nobody had to republish the site for the comment to appear.
Webflow, give you two types of content - static and dynamic.
Static Content
You can create static pages in Webflow. In fact, your home page must be a static page in Webflow. The only way you can change content on the live site is to republish your site.
Dynamic Content
The CMS (database) is where dynamic content is stored.
Your website is already published. You're displaying content from CMS to it within Collection Pages and Collection Lists.
Suppose you update and save any of that content within the CMS (database). In that case, it's instantly displayed on the live site through a Collection Page or Collection List. You should have manually added that and updated your site. As a result, you never republished your site.
This is powerful.
...and it comes built into Webflow.
Customizable Content Structures
The power of the Webflow CMS is its flexibility. You get to define the content structure so it can meet your specific needs.
You define and create the fields (and field types) that hold your dynamic content. Next, all those fields are grouped together into an item, and all items are grouped together into a collection. Finally, all collections are grouped together into the CMS.
This is defined and configured by you. But not to worry, it's straightforward through Webflow's visual CMS editor.
Export / Import
You can import a CSV to create your CMS collection, and once you do, you can export it into a CSV.
Zapier
You can create, read, update, and delete CMS items through Zapier (or almost any automation service).
API
You can also do the same as you did with Zapier, but directly through the Webflow API instead.
The Editor & Collaboration
The CMS is accessible through the Webflow Designer and also the Webflow Editor. This means your teammates & collaborators can add, edit, or delete (if you give them permission) items within your CMS collection without accessing the Designer.
RSS Feed
Every CMS Collection can have an RSS feed automatically generated.
Takeaway
The CMS is powerful and flexible. It's included with most Webflow plans (even their free tier) by default.
Webflow takes the power of its Designer and applies it to their ecommerce solution.
You can start with Ecommerce by choosing a template or starting from scratch. Designing a Webflow site with Ecommerce is the same. But once you turn on ecommerce for your project, you get many new features added to your site.
The Designer Benefits
You get all the benefits that come with the Designer. End-to-end customer experience. Complete layout control. Custom interactions and animations. All of it.
But... now you also get to customize your cart and checkout experience. So not just changing colors to match the theme of your site, you get to control the design experience too.
Specify cart types.
Style different cart states.
Customize PayPal checkout.
Customize the checkout page.
Customize checkout page error messages.
Understand the order confirmation pages and how to fully customize them.
Customize cart animations. Modify how the cart opens & closes. Set transition easing or duration for the animation. Test all the effects in a preview mode.
Understand PayPal, Stripe, etc.. minimum & maximum transaction amounts. What are the limits of each payment process? What happens when an order is above or below those thresholds.
Understand checkout flows. From a product page or product list, shoppers can either add to a cart or be taken directly to checkout with a buy now option. The choice is yours.
Free orders, discounts, etc...
Sell Physical or Digital Products
Not only can you sell physical products, but digital products as well.
Add links to any product in your store, and those digital goods are automatically delivered to your customers at checkout.
Since your confirmation page is fully customizable, you can add download elements showing all digital products purchased for download in order.
{{callout-03="/assets/callouts"}}
Product Options & Variants
Options allow you to sell different variants of the same product, like t-shirts in different sizes and colors. Each unique combination is a variant, treated as a separate product with its product fields.
Emails
Not only do you get control of the cart and checkout experience, but you also get to control Ecommerce transactional emails as well.
Control who receives emails, your customers, your clients, select team members, and whoever you need to stay in the loop whenever you get an order.
Preview and test your store's email & design before they are sent to customers. You can resend order information if a customer needs it and resend digital downloads (if that's what you're selling).
Importing Products & Variants
Import products and any variants in bulk, using a CSV file from any other ecommerce platform or inventory management software.
Track & Manage Store Inventory
Track and manage store inventory to avoid overselling limited inventory. Set up auto-notification so your store displays "out of stock" when needed. Not only can you notify when you're out of stock, but you also show a notification when you're getting "low on stock."
Payment Gateways
PayPal and Stripe are supported out of the box.
Configure different shipping methods for different shipping zones.
Since shipping rates for various countries, regions, or zones might differ, you can create different shipping methods for each zone. This allows you to calculate your shipping rate based on the specified rules.
You can calculate different shipping rates based upon:
You can also set a flat rate for charging a fixed price per item on each order.
Configure Taxes
Sales taxes and VAT can be automatically configured for various regions and countries. However, you'll need to calculate tax yourself for any taxes outside of the supported regions and countries.
Inventory and Order Sync
Integrate your store with external services to sync your inventory or orders. Supported by Webflow are integrations with Google and Facebook. In addition, you can sync with third-party services through data feeds outside of those two options.
Here's an overview of the most popular options:
Custom 404 Pages
People can type whatever they want into the web browser, thinking they'll land on a page within your site. But that's only sometimes the case. They may fat-finger it, misspell it, or think a page should exist. People will do all of the same when they link to your site.
You need a way to manage this so folks can recover when they hit a "page not found" error on your website.
With Webflow, you have complete control over the design of a page not found (404) error.
Custom favicon and webclip
The little icon in the browser tab (favicon) and the icon shown when someone adds your site to their smartphone's home screen (webclip) are fully customizable with Webflow. Just upload whatever icon's you like, and Webflow will stick them in the correct place.
Export clean HTML and CSS
You don't have to host your site on Webflow. Nope, behind the scenes, everything you do in the Webflow Designer creates clean, standards-compliant code that they let you export.
It's the same code you'd create by hand programming the site yourself.
Password Protection
This isn't full-blown user management like Webflow Memberships. Instead, this is the ability to create one password for your entire site or each page so you can publish it live, but only those you share the password with can view it.
Website Backups and Revisions
This is wonderful. Every few seconds as you're working in the Designer, Webflow automatically saves your current work as a revision. Then backs up that revision. So if you'd like to revert your site to some previous work, you can go through all your edits visually (and at any time - tomorrow, a week from now, etc..) and restore it.
"If you build it, they will come."
That's a great line from a movie, but in the real world, that doesn't happen. You can create the most visually stunning site, but you must tell people about it to ensure everyone will come.
To combat that, Webflow has baked marketing and SEO into itself (no plugins required), and they are available to you out of the box.
Alt tags for images
Alt tags on images improve your SEO (findability), user experience (UX), and accessibility. With Webflow, you can add these in the Designer and the CMS for any image.
Auth-generated XML sitemap
When search engines start crawling your site, they do better when you have a sitemap. So Webflow automatically builds a sitemap for you, easy peasy.
Open Graph (OG) Settings
These are settings that social media sites, think Twitter, Facebook, Linkedin, etc... search for on your page. It tells them all the information about your page, including what images are important, and displays it on their platform.
This is how you get good visibility on all social media platforms. Webflow generates this for you while allowing you to override your settings whenever you'd like.
Meta Titles and Descriptions for SEO
These are very similar to open graph settings, they live in the code on your page, but instead of telling social media sites about your page, it tells search engines about it. This snippet in search results will often show whatever you add to these settings. So they're essential, and Webflow allows you to set them all.
Search Engine Optimized
Out of the box, any Webflow page you create (as well as your entire site) is going to be search engine optimized (SEO) out of the box. No plugins, no extra effort.
Webflow gives search engines everything they love - clean semantic code, fast page loads, and mobile-friendly (responsive).
301 Redirect Management
Sometimes, you need to change the URLs on your site. Maybe even remove and page. But if you do this and nothing else, links and search engines will go to broken pages since it no longer exists.
To fix this, you use something called "301 redirects."
It says whatever used to be at a URL has moved to another URL. Now links and search engines read this and automatically follow it.
Webflow exposes and gives you access to this for any or all of your pages.
Webflow does what it does better than any other platform, allowing you to create a stunningly visual & engaging website without writing code.
But the things it could do better, they let you solve with other solutions that integrate with Webflow.
Google Analytics
Webflow isn't trying to create a better analytics and reporting tool than Google. Instead, they give you access to integrate with GA seamlessly.
Google Optimize
Need to run complex A/B tests on any of your Webflow pages? Again, use the best tools within the industry and integrate them into Webflow.
MailChimp
Need to create email newsletters? Collect email subscribers? Use the best tools available with Webflow's native integration for MailChimp.
Zapier & Make (Integromat)
What if Webflow doesn't have the integration you need? No problem. Webflow integrates with glue services like Zapier and Make (Integromat). Each of those automation tools has thousands of integrations.
And Webflow integrates natively with each of them.
So if you need your CMS to integrate with another tool, you hook up your CMS to Zapier, and Zapier connects you to your other tool.
Webflow makes your site accessible to everyone by default.
Built-in auditing tools:
Webflow also offers a handy Accessibility Checklist to run through all the items their built-in tool can't look for on its own.
Here are a few examples from the checklist:
Webflow offers many different ways to get the specific help you need when you need it.
Webflow Memberships is a new feature that adds user management and subscriptions to your Webflow site and ecommerce store.
It allows you to build gated experiences through the Webflow Designer.
With Webflow Memberships, you can add users, login functionality, and set up access groups that control access to different pages.
You can add recurring subscriptions and define those recurring terms. You can sync to a mailing list or any external resource (think CRM) through the Webflow API.
Restricting access isn't limited to the entire site, nope. With access groups, you can define which static pages and CMS pages are restricted and which are not. Create a part of your site that is open to anonymous visitors and have upsells for folks to signup. They can signup as either a free user or a paid user.
All of this is managed within the Webflow Designer.
Logic is Webflow's native automation tool that is working towards being the replacement in the Webflow community for Zapier, Make, and Integromat.
With Logic, you can build automated workflows tightly coupled with native Webflow functionality, allowing you to create solutions that are impossible with other tools like Zapier.
For example, one of the CMS's limitations is that you can search it from Zapier (and other automation tools). Instead, to access the CMS, you must know a specific items ID.
Webflow Logic has opened up the ability to search against any field in your CMS Collection using an arbitrary value.
Need to search your contacts CMS for an email address? By company name? No problem with Logic.
Having a native automation tool opens the doors to doing things once not possible in Webflow.
DevLink is a new, very advanced feature to be released.
With Webflow's new "components" feature, you can now take those and connect a custom-coded web application built outside of Webflow with Webflow components.
Design your website within Webflow, add custom backend coding for a complete web app, and allow developers to link the two together.
This will be a game changer and something no other tool can do.
Again, this is yet another game-changer.
The newly released Figma to Webflow feature.
While Webflow is more than adequate for designing your websites, the industry of web designers for years (before Webflow) has been using a tool called Figma for building out and collaborating on the statically built design.
Once those designs have been agreed upon, a web developer takes them and codes the final website trying their best to get the final site as close as possible to the designs.
One of the new trends is to bypass this process entirely. Instead, start designing and collaborating within Webflow, and when done, you have your final site.
But that still needs to be the workflow for many professionals.
What Webflow did was help to make that process easier. They've created a feature that allows you to copy and paste from Figma directly into Webflow.
Through copying and pasting, that feature converts those Figma designs into Webflow designs that show up within the Designer. It auto-imports text, colors, images, etc.
Now you have static designs copied from Figma into Webflow, and you can start to polish and publish your site.
{{callout-04="/assets/callouts"}}