A step-by-step guide to building, editing, and styling FlowHubs with the new free-form canvas editor.
What is the Hub Builder?
The Hub Builder is a new way to create pages inside Flowcode. Instead of placing preset modules in a fixed order, you get a single, free-form canvas where you can add any element (text, images, video, buttons, cards, or forms) and place them wherever you want. Everything is edited directly on the page with no separate sidebar to hunt through.
It lives inside the Flow Editor as a Page Editor object, and it sits alongside your existing flow configuration. Your Flowcodes, FlowURLs, and smart rules all work exactly the same way. The Hub Builder just gives you a much more flexible canvas for the page your audience lands on.
How it differs from landing pages
If you have used the regular Flow Editor before, a few things will feel different:
The editor previously only used landing pages with modules in a fixed order. The Hub Builder uses independent blocks you can place anywhere.
In a landing page, design controls live nested in a sidebar panel. In the Hub Builder, they appear directly on whatever you just clicked.
Landing pages did not support standalone text or image blocks. In the Hub Builder, you can add them freely anywhere on the page.
Side-by-side layouts were not available in landing pages. In the Hub Builder, you can drag two or more elements next to each other and they snap into a multi-column layout.
An important thing to understand before you start
When you are in the Hub Builder, clicked into the page or on an element (an element is selected and highlighted), you are in design mode. All your visual design work happens here, directly on the page.
When you click out (press "x" or click somewhere on the canvas away from any element), you return to the regular configure mode. From here, you can use the Objects toolbar to set where things go: adding links to buttons, making images clickable, and assigning destinations. Small anchor icons appear on elements to let you know they are ready to be configured.
Getting started
How to access the Hub Builder
1. Open the Flow Editor for any flow in your workspace.
2. In the objects panel on the left, find the “Page V2” object.
3. Add it to your flow like you would any other page.
4. The Hub Builder will open with a blank page and a new contextual toolbar. You are ready to start building.
Adding your first element
1. Click into your blank page.
2. Select the element you want to add: Text, Image, Video, Button, Card, or Form.
3. A “+” will appear on the canvas. Click on it to add the element.
You can add as many elements as you want. Each one is its own independent block. You can move, resize, duplicate, or delete any of them at any time.
Editing elements
Click on any element to select it and bring up its contextual toolbar. The toolbar changes depending on what type of element you have selected. Here is what you can do with each one.
Text
Click directly on the text to edit the words.
Change the heading size using H1, H2, or H3 tags (large, medium, small).
Toggle bold, italic, strikethrough, or underline.
Change the text color.
Set alignment: left, center, or right.
Adjust spacing and layout using the page-level controls.
Images
Size: choose Small (quarter page width), Medium (half page width), or Large (full page width).
Border radius: round the corners of the image. Slide it up for a more pill-shaped look, keep it at zero for sharp edges.
Replace: swap the image out for a different one without losing its size and position settings.
Delete: remove the image directly from the toolbar.
Note: Whatever crop you set when uploading an image is what will appear on the page. Image sizing is consistent regardless of what other elements are nearby, so you do not need to worry about it shifting based on the layout.
Video
Add a video directly onto the canvas as a standalone element.
Toggle on “Autoplay” to have the video start right as the user lands on the page.
Buttons
Click the button text to edit it directly on the page.
Change the button background color and text color from the toolbar.
Add an icon or adjust its position.
Change the border radius to make the button more or less rounded.
Duplicate a button to quickly create multiple buttons with the same styling.
To add a link to a button: click out of the button first (“x” out or click somewhere else on the canvas). You will see a small anchor icon appear on the button. Click the anchor and select External Link (or another destination type) to add where the button goes. Each button can point to a different destination.
Cards
Cards hold a combination of an image, text, and a button together in one block.
Click into the card to select it, then click into individual parts of the card to edit them.
Useful for building product tiles, event listings, or any content that repeats in the same format.
Forms
Add a form directly onto the Hub canvas as a standalone element.
Forms on the Hub Builder pages work the same as module-based forms for data collection.
To set where the form submits to (like a thank-you page), configure the routing in your flow, not the form itself.
Building layouts
Moving elements
Hover over any element and it will highlight. Click and drag it to move it to a new position on the canvas. You can place elements anywhere on the page freely.
Side-by-side layouts
To place two or more elements next to each other, drag one element toward another until they snap into a multi-column layout. You will see them lock into position side by side.
Reordering rows
When you hover over a row, it highlights in blue. You can drag the entire row up or down to change its position on the page without disturbing the elements inside it.
Duplicating elements
Select any element you like and press Duplicate. An identical copy appears directly below it with all the same styling settings. This is useful when you want multiple buttons, images, or cards that share the same look. You can even duplicate a whole row!
Styling your Hub (Appearance Tab)
The Appearance tab controls global styling for your Hub: background, theme, and the color palette for each element type. You can find it in the editor settings panel.
Theme
Choose between Brand and Custom.
Brand pulls your Brand Kit colors automatically
Custom lets you set individual hex values for each element type
Background
Background color: set a solid color behind all your content.
Background image: upload an image to use as a full-page background.
If you use a background image, you have additional controls:
Fit and sizing: Fill area (crops to fit), fit entire image (no crop), or actual size.
Position: center, top, bottom, left, or right.
Repeat: show the image once, or tile it across the background.
Scroll: scroll with the page, or stay fixed as the user scrolls.
Element colors
You can set colors independently for each element type. This means your headers, paragraph text, buttons, and background can all have different colors without you having to set them individually on every single element.
• Header text color
• Paragraph text color
• Button background color
• Button text color
• Page background color
Tip: Set your colors in the Appearance tab before you start adding elements. New elements will pick up those settings as you place them, saving you from having to style them one by one.
Adding links and destinations
Links and destinations are configured in configure mode, which means you need to click out of any selected element first. Each element on the page can have its own destination, so a row of six buttons can each point somewhere different.
1. Click somewhere on the canvas away from any element to deselect everything.
2. Small anchor icons will appear on any element that can have a destination.
3. Click the anchor icon on the element you want to configure.
4. Choose your destination type: External Link, another page in your flow, a phone number, etc.
5. Fill in the destination details and save.
FAQ
I clicked on an element but I cannot find the control I need
Make sure you are in design mode: the element should be selected and highlighted, and the contextual toolbar should be visible. If you see anchor icons instead, you are in configure mode. Click on the element again to enter design mode.
I am trying to add a link to a button but I do not see where to do it
You need to be in configure mode to add links. Click somewhere on the canvas away from the button to deselect it. The anchor icon will appear on the button. Click it to add your destination.
My image size looks different than I expected
Image size is set by the Small, Medium, and Large options in the toolbar (quarter, half, or full page width). If your image looks different than intended, check which size setting is active. Remember that the Hub Builder image sizing is consistent regardless of what elements are next to it.
Can I use the Hub Builder on my existing landing pages?
Not directly. The Hub Builder (Page V2) is a new page object within the Flow Editor, not an upgrade to your existing landing pages. The drag-anywhere canvas, contextual toolbar, and free-form layout tools are only available when you add a Page Editor object to a flow. Your existing landing pages will continue to work as they always have. If you want to rebuild an existing landing page using Hub Builder, you can add a Page Editor object to the same flow and design it there.
Can I add links to images?
Yes. Click out of the image first, then click the anchor icon that appears on it to configure a destination. The image will look the same but will behave like a button.