Webflow - what is this, and how can it be useful?

Introduction

Webflow is a system with which a designer can create full-featured websites without being a programmer. Pages can be hosted immediately, or you can export the HTML code and work with it further.

Main idea behind Webflow

You can create:

• lendings and business card sites
• multipage sites
• stores
• blogs

Manage the workflow in the dashboard, where you create, search for, and delete projects, as well as gather a team to work together. In addition, the system allows you to connect additional features to projects directly from the dashboard and share links to them. There are also Webflow integrations - tools to extend the functionality of your project.

How the page builder is organized

The interface is reminiscent of Photoshop. The main elements and actions are on the left, and the text tools and effects are on the right.

Pages are built from ready-made elements - click on them to add an element to the workspace. To work, you need a basic knowledge of layout - in particular, you need to know the difference between line and block elements. And it will be good to understand the basic HTML tags and CSS properties. You can also transfer your design from Figma to Webflow. For this purpose, there is even a special plugin recently.

The Add Elements section contains standard components that coders and frontend developers work with:

• Layers: sections, grids, and others;
• Basic: div blocks, lists, links;
• Line and block text elements;
• Media: photos, videos, audio recordings;
• Forms and fields.

Webflow developer can create dynamic pages using the Collection list component, which displays the content of the CMS collection. To manage content on a page, add a Collection list and connect it to the CMS in the CMS Collections tab. You can create data fields, change their content, and add photos and videos from there.

The Navigator tab shows the hierarchy of page components. It looks like a DOM tree but is more straightforward and more transparent. For example, if you want to know the position of any element on the page, click on it, and you will see the chain of parent elements below.

You can make a store out of a page in the E-commerce tab. The platform will automatically create collections with products and discounts and guide you by hand from scratch to the finished store with a step-by-step guide.

The Showcase section contains the work of other users. Many of them can be copied and rebuilt to suit your needs. Layouts are sorted by topic, popularity, and publication date.

Service supports a professional community around itself. The service maintains a rating that depends on the number of subscribers. The work can be viewed and commented on in his profile.

Library

Buy ready-made samples if you do not want to build a site from scratch. The finished pages offer more than 500 portfolio, blog, and store variants. Range in price from $20 to $100.

Limitations

It is a web tool. You cannot build IT systems with complex logic: no scripting, APIs, and database management tools. To implement an excellent idea without code, create the front end and the server side on Directual or Bubble.