Widget Settings

Introduction

Widget Settings enhance widgets by adding styling and behavioral capabilities. These include:

• Action, available for all widgets except Embed, YouTube, Line, Box and Scene Slider
• Animations, available for all widgets, except Link widget.
• Style,  available only for Image, Next, Previous and Box widgets
• Position: available for all widgets

Actions

For details about Actions, refer to this article.     

Animations

This section allows for the addition of an HTML5 animation to text and image widgets. Animations will be executed when the Experience scene loads and comes into the screen view-port.  There are a total of 8 possible animations, as seen in the picture below:

• Slide, Fade, Zoom, Move - To start, click one or more animation types.
• Direction - For movement animations, choose the direction to enter from or exit towards.
• Easing - Choose one of several animation effects to accompany the widget’s entrance or exit.           
• Delay - Time to wait before starting; useful if page features multiple animations, or if a single object will be animated multiple times.
• Duration - Time to spend animating; that is, how fast or slow the animation should be.

Style

Available for Image, Previous / Next Scene, and Box widgets, the Style property enhances your Creator Studio Experience with the two main style:

• Opacity - Defines the box opacity (0 - 100%)  

• Round Corners - Adds round corner to the border to the widget by specifying the pixels to apply.

• Border - Add a solid border of a specified color and thickness by specifying a Weight (The thickness in pixels of the border line) and/or a Color (The color of the border line in hexadecimal).   

  

• Drop Shadow - Adds a gradient shadow border to the widget (notice the shadow on the applied image on the left).

Position

Once you have added the widget you may left-click and drag to re-position it, or use any of the small black boxes at the edges to resize it. The small black circle below the widget allows it to be rotated. All sizing and positioning is done as a percentage in terms of the total experience’s size. This settings section allows further fine-tuning:

• Left - Distance from the left edge of the experience.
• Top - Distance from the top edge of the experience.
• Width - Horizontal size of the widget. (Not available to text widgets.)
• Height - Vertical size of the widget. (Not available to text widgets.)
• Rotation - Rotation in degrees from straight up and down position.
• Fit widget proportionally - Automatically resizes the widget as large as possible while still remaining in proportion and fitting within the experience. (Not available to text widgets.)
• Arrange - Allows you to move the widget to a different layer - move back, move forward, bring to front and send to back.
• Align - Easily align your widget to the left, right or middle of the scene as well as move the widget to the bottom, bottom or center

The position section is available both when one widget is selected and when multiple widgets are selected. To select multiple widgets click on one widget, then press and hold Shift and click on another widget. This will allow to position selected widgets together and also group them.

Widget position when single widget is selected:

Widget position when multiple widgets are selected: 

 
Note: It is not currently possible to combine 'opposite' animations, such as Slide Out and Slide In, Fade Out and Fade In, Zoom Out and Zoom In. In these instances, only one of the two will be played, even if different delay settings are used.
For the time being, it is recommended to instead use two separate objects with the same appearance and just one animation for each. It is possible to smoothly transition from one object to the other using a 'Fade' with low 'Time' setting, or by having the two on separate scenes and changing between them.