Visual Designer Dynamic Layout

Last Updated March 2, 2023

Brief Overview

New layout for designing ShoutOuts is available in the Visual Designer. Dynamic layout offers canvas adaptability of the Flex layout while providing more freedom and flexibility to the users.

This article covers the key new features and capabilities of the new layout.

Key Benefits of Dynamic Layout

  • ShoutOuts 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
  • More freedom and flexibility compared to the current Flex layout
  • Allows you to create layouts that are easy to read and navigate, regardless of the device being used
  • Improves the user experience by making the popup easier to use on all devices
  • Increases the overall performance of the website by allowing the popup to load faster and use fewer resources
  • Makes it easier to create and maintain Multi-Language popups by allowing you to create a single design that can be easily adapted to support different languages
  • Provides a better user experience than Free Layout, which does not adjust to the size and orientation of the user’s device
  • Can be used to create visually appealing and professional-looking popups that capture the user’s attention and effectively convey the desired message

Key New Features of Dynamic Layout

The Dynamic Layout canvas consists of the following layers:

  • Canvas – the body of the future ShoutOut which gives the idea of how it will look on screen. Other elements – frames and widgets – can be added to the canvas.
  • Frame – a designated space on the canvas which can be moved around and designed. Widgets can be added inside the frame.
  • Widget – an element inside the frame. Types of widgets: Text, Image, Button, Line, Webview.

How to Use

General

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 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

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

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

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.

Tip Tuesday Videos

Introduction to the Visual Designer – Dynamic Layouts

Limitations and Supports

Limitations

  • Visual Designer does not support customizing using global or custom CSS
    • We are aiming to replace all need to use global/custom CSS with “in Editor” functionality in the future
  • Frameset sites are not supported – the content will not be drawn on them

Supports

  • Web Player – supports SO
  • Mobile Player – supports SO, SWT (limited), Surveys, Launchers
  • Desktop Player – supports SO, SWT (limited)

Was this article helpful?

Thanks for your feedback!
×

Select account type

Close
< Back

Mobile account login

< Back