Webflow Website Builder Review

Webflow – is an online website builder developed by the US startup, which targets experienced and advanced users who require maximum freedom to create unique web designs. The platform was launched in 2013, the main office is located in San Francisco (California, USA).

The company received its first investments from the Y-Combinator startup accelerator as well as from other private investors. This is a very large and promising market player and a direct competitor to Wix, Squarespace and Weebly.

Despite the fact that the website builder allows working without deeply immersing in HTML code, it works great for professional designers and web agencies that develop small custom websites for clients: landing pages, corporate blogs, small-page online stores, promo sites, portfolios etc.

The main features include an editor with web IDE capabilities (software development environment) and full code export (you can create a design option here and upload it to HTML /JS). Thus, the website builder will be difficult to master for beginners.

Perfect for web design pros Code export option Great choice of ready-made professional layouts

Try Now

Pros and Cons

Webflow website builder looks great as it allows creating unique and appealing modern websites. Everything, however, has a reverse aspect. When it comes to Webflow, this is its complexity.

A more detailed list of all pros and cons of the platform is provided below.

As seen from the chart, many disadvantages are associated with the complexity of billing and the development/use of the website builder by newbies. This entirely depends on the special features of the Webflow platform as well as on the audience it targets. This is a kind of software niche specialization.

What Is It Good for?

It’s quite difficult to call Webflow website builder a user-friendly system convenient for beginners. At the same time, it will be of maximum interest to professional designers or web-agencies. Why? Because this is the target audience of the service developers.

Everything is designed here to ensure the development of quality websites without intermediate layouts (for example, without using such services as Figma or Canva). You form the required grid and arrange ready-made design elements inside. The system takes care of the rest: clear HTML/JS code generation, technical audit, provision of responsive block version, WebP images generation, backups, versioning etc.

You don’t require any front-end programming experts, and if you set up the hosting CMS functionality correctly, then back-end programmers won’t be needed as well. As a result, websites can only be created and maintained by web designers.

It is also quite convenient to work in the editor with a whole team. The edits will be agreed before the final implementation in the working layout version.

Since websites are easily exported, you can choose any suitable hosting or even redesign the website to work with a third-party CMS system (you can adjust the layout to any platform).

Availability of built-in hosting with CDN integration is rather a pleasant bonus for users who require high-quality and smooth hosting, where they can host websites created for clients/customers. This results in such an interesting pricing policy of the website builder.

Ease of Use

On the one hand, a user’s personal account and general Webflow control panel do not differ a lot from similar solutions provided by competitors. Thus, you are not likely to encounter problems here.

On the other hand, though, it becomes clear that it will be very difficult to go without specialized knowledge, when you open the online editor. There is a large number of different tabs inside the website builder, while the interface of the software that comes with sidebars, strongly resembles the interface of Adobe applications or professional IDEs for web developers.

There are Drag&Drop elements here – just like in simpler and more understandable website builders, but it is noticeably more difficult to manage the Webflow system. There are various style managers, element navigators, database collections, a file manager (to work with image storage and static files) etc.

Web design pros, however, will quickly figure out what is required and why.

Steps to Get Started

To start working with the platform, you need to create an account first. Fortunately, the starting plan is absolutely free and unlimited – this is the best solution for testing the software features.
The registration process is completed in the following way:

1. Provide your first and last name, email and password (use complex combinations).
2. Mind that the system does not require email verification right from the start. Make sure you entered the correct email. The system will still allow you to access your personal account.
3. You will get the email activation code later.
4. A special script will ask you a few questions and will offer to subscribe to mailing lists.
5. One of the last steps is to choose the type of the required website (blog, portfolio, etc.). The starting preset will depend on it.

That’s it!

It is possible to partially speed up and facilitate the procedure using an existing Google account.

If you have already created a website, you can delete and rebuild it once again, running the project on the available basis:

• From scratch (a completely empty project will be created).
• Free preset (special starter kits with default content and data collections, if applicable – portfolio, business website, online store).
• Paid professional template (the prices differ, there is a search by subject, functionality and other technical features).
• Free template (they are filtered and applied similarly to paid ones).
• A template shared with you by other users (including professionals you could hire using the built-in freelance marketplace).
• A website of other clients who have allowed cloning (“Made in Webflow”/Made in Webflow section, “Cloneable sites only” filter).

Let’s face it, this is more than enough. The only missing thing is the ability to fully download your templates.

Website Editing

If you wish to understand in detail how datasets are arranged, in what format and how online stores are created, etc., it makes sense to start with the appropriate preset.

Having selected a template or a preset, you get inside the online editor. New customers are shown special interactive tips, but you can do without them as well (if you closed the tips or refused from their display, there is a link to the help section in the lower left corner and a link to video manuals).

Listed below are the issues that require special attention:

• You can add separate interface elements or complex blocks to pages (from the Layouts tab).
• To avoid redoing the typical content in the selected blocks every time, you can use Symbols. This is an analogue of cross-cutting sections used in some other website builders.
• All other elements that can be used when creating a specific page are available in the sidebar (these are CMS elements, eCommerce module and settings, the section/block navigator, the Assets static file storage, search settings, backups and email).
• Switching between different project pages is done in the Pages section. This is also the place to select the main page and to define SEO titles, Open Graph settings etc. Pages can be divided into folders – this is needed for greater convenience, when working with a large number of list elements.
• Elements for previewing, defining breakpoints and publishing/exporting are moved to the top panel.
• Detailed design options (including style manager, trigger and iteration management) of separate elements are displayed in the right sidebar – right after selecting/highlighting a certain block.

This is how the editing process will look like:

• Create a new page (or pages, according to the website structure).
• Define the grid layout of elements. To do this, use the Layouts blocks in the Elements tab: sections, containers, columns, grids.
• You can already insert other elements inside layouts: Div-blocks, buttons, images, videos, lists, text, forms etc.
• Instead of a layout + element combination, you can use ready-made layouts with typical content, the Layouts tab: headers, footers, hero blocks, galleries, sliders etc.
• Replace the content inside elements and blocks with your own data.
• Configure the SEO parameters of the page(s).
• Publish the website.

Changes do not need to be saved separately. The process is fully automated.

Publishing

Publishing web pages in Webflow looks like everywhere else at first glance, but there are actually a few nuances here.

Firstly, you can use the code export tool instead of publishing – you will eventually get a clean and readable HTML code with all CSS styles, JS scripts and assets (images, small files and other elements).

Secondly, you can configure a number of special options during publishing, such as:

• SSL operation (it is active by default, but can be disabled if required).
• HTML code minification (compression).
• Script minification (JS compression).
• CSS minification (style sheets/files).
• Prohibition of website opening in iframe-blocks.

All clients can publish their websites on free subdomains like your-name.webflow.io. However, you can attach your domain to the website as well (viable for paid Webflow hosting subscriptions only).

If the project was made for the client, it may not be published. However, you can open access via link or through the system of invites (invitations). To do this, you should use the “Share Project” tool.

Mind that the HTTPS version of the website can be organized on free SSL certificates that are automatically generated by the platform, or you can upload your own SSL, including those issued by professional services (with official financial guarantee/responsibility).

Features and Flexibility

As you can see, Webflow is not just a website builder. Thus, there are more technical opportunities than in platforms for beginners or for small businesses here. This is especially true when it comes to website design.

Let’s review the main features of the software in key niches now.

Starting a Web Store with Webflow

Launching a web store with Webflow is possible via connection of one of the premium plans – eCommerce Site (find out the cost further).

This is what the subscription provides:

• Opportunity to add special CMS-objects – products for the catalog (from 500 to 3000 items).
• Tools for bulk management of categories and products.
• Product options management (up to 50 sets).
• Opportunity to create a custom checkout page and detailed shopping cart set up.
• Special product fields in emails.
• Email template customization (colors, branding, etc.).
• Acceptance of online payments through PayPal, Stripe, Apple Pay payment gateways and automated tax calculation. The starting eCommerce plan includes a commission fee charged on sales – 2% of the overall amount.
• Integration with web marketing systems – Google Shopping, Facebook + Instagram.
• Mailchimp integration (for email campaigns).
• Opportunity to insert arbitrary code (for more advanced integrations).
• Creation and management of individual sales rules.
• Accounts for employees and web store customers.
• Various ways of calculating the delivery cost (by weight, fixed sums, by quantity, check percentage. Shippo service integration is available here as well).
• Sending prompt notifications about important events in the web store (not only to the website owner, but also to team members as well as to arbitrary contacts you will specify in the settings).
• Accounting for inventory balances.
• Indication of the old/new price.
• Import/export system (products or category pages) in the CSV format.

Webflow does not offer:

• Opportunity to create nested categories (you can set up a single-level catalog only).
• Opportunity to add related and/or similar products to the product card.
• There is no overwhelming number of required commercial services and integrations that are popular outside of Europe and the USA (payment gateways, mailing services, CRM systems, marketplaces, etc.).
• There is no ready-made mobile application for web store management (to track balances, receive notifications, manage orders, etc.).

All these issues have to be considered, if you plan to create a full-fledged online store with Webflow.

The functionality of the system will only be enough to serve a small catalog with a flat structure (no more than 3000 items).

If you don’t like the built-in Webflow eCommerce features, you can launch an online store without a regular module. The only thing is that you will be able to use the minimum set of automation elements. You will have to redo all web forms, which will significantly complicate the process of accepting payments with further checkout transfer to a third-party platform.

The algorithm of web store set up is similar to that offered by other website builders:

1. Activate the eCommerce module.
2. Fill out the company-related data.
3. Adjust online payment acceptance and delivery calculation settings.
4. Add products to the catalog.
5. Start accepting orders.

For greater convenience, Webflow offers a special checklist that will guide you through the major web store set up steps.

Starting a Blog with Webflow

You can launch a blog with the website builder in two ways:

1. From static pages (each new page is created in the editor based on previous ones (while maintaining the ready-made layout) or completely assembled from scratch.
2. Using CMS-functionality.

The second method is much more convenient and logical. It also allows posting more materials – up to 10,000 records (depending on the current hosting plan). However, it will be more difficult to implement, as you will have to set up CMS data sets for proper blog performance.

To simplify the process, Webflow offers a typical preset for running a standard blog (it will be easy to delete the demo data and replace it with your own content) as well as the majority of CMS collection sets – Blog Posts will be one of the points here.

Instead of a pre-installed set of CMS data and fields, you can create your own set (your own data collection).

You can select the following extra fields for post records (name and URL are required fields):

• Plain or formatted text.
• An image or set of images.
• Link to video.
• Date/time.
• Switches (to activate certain options).
• Email/phone.
• Color.
• File.
• Links (single or multiple).

When creating or configuring a port category template, you can fine-tune the output of CMS elements based on your own rules and sorting conditions for the main or additional fields in the set. For example, you can create several blocks that will display in the following ways:

• Latest blog posts.
• Records filtered by the ”Featured” parameter (and similar ones).
• Post listings in alphabetical order.
• Etc.

Thus, Webflow is much more flexible in application than any other website builder. In some aspects, it is even more convenient than the majority of CMS systems (like WordPress or Adobe Dreamweaver, for example). Webflow allows fine-tuning the post display logic and defining an individual fields set without programming.

When all the layouts are ready, you can start uploading blog content in Webflow in a separate interface. The editor will only be able to edit the fields you have defined. This eliminates the possibility of accidental layout breakage by non-designers.

The process of creating new posts will be as simple as in specialized CMS systems. For example, it will only be possible to enter title, post text, upload post preview and define tags. That’s it – the post is ready for publication.

If you already have a blog on another platform, such as WordPress, posts can be transferred using CSV import/export (to automate the upload, use the plugin from the WordPress catalog – Export any data to XML/CSV).

Starting a Landing Page with Webflow

Due to the high degree of freedom and availability of a large number of typical elements, creation of landing pages (selling websites) in Webflow will be possible both for professionals and newbies.

Beginners will be able to use ready-made layouts (complex sets of smaller elements) or ready-made web page templates. Pros, however, can create layouts from scratch, including the set up of all parameters of elements up to the smallest details. Additionally, Webflow unveils an opportunity to create step-by-step animations and trigger actions (for specific elements or for the entire page), apply visual effects and 2D/3D transformations.

The built-in form builder is very flexible and allows setting up Zapier integration (and these are several thousand external services with which you can set up data exchange, including CRM, email newsletters etc.).

It is possible to quickly connect Google Optimize for split testing.

There are no special ready-made tools in Webflow that make it possible to work with leads. There is no built-in CRM-system, email-letter builder, quiz-forms, online calculators etc. here.

Logo Maker

Webflow does not have an integrated Logo Maker. To design a logo, you will need to use third-party services and tools.

Working with Images

Despite the fact that Webflow supports a possibility to to work with images in WebP and SVG formats as well as automatically creates crops for different website versions (the width constitutes 2500, 2000, 1600, 1080, 800 and 500 pixels), you won’t find any additional graphics editing tools in the system.

Moreover, there are no ready-made integrations with paid or free photo stocks here (for a quick search for media content).

All you can do with images is to apply filters (this is actually done via the use of JS and CSS).

Automated optimization can be implemented by connecting external integration – Pixie App.

Webflow Marketing and SEO Tools

Webflow offers the following features out-of-the-box:

• XML sitemap creation.
• Content search by pages (the option is not active in all subscriptions, and you need to manually determine the content that can be searched and indexed on web pages).
• Open Graph markup embedding.
• URL generation based on templates with variables (+ transliteration of titles from Cyrillic and other languages into Latin).

You will also be able to manually add your meta tags, page URLs, and other important SEO attributes, including image alt tags, in the editor.

If the built-in capabilities with email notification templates are not enough, you can integrate third-party mailing services.

With its page load speed, built-in CDN integration and automated SSL certificates, Webflow looks pretty good for sales and promotion on the web.

At least, the system has all the required basis.

Domain Management

All Webflow clients can use free webflow.io subdomains. You can connect your own domains when switching to a paid hosting subscription only.

It is possible to buy a domain in Webflow through the following service providers (official registrars):

• Google,
• GoDaddy.

If you already have a domain, you can redirect it to Webflow Hosting. DNS records can be found in the official documentation (like here).

Code Export

This is the first and a very significant reason why many web designers choose Webflow to run their projects. Even without hosting plans, you can create cool layouts and pages without programming, and then upload them as HTML files and offer them to clients (customers).

What’s more, a client can track the progress and adjust the following steps (if necessary), give recommendations/advice on any stage of the working process. In this case, the demo version of the website will be available via a special link. Project access can be protected by a password for greater reliability.

Webflow website builder generates a very clean and readable HTML code, which cannot but pleases web design pros. It will be easier to find and edit/replace the required element in case of manual editing (the main thing is not to forget to turn off the minification/compression options).

Along with the code, all other project data is exported: JavaScript scripts, CSS styles, images, documents etc.
It is crucial to remember that all CMS features are automatically disabled when exporting.

Built-in Audit Tool

The audit panel notifies you about the most common issues within your project: missing alt tags, missing heading levels, duplicate element IDs and more.

The audit tool makes it possible to identify all minor and major flaws immediately before website publication. For greater convenience, the errors are distributed with regard to the level of their critical value.

Website Editor Mode

This is a special version of the control panel created for content managers and editors. Webflow has separate modes for filling the website with content and for design set up. This is very convenient for effective teamwork – one employee or department is responsible for layouts and design, while another person is responsible for content.

You can specify in detail the editable elements and those that cannot be edited in the website builder.

Content creators will not be able to spoil anything then.

Additionally, the editor panel contains settings for web store/order management (this is convenient for highlighting the functionality of web store managers), as well as for managing the list of pages and blog entries.

Automated Backups

The system automatically creates backup copies of the website. A free plan provides an opportunity to restore info from previous two backups, while paid plans have no restrictions – backup options are unlimited here.

The only issue is that the inventory may be lost when restoring a website from a backup version (if you haven’t specified the option to save them in the backup settings) and collection identifiers (for CMS functionality, they may take part in some API requests).

Design and Templates

Webflow website builder provides an extensive selection of ready-made design options and sufficient freedom of interface editing.

There are over 300 ready-made templates in the official catalog of the system. Around 50 themes are distributed on a completely free basis. The cost of paid designs ranges between $34 and $149.

Layouts may be filtered by the required criteria:

• Website functionality/type (CMS features, eCommerce, blog, portfolio).
• Niche (categories).
• Popularity.
• Style.
• Language (the starting content).
• Design options (with 3D transformations, background videos, responsive slider etc.).

You can instantly start not with a template, but with a ready-made thematic website. You can find projects of other authors available for cloning in the “Made in Webflow” section.

Many users will like an opportunity to buy Webflow templates from the popular commercial ThemeForest platform (it sells lots of cool WordPress themes). However, you need to understand that it is impossible to upload arbitrary HTML templates to Webflow at once (the platform does not have such functionality).

If none of the ready-made options comes up to your requirements, you can contact professional designers any time. To let you do this, the official website has a special freelance marketplace. For each performer, You can select a specialist and browse his/her work samples, reviews and other useful information.

Listed below are Webflow tools and features you get to work with design:

• The built-in editor strongly resembles web-IDE (web development environment). You can customize all the styling options up to the smallest detail here. Instead of writing CSS styles, however, you will use a graphical interface.
• It is easy to track the structure and subordination of HTML elements – there is a separate navigator for this purpose.
• Layouts are built both from large (complex) sections as well as from smaller elements. Therefore, you can create an interface of any complexity level.
• To avoid recreating the same elements and sections on different pages, you can use the so-called Symbols. This is a kind of analogue of cross-cutting blocks in other website builders, but with the opportunity to replace individual content in different samples.
• Content can be inserted into special fields from data sets (this is the CMS functionality). That is, a single template is created for blog entries, while the values ​​from the chart for different pages are substituted into it then. The eCommerce functionality (online store) works in a similar way.
• All templates initially support a responsive approach. At the same time, it is possible to fine-tune breakpoints (screen resolutions that act as triggers to switch layouts for different types of devices: PCs, tablets, smartphones etc.).
• The platform ensures individual font loading and integration with all popular web font platforms.
• Custom HTML/JS code can be added before the tag, after it and as an arbitrary HTML block (embed code).
• It is possible to create complex step-by-step animations – Lottie animations.
• Style switching triggers can be associated with different events at the level of an individual HTML element or the entire page.
• A special tool – Style Manager – is provided for centralized style management.

Cross-Cutting Blocks (Symbols)

They make it possible to conveniently divide layouts into complex, frequently repetitive parts. For example, this can be a sidebar for widgets, a website footer, a top menu etc.

Symbols in Webflow can be used in two ways:

1. With completely identical content in all samples (to let you edit the content in one place so that it could be updated on all other pages).
2. With unique content in each individual sample, but with a common style.

Insertion (redefinition) of unique content is completed using special fields.

You can create Webflow Symbols from any of the available editor elements.

Professional Web Design Tools

When we say that web designers can customize any interface elements in Webflow to the smallest detail, it’s hard to imagine what we actually mean. Basically, you get access to all the available CSS properties, such as:

• indents,
• container overflow properties,
• position fixing,
• detailed typography customization (up to font decoration and definition of indents between characters),
• background management (images, gradients etc.),
• frames/strokes,
• overlapping effects (transparency, shadows, filters, 2/3D transformations),
• cursor design management,
• alignment,
• adjustment of custom CSS styles,
• etc.

Everything that can be described using HTML and CSS code is also configured in the Webflow editor. That is why the platform is so popular with professional web designers.

Individual HTML Code Insertion

The embed code can be used to connect many external services: web chats, third-party input forms, online calculators etc.

Embed code blocks can be reused in Symbols. It is possible to add JS code to them, they are easily combined with CMS fields etc.

However, it is not allowed to add server programming languages to these blocks: PHP, Perl, Ruby, etc.

Likewise, it is impossible to insert over 10 thousand characters into one HTML block.

Mobile Website Version Set Up

The process of working with breakpoints in Webflow is designed for professionals. It implies the division of screens into 4 device types: mobile devices in the portrait mode, mobile devices in the horizontal position (landscape mode), tablets (from 768 to 991 pixels), desktops (1070 pixels and more).

Any breakpoint can be redefined.

You can set element visibility in different switching points in the settings of each block. Likewise, you can add your own CSS selectors that will be associated with a certain device type. Thus, visibility switching can be organized at the CSS and JS code levels. It is impossible to come up with a more flexible solution.

Tech Support

As far as Webflow was created by techies and for techies, much attention is devoted to documentation and training for newbies.

Thus, clients are offered:

• The official portal of Webflow online university (online courses, lessons, technical support specialists, etc. – all in one place).
• Portal for finding technical specialists (built-in marketplace of developers – professional partners).
• Active blog with manuals, reviews, announcements of new features etc.
• Community portal (you can find free help here).
• API documentation.
• Official forum.
• Electronic books.

You can contact the technical support of the platform (if you do not need the help of paid experts) only via e-mail (no chats or phone calls are available here).

The exception is the owners of Workspace subscriptions with the Enterprise level. They are offered the assistance of a personal technical support manager.

Pricing Policy: How Much Does It Cost to Start a Website with Webflow?

Pricing policy is the most difficult part in understanding the way Webflow works.

Everything that relates directly to the website work is hosting.

Webflow hosting rates are as follows:

• Starter – is a completely free plan. It is connected to all websites powered by the platform by default. You cannot link your domain here and there are serious restrictions regarding CMS functions (no more than 50 elements in charts, no more than 20 collections). You cannot create more than 2 static pages here, while the bandwidth constitutes 1 GB per month only (not more than 1000 visits). It is impossible to disable software copyright.
• Basic – from $12/mo. CMS functionality is unavailable here, but you can create up to 100 static pages. It is possible to connect your domain name and disable copyright. Bandwidth – 50 GB/mo.
• CMS – from $16/mo. 2000 CMS posts, up to 1000 form submissions, 3 guest editors, 200 GB/mo of traffic.
• Business – from $36/mo. 10,000 CMS records, 400 GB of traffic per month, 10 editors, up to 2,500 form submissions, increased limits on API requests.

Special eCommerce plans (this also implies website hosting, but with payment acceptance):

• Standard – from $29/mo. CMS plan terms + 500 products in the catalog. Sales commission – 2%. Up to 3 employee accounts.
• Plus – from $74/mo. Up to 1000 items in the catalog, 0% sales commission. Emails without Webflow branding. Up to 10 employee accounts.
• Advanced – from $212/mo. Up to 3000 positions in the catalog and up to 15 accounts of web store employees.

Workspace Plans

These subscriptions extend teamwork opportunities and provide access to code export.

• Starter is free. 1 workplace, 2 hidden (unpublished) websites. No code export feature.
• Core – from $19/mo. Up to 3 workplaces, up to 10 hidden websites, access to code export, opportunity of individual code insertion.
• Growth – from $49/mo. Up to 9 workplaces, any number of hidden websites.
• Enterprise – the price is discussed individually. Any number of workplaces, enhanced performance, technical support and security systems.

Competitors

There aren’t many competitors or alternatives for a service like this. The closest rivals are WordPress and Adobe Muse. But we also compared the editor with some of the most popular website creation options for you to see the differentiating factors.

Bottom Line: Is Webflow Worth Using?

If you need an appealing, high-quality and modern website created by professional designers – this is definitely Webflow.

However, you have to understand that you won’t be able to design your pages here without experience and niche knowledge. Buying a professional template or ordering turnkey project development from experienced web designers are the only possible solutions for newbies (it is possible to find web designers right here in the built-in freelance marketplace).

The platform can act as a key element of your business. It can be used as a CMS system, work as a full-fledged online store, organize data exchange via API with other external services (browse the live samples to see the result). This is, however, quite difficult for beginners.

In other words, the platform is really cool, but it will only work great for web designers and agencies/studios that know how to approach it correctly.

The negative factor is the subscription price – it is significantly higher than the offers of the main system competitors and includes several constituents.