Flexitive's Legal Widget is built to allow users to add an interactive component to their designs. The component can be set to expand and collapse on user interaction, and is designed to hold legal text relating to the design.
In the design below, you can click thebutton to expand and collapse the widget.
Building a Legal Widget
To add Legal Widget, open the Assets panel then tap Objects, under Widgets click Legal.
After you've added the Legal Widget to your canvas, you can re-position and re-size the widget on the canvas. The size and position you set for the legal widget in the editor will be the position and size the widget will take before any user interaction. To set the position and size of the widget after user interaction, use the 'Expanded and Collapsed' options for the widget.
Editing the Contents of a Legal Widget
When you add a Legal widget to a design, the widget will include 2 embedded pages; the Header and the Body of the Widget. In the context of a Flexitive widget, we call these embedded pages Child Pages. To edit the contents of a Legal Widget, you'll need to edit the Child Pages for the design.
By default, the Header of a Legal Widget will be blank and transparent. The Body of a Legal Widget will be black, and contain placeholder text. To edit the content of either the Header or Body, save your design and click the Design-ID for the page you'd like to edit in the Customize Panel.
Clicking the Design-ID will open the editor for the page. Once you're in the editor for the pages you'd like to use, edit the contents of the page, and save your work.
To return back to your design, save your work and click on the Design-ID on the left of the breadcrumb in the top-left corner of the page.
Expanded and Collapsed States of the Legal Widget
In the Legal Widgets, you can set the widget up to expand or collapse to different sizes on the canvas. The Widget can be set to expand either on a timer using the Delay Resize option, or on user interaction using the Toggle Resize option. To turn on either resize option, use the toggles in the Customize panel.
In a Legal Widget, the Toggle Resize option will be set to ON by default, while the Delay Resize option will be set to OFF.
When Toggle Resize is ON, you will see options for the position of both the Expanded and Collapsed states of the Legal 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 tags to adjust how you would like the widget to re-size. You will be given real time feedback for the percentage of the canvas that both the expanded and collapsed state will occupy.
Turning on Delay Resize cause the widget expand on a timer. The delay from the start of the design to the widget expanding can be set using the Time slider shown below.
The Expanded Position box provided functions in exactly the same way as with the Toggle Resize option.
Editing Your Buttons
When Toggle Resize is set to 'ON', you're widget will include a button to allow for the expansion and collapsing of your widget. To edit the size and position of the button, use the 'Toggle Button' settings in the Customize panel.
Under the Toggle Button settings, you can change the size of the button using the Size setting. The button's size is measured in pixels on the canvas. You can also set the position of the button using the 'Margin' options. By changing the 'Top/Bottom' and 'Left/Right' toggles, as well as the margin between the button and the edge of the widget, you can control the position of the button.
To change the image for your button, use the 'User Expanded' and 'User Collapsed' dropdowns in the Expansion Settings.
The 'User Expanded' button is the button a user will see when the widget is expanded, and the 'User Collapsed' button is the button the user will see when the widget is collapsed. Clicking either dropdown will open a list of the image assets you've uploaded to Flexitive. To change the button, select on of the image assets.