Containers & Columns
Every Falcon Builder layout starts with Containers, which hold Columns, which hold Elements.
The navigator on the left shows the nesting: a container holds columns, a column can hold a nested row, and elements sit at the leaves.
Containers
A container is a full-width row on your page. Click + Add Container to open the Column Select modal.
Container Settings
Right-click the container toolbar or click the gear icon:
Layout:
- Background color, gradient, or image
- Background position and size
- Min height
- Padding (top, right, bottom, left) — see Sizes: any CSS value
- Margin (top, bottom)
Advanced:
- CSS Class, CSS ID
- Custom CSS
- Animation on scroll (fade in, slide up, zoom)
- Sticky (sticks to top on scroll), with Stop Sticking — see Sticky
Visibility:
- Show/hide on Desktop, Tablet, Mobile
Container Toolbar Actions
| Icon | Action |
|---|---|
| ↕ | Drag to reorder the container |
| ✏️ | Edit container settings |
| 📋 | Duplicate container |
| 📚 | Save to Library |
| 🌐 | Save as Global Section |
| 🗑️ | Delete container |
Column Layouts
When adding a container, choose from preset column layouts:
| Layout | Description |
|---|---|
1/1 | Single full-width column |
1/2 + 1/2 | Two equal columns |
1/3 + 2/3 | Narrow + wide |
2/3 + 1/3 | Wide + narrow |
1/3 + 1/3 + 1/3 | Three equal columns |
1/4 + 3/4 | Sidebar + main |
1/4 + 1/4 + 1/4 + 1/4 | Four equal columns |
More layouts are available in the modal. Custom ratios can be set in column settings.
Columns
Each column inside a container holds one or more elements.
Column Settings
Click the column toolbar:
Size:
- Width percentage (responsive: desktop, tablet, mobile)
- Padding and margin — see Sizes: any CSS value
Background:
- Background color or image
Vertical Align:
- Top, Middle, Bottom, Stretch
Advanced:
- CSS Class, CSS ID
- Custom CSS
Extra:
- Sticky, with a top offset and Stop Sticking — see Sticky
Column Width
Design → Width offers the usual fractions — 1/6 through 1/1, plus Auto.
For anything they cannot express, click Use Custom Width 2.7.0 and set the width on the slider or in the box beside it. The presets disappear while a custom width is in force, because the two are the same setting and only one of them can be: whichever you set last is the column's width. Back to preset widths returns to the closest fraction.
Responsive Column Widths
Each column can have different widths per device — presets and custom widths alike:
| Device | Example |
|---|---|
| Desktop | 1/3 (33%) |
| Tablet | 45% (custom) |
| Mobile | 1/1 (100%) |
Use the device switch at the top-right of the Width panel to choose which one you are setting. This makes your layout naturally stack on mobile.
Nested columns have the same control, in the same place.
Sizes: any CSS value
Padding and margin boxes — on containers, columns, nested columns and every element — work like the Font Size box: one text box per side, with no unit dropdown. Type the value with its unit:
| You type | You get |
|---|---|
20 | 20px (a bare number is pixels) |
2rem, 1.5em | relative to the font size |
5% | a share of the width |
10vh, 4vw | a share of the screen |
calc(1rem + 2vw) | anything CSS accepts |
Each box follows the device switch beside its label: a value typed on Tablet or Mobile applies from that screen size down, and an empty box shows, greyed, the value it inherits from the larger screen. Pages built before keep exactly the sizes they had.
Elements that used to have one or two padding boxes — Accordion title and content, Tabs content, Code Block, Content Box (box and button), Table cells, Callout, Prev/Next and Table of Contents — now have all four sides. A side left empty keeps the value the element had.
Sticky
A container, a column or a nested column can stay on screen while the page scrolls: switch on Sticky and set the Top Offset (the gap above it, for example the height of a sticky header). Stop Sticking (since v2.8.18) chooses where it lets go:
| Stop Sticking | The box scrolls away with the page |
|---|---|
| Section end (default) | when its parent section ends. A top-level container's parent is the whole page |
| After scroll | once the reader has scrolled this many pixels with it stuck |
| At element | when a chosen element reaches its bottom edge: #cta, .site-footer, footer or a heading's text |
The box is pushed up by the page rather than disappearing. Stop Sticking is not offered in headers, footers, page title bars and content layouts, which stick as one piece.
Adding Elements to Columns
Click the + button inside a column to open the Element Select modal. Choose an element type and it's inserted into the column.
Elements can be dragged within a column or between columns.
Nested Columns
A column can hold a nested row — a row of columns inside a column — for layouts a single grid cannot express: a sidebar card split in two, a feature block with its own inner columns. Add one from a column's toolbar (Add Nested).
Open, work, finish
A nested row is drawn closed: it shows its content, with a small orange panel sitting on it carrying a pencil and a +. Nothing inside can be clicked while it is closed, so a stray click meant for the page cannot land in it.
| Control | What it does |
|---|---|
| ✏️ pencil | Opens the nested columns for editing |
| ➕ plus | Adds an element to the parent column, beside the nested row |
| hover the panel | Expands it to Duplicate, Delete and Drag |
While it is open you work inside it exactly as in any column — add elements, edit them, drag them. Everything outside dims and stops responding, and no new container or column can be started, so half-finished nested work cannot be left behind by a click elsewhere.
Finish with the ✓ tick on the bar at the bottom of the row (✕ does the same). That closes it, releases the rest of the canvas, and is the point at which Save becomes available for the work you just did inside.
TIP
Editing inside a nested row does not arm the Save button on its own — the Finished tick does. Everywhere else in the builder, Save still arms the moment you change anything. Press ✓ before you leave the page.
An empty nested row shows a placeholder bar instead of content, and the Preview toggle ignores all of this and draws the real page.
Responsive Preview
Use the device buttons at the top of the builder to preview your layout on:
- 🖥 Desktop
- 📱 Tablet
- 📲 Mobile
The canvas resizes and shows how the layout looks on each device.
Saving & Publishing
- Autosave runs every 30 seconds
- Closing the tab with unsaved changes now asks you first — in the builder and on every admin screen. Note that work inside an open nested row is not counted as unsaved until you press its ✓ tick, so finish nested rows before you leave
- Click Save Draft to save without publishing
- Click Publish / Update to make changes live
- View Revisions to restore any previous version