Brief Overview

Frames define structured areas within a Dynamic Layout ShoutOut and act as containers for widgets. Frames let you control layout, alignment, spacing, and responsiveness while organizing content within the canvas.

This article explains how to add, style, resize, and manage frames, including layout behavior, spacing rules, and alignment options.

Frame Styling

You can customize the appearance of a frame from the Styling tab in the property bag.

You can configure:

• Corner radius
• Border width and border color
• Fill color

Adding Frames

You can add frames in the following ways:

• Duplicate an existing frame
• Select the plus icon that appears when hovering over the outer edge of the canvas

Frame behavior and limits:

• Up to four frames can be added in a single row
• There is no limit to the number of vertical frames
• When frames are added or removed, the canvas width is evenly divided so all frames are the same size
• The minimum frame width is 10% of the canvas

Layout and Resizing

Frames support responsive horizontal resizing based on their relationship to adjacent frames.

Resizing frames

• Resize a frame by dragging the edge shared with another frame
• Frames can only be resized from a side that is shared with another frame
• Frame width is calculated as a percentage of the canvas width
• A frame cannot be resized smaller than its content

Frame alignment

Alignment controls are available when frames in the same row contain different amounts of content.

You can:

• Align elements vertically within a frame
• Align elements horizontally within a frame

Widget spacing

Frames control default vertical spacing between widgets.

You can:

• Adjust the default vertical spacing between widgets at the frame level
• Override spacing for a specific widget at the widget level

Moving frames

You can reposition frames within the canvas by dragging and dropping them.

Frames can be moved:

• Horizontally
• Vertically

Inner spacing

Inner spacing defines the distance between the frame edges and the widgets inside it.

To adjust inner spacing:

• Select the frame
• Set a uniform spacing value for all sides, or
• Select the borders icon to control spacing per side

If a widget fully covers the frame and prevents frame selection:

• Use the breadcrumbs to switch selection between the widget and the frame

Technical Notes

• Up to four widgets can be added in a row inside one frame