Group sets of blocks together for greater control over page design

When you create a Stack, you group multiple blocks into a single, flexible layout where you set the order, alignment, and spacing for those blocks. The layout you create resizes consistently on different devices and browser sizes.

You can create Stacks in Fluid Engine sections on version 7.1.

Add a Stack

A Fluid Engine section needs at least two blocks to create a Stack. You can have up to 30 blocks in a Stack.

To add a Stack:

1. Open the Pages panel, then click Edit on a page.
2. In the Fluid Engine section, click and drag on a blank space to highlight multiple blocks, or hold Shift and click the blocks you want to stack.
3. Click the Stack Blocks icon in the toolbar that appears. This groups the highlighted blocks into a Stack.

Customize Stack layouts

To customize a Stack layout:

1. Open the Pages panel.
2. Click Edit on a page, click the Stack, then click the pencil icon.
3. In the Design tab, under Layout, set the placement and spacing of blocks in the Stack.
4. In the Gap dropdown menu, select Fill to set the blocks in the Stack as far away from one another as possible, or set a custom pixel distance. You can also edit gaps directly on the Stack.
5. Under Appearance, click + to add a background color or image. You can also add a stroke line around the Stack and customize the corner radius.
6. Under Transforms, customize the look of the Stack with transform effects.
7. Click the Animations tab to add animations.

Add a background color or image to a Stack

You can add a background color, a background image, or both to a Stack. When you add both, the color acts as an overlay for the image.

To add backgrounds to a Stack:

1. Open the Pages panel.
2. Click Edit on a page, click the Stack, then click the pencil icon.
3. In the Design tab, beside Background, click +.
4. Under Color, choose a color from your palette or click + to add a custom color, or click Image to add a background image.
5. Optional: After adding a color or image, click + next to Background to add the other, then use the slider below the color picker to lower the transparency. This creates an overlay color for the image.

Remove backgrounds from a Stack

To remove backgrounds from a Stack:

1. Open the Pages panel.
2. Click Edit on a page, click the Stack, then click the pencil icon.
3. In the Design tab, beside Background, click - over the color or image.

Add a clickthrough URL to a Stack

You can add a clickthrough URL to a Stack layout, similar to image clickthrough URLs. Clickthrough URLs can link visitors to a page, a file, an email address, or a phone number. If the Stack includes another link in its layout, like a button block, visitors can still click that link too.

To add a clickthrough URL to a Stack:

1. Open the Pages panel, then click Edit on a page.
2. Click the Stack, then click the Edit Link icon in the toolbar.
3. Under URL, enter a link or search for a page or file on your site. You can also click URL for more options.
4. Optional: Enable or disable Open link in new tab. Depending on the type of link, it may open in a new tab even if this option is disabled.
5. Press Enter to save your link.

Rearrange blocks in the Stack

To change the order of blocks in a Stack:

1. Open the Pages panel
2. Click Edit on the page.
3. Double-click a block in the Stack.
4. Click and drag the block to the position you want. Other blocks in the Stack will shift as you drag.

Create nested Stacks

For more complex layouts, you can create layers of Stacks within a Stack. A Stack can contain an additional three layers of Stacks within it.

To nest a Stack:

1. Open the Pages panel.
2. Click Edit on a page with Stacks on it.
3. Click and drag on a blank space to highlight multiple Stacks or to highlight a Stack and blocks that aren’t in the Stack.
4. Click the Stack Blocks icon in the toolbar that appears.
5. Optional: Repeat this process up to two more times.

Customize blocks in the Stack

You can customize the content and styling of any individual block in a Stack. Certain settings, like animations or background colors, may conflict with your Stack settings.

To customize the content and design of individual blocks in the Stack:

1. Open the Pages panel.
2. Click Edit on the page.
3. Double-click the block you want to edit. If the block is in a nested Stack, you may have to double-click multiple times before the block toolbar appears.
4. Click the pencil icon on the block toolbar and make changes in the block editor.

Change gaps between blocks in a Stack

A gap is the distance between two blocks in a Stack. You can set a gap for all blocks in a Stack when customizing your Stack, or by hovering over a gap and clicking and dragging the handle in the center, which changes all the gaps in the Stack.

To change an individual gap between two blocks in a Stack:

1. Open the Pages panel.
2. Click Edit on the page.
3. Hover over the gap you want to edit.
4. Hold ‌⌘ (on Mac) or Ctrl (on Windows), then click and drag the handle in the middle of the gap. This changes the gap while leaving the Stack setting as the default.