Dynamic Layout – Widget
Brief Overview
Widget is an element of a ShoutOut created in the Visual Designer that can be added into the frame. Types of widgets are Text, Image, Button, Line, Webview, Lottie, Frame, Carousel.
Styling
Style of the widget can be changed from the property bag:
-
Image - upload it and select corner radius, border width and border color
-
You can also select an action for when a user clicks on the image, it'll perform an action - e.g. they'll be redirected to external URL or email address
-
When an action is selected, the icon indicator will change from neutral to green
-
-
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
-
When the action is selected, the red icon indicator will change to green
-
Multi-line text in a button is supported - press Enter to create a new line
-
-
Color picker now has a pipette tool to capture the color already existing in the design
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.
Up to four widgets can be added in a row inside one frame.
Resizing a widget
To resize a widget, select it and drag the handle bar, or use the size & spacing tool on the side bar.
Button size can be controlled via both the outer (distance from the other widgets) and inner (distance from the text of the button to its borders) spacing.
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 are multiple widgets in a row, each of the widgets will dynamically adjust to fill the space inside the frame. For example, when there are two widgets each will take up 50% of the space, when there are four, each will take up 25%.
Height if the widget can be controlled manually.
Outer spacing
To create space between multiple 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.
Carousel
-
By default, when you add a carousel widget to the frame, 3 slides will be created, each with an image and text
-
You can set the background, corner, and radius of the carousel slides
-
You can add other widgets inside the carousel (text, image, button, web view, line)
-
The maximum number of carousel slides is 9
-
Duplicating a slide will add another slide
