Applies to Flows 2.0 (Beta) and Embeds. They share the same experience builder, so these steps work the same for both.

A step's structure is built from cells — containers you arrange in a grid to decide where content goes. This is how you lay out Flows 2.0 (Modals and Tooltips) and Embeds; the cell system is the same across all of them.

This article covers arranging and sizing cells. To add and style the text, images, and buttons that go inside them, see Design content in the experience builder.

Tip: The builder opens in the Chrome extension by default so you can design against your real app. This matters most for Embeds — their size and layout depend on the container they sit in — and Tooltips, which anchor to real page elements. Building in context lets you catch layout and interaction issues you'd miss on a blank canvas.

How a step is built

Everything in a step lives inside a cell, and each cell holds one block of content — one image, one text block, one button, or one embedded frame. Think of cells as the structure and blocks as the content.

A new step starts as a single cell that fills the whole step. You build a richer layout by splitting that cell or adding new cells, then dropping one block into each.

Select a cell or a block

When you click a block, both the block and its cell are selected. You'll see:

• cell controls for the layout (like sizing and alignment), and
• a block settings panel for the block's content and appearance.

The cell controls change the structure. The block panel changes what's inside. The add-block (+) and split controls sit in the floating cell toolbar; Size mode, Height, and Content alignment are in the cell's settings panel, on the General tab.

The panel also shows a breadcrumb of where you are in the step — for example, Step › Cell › Text. Click a level in it to jump up and edit a cell or column when a block is in the way.

Split a cell into more cells

Select a cell and choose one of the two split options in its toolbar:

• Split into columns puts the two new cells side by side (left to right) — for example, an image next to text.
• Split into rows stacks the two new cells on top of each other (top to bottom) — for example, a heading above a paragraph.

Each new cell can be split again. That's how you build nested layouts: split a cell into columns to get two side-by-side cells, then split the left one into rows to stack a heading over a paragraph inside it.

Add a full-width or full-height cell

Hover over the outer edge of the step. A + button appears on the top, bottom, left, and right edges. Click one to add a new cell that spans that whole edge.

You need this because splitting can't create a full-width section once you already have columns. For example, if you've split a step into two side-by-side columns and now want a footer under both, splitting won't do it — click the + on the bottom edge to add a full-width cell beneath them.

A good order: use the edge + buttons to block out your main sections first (header, body, footer), then split those sections into smaller pieces.

Resize the step

You can resize the whole step by dragging its edge.

• Modals and Tooltips: select the step and drag its edge or corner handle to resize it. On a Modal, dragging the bottom edge sets a responsive minimum height — the step is at least that tall but grows when its content needs more room.
• Embeds: an Embed fits into the container it's placed in on your page, so you don't drag to resize it. Set a Min height in the Design tab to control how tall it is.

For exact pixel or percentage dimensions, use Advanced Styles.

Resize cells by dragging

To change how two cells share space, hover over the border between them until a drag handle appears, then drag. One cell grows, its neighbor shrinks.

The cells stay flexible — they still resize with the step — you're just changing the ratio between them. This is the quickest way to make two cells share space unequally without changing their sizing mode.

Choose how a cell sizes

Every cell has a Size mode (in its settings, on the General tab). Our best tip: leave a cell on Flexible unless you have a reason not to.

• Flexible (the default) — the cell shares the leftover space with other flexible cells. Two flexible cells side by side each take half; three each take a third. Use it for anything that should stretch, like a block of body text.
• Hug content — the cell shrinks to fit exactly what's inside it. A cell with a small icon becomes only as wide as that icon. Use it for small things: an icon, a button, a short heading.
• Fixed — the cell stays an exact size (a pixel or percentage value you set) no matter what. Use it when something must never change size, like an image column that should always be 120px wide.

The one rule that prevents most problems

Hug content makes a cell smaller, not bigger. If you put a large image in a hug-content cell, the cell expands to fit it and can push your other content off the step. When in doubt, leave the cell on Flexible and only use Hug content on naturally small content.

Recommended order

Add your content and build the layout so it looks the way you want.

Then adjust sizing only where you need to: Fixed on things that must stay put (an image), Hug content on small things (a button), and Flexible on everything else.

Select a parent cell

A parent cell is the container holding a group of cells. To size or pad a whole section at once, click a cell, then click Select Parent Cell. This is how you control the overall width of a section that contains several cells, rather than adjusting each child.

Position content inside a cell

When a cell is bigger than the block inside it, the block sits at the center by default. To move it, select the cell and use Content alignment in its settings — a 3×3 grid that works like a map of the cell. Click where you want the block to sit: top-left, bottom-right, top-center, and so on.

Responsive height

Steps use a minimum height. The step is at least the height you set, but grows taller when the content needs more room — so nothing gets cut off on narrow or mobile screens.

Layout recipes

Common layouts, built from the pieces above.

Image on the left, text on the right

1. Start with the single default cell. Split into columns to get two cells side by side.
2. Add an image to the left cell. Split the right cell into rows to stack a heading, body text, and a button.
3. Set the left (image) cell to Fixed at the width you want. Leave the right-side cells Flexible.

Result: the image holds its width on the left; the text fills the rest.

Two equal columns

1. Split the starting cell into columns.
2. Leave both cells Flexible — they share the space 50/50 on their own.
3. Add content to each.

Result: two columns that resize together. If one column holds a button or icon that shouldn't scale, switch that column to Hug content.

Image on top, text below

1. Split the starting cell into rows.
2. Add an image to the top cell and set the image cell to Fixed (or leave it Flexible for a full-width image).
3. Add your text and button to the bottom cell.

Result: a full-width image with text underneath.

Responsive card with a fixed image

This puts the pieces together for a layout that holds up when the container resizes.

1. Split into columns to get two cells side by side.
2. Add an image to the left cell. Split the right cell into rows — a heading on top, a description below — then split the bottom row into columns for two side-by-side buttons.
3. Set the image cell to Fixed so it keeps its size, the button cells to Hug content so they wrap tightly, and leave the text cells Flexible to absorb the extra space.

Result: when the container resizes, the image and buttons stay put while the text reflows — no cropped images, wrapped buttons, or stretched spacing.

Fix common layout problems

Cells aren't sharing space evenly. One of the cells is set to Hug content or Fixed, so the Flexible cells only split what's left over. Set every cell in the row or column to Flexible for even sharing.

An image is too big or pushes other content around. Its cell is probably on Hug content, which grows to fit the image. Switch that cell to Flexible or Fixed.

The layout breaks when the window resizes — buttons wrap, images crop, spacing stretches. Everything is still Flexible, so it all scales with the container. Set Fixed or Hug content on the parts that shouldn't scale (images, buttons), and leave Flexible only on the parts that should absorb the extra space (like a text area).

You can't add a full-width row after splitting. Use the + buttons on the outer edges of the step. Splitting can't produce a full-width cell once other cells are in place.

Still stuck?

Collect the following and contact support:

• The experience URL from Studio (copy it from your browser's address bar on the settings page).
• A screenshot or short recording of the layout problem.
• What layout you're trying to build.
• The sizing mode set on each cell.