Webflow Overview

Webflow is a responsive website builder for creating stunning, beautiful websites without having to code. Unlike other site builders, Webflow gives you the power to visually design and develop your website.

You don't need plug-ins, you're not limited to just a few themes, and you get a real-time visual builder. By combining content management, animation, design, and marketing tools into a single platform, Webflow empowers coders and non-coders alike to create and promote websites in a more collaborative, more cost-efficient, and faster way.

Who Should Use Webflow?

It's suited for agencies, freelancers, teams, design-savvy professionals, and those who love to learn to build their own websites. Often dubbed as a hybrid of Adobe Photoshop and WordPress, Webflow is an intuitive platform that complete beginners can use. It strives to be the go-to Internet platform for creating beautiful, responsive websites without any coding required.

Webflow Features At A Glance

Webflow separates its site-building and template-editing features into four categories: Editor, Designer, Hosting, and CMS. Additionally, Webflow has plenty of templates, which are fully customizable, to get you started on your website right away. 

And there's also Webflow University, a learning center where you can find helpful video tutorials, articles, and more to help you use Webflow.

The Editor

You can build and edit content directly on your web page with the Editor. So, say goodbye to a messy backend content management system and hello to an easy-to-use, intuitive Editor.

Adding new content is a breeze with the Editor. Just type in what you want to say, and it will appear on your web page in real-time. You can also format your text using simple toolbar buttons, add images and videos, and even create tables. It's as easy as filling out a form.

Additionally, the Editor allows several people to edit dynamic and static content simultaneously. This makes it easy for your team to collaborate on content and keep your website up-to-date.

Plus, you can quickly revert back to a previous version of your content if needed. No more lost work or frustrating edits!

What's more, you can replace images right on the page. All you need to do is hover your cursor over the illustrations you want to change, then click the picture icon. And this will let you choose and upload a new photo from your computer.

The Editor toolbar features 11 icons and tabs:

• Pages - lists your website's dynamic and static Collection pages.
• Menu - use this to go back to the Dashboard, the Designer, or your Project Settings.
• Collections - lists all your collections.
• Account Settings - opens the Account Settings panel, where you can upload a profile image and edit your Collaborator account.
• Forms - opens the Forms Panel, where you can note and download form submissions made on your website.
• Saved/Saving - all changes are automatically saved.
• Help & Support - displays answers to the common FAQs about using the Webflow Editor.
• Changelog - shows a list of pages and items with unpublished changes
• Log Out - exits you out of the Editor.
• Back to Live Site - allows you to see your website as your visitors see it.
• Publish - enables you to publish all the changes you make in the Editor.

Besides all these, optimizing your site for SEO can be done directly in the Editor. You can set your meta titles and descriptions and get instant previews of what your site's entry will look like when it's live.

The Designer

You can do more than add/edit content in the Webflow Designer. It allows you to design the feel and look, build your site structure, and add custom code, animations, and interactions to create fully functioning presentations, prototypes, landing pages, websites, etc.

Here, you can create interactions, set CSS properties, and manipulate HTML content visually. That means you don't have to write any code to get the results you want. As you build your site, the Webflow Designer creates web-ready, semantic, and clean code.

You can access the Designer in three ways:

1. from the Editor
2. from Project Settings
3. from the Dashboard

Moreover, the Webflow Designer consists of the following panels and toolbars:

• The Right Panels gives you granular control over your project's elements. Here you can see the Interactions panel, Style manager, Element settings panel, and Style panel,
• The Left Toolbar and Panels provide a set of tools and links that enable you to structure your site, including the CMS panel, Find anything search tool, Audits panel, Video tutorials panel, Assets panel, Ecommerce panel, Pages panel, Navigator panel, Symbols panel, Add elements panel, Main menu, and Help settings.
• The Canvas is a significant component of the Designer. It is where you can engage with the page in real-time. You can edit content, move them around, and more.
• The Top Bar provides some useful tools to export, save, and publish your website. It includes the Page indicator, Preview, Breakpoints buttons, Undo and Redo, Save, Export code, Share, and Publish.
• The Bottom Navigation Breadcrumb Bar shows you the hierarchy of an element. Here, you can select any parent element and see where it's located by clicking on its label in the Breadcrumb bar.

Unlike the Editor, it's not possible for multiple people to be in the Designer accessing the same project at the same time, even though you're on a team plan. So, if you're working on a project with someone else, they will need to wait for you to finish your work before they can start theirs.

The Hosting Options

Webflow offers hosting services with its packages like most website builders. But rather than including a shared hosting plan, Webflow hosts its websites on a scalable server fleet.

So, from the moment you publish your website, the hosting technologies of Webflow are instantly prepared to manage whatever traffic your website generates. Webflow has over 100 Global Servers and Datacenters worldwide.

Not only that, Webflow's infinitely scalable server fleet includes content deliver networks (CDNs) powered by Amazon CloudFront and Fastly.

With CDNs, your website's files are cached on servers around the world, so your visitors will get the fastest loading times possible, no matter where they are. Webflow promises:

• milliseconds loading time
• 99.99% uptime
• support

What's more, you get collaboration tools, HTTP/2 compliant infrastructure, and SSL certificates included in all of Webflow's hosting plans.

The Webflow CMS

The CMS or content management system is how you work with and control your dynamic content. In the Webflow CMS, the data structure is simple and straightforward.

The topmost container is called the Collection. It's like a database where we can keep all our content that can be used dynamically. And under this Collection are Items.

At the bottom, you can find the Custom Fields. These fields allow us to input or capture content, whether by importing a CSV file or doing it one by one. All of that content is put in custom fields.

Webflow's CMS allows you to build structured content, design around it, and update it without writing a single line of code. Also, it's focused on ability and flexibility.

You can create the content you need without being restricted by complex coding languages, blog-centric structures, or templates. Webflow offers schemas that you can build and bind to your website design.

Webflow claims that its CMS is much easier to use than other site builders. There's nothing to install, no PHP, and automatic updates.

Webflow Site Builder Templates

Webflow offers over 25 free templates and wireframes to get you started building your basic portfolio site, a blog, or an online store. Each free template provides some information about what kind of website it's best suited for. What's more, almost all the templates are responsive, making it easier to build a mobile-first website.

But keep in mind that the design of the template won't automatically replace the layout and design of your project. That means customization might be required. Also, Webflow templates use lots of popup modals, custom menus, and interactions.

Hence, it may be challenging to edit at first. So, if you need help with your selected template, you can contact the template designer for help.

Webflow University

Another thing that makes this site builder appealing is its Webflow University. It's a great resource for web development and design. Webflow University is created by the founders of Webflow themselves, so you know the content is going to be good.

The courses are laid out in a way that's easy to follow, and they include lots of step-by-step tutorials. You can also watch video lectures, and there are quizzes to help you test your knowledge.

Some topics you can browse include:

• Layout and design
• Interactions and animations
• CMS and dynamic content
• Webflow Ecommerce
• SEO (search engine optimization)
• Templates
• Sites settings
• Hosting and code export

And did we mention that the courses are FREE? Webflow is pretty generous to share much free educational content with its users. Also, Webflow University has a community forum where users can connect with Webflow experts and other web designers and web developers about any questions they have.

Pricing Options

Sure, you can use Webflow for free. However, the features are limited. For one, you can only publish a website to the Webflow.io domain. Also, the maximum number of records you can have in the CMS database is 50, and you get 1 GB of bandwidth.

If you're ready to switch to a paid subscription, then you're in for a treat.

Basic Site Plan

The basic plan starts at $12 per month and is billed yearly. This plan gives you all the essentials to launch a simple website. You can publish in your custom domain and get 50 GB of bandwidth. But you don't get any CMS items.

CMS

This plan is suited for those who want to start a content-driven website like a blog. You'll pay $16/month, billed yearly. You get 2000 CMS items, 200 GB of bandwidth, and allows three guest editors.

Business

Do you want to build a high-traffic marketing business site? Then this plan is for you. You'll pay $36/month, billed yearly. Also, you get 10,000 CMS items, 400 GB of bandwidth, and allows ten guest editors.

Enterprise

This plan is perfect for large businesses. You'll get everything you need to make a powerful website. The price, bandwidth, and guest editors are custom. And you'll get 10,000 CMS items and receive guaranteed uptime.

Workspace

This plan allows you to collaborate with your team and manage multiple websites. You can start with a free plan and upgrade your account plans later if you need to add more collaborators or design more sites.

At $0, you get one seat and two unhosted sites. For freelancers and small teams who want more control over their code, the Core plan is the option for you.

You'll pay $19/month, billed yearly per seat. In this plan, you get at least three seats, ten unhosted sites, billing permissions, the ability to add custom code, and export semantic, clean code.

For growing agencies and teams, the Growth plan may be for you. It starts at $49/month, billed yearly per seat. Here, you get up to nine seats, unlimited unhosted sites, publishing permissions, and the ability to add custom code and export clean code.

Pros

• Drag and drop elements
• Automatic versioning and backup
• Creative freedom no other platform offers
• SEO is easy to accomplish and manage
• Easy to use and customize CMS
• Fast layout design
• No need for plugins
• Upload or select Wide array of fonts
• Guaranteed 99.99% uptime
• Basic interaction is learned quickly by non-technical people.
• Plenty of support materials

Cons

• pricing is a little high
• steep learning curve
• Limited multilingual capabilities
• The limit of 100 static pages
• CMS does have its limitations
• Limited options to use dynamic filters
• E-Commerce is very basic
• Limited customer support
• plan variation may be confusing

‍

‍Is Webflow Worth The Switch?

Webflow is a powerful website builder that offers plenty of templates, basic and advanced features, and integrations to make your website look great and function well. You can undoubtedly take your website to the next level.

With Webflow, you get complete control over your site's design, code, and functionality. You're not limited to predefined templates or designs, so you can create a website that looks and functions the way you want. Plus, with the wealth of integrations available, you can add powerful features and functionality to your website with just a few clicks.

If you're looking for a powerful and flexible website builder, Webflow is worth looking at. It may not be the easiest tool to use, but it offers much flexibility and power that other website builders simply don't have. We hope this Webflow review has been helpful.

Frequently Asked Questions

Q. Which plan should I choose?

A. Webflow offers two kinds of plans: Site plans and Account plans. Site plans enable you to hose your website with Webflow and get it published on the web. On the other hand, Account plans include Team and Individual plans and give you access to your Webflow account, the Designer, and your dashboard. But when you first sign up to Webflow, you will be on the Free Individual Account plan.

Q. How to connect my custom domain to my Webflow site?

A. You can connect your custom domain to your Webflow project and get it live on the web with one click with any Site plan.

Q. Will the elements function on my Webflow website if I hose the code elsewhere?

A. Site forms and searches don't work on exported websites. So, if you want to export your website, you will need to either embed third-party widgets or send form data away from Webflow. Additionally, e-commerce elements will not function either.

Q. Can I use Webflow for free?

A. Yes, you can use Webflow for free as long as you want. No trial period and no credit card are required.

‍