Intro to the builder
In this section, you'll find a short description of the sidebar from top to bottom!
Last updated
In this section, you'll find a short description of the sidebar from top to bottom!
Last updated
The same button would change depending on what you can do at any given point.
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"
Check out our tutorial "Switching between versions"
This button would open a card from where you would be able to add different kinds of elements.
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"
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.
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.
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.
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:
Switch from editing one page to another.
Change page order.
Delete any page you want.
Clone pages.
Change page name (key).
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.
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.
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.
By clicking on the bottom part of the "Version Control" button you can see a versions list and switch between them.
