Intro to the builder

In this section, you'll find a short description of the sidebar from top to bottom!

Embeddables sidebar:

All Builder Options:

Icon	Name	Description
	Version Control	Save, push live or to staging, view, and switch versions.
	Add	Add components, layouts, or entire pages.
	Edit	Edit the design and settings of components and pages, and control images and videos.
	Split Testing	View, add, and modify split tests running on the page.
	Comments	Collaborate with your team with commenting and more.
	Analytics	View insights on how your flow is doing, including breakdowns, funnels, and split tests.
	Debug	View and edit live debugging info with our user data and event log explorers.
	Pages	Easily move between pages, as well as clone them, rearrange them, and edit their keys.
	Apps	Access our growing collection of useful apps, like our handy Google Lighthouse integration.
	Logic	Easily create, view, or modify computed fields and actions.
	Breakpoints	Easily view your flow on mobile, tablet, and desktop devices with a single click.

Version Control:

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"

Navigating between versions:

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"

“Add” button:

This button would open a card from where you would be able to add different kinds of elements.

Card sub-sections:

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"

"Edit" menu button:

Edition sub-menu:

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:

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
	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.

Comments:

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.

Analytics:

Card sub-sections:

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.

Debug:

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.

Pages:

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).

Apps:

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.

Logic:

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.

Breakpoints:

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
	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.

How-tos sections:

Design How-To's

General How-To's

Logic How-To's