Webflow is the product of a reflective, cohesive and, frankly, new vision. To begin with, Webflow doesn't shy away from the sophistication of the code. It supports it, instead. So, for example, you might be surprised to add your first paragraph feature to the list.
Web developers should understand what's going on here, but non-coders probably won't do that. Essentially, in order to limit the width of this product, it must be put inside a container. This is a key concept in web design. It's called the pattern of the box.
Webflow is not abstracted from ideas such as the box model, because the whole point of Webflow is to accept the complexity of the front-end code. (The sophistication of the code, after all, allows for the versatility of the code.)
Because of this, you're really able to design just about anything in Webflow— there's not a lot of restrictions.
It makes it a categorically different tool to web builders like Squarespace or Wix. Squarespace and Wix are not designed to give you total freedom. They have templates and smart defaults — they take you away from the difficulty of the code, making it much easier to use.
Webflow, on the other hand, doesn't start you off with a tutorial and has a much steeper learning curve, but you can do a lot more with it. You really need to learn the basics of web design in order to use webflow.
These include concepts such as hierarchical form, box layout, floating, absolute and relative positioning, and other basic web fundamentals. If you've never heard which ideas before they probably sound pretty intimidating.
But if you're a fairly tech - savvy individual and you spend a few hours at Webflow University, you might be shocked how much you can learn — there's a fundamental order and logic to these concepts..
In reality, what looks like a Photoshop window is more of an HTML / CSS automation tool, where the user is free to add, place and style elements as they please, while the underlying system automatically generates the markup and all other required code. The design is quite complex and takes some time to get used to, but it's definitely one of the most powerful and versatile real - time website builders in existence today.
Let's make it clear right from the start: you 're not going to be able to simply draw a shape in the center of the canvas: instead of providing a simplistic way to tap together a web page view, Webflow keeps it real by understanding that there is always a real code behind each feature, and that such a code gets exponentially messy if you don't know how HTML and CSS function.
In other words, to draw a square in the middle of the page, you will need to add a new < div > element (a "container" or "part" in Webflow terms), set its location to "fixed" and its top - right-bottom - left positions to 0 – this is real life, kids!
Indeed, the Webflow builder panel consists of real CSS properties, so to fully appreciate the power of this method, one should be familiar with HTML / CSS. Moreover, if you use the "I don't write code" option during the sign - up process, Webflow will automate a significant part of the creator for you, e.g. managing media breakpoints to ensure responsive behavior ( i.e. creating tablet-and mobile - friendly code for your page on the fly).
Needless to say, it would not be possible to cram every single CSS feature into the Designer – which is why Webflow simplifies the most less-useful or less-used parameters and makes the language more user - friendly: from offering pre - defined options, to adding toggles that display or conceal "advanced" features and more granular control.
You can start with a blank canvas or use any of the pre - made templates, some of which even come with a ready - made site structure. There are over 30 free and 100 paid models in the Webflow library, with the key difference between these two classes being the level of detail as well as features such as styles and images. The paid themes range from $40 to $80 and are developed by the Webflow community , i.e. experienced designers and developers outside the business.
For the reasons outlined above, starting from a blank canvas, it is mostly recommended for those who already have at least some practical experience with HTML / CSS and are confident to set up building blocks from scratch. If you haven't coded before, and also if you want to get acquainted with the Webflow toolkit first, tweaking a pre - made template is highly recommended.
Apart from static content, animations are an essential part of the webflow design tool, adding an extra layer of interaction to the resulting websites that can be daunting to achieve and test using more traditional tools. First, you can add transitions and transforms directly to any element using the same right sidebar with the properties of the element – which is a real time saver, as most of these CSS rules are time - consuming to handwrite, and many developers use one or the other auto-generating tool in any case.
The remaining sidebar tabs include the Navigator (HTML tree) and the Style Manager (CSS hierarchy) which are useful as overview resources but add less value compared to the panels discussed above.
Finally, the Webflow team has managed to create a very comprehensive coding automation toolkit that acts as a semi-visual editor; the degree to which it simplifies the process of creating beautiful web pages with a clean code will be appreciated by anyone who has ever tried to write their website by hand.
Webflow Templates Design
Webflow has a total of over 100 models that you can choose from, including 40 free templates. You can filter templates by industry, free / paid, or e - commerce. This makes it really easy to find a prototype that suits your needs. You can even preview the designs before you make a decision and see which ones support dynamic content.
Webflow has hundreds of free and premium templates, purpose - built for personal, business, and e - commerce sites All webflow templates are open, which means we automatically adapt to match different screen sizes, depending on the device your site visitors are browsing with.
Each template also comes with a brief description that tells you what type of site is best suited to and what your design options are. Many website builders have responsive templates and let them preview their designs, but Webflow 's extended template details are a nice touch.
Paid templates range from $19 to $149. Most tend to cost either $49 or $79, which might sound expensive, but as a one-off expense, you should see it more as an investment.
Webflow templates are usually well balanced and can hold their own against market leader Squarespace in terms of design consistency. We are clean, responsive and fully customizable.
Features is usually where Webflow fails in contrast to other website builders on the market. Although Wix, Weebly, and Squarespace have a wide range of features, Webflow's options are pretty frustrating.
Social media incorporation is a prime example of that. While you can easily connect to Facebook and Twitter accounts, embedding a live feed or linking to Instagram proves to be pretty difficult. It's worth looking at the Webflow Help Center, renamed Webflow University, to see what's and isn't feasible.
This will save you time trying to find a feature that you think should be very easy to locate. Many of the more advanced stuff that you can do on the Webflow are not built-in. Instead, they come as integrations you can add to your website.
Webflow integrations are third party applications that you can use in line with your website Many top website builders have their own app stores. Webflow integrations are identical, but their add - ons are created by third parties, not directly by the Webflow.
Let 's look at some of the key features that Webflow does offer you, whether you're creating a daily website or an online store.
Parallax Scrolling, Animations and Interactions
Design is a Webflow that clearly values a number. In line with modern web trends, there's a whole bunch of strange movements you can add. Parallax scrolling, multi - step transitions, and micro-interactions are just some of the cool things you can do with Webflow.
Backups and Security
On a somewhat more boring (but very important) note, security is also something that Webflow takes very seriously. While providing you with automatic backups – so you can restore your site to the last save point, if something goes wrong – it also comes with a free SSL certificate. It helps to protect your privacy, and demonstrates that visitors to the site can be trusted with their personal information.
Advanced SEO Control
Search Engine Optimization ( SEO) is the method of modifying the content of your site to make it appear higher on the Google and Bing results pages. Most of the platforms let you add / edit metadata, build alt text and target keywords. The Webflow goes one step further, providing automatically generated sitemap and customizable 301 redirects.
Content Management System
The Webflow Designer is very flexible on its own. This is a great way to build static websites.
But what takes Webflow to the next stage is when you combine CMS and eCommerce with the Designer. The CMS lets you create a list. Collections are specific types of content. Speak of them as a folder.
Apart from on-site editing, i.e. the ability to change any text or media right on the website you are creating, Webflow CMS allows you to manually define custom content types (blog posts, tasks, team members, etc.) with fully customizable fields that can significantly improve the lives of those who handle larger web projects with complex structures.
It comes in the form of a CMS Set, which can be accessed from the Stack icon tab on the left side of the main editor screen. After creating a set, which is simply a specific content category, you can set the fields and add items – to be used either as individual pages or as lists / grids on existing static pages; for example , you can add a "team members" collection to create a page that displays your company's images, titles, details, social links, etc.
Apart from the back - end of the CMS, there is also the Webflow Editor, which makes it possible to add new material of the existing type to the published website – useful both to the developers of the website and their collaborators, as well as to their clients. What this means is that you get a fully functional website with both editable static pages and dynamic content, such as blog posts, portfolio projects, etc., without having to install any plugins.
The fact that it provides multiple content styles, of which blog posts are only one choice, means that Webflow eats WordPress and other open - source frameworks like Drupal for breakfast when it comes to CMS versatility. The flip side – it will take some time to get used to it; however, the Webflow University (which we'll discuss in detail below) will help here.
One thing which does not seem to be part of Webflow's make-go Content management system is localization — creating a multilingual Webflow website used to be a major hassle before third party extensions (most notably Weglot) came along.
One might assume that Webflow is striving to make the content management aspect as seamless as possible, so as not to steal the spotlight from the Site Designer – which is not a bad thing, given its primary value proposition.
Deployment and Hosting
Publishing your development to a live URL is a breeze in Webflow: by clicking the appropriate button on the top of the Designer screen, you will see a drop - down of the available deployment options, which provide a webflow.com domain subdomain (usually recommended for experimental purposes) and a customized domain. With the next click, you can publish to either or both of those locations without having to worry about the details – everything else is processed in the background, automatically.
Webflow dedicated hosting adhere to the principle of "Start building for free, add hosting to live": you can create a prototype (up to 2 static pages) in their staging environment , i.e. in a webflow.com subdomain, and then connect your own domain name (not included) to one of the Webflow hosting plans.
The latter varies from the simple $12 per month * option with a 25k monthly visit limit to the $36 per month * business version with more features and a 1 m monthly visit limit (* with annual billing). In addition to being an integrated solution, Webflow Hosting has several benefits that can really make a difference to the efficiency of your website and your webmaster workflow:
- As it is built on the distributed infrastructure of some of the world's largest cloud providers (Amazon Cloudfront and Fastly), it can scale up the traffic requirements effortlessly, removing the need to update your hosting server manually.
- The automated content delivery network (CDN) at no extra expense means that your website is delivered from a network that is geographically near to all visitors, no matter where they are located.
- The advanced distributed infrastructure means quick load times and nearly 100% uptime for your website, despite of heavy traffic or even malicious attacks
- The built-in SSL ( Secure Sockets Layer) certificate at no additional cost guarantees that your website meets the latest security standards out of the box – no configuration or extension necessary.
In view of the above, Webflow Hosting is a flexible, ready-to-use hosting with built-in CDN, priced at the same time as the best self - managed solutions like Digital Ocean and conventional website builders. Its value - for - money complements the other capabilities of this online suite, making it a full - cycle solution for web creators and potentially allowing you to save hundreds of dollars a year on CDN, SSL and other extras that otherwise need to be purchased separately.
One of the most recent (and most anticipated) improvements to Webflow is the eCommerce edition, which brings full online shopping functionality to the toolkit.
It comes with a new range of pricing plans covering all the basics for ventures that sell things online – including stock and inventory management, personalized carts, checkouts, and other endpoints, full control of customer emails, as well as self - hosted checkouts.
This can be contrasted with the current state of affairs in e - commerce website building software such as Shopify, Wix, or even the WooCommerce + WordPress package, where considerable effort (and skill in coding) is needed to achieve such granular control.
Other functions we should look forward to at the moment are the coupon / discount capabilities as well as subscriptions and digital / downloadable items.
In the longer term, the Webflow team plans to add a range of more advanced features to its eCommerce plans, including abandoned order recovery, multi - currency support, Amazon integration, and customer accounts.
As you can see, the current release, while theoretically not beta anymore, is still a work in progress – so if you're looking to create a complex online store, eCommerce Webflow is still a little too simple for such advanced applications.
However, if all the planned features are introduced, Webflow eCommerce will become a full - fledged rival of specialized solutions such as Shopify and Instacart, with the entire webflow creator, CMS, and hosting to back it up.
In regards to paying plans, it is important to understand that Webflow has two different premium third party systems: one for your total account and one for each specific project ( i.e. websites that you build).
When you start working in Webflow, it's probably more important and up - to - date, so let's start with project - level pricing, which is essentially cloud hosting for each one of your websites: first, there's a for ever and-free option that lets you use all the functionality of Webflow and upload to the name.webflow.com subdomain. if you're using a standard domain (which you will probably eventually use), a number of paid options are available:
The Basic plan costs you $12 per monthly (annual billing), activating automatic SSL, CDN, and custom domain deployment that is easy to set up and even easier to use. The $16 a month (billed annually) CMS process will help you to deploy not only static pages but also content management items (blog posts, projects, etc.). The Business Plan, priced at $36 / mo with annual billing, is mostly a scaled - up version of the previous program, ideal for larger websites with substantial traffic.
Then there are account plans that set the maximum permitted number of active projects and other technical parameters: while the free Starter account plan allows you to work on 2 websites and use free staging, the Lite plan ($16 per month with annual billing) includes 10 projects and export development tools, allowing you to use the Webflow-generated code on any other platform of your choosing. The Pro plan ($35 per month, billed annually) provides white marking and site password protection solutions – suitable for those who regularly work on full - fledged projects for third - party clients.
When you enter the Webflow Pricing page, it could get a bit confusing because of the way they group plans depending on whether you need one site, multiple sites, or function as part of a team — essentially, the "I only need one site" option will give you pure hosting (i.e. the per-project plans we discussed earlier) while the other two will jointly provide a $16 Lite plan and a $35 Pro / Team plan, as well as a $35 per-project plan. This only applies to the two specific account-level plans mentioned above, apart from the free and personalized models.
Any account plan can be integrated with any hosting plan, including a free one, e.g. you can be on a Starter account plan and pay only for deploying a specific project to your custom domain – or use a paid account plan and free hosting for quick prototyping. You can choose between monthly and annual billing cycles for all premium plans, the latter with a 20 % discount that can add up to significant savings over time , especially for more advanced plans.
We discussed the team plan briefly in the previous section when we spoke about pricing, but considering the target users of Webflow, it just as well deserves a discussion of its own.
If you're working with at least one other person on web projects, it's definitely worth considering the Webflow Teams program. It is exactly the same as the Pro individual plan, but it also provides more communication modes and functionality to the $35 per person per month you pay (annual billing).
While the graphic designer environment does not currently support real - time collaboration, all sections of the webflow projects can be accessed and edited at any time by any team member. This is particularly useful for cross - functional teams where, for example , one person is responsible for design and another for content.
Besides shared access and properties, Webflow Teams also adds a customized team dashboard that brings all facets of your collaboration into a single , unified UI. Larger teams can also contact Webflow for personalized pricing deals for the Enterprise plan, as well as incentives for hosting upgrades.
Overall, all of the above means that Webflow has carefully considered the needs of not only its independent / individual clients, but also the larger group of small / medium teams and agencies – a pleasant little cherry on top of its already impressive range of features and capabilities.
Should I Use Webflow?
After reviewing its various features, it can be concluded that Webflow aims to be an advanced integrated toolkit for web developers that values both flexibility and efficiency.
The combined power of its Designer, Editor / CMS, Hosting, and (now also) eCommerce offerings is on par with the best customized web development setups, while requiring much less upfront costs and setup time and ensuring constant support and resolution.
In a product landscape dominated by the simplicity of site builders and the clunky open - source CMS, Webflow is a hybrid solution that is particularly well suited for those who are willing to spend some time using its powerful features for the sake of a unique mix of functionality and automation.
Thank you for having read our Webflow review and analysis article! Have you considered this analysis to be helpful? Do you have anything to say or disagree with certain points? Let 's talk about it in the comment section below!