Stage Area
In the central stage space is the Stage Area 1, where your module is previewed using dimensions displayed in the Stage Size Readout 2 of the Top Bar.
Stage Resize Handles
When you switch between device sizes the Stage Area will initially be set to match the corresponding Content Flow Container dimensions. However, you can also use the Stage Resize Handles to preview how the layout looks between device sizes.
For example, you might have the device sizes Desktop and Mobile active, with widths of 1240px and 480px respectively, but you might need to check how the layout looks at 800px wide.
In this case you could grab either the left 1 or right 2 resize handle and drag it until your layout is 800px wide.
As the stage is resized the height and width are shown in the Stage Size Readout of the Top Bar 3. You can also view the current dimensions by hovering over the background layer on the stage, which will display the height at the top left corner 4, and width and the top right corner 5.
Note that resizing the stage in this way does not affect any of your Content Flow Container size definitions, which are instead modified under Settings -> Module Configuration panel -> Content Flow tab -> Content Flow Container section.
Stage Content
Within the Stage Area is the Stage Content, comprised of the background layer, added layers, and any Static Slide layers.
Clicking a layer will select it, making it ready for editing. When selected it will be surrounded by a blue bounding box, and the Layer Toolbar will appear at its top left.
You will know when you have selected a different layer because the blue bounding box and Layer Toolbar will move.
If the selected layer is a child layer, the parent layer will also have its bounding box shown.
Stage Top Bar
Above the Stage is the Stage Top Bar 1. It displays the currently active Editing Mode.
As you switch between editing modes the Stage Top Bar will change to show you the currently active mode.
Learn more about Design Mode ->, Animation Mode -> and Action Mode -> in their dedicated tours.
Layer Toolbar
When you are in Design Mode and select a layer, a Layer Toolbar will appear above its top left corner. This contains quick access editing tools such as align, duplicate, delete, text edit and more.
The tools on the toolbar will vary depending on the type of layer. For example, below is the Layer Toolbar for a text layer.
Whereas the Layer Toolbar for a Group layer looks like the following.
Context Menu
When you are in Design Mode and right click a selected layer, a Context Menu will appear. This provides easy access to additional editing tools, depending on the type of layer selected.
