Index


Flexitive's Legal and ISI Widgets are built to allow users to add an interactive component to their designs. The component can be set to expand and collapse on user interaction or on a set delay and is designed to hold legal or important safety information text relating to the design.


Learn how to; 



ISI and Legal Widgets can be set to expand or collapse to different sizes on the canvas. These events can be set up to occur either on a timer using the Delay Resize option, or when a user clicks an expansion button using the Toggle Resize option.

To make changes to the Legal and ISI Widgets, including adjusting expansion settings, select the widget from the canvas or Layers panel, and open the ISI or Legal Settings panels on the left-hand side of the editor.


Legal Settings Panel:



ISI Settings Panel:




Delay and Toggle Resize Options


In the Settings panel, under the Expansion Settings, you’ll find the Toggle Resize option, which will be set to ON by default, and the Delay Resize option, which will be set to OFF.




Toggle Resize


When Toggle Resize is ON, you will see options for the position of both the Expanded and Collapsed states of the Legal or ISI Widget.




Each state contains a mock display of your canvas. The area covered by the grey transparent wash represents the part of the canvas covered by either the expanded or collapsed state of the widget.

To make changes to the final expanded and collapsed size, use the Green handles to adjust how you would like the widget to resize. You will be given real-time feedback for the percentage of the canvas that both the expanded and collapsed state will occupy.




Keep in mind that the resizing of your widget does not have to occur in a vertical direction. If in a long and thin aspect ratio, i.e 728x90, you place the widget on the side of the screen, it will be able to resize horizontally to fill whatever size you set with the positioning tool. See below:



Delay Resize


Turning ON the Delay Resize will cause the widget to expand on a timer. The delay from the start of the design to the widget expansion can be set using the Time slider shown below.




The Expanded Position shows a mock display of your canvas. The area covered by the grey transparent wash represents the part of the canvas covered by the expanded state of the widget.

To make changes to the final expanded size, use the Green handles to adjust how you would like the widget to resize. You will be given real-time feedback for the percentage of the canvas that both the expanded and collapsed state will occupy.



In order to allow the widget to collapse, the Toggle Resize option should be ON.


Editing Your Toggle Buttons


When the Toggle Resize option is ON, Flexitive will automatically place a Toggle Button in the top right-hand corner of your widget.

You can control the size and position of the button using the Size and Margin options in the Settings panel. All measurements are in pixels.




You can replace the image of the toggle button for both the Expanded and Collapsed states. To do this, upload your toggle image to your Assets panel by setting the Upload Images button or dragging and dropping the image onto the Assets panel.




In the Widget Settings panel, select the Expanded and Collapsed buttons and select your uploaded image from the drop-down menu that appears. This is a change that will affect all active sizes of your design. 

Buttons:




Button Dropdown: