Dynamic Layout – Frame
Brief Overview
Frame is a designated space on the Visual Designer ShoutOut canvas which can be moved around and designed. Widgets can be added inside the frame.
How to Use
Styling
- Corner radius, border width, fill color, and border color can be changed from the Styling tab
Layout
Resize
- The frame can be resized horizontally in relation to another frame. To do so, drag the frame you want to resize.
- You can resize frames only from the side which is shared with another frame
- The frame size is based on percentage of the canvas size. The frame width is displayed in percentage.
- The frame can't be smaller than the content in the frame
Vertical Alignment
- On the frame level, elements can be aligned horizontally or vertically
- This option is available when the element is inside a frame that's next to another frame which has more content
Widget Spacing
- Adjust default vertical spacing between the widgets in the frame
- It is also possible to set different spacing for a specific widget on a widget level
Adding Frames
- Frames can be added by duplicating existing ones, or clicking on the plus sign which appears in the highlighted area when hovering on the outside area of the canvas
- Up to four frames can be added in one row
- There is no limit for number of vertical frames
- When new frames are created (or deleted), the canvas size will be divided by the number of frames so all frames are the same size
- The minimum size of a frame is 10% of the canvas
Moving Frames
- Frames can be moved by dragging and dropping - horizontally or vertically
Inner Spacing
- The distance from the sides of the frame to the widgets can be adjusted in the property bag
- Select the frame and set the default distance for all the sides, or click on the borders icon - and control each side individually
- If you have an image that's the same size as it's frame and you need to select the frame - use the breadcrumbs to switch between the widget and the frame
Technical Notes
- Up to four widgets can be added in a row inside one frame
Was this article helpful?
Yes
No
Thanks for your feedback!