Intro to the builder
In this section, you'll find a short description of the sidebar from top to bottom!
Icon | Name | Description |
|---|---|---|
 | Save, push live or to staging, view, and switch versions. | |
.jpg?alt=media&token=566d929a-0362-479f-8345-29f237af5a05) | Add components, layouts, or entire pages. | |
.jpg?alt=media&token=33053566-a2f6-4b15-9a57-59d8b9132438) | Edit the design and settings of components and pages, and control images and videos. | |
 | View, add, and modify split tests running on the page. | |
 | Collaborate with your team with commenting and more. | |
 | View insights on how your flow is doing, including breakdowns, funnels, and split tests. | |
 | View and edit live debugging info with our user data and event log explorers. | |
 | Easily move between pages, as well as clone them, rearrange them, and edit their keys. | |
 | Access our growing collection of useful apps, like our handy Google Lighthouse integration. | |
 | Easily create, view, or modify computed fields and actions. | |
.jpg?alt=media&token=46195f14-e36b-48a1-a381-a589dc40f4dd) | Easily view your flow on mobile, tablet, and desktop devices with a single click. |
The same button would change depending on what you can do at any given point.
Icon | Button State | Description |
|---|---|---|
 | Live version | The gray background with the tick icon means that you're seeing the live version. |
 | Unsaved changes | If you have unsaved changes the button would show the diskette icon. |
 | Push to staging | If you don't have any unsaved changes the button would first have an arrow icon, which on click would send the current version to staging. |
 | Push live | If you don't have any unsaved changes and you are on the version that is actually on staging, the button would show the web icon, which when clicked sets the current version live on the page where the flow is embedded. |
Check out our tutorial on "How to set your flow live"
By clicking on the bottom part of the "Version Control" button 
you can see a versions list and switch between them.
Check out our tutorial "Switching between versions"
.jpg?alt=media&token=c5abac7f-ecd5-4194-87e5-7b9432c6ff51)
This button would open a card from where you would be able to add different kinds of elements.
Name | Description |
|---|---|
Default Components | From this section, you can add all the most common types of components you normally use on pages. (E.g. buttons, text, containers, images, etc) |
Layouts | Here you'll find a variety of pre-built layouts. These are structures that are common to use and by adding a layout you could save valuable time. |
Pages | From here you can add new blank pages |
Check out our tutorial on "Adding new components", "Using layouts", or "Adding blank pages"
.jpg?alt=media&token=b5d8291b-fe3d-4818-adbd-3376ccdeee53)
Icon | Name | Description |
|---|---|---|
 | Designer | The designer button would open the Designer card where you would be able to set values to CSS properties for any selected component. |
 | Assets | The assets button would open the Assets card where you would be able to upload or select an image to use in your flow. |
 | Options | The options button would open the Options card where you would be able to set different kinds of configuration options depending on the type of component you have selected. |
Split testing (also referred to as A/B testing or multivariate testing) is a method of conducting controlled, randomized experiments with the goal of improving a website metric, such as clicks, form completions, or purchases.
Icon | Name | Description |
|---|---|---|
.jpg?alt=media&token=544c9be8-72c6-4dae-8d34-26b492a01db8) | Create New Test | Create a new split test by cloning the selected page and assigning a percentage of flow for each page version. |
 | View Current Tests | View all flow's split tests and turn them on or off, see the resulting analytics, and go to the variant's pages. |
 | Stat Sig Calculator | Calculate your statistical significance. |
This is a powerful tool that allows you and your co-workers to leave each other comments on the actual pages, placed over the component the comment is referring to. This makes it as easy as possible, to get the context for what the comment is about.
Name | Description |
|---|---|
Overview | Check out how many visits your flow had. |
By page | Check how many users got to each page. |
By source | See where your traffic is coming from. |
Over time | See a diagram showing the variation on the number of visitors your flow had over time. |
All the previous options can be set to display the data from different periods of time.
Icon | Name | Description |
|---|---|---|
 | User Data | Powerful tool which allows you to easily check and edit all the user data in real-time to facilitate finding bugs or just knowing what's going on with all your variables. |
 | Logs | This card gives you logs about what happened since you opened the page. You can easily track your variable changes for each user interaction. |
This card shows you a preview of each page you have in your flow arranged vertically.
From here you can:
- 1.Switch from editing one page to another.
- 2.Change page order.
- 3.Delete any page you want.
- 4.Clone pages.
- 5.Change page name (key).
Icon | Name | Description |
|---|---|---|
 | Convert from Figma | Convert a Figma file to Webflow:
Share a link to your Figma file and we’ll convert it to a Webflow page in as little as 48 hours. Want a price estimate? Click ‘Request Price Estimate’ in the flow and you’ll get one within 24 hours. |
 | Page Speed Insights | Run a Google Page Speed Test:
View the speed of the current page and any notes for improvement. |
 | Image Compressor | Reduce your image file size:
Decrease your page load speed, rank higher on Google and offer a more delightful experience. Just upload your image, we’ll compress it and give it back to you to download - with no loss of fidelity. |
By clicking the "logic" button you'll open the "Logic" card, where you'll see all your Computed Fields(CF) and Actions. From here you can View or edit the existing ones or create new ones.
Some CFs or actions would need some custom code to be written. If so, an editor window will open with some options and a big writing area.
.jpg?alt=media&token=0e617c94-2cf9-4851-908b-0255717c69e1)
Sometimes you want to check how your page looks on a different device. This is the button you click to switch views from desktop to tablet and mobile.
Icon | Name | Description |
|---|---|---|
.jpg?alt=media&token=ca11ca6a-259b-441b-b017-f78108f6b04a) | Desktop | Full-Screen mode, this view would adjust to the size of the browser window. |
 | Tablet | The tablet mode would show you how your flow looks on a 600px wide screen. |
 | Mobile | The mobile mode would show you how your flow looks on a 400px wide screen. |
The same button would be showing a different icon, based on the view you are currently on.
Last modified 1mo ago