Embeds use a cell-based layout system to arrange your content. You build layouts by splitting cells, choosing how they arrange (side by side or stacked), and picking how each cell shares space. This guide explains the layout system and walks through the most common patterns.

This article focuses on layout and cell arrangement. For creating your first Embed, setting a target element, and publishing, see Create an Embed.

Prerequisites

• An Appcues account with Embeds enabled
• An Embed open in the Builder

How cells and blocks work

Everything in an Embed lives inside a cell. A cell is a container — when you add an image, text, or button, you're placing a block inside a cell. Think of cells as the structure and blocks as the content.

When you first create an Embed, you start with a single cell that fills the entire step. From there, you build more complex layouts by splitting that cell or adding new cells along the edges.

Each cell holds one block. One cell, one piece of content — an image, a text block, a button or an iFrame. To combine multiple pieces of content, you split cells to create the structure you need first, then add one block to each cell.

Selecting cells and blocks

When you click on a block, both the cell and the block are selected at the same time. You'll see the cell minibar appear above the cell (with layout controls like Sizing Mode and Align content) and the block settings panel appear on the right (with the block's Content, Design, and Advanced tabs). The cell minibar controls the layout. The right panel controls the block's content and appearance.

Split cells and add rows and columns

There are two ways to create a multi-cell layout: splitting an existing cell, or adding new cells along the edges of the step.

Split an existing cell

Select a cell and look for two split icons in the cell minibar:

• Split horizontally divides the cell into two cells side by side (a row). Use this when you want content arranged left to right.
• Split vertically divides the cell into two cells stacked on top of each other (a column). Use this when you want content arranged top to bottom.

A note on naming: "Horizontally" and "vertically" describe how the resulting cells are arranged, not the direction of the cut. "Split horizontally" produces a horizontal (left-to-right) arrangement by placing a vertical divider between the two new cells. If the icon looks like it shows a vertical line — that's correct, because the divider is vertical even though the arrangement is horizontal.

After splitting, each new cell can be split again. This is how you build nested layouts — for example, split a cell horizontally to make two columns, then split the left column vertically to put a heading above a paragraph.

Add edge cells for full-width or full-height sections

Hover over the outer edges of the step and you'll see + buttons appear along the top, bottom, left, and right edges. Click one to add a new full-width or full-height cell along that edge.

This matters because once you've already split inner cells, you can't create a full-width section by splitting alone. For example, if you've split your step into two side-by-side columns, there's no way to turn one of those into a full-width footer by splitting. You need to click the + on the bottom edge to add a full-width cell beneath both columns.

A good approach: use edge + buttons to set up your major sections first (a header area, a content area, a footer), then use split to divide those sections into smaller arrangements.

Cell sizing

Why cell sizing matters

By default, every cell is Flexible — it takes a percentage of the available space. This works fine until the Embed's container resizes. When that happens, everything scales proportionally: buttons get extra spacing (or wrap onto two lines), images lose their tops and bottoms (or get squished), and the layout stops looking the way you designed it.

Cell sizing modes let you lock down the cells that shouldn't change, while leaving Flexible on the cells that should absorb the resize. The combination is what makes layouts responsive without being unpredictably responsive.

Resize cells by dragging

Before changing sizing modes, you can adjust how Flexible cells share space by dragging. Hover over the border between two cells and a drag handle appears. Drag it to give one cell more space and its neighbor less. The cells stay Flexible — they still resize proportionally with the container — but the ratio between them changes.

This is the quickest way to fine-tune a layout without switching to Fixed or Hug content. Use it when you want two cells to share space, just not equally.

The three sizing modes

Select a cell and click the Sizing Mode icon in the cell minibar (the floating toolbar that appears above the selected cell).

• Flexible (the default) — The cell takes a percentage of the available space. By default, Flexible cells share space equally — two cells each get 50%, three get 33%. You can adjust the ratio by dragging the border between cells. Flexible cells always resize proportionally with the container.
• Hug content — The cell shrinks to wrap tightly around whatever is inside it. A cell with a small icon becomes only as large as the icon. The leftover space goes to any flexible neighbors. Use this to make a cell only as big as its content.
• Fixed — The cell uses a specific pixel or percentage value that you set. No matter how the container resizes, the cell stays the same size. Use this when you need an exact size.

The most important rule

Use "Hug content" to make cells smaller, not bigger. Since a hug-content cell sizes itself to match its content, putting large content (like a big image) inside it causes the cell to expand — which can push other cells out of view. When in doubt, keep cells on "Flexible" and only use "Hug content" on cells with naturally small content like a heading, an icon, or a button.

Recommended workflow

Start by adding your content and designing the layout the way you want it to look. Then, if you need to, make adjustments: set Fixed on cells that need an exact size (like an image column), Hug content on cells that should match their content (like a button), and leave Flexible on everything else.

See the GIF below to understand the how this works in practice.

Selecting parent cells

You can also select a parent cell — the container that holds a group of child cells — and adjust its sizing mode and padding. Click on a cell, then click Select Parent Cell. This is useful for controlling the overall dimensions of a section that contains multiple cells.

Align content inside cells

When a cell is bigger than the block inside it, you can control where the block sits using the Align content control in the cell minibar.

Click the Align content icon and a position grid appears — a 3×3 grid that works like a map. Pick where in the cell you want the block to sit: top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, or bottom-right.

This is most useful when cells sit side by side in a row and one cell's content is shorter than the other's — for example, centering a small button in the middle of a tall cell, or pinning text to the top-left of a wide cell.

Image sizing

The Image block has a Fill mode setting that controls how the image fills its cell:

• Fit — The image scales down to show completely inside the cell without being cropped. You always see the full image, but there may be empty space around it if the image shape doesn't match the cell shape.
• Fill — The image scales up to cover the entire cell, cropping the edges if needed. There's no empty space, but parts of the image may be cut off.

Switch between Fit and Fill by clicking the image block and opening the Design tab in the right panel. The option is labeled Fill mode.

If an image isn't displaying the way you expect in a column layout, the fix is usually to switch the image cell from "Hug content" to "Flexible" or "Fixed."

Layout recipes

Here's how to build the most common Embed layouts using the concepts above.

Layout 1: Image on the left, text on the right

1. Start with the single default cell. Split it horizontally (or click + on the right edge). You now have two cells side by side.
2. Add an Image block to the left cell. For the right side, split the right cell vertically to create cells for your heading, body text, and button — one block per cell.
3. Select the left cell. Click the Sizing Mode icon in the cell minibar and choose Hug content. The cell shrinks to the image's width, and the right cell fills the rest.
4. If the image cell is too wide, try a narrower image or switch the left cell to Fixed and set a specific width.

Result: The image sits on the left at its natural width. The text fills the remaining space on the right.

Layout 2: Two columns

1. Split the starting cell horizontally.
2. Both cells will be Flexible by default and share space 50/50 automatically.
3. Add content to each cell.

Result: Two equal columns that resize together when the Embed container changes width. If one column has content that shouldn't scale (like a button or icon), switch that column to Hug content or Fixed so it stays the right size. See below.

Layout 3: Image on top, text below

1. Split the starting cell vertically (or click + at the bottom edge).
2. Add an Image block to the top cell. Set the image to Fill for edge-to-edge coverage. Set the cell to Hug content.
3. Split the bottom cell vertically if you need both text and a button. Add a Text block to one cell and a Button block to the other. Leave them on Flexible.

Result: The image spans the full width. Text and actions sit underneath.

For tall images in this layout, Hug content caps the cell's height, so the image may not display at its full size. Use Fixed on the image cell and Hug content on the text and button cells instead, or use Flexible on the image cell.

Layout 4: Responsive card with fixed image

This layout shows the recommended workflow for building an Embed that holds up when the container resizes.

1. Start by adding your content and designing the layout the way you want it to look. Split the starting cell horizontally to create two cells side by side. Add an Image block to the left cell. 
2. Split the right cell vertically to create two stacked cells — add a heading to the top, a description below, and split the bottom cell horizontally to place two buttons side by side.
3. Then make adjustments: set Fixed on the image cell so it stays the same size regardless of the container width. Set Hug content on the outer button cell so it wraps tightly around the button text and the spacing between them stays consistent. Leave the text and inner button cells on Flexible so they absorb the extra space.

Result: When the Embed's container resizes, the image and buttons stay locked in place while the text reflows naturally. No wrapping buttons, no cropped images, no stretched spacing.

Troubleshooting layout issues

Image is too big or doesn't fit as expected

Check the cell's sizing mode. If a cell is set to Hug content and holds a large image, the cell tries to expand to match the image. In a row, the cell is constrained so it won't push siblings out of view, but it may take more space than you want. In a column, tall images are capped in height but may appear smaller than expected. Switch the cell to Flexible or Fixed for more predictable results.

Cells aren't sharing space evenly

Make sure all the cells in the row or column are set to Flexible. If one cell is set to Hug content or Fixed, the Flexible cells split whatever space is left over — which may not be equal.

Tall image doesn't display well in a column layout

Tall images in a hug-content cell inside a column are capped in height to prevent them from breaking the layout. The image may appear smaller than expected. Switch the image cell to Fixed and set the other cells in the column to Hug content — the image cell then takes the remaining space. Alternatively, use Flexible on the image cell.

Layout looks different when the container resizes

If your Embed looks good at one size but breaks at another — buttons wrap, images get cropped, or spacing stretches — it's because all cells are still on Flexible. Flexible cells are percentage-based, so everything scales with the container. Set Fixed on cells that need an exact size and Hug content on cells with small content like buttons or icons. Leave Flexible only on cells that should absorb the extra space, like a text area.

Can't add a full-width section after splitting

If you've already split cells into columns and now need a full-width row above or below, use the + buttons on the outer edges of the step. Splitting an existing cell can't give you a full-width result once other cells are already in place.

If it's still not working

Collect the following and contact support:

• The Embed URL from Studio (copy from your browser's address bar).
• A screenshot or recording showing the issue.
• What layout you're trying to build.
• The sizing setting on each cell.