Webflow Website Builder Review

Webflow – is quite an unusual website builder. It isn’t similar to other services that come with visual editors as well as to the majority of CMS. The service uses the format of working process presentation, which is not unique, but quite rare for SaaS platforms. The system mostly resembles advanced web design programs like Adobe Dreamweaver or even Photoshop, in which web developers prefer to draw web page templates. It is not meant for bulk usage by newbies.   Webflow is positioned in the following way: if you can imagine the final result, you can bring it to life. In other words, there is a distinct hint of flexibility and the need for a certain website creation experience. The target audience of the service includes webmasters, designers, and freelancers. The system promises to provide clear code on the basis of your visual creativity. You won’t need any coding skills here. It’s possible to create business websites, landing pages, online stores, blogs, portfolios, and their combinations with the system. Is it really interesting? If so, then who might wish to use the service? Let’s find that out.

1. Pros and Cons

Webflow is a decent product for its audience. This is not a bulk solution for bored newbies and fans of experiments. The major disadvantage is that the developers have introduced an effective, but not universal scheme of working with ID elements and CSS classes, being driven by the desire to make the interface more user-friendly. Anyway, they have left a code editing option. It would be better, if they integrated web page code editing along with other features. As to the rest of options, they are on a decent level.

Pros:

Cons:

✔ Two working area modes – designer and editor. ✔ CMS collections – work with forms and databases to generate dynamic content. ✔ Interesting realization of element classes for their quick addition and editing. ✔ Great templates, broad opportunity for creativity and designing templates of any complexity. ✔ Opportunity to export the code of designs that are under development, which allows using the editor to create/sell quality templates. ✔ Quite powerful SEO. ✔ Competitive eCommerce engine. ✔ Vivid web page structure in the format of element hierarchy.

✘ High complexity of system exploration for new users. ✘ The use of element and graphic presentation classes instead of coding. ✘ Comparatively high cost for those, who need 1 website for personal use only.

2. What Is It Good for?

Webflow is a specific service, which targets the experienced audience. It is quality, flexible and contains numerous brand features that can attract the attention of client website developers. The system doesn’t work well for personal use – there are too many extra and obscure features for newbies here. Web design skills are obviously required. The learning curve is high. This is not profitable at all. It’s more beneficial to create the only portfolio or business website in uKit, Wix, XPRS or any other suitable service. Webflow is meant for web design fans, who wish to make money with their skills. This is not a bullet train on the development of similar websites, but a place for creativity, designing unique themes for those, who are ready to pay for this work. So, it makes sense to use the service to those users, who already have a certain web design reputation. The system also works well for users willing to draw and sell ready-made templates for other CMS. To understand what actually to expect from the platform, we need to check several website examples built using Webflow.  

3. Ease of Use

If you are interested in filling out the templates designed for the completion of certain functionality and logical connections with content, then Webflow won’t work for you. This website builder is not meant for those, who look for simple solutions and wish to publish a website during one night only, having returned from the main job. To gain success, you will need skills and clear understanding of the final goal. The system is oriented on web developers, who can use the templates to create the required structure and make up logic connections between the elements on their own. In other words, it offers creative and thoroughly thought-over web building approach. If a user has never been involved in website building, he/she runs a risk of being unsatisfied with Webflow. Yes, you can just fill out a ready made template with your own texts, links, images and other content. Unfortunately, the prevailing amount of system features will be left ignored in this case. For such a scenario, there are other, more convenient and intuitive website builders. To use this CMS, you have to work hard to create a stunning project. It’s not meant for everyone. The service is not about simplicity at all. The interface is logical, but specific. It is well-structured and even convenient after you get used to it, but newbies won’t be able to master it quickly at all. It’s really complicated to learn how to use it properly. This usually takes several weeks. How much time does it take to become a web designer or a Photoshop pro? The same is about Webflow. Does it take a week, a month, a year? This depends on you.

4. Features & Flexibility

Webflow idea is about providing users with maximum design customization features and functionality without any coding. It’s not a secret that visual editors set the limits by the amount of widgets and their settings. This is not bad as it’s convenient for everyone, especially for newbies. It turns out that it’s impossible to edit the code here. So, where does such template formation flexibility the developers are proud of come from? This question was solved by the introduction of the list of elements with unique identifiers – ID selectors. You can choose their names as you wish, but it’s still better not to do that. This is because they come with logical naming by default.

Classes and Styles Management

The style manager has an exhaustive list of elements used in templates. Is it convenient? So-so. It’s rather unusual. You can create your own classes, add new ID elements. This is all provided in terms of the graphic interface to make it possible to state that Webflow doesn’t have any coding, but you can still make use of its power. Does such an approach actually simplify the process? No. You still need to understand the logic of class application, keep in mind the names of the most frequently used IDs, browse the list in search of the names of more rare selectors. Frankly speaking, it’s simpler and more useful to learn HTML/CSS – this is the universal knowledge, which will come in handy to you in any web building niche. A convenient feature is that the ID of elements and the entire block hierarchy is highlighted on a template, when clicking on them. This is a nice crib sheet. You can highlight several elements and set general settings for them. The number of elements is really impressive. In other words, CSS features like spacing, sizes, layers, colours, alignment etc. can be edited in the graphic interface. This can be done by changing the number volumes, slider, icons and other manipulators. The platform developers have taken care of web design creation convenience. They have added the white space property to the control text wrapping in the typography section found in the style panel. This innovation now makes it possible to change the CSS property “white-space”. The “Navigator” section, which is now available to the left of the control panel, provides an overview of a tree-like block and element structure of the chosen template page. Correspondingly, you can quickly proceed to editing these elements with its help. You will see and understand the structure hierarchy. This is done greatly, although, newbies will have to get used to that. The feature is mostly geared towards experienced users.

Specifications of the Template Editor

The structure of the Webflow visual editor and dashboard is quite complicated. This is the mixture of a traditional visual editor, general settings section, a panel with standard widgets, structure of folders and modules to display the dynamic content, which are called “CMS Collections”. There is also an image library, template mode switch (desktop, mobile etc.), various element highlight modes and other useful things. By the way, it’s possible to work with website templates in two modes here (the switch option is in the Dashboard). The first one is the Designer mode, the description of which is used as a basis for this review. The second one is the Editor mode. The latter variant allows editing the web page content – add the text, replace images, links and graphics. Just hover the cursor over any element to see the settings with available actions. Then make the edits and that’s it. This is a convenient mode to make quick edits. The Design mode offers multiple widgets. You have a canvas (web page template), within which the div-blocks, sections and less important elements are found. You can’t just drag the widget to any place as it is – you need to understand the logic of interacting with the structure. In most cases, you need to add a blank block and fill it with sections layout, columns and write in the forms, text, images etc. Examples of widget names (elements) are as follows: div-block, section, container, columns, list, button, title, abstract, link, complex text, form, entry field, checkbox, captcha, code integration (it’s possible!), social networks, standard and pop-up windows, background video and more. You can set up the display parameters and characteristics of each of these elements in details after you add them to a template. It is also possible to use identificators (symbols) – saved blocks with ready made design to come up to any task. Suppose, you have created a successful review block or a form for something. You can create identificators on their basis and add them from the bookmarks further. You can adjust visibility for various types of devices and for separate elements. All the saved web pages are structured in folders. For example, there can be several templates of the Homepage, Contacts and other pages within one template. It’s possible to create new folders or pages as a blank canvas to further work with it. Generally, Webflow creates an impression of an advanced graphic web editor. There are multiple ready made elements here, while the number of those you can manually create from scratch is much more impressive. There is also the trigger element management system. These are the actions you can make when hovering the cursor, click, scroll etc. over a certain element. You can manually set up the character of any amount of separate elements and website pages. For example, it’s possible to display the animated dialogue window, when the web page loads on smartphones. The editor lets you set up quite complicated and versatile scenarios of website interaction with visitors.

Creation of Dynamic Content

Collections are the major Webflow highlight. They make it possible to create dynamic structures from combinations of fields with diverse content. They use databases to update and store information. Flexibility of settings is impressive. By using them, you can create forms, blog feed formats, galleries, event posters, menus etc. Application scenarios are numerous. There are ready made templates of field sets used to solve various tasks. It’s possible to increase this number as this feature helps solve specific tasks with creative approach. Webflow also allows creating dynamic eCommerce and CMS galleries by uploading, showcasing and styling videos and images. This can be done in one of three ways. The first one makes it possible to upload up to 25 photos with one click only with the new multi-image field. To do that, you can just drop in all the shots or even GIFs (mind, however, that their overall size should not exceed 4MB), reach the settings menu of any collection, click the “Add New Field” button and pick the multi-image field type. Then you should fill in a label, add text if needed and save the collection settings to be able to upload the images. Another way to create a dynamic image grid is to use the improved CSS grid 2.0 version. It offers the enhanced autoflow concept, which helps make the uploaded content more flexible as the grid auto places it into the available cells for better display. To create such a grid using the dynamic content, you should drag a collection list onto a web page, pick the preferred grid layout and then customize the columns, rows and spacing between them. Finally, Webflow allows showcasing your dynamic videos and images via the use of lightboxes. These components let you showcase your photos in the full-screen mode, which ensures the engaging and fully-immersive user experience. The feature also allows connecting lightbox elements to your eCommerce and CMS videos and photos. To create a lightbox gallery, you should initially create a collection list and then connect it to the image source – either a video or a multi-image field. Then drag the items you’d like to place into the collection list and link the lightbox components.

Dashboard Structure

All your projects are displayed in the Dashboard: edit, duplicate, share and sort them out into folders. You can also have a look at the impressive list of button combinations available for use in the editor, when you access the system for the first time. Each project has a rich number of settings – from a website name and favicon and up to code integration, connection of external services, SEO and backup work. There are many useful and simply interesting options in the project settings. For example, those users, who work on the development of client websites, can provide website access to their customers so that they could manage the project and make the edits within the limits you specify. You can set up project branding by removing the service logo or connect Google Fonts/Adobe Typekit and choose those fonts you will use in terms of the project. Another option is to upload your own fonts.

eCommerce

Webflow comes with a worthy eCommerce engine that lets you design and scale your web-based business. The platform puts you in charge of the web design process – from home page customization and up to the checkout procedure, providing an extensive selection of eCommerce features and tools available in the dashboard. No coding is required to start and manage a full-featured web store with the service. The website builder lets you customize the integrated shopping cart, including its layout, animation effects and positioning. You can also create product lists, specifying their names, descriptions, prices, categories, track inventory tools and design options (colours and their variations), current statuses. What’s more, it is possible to create product collections and categories, list sales prices, assigning special features and custom product fields to them. The system developers are right about to introduce an opportunity to sell digital products as well as to create promotions and coupon codes soon. Recent Webflow innovation has made it possible for web store owners to capture their customer information submitted during the checkout process. This, in its turn, lets you use the info for further web store marketing and customer encouragement. As soon as you are done with your web store creation, you can publish it and traсk its performance in the “Orders” section. What you can also do in Webflow is customizing transactional emails, crafting interactions and animations to make your eCommerce website stand out from the crowd. The system additionally lets you integrate scroll-based parallax animations and effects, build microinteractions around mouse movements, create rich multi-step timed animations, add preset interactions etc. to drive user attention and create the unsurpassed and engaging web building experience. The multi-image field Webflow has recently launched for eCommerce and CMS has made it possible to create quality image galleries for each product variant. What you can do now is featuring certain parameters (size, color, model etc.) for all products you offer for sale in your web store to let users clearly see what they are going to buy. All in all, you can upload up to 25 images per each product.     Webflow provides convenient and easy payment and shipping opportunities. The system accepts multiple payment types, including credit card payments, Apple Pay and Google Pay. PayPal feature is going to be introduced in the nearest future. Due to the integrated Stripe tool, Webflow ensures ultimate security of all the transactions made in the system. Webflow users have an opportunity to customize shipping destinations, tax settings as well as update their web store details any time of the day. It’s up to you to point out shipping rules and locations, print shipping labels via integration with Zapier, MailChimp, ShipStation, QuickBooks and some other services. Users can also set and coordinate automatic real-time shipping rates. Automated tax calculation and VAT is provided for customers from the US, Canada, Australia and the European Union.

Lightbox Gallery

One of the recent Webflow updates tackles the Lightbox gallery creation process. The system developers have made it possible to create such galleries out of eCommerce and CMS videos and photos. The component allows creating full-screen and totally immerse experiences to showcase your media files to the advantage. Previously, Webflow lightboxes could be used to work with static content – those video and image files you uploaded or linked to independently. From now on, it has become possible to create galleries and grids featuring any design out of lightboxes and file collections to organize and group videos and images with regard to a certain parameter (like a music blog or a portfolio album, for example). Additionally, you can create website design by means of using lightboxes on a collection template page, which will come up to the content of your gallery items. Connection of the lightbox gallery to your dynamic content can be completed in one of two ways. The first one implies integrating a lightbox directly into the collection template page design. The second option lets you create an image/video collection list in any place and then add the lightbox component to the page.

After Effects and Lottie Integration

Webflow has recently integrated with After Effects and Lottie, which allows web designers controlling the playback of vector animations via the use of multiple Webflow interactions. As a result, you get an opportunity to create a website that will be both visually appealing, professional and feature-laden.

SEO

Much attention is devoted to project SEO optimization. It is possible to set up the content of title, description and keywords meta tags for each page. You can also work on the content display in Open Graph. Alt tags for images can be set up here as well. Sitemap.xml is formed automatically – just like the meta tags for blog feed posts. Taking into account quick web page loading, high code quality and optimization for mobile devices, the website builder can be considered a nice solution for the effective website promotion. Webflow grants API access to web developers. You can connect Google, Facebook services, add Webhooks, set up the parameters of user information collection from the forms, activate anonymization of user IP addresses, add your HTML/CSS code, language code etc. Websites will be published on the service subdomains by default, but it’s also possible to delegate the domain or even export the template code (separate HTML/CSS/JS/Assets). CMS files won’t be saved in this case. Generally, Webflow is a grim mixture of Photoshop, SaaS service with a visual web page editor, tools to work with databases and code in somewhat specific mode. This is a flexible combination of options packed in a complicated, but quite logical interface. The system can be used to create web page templates for other CMS like WordPress due to the code export option. The product is obviously powerful, interesting, oriented on designers and developers of client websites.

Animations and 3D CSS Transforms

The system makes it easy to manipulate different objects in different directions across y and x planes or axes. With a 3D CSS transforms feature, you will be able to implement various object dimensions without working with the code. Additionally, the system makes it possible to integrate complex animations to the page without knowing JavaScript.

Integrations

Webflow makes it easy to set up communication with potential clients. For example, users may integrate Zapier to connect all available user acquisition forms with the website. What’s more, you will be able to interact with potential customers via other messengers including Slack, Asana, or MailChimp. A great opportunity to develop and launch email marketing campaigns and grow your mailing list. Additional integration capabilities include Google Optimize integration. With this tool, users will have a chance to run multiple AB tests for the entire website or a separate page using Google Optimize. With Google Analytics integrated with the website, you can track all major metrics, stats, traffic, and other crucial website performance parameters.

Hosting and Domain

The system comes as an all-in-one solution, which means hosting and domain included in the package. A great benefit here is that you may actually buy a custom domain right here inside Webflow without searching for separate platform or domain registrars. It is a good option for beginners who know nothing about DNS, A-records, and so on. The system will do the setup for you. As for the hosting performance, the system promises fast page load speed and great uptime delivered by Fastly and Amazon Cloudfront.

5. Design & Templates

Webflow stands out from the crowd due to the set of stunning ready made templates. They are very versatile and appealing. They trigger genuine interest on the preview stage. All in all, there are more than 200 templates here. 40 of them are free, while the cost of other themes ranges between $24 and $79. There is no distinct difference in quality of premium and standard templates – all of them are impressive in their own way. The number of paid themes is larger and the assortment is wider. Each template comes with a description of features and there is also a preview option. The system offers an opportunity to draw a template from scratch by using a blank canvas. It’s also possible to select general design without demo content – the one, which will come with a schematic layout for a business website or a portfolio, for example. Many templates have several variants of web page presentation – they offer 5-10 Homepage themes, Contacts etc. The design differs a lot and it’s possible to switch between the templates in one click. Each theme comes with an instruction – the description of its structure and major features. Webflow is a design-focused website builder. Template variability is really striking. It’s possible to edit each element in numerous aspects: size, position, effects, rotation, opacity, layers, colour, background etc. There are millions of combinations here. You can have a look at the works of other designers in the Dashboard – there is much to see and to get impressed here. The service gets the highest rate for an advanced potential of template development. This is the tool for pros, which can impress everyone by the range of website design customization options.

6. Customer Support

Webflow provides perfect conditions for the education of newbies. There is the University, an impressive knowledge base, multiple video tutorials here. All these options are available directly in the editor. The quality of materials is on the top notch level. There is also a blog and a forum with a rich number of useful posts/discussions, social network groups, tutorials, books etc. – you won’t get lost here. Tech support is provided via the email and online chat. It is qualified, user-friendly and 24/7. Webflow community is quite wide and friendly. It’s not a problem to find the contacts of the best designers or trusted web developers here. The ecosystem is live and responsive. The system has made everything for users’ comfort and even more. If you have difficulties when bringing your site idea to life or have other technical issues, you may hire any of the local experts to help with a fast resolution. They will lend a hand whenever you need to have a site migrated, rebranded, or redesigned. They also deliver assistance when you fail to add custom code or configure eCommerce settings. Another great benefit is the full access to free eBooks written by local specialists. Every user may download them at zero cost. They cover a variety of fields explaining how to become a freelance web designer, how to create modern designs, and many more.

7. Plans & Pricing

Webflow can be used for free with a set of limitations: the service subdomain, ad banner, no code export feature and other simplifications. This plan is free and never-expiring. Paid plans are subdivided into “Site” and “Account” plans, but each of these subscription types also falls into groups. You can pay with a credit card on a monthly or an annual basis. The difference in the cost is notable – 20-50% depending upon the plan chosen. We’ll provide the cost of 1 month granted that a user makes an annual payment (this is a beneficial variant). Thus, Site Plans include Website and eCommerce plans. Website Plans are as follows:

• Basic – $12/mo (works great for simple websites that don’t need a CMS) – domain connection, CDN included, 500 form submissions, free SSL certificate.
• CMS – $16/mo (nice pick for blogs and other content-driven websites) – 1000 form submissions, 2000 CMS items, limited CMS API, 3 content editors, site search.
• Business – $36/mo, (best for a high traffic marketing website or a full-featured blog) – advanced global CDN, unlimited form submissions, full CMS API, 10 content editors etc.

eCommerce plans, in their turn, encompass:

• Standard – $29 (perfect for new businesses getting off the ground) – all features of the CMS plan plus custom checkout and shopping cart, email customization, integrated CMS for blogs, 2% transaction fee.
• Plus – $74 (works well for higher volume businesses that need additional features) – all features of the Business plan plus unbranded emails, zero transaction fee, 10 staff accounts.
• Advanced – $212 (best for users, who intend to scale and reach new heights for their online businesses) – all features of the Business plan plus 15 staff accounts, unlimited yearly sales volumes and more.

Account plans also fall into two subscription types. These are Individual and Team plans. Individual plans include:

• Free – $0 (includes everything you need to get started with Webflow) – 2 projects, client billing, free staging.
• Lite – $16 (allows exporting your website code and unlocking more pages for your unhosted projects) – 10 projects, enhanced staging, code export, unlimited project transfers.
• Pro – $35 (great pick for for active freelancers and designers, who need more projects and premium features) – unlimited projects, White Labeling, site password protection.

As to the Team Plans, these are as follows:

• Team – $35 per person (allows for shared website access and collaborative team work) – all features of the Pro plan plus client billing, code export, enhanced staging, team dashboard etc.
• Enterprise – the cost is discussed with Webflow experts individually (for teams of 25 users and more) – all features of the Team plan plus unlimited projects, White Labeling, site password protection, team dashboard etc.

By the way, freelancers can use Webflow for free due to the client billing opportunity. This means that you don’t have to pay for the engine, when working on the development of client websites. Instead, you can discuss the cost of the tool with a client in advance so that he/she could make a payment. A client will get access to the system to be able to watch the web design progress. Thus, you can use Webflow on a Lite plan to create templates for other CMS due to the code export option. In other words, you can consider the service as a combination of a graphic editor and a tool to design web pages. You can avail this option at $16 or $24 if you make monthly payments. You cannot remove the ad here. That’s why this plan cannot be considered for publication of client or personal commercial projects.

8. Website Examples

Webflow ensures maximum web design and customization freedom. It helps to build a variety of project types with different structure or complexity. Let’s have a look at some of them.

9. Competitors

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

10. Conclusion

  Webflow is an extraordinary, quality website builder for designers and freelancers. It lets you create multi-page websites with quite complicated functionality due to the use of complicated, dynamically changing content forms – see live examples made by Webflow users. Databases, integrations, identificators, various editor layout modes, opportunity to edit each block and element separately, template code export – all the features make Webflow a real giant. Great tutorials make it possible to recommend the system to enthusiasts. Having worked with it, you will, probably, learn how to design appealing web pages without coding. This guarantees nice profit in future. If you already have the experience, then you should definitely consider Webflow. This is a rare niche product of high quality – the mixture of Photoshop, Dreamweaver and CMS provided in the format of a SaaS platform. The service is certainly worth its cost, but it won’t work for everyone. We recommend it for consideration of the target audience.