Visual Designer Dynamic Layout

General

Color specification

Each level of the design when selected is highlighted with its specific color:

• Canvas – green
• Frame – pink
• Widget – blue

Styling

For Canvas and Frames, a background color, corner radius, and border width can be set in the “Styling” tab.

Breadcrumbs

Breadcrumbs are available in the property bag and on the canvas. For example, when selecting a widget, you will see the frame it belongs to. Breadcrumbs can be clicked and navigated between.

Canvas

Styling

Corner Radius, Border Width, Fill Color, and Border Color can be changed from the Styling tab.

Layout

Sizing

Width of the ShoutOut can be changed by stretching it directly from the canvas or applying measurements in the property bag. Height will adjust automatically based on the amount of content.

Only the width of the canvas can be resized by a user.

Inner Spacing

Distance between the sides of the canvas and the frames can be adjusted in the property bag – the indication will be shown on the canvas.

By default, same distance is set for all the sides. To apply a different value to one of the sides, click on the borders icon.

If one of the sides has different value than the rest – Indication “Mixed” will appear.

Close Button

Toggling “Show Close Button” to off will hide the Close button from the canvas. To make it appear again, hover over the Close button location and click on its indication. Turn on the toggle “Show Close Button”.

Close button can be customized from the Styling tab – Icon size color, Button radius and fill, Border width and color can be changed. Size of the button can be changed from the canvas. Position can be changed (Top Right / Left corner) from the Layout tab.

Position

Position of the canvas on screen can be changed only from the property bag. Select one of the default options, or toggle “Custom position” to on – and enter the preferred settings for more specific changes.

Frame

Styling

Corner Radius, Border Width, Fill Color, and Border Color can be changed from the Styling tab.

Layout 

Resize

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 from the canvas size.

Frame can’t be smaller than the content of the frame.

Vertical Alignment

On the frame level, elements can be aligned horizontally or vertically. The 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), they’re the same size – canvas size divided by the number of frames.

Minimum size of the frame is 10% of the canvas.

Moving Frames

Frames can be moved by dragging and dropping – horizontally or vertically.

Inner Spacing

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.

Widget

Styling

Style of the widget can be changed from the property bag:

• Image – upload it and select corner radius, border width and border color
• Text – choose the font, font size and color, alignment of the text
• Line – change corner radius, border width, line color, and border color can be changed
• Webview – past the URL and see the preview 
• Button – select the action you want the button to perform

Adding a Widget

To add a widget, click on the Plus button in the property bag and drag selected widget to the canvas.

You will see a blue indication of where that widget will be added.

Two widgets can be added in a row inside one frame.

Resizing a Widget

To resize a widget, select it and drag the handle bar.

Stretching a Widget

Widget can be stretched by clicking on the stretch icon.

When aspect ratio is locked, the widget will be stretched up to inserted figures. When aspect ratio is unlocked, the widget will take the entire horizontal space available inside the frame.

When there’re two widgets in a row – each of the widgets will take 50% of the space inside the frame.

Height if the widget can be controlled manually.

Outer Spacing

To create space between two widgets – select the widget and adjust outer spacing in the property bag.

By default same distance is set for all the sides. To apply a different value to one of the sides, click on the borders icon. Indication “Mixed” will appear.