This article covers the dynamic box and its uses :
Overview
The dynamic box editor
General settings
Responsive management
How to create a box directly from a project page
How to create interactions between elements within a box and external elements, using element classes
Overview
A box is a dynamic component that you create and design within a project, separately from its pages. You can then import this box on any page of your project, just like any other object.
To make it simple, a box is a miniature page that you insert within a page of your project. It has its own editor, which works in a similar way as the classic page editor.
Benefits of using the dynamic box :
You can create boxes once, which you can then import onto any page of a project, without having to go through the same composition process for each page (a header or a footer for instance). This can save a considerable amount of time in your workflow
You can also gather elements of a page within a box when you wish to animate this group of elements or apply actions on it
Working with dynamic boxes can be used to break down a composition process on complex pages. This is also helpful when collaborating on a project and having to manage complex compositions.
The box builder
You access the list of the existing boxes and their builder from the project scenario page :
Note that you can also directly access a dynamic box and its builder when you display the page list in the navigation tab (top-right menu).
The box builder is similar to the page editor :
import components
access each component's parameters and apply display effects on them
interaction menu to apply actions on components in the box
link elements to external urls or pages within the project
box properties
layers list
zoom
The main difference with the page builder is that there is no timeline tool on the box builder. However since you will use your box as a component within a page, you will be able to use it on the page timeline.
General settings
The settings options are simplified :
name
dimensions
parallax ratio
duplication (as for any other page, duplicating a box will duplicate its components as well as their interactions and properties - by directly replacing a media from its properties panel you can replace the media while applying the settings from the original media)
Box settings vs page settings :
no reading direction option - the text blocks will adjust to the current page reading settings
no "homepage" icon, since a box cannot be used as a standalone page
no publishing icon - it can only be published when its container is published
Create a box directly from a project page
You can create a dynamic box when building a page:
select the objects you want to group with shift/maj + click on the objects, or simply drag your cursor + left click over the layers you need to group
right-click and select "convert selected elements into dynamic box" in the list of options
your components are now gathered into a dynamic box. You can then edit the newly created box within the box builder (right-click on the box to open the options menu and "edit dynamic box")
If you wish to ungroup the components, you need to go into the box builder then copy the elements and paste them on your project's page in their original composition.
You can also simply use ctrl+Z (cmd+Z on Mac) to cancel the grouping, but only if you haven't done any other manipulation or haven't left the current page in the meantime (that's for any ctrl+Z/cmd+Z operation in general).
Responsive management
Dynamic boxes have much in common with standard pages and they should be treated accordingly when it comes to their multi-screen versions. You need to create responsive versions of the boxes in order to make sure that they adapt to all versions of the pages they will appear on.
For this, once in the box builder, use the responsive tool in the top-right menu (screen-shaped icons) to create a version for each format : desktop, tablet and mobile.
Box/page interactions - Element classes
You can create interactions between components outside the box and components within the box.
For example, you have placed an icon on your page. You want a click on the icon to create an opacity effect on an image placed in a box. Here is the procedure :
go into the box editor and select the image
in its properties panel you will find under its name a line "element class" you'll use to give it a class
add an opacity action on the image itself with the parameters of your choice
return on the page and select your icon
choose a type of action (click, hover, swipe or scroll), then in the action settings panel select "trigger by class" in the "element" column. Set the "parameter" column according to the type of action you've set on the image
enter the name of the target element class in the "value" column
Notes
This manipulation works both ways : you can trigger an action on an object on the page from an object within the box
You can create group actions on several objects using this "trigger by class" functionality and by giving these objects the same class
Element classes
An element class can be a name, a number or a special character. It cannot include a space in between (see below)
If you choose to apply actions on several elements simultaneously, make sure you use the same class for each of them
You can apply different classes to an object by using a space between each class
If you use "trigger by class" actions (see example above) you can then trigger all the actions previouly configured for same-class elements