A Stack is a layout element that uses a preset grid to create stacked, offset compositions. Unlike a regular Div Block, the Stack comes preconfigured with a grid layout and grid areas, making it easy to layer elements on top of one another without manually setting up a grid from scratch.

Adding a Stack

To add a Stack element:

1. Open the Insert panel from the Left Sidebar.

2. Go to Base Elements and scroll down.

3. Click or drag the Stack element onto your canvas.

View & Manage Stack Grid Area

Once added, the Stack element appears on the canvas with a preset Grid layout with 2 rows and 3 columns.

Stack also has predefined Grid Areas that control how child elements span across the grid. To see the defined Grid Areas:

1. Hover over the left edge of a row or the top of a column to reveal its sizing, then click the unit to access more options.

2. Select Define Grid Area to view existing areas and drag the cell boundaries to extend them.

3. To create a new grid area, click on an undefined cell and drag its borders to define it.

You can also adjust the number of rows and columns, alignment, padding, and gap directly from the Layout section in the Right Panel’s Design tab.

Learn more about Grids.

Add Content to Stack

Since Stack is a structural element meant for this purpose, you can add any element to it. 

Elements can be accessed from two places:

Element Island

Click the + button that appears on an empty grid cell directly on the canvas to add an element in place.

Learn more about Element Island.

Insert Panel

Open the Insert Panel from the Left Sidebar, then drag any element into the desired cell within the Stack.

Learn more about Insert Panel.

Control Content Placement

Once an element is placed inside the Stack, it becomes a grid item. Selecting it reveals Grid Item settings under the Sizing section in the Right Panel, giving you control over how it spans across the grid:

Auto – The item occupies columns and rows based on the number defined. For example, setting the Column to 1 occupies the first column, setting it to 2 occupies the first and second columns, and so on.

Area – The item occupies a predefined Grid Area. A dropdown appears, letting you select from available areas.

Manual – The item occupies columns and rows based on the starting and ending column and row edges set. For example, setting the Column span to 2–2 or 2–3 places the item in the middle column only, 1–3 spans the first two columns, and 1–4 spans all three.