ShoutOuts: Flex Layout vs. Free Layout

Overview

Flex Layout inside the Visual Designer is an alternative to the regular Free Layout. Which one to use depends on your goals and priorities. This article explains both the advantages and limitations of the Flex Layout compared to the Free Layout.

The key feature of the Flex Layout which makes it more suitable for certain objectives is the canvas adaptability:

• To the content inside it
• To the size of the screen

Currently there are four Flex Layout templates in the ShoutOut Theme Gallery: New feature launch, Welcome Onboard, System Maintenance, and Basic Template.

Blank Template, Performance Review, and all the other templates in the Theme Gallery are Free Layout.

Key advantages

• ShoutOuts created via the Flex Layout template will automatically adapt to the screen they’re viewed on
• When using Multi-Language: in case when the size of the translated text exceeds the original, the balloon will adapt accordingly
• Reduces the building time – there are ready variations of content arrangements inside the canvas

Limitations

• No support for customizing using global or custom CSS
• Frameset sites are not supported
• Shape, Image, and WebView are the only resizable widgets; size of a Button and Text cannot be changed
• No minimum or maximum sizing for individual widgets
• No manual resize for Canvas (size of the Canvas automatically adapts to the content)

Comparison

Adaptability based on the content

Free Layout	Flex Layout
When adding more text, you have to manually resize the frame and the canvas.	The text frame will expand and shrink automatically.

Changing the canvas size

Free Layout	Flex Layout
The canvas can be resized using the Width and Height settings on the side panel or by manually stretching the borders of it.	The size of the canvas can be changed from the side panel. In order to do so, switch the toggle to ON in Advanced size box in the Layout tab. The max width and height can be set in pixels or percentages (from the size of the browser screen). The canvas will expand automatically adapting to the content inside it or to the size of the screen, but it will not exceed the set width/height max limit.

Position of the elements

Free Layout	Flex Layout
Elements can be freely moved around inside the canvas.	Elements can only be arranged in preset positions that are automatically suggested to users when they drag an element (potential positions are indicated by blue lines).
	The element’s position can be adjusted – inside the canvas and in relation to other elements – in the Layout tab on the side panel by choosing the alignment of the element and setting the outer spacing. Note: vertical alignment is only available when the object is next to another one of a greater height. Widgets can be added to the same row as long as there is enough space for them. When the space is over, the widget will be created in a separate row.

Size of Widgets

The size of an image, web-view, and shape can easily be changed on the canvas in both templates. In the Flex Layout, the canvas will adapt.

Free Layout	Flex Layout
Size of a text box and button can also be changed on the canvas or on the side panel.	Text box and button size can’t be changed. Button can be stretched horizontally or vertically if there is space.

Exceeding the size of the canvas

Free Layout	Flex Layout
When you added too much content, and it goes beyond the canvas borders.	When you added more content than the canvas can fit, and the max height and/or width of the canvas has been reached.