Re-Arranging Flow Pages using the Page Structure Panel

* These features were introduced in our 7.4.6.0 release.

Drag and drop to easily move elements, groups, rows and sections plus move parts in tab sets, etc.

The Page Structure panel provides an easy way to adjust the layout and organization of Flow pages.

Let's walk through a simple example of re-ordering two Groups in a Row.

This page has a Row which has two Groups:

Stopwatch (on the left on the Page)
31 Days (on the right on the Page)

We have the Stopwatch group selected on the Page Structure tab.

We can select and drag the Group to move it to another location.

As we drag the BodyTextGroup and move our cursor up or down on the Page Structure panel, the Group gets shown in a grey pull-out panel framed in purple.

Equivalent-level containers - in this case, Groups - are boxed in orange on the Page Structure panel.

And as you drag, grey target locations show where we can drop it. A purple line confirms that we're hovering over a specific target.

In this example, we've dragged our cursor down a bit and are shown a grey target location below the 31 Days group.

We can drop the Stopwatch group on the target, and now it is located there.

On the page, the order of the two Groups has been reversed.

The 31 Days group is now on the left and the Stopwatch group on the right.

What can be moved by drag and drop?

You can drag and drop Elements, Groups, Rows and Sections.

You can also drag and drop component parts of elements like tab sets, both individual tabs as well as elements on any tabs.

You aren't limited to moving things to just within the larger container on the page. For example you can:

Move a Row from one Section to another Section
Move a Group from one Row into another Row, even in another Section
Move an Element into any other Group on the page, even in separate Sections
Move a tab from one tab set to another
Move an image from a tab in one tab set to a tab in another tab set
Rearrange the order of labels or markers layered over an image or video, for example to set their tab order for accessibility purposes

Additional Layout Options Available on Three-Dot Menus for Sections, Rows, Groups, Elements and Sub-elements

Items shown on the Page Structure Panel have an associated three-dot menu that provides easy access to common tasks.

This makes it easy to duplicate or delete, plus in many cases add content above or below the selected item.

Section Menu

For Sections, the three-dot menu can help you:

Add a Section above or below the selected Section
Duplicate the Section. The duplicated Section will be added at the bottom of the page. You can use the Page Structure's drag and drop feature to move it to a different location on the Page.
Add the selected Section to the My Sections or Project Sections, available on the +Add To Your Page panel's Favorites tab.
Rename the Section. The name of the Section in the Page Structure will change to a type-in box. You can also rename the Section by double-clicking its name on the Page Structure.
Delete the Section. Individual Elements in the deleted Section will be available in the Page's Recycle Bin.

Row Menu

For Rows, the three-dot menu can help you:

Add a new Group to the top or bottom of the Row. The new Group will show a +Add Layout icon so you can add what ever layout design you need.
Duplicate the Row. The duplicated Row will be added at the bottom of the same Section. You can use the Page Structure's drag and drop feature to move it to a different location on the Page.
Rename the Row. The name of the Row in the Page Structure will change to a type-in box. You can also rename the Row by double-clicking its name on the Page Structure.
Delete the Row. Individual Elements in the deleted Row will be available in the Page's Recycle Bin.

Group Menu

For Groups, the three-dot menu can help you:

Rename the Group. The name of the Group in the Page Structure will change to a type-in box. You can also rename the Group by double-clicking its name on the Page Structure.
Delete the Group. Individual Elements in the deleted Group will be available in the Page's Recycle Bin

Element Menu

For Elements, the three-dot menu can help you:

Duplicate the Element. The duplicated Element will be added at the bottom of the same Group. You can use the Page Structure's drag and drop feature to move it to a different location on the Page.
Rename the Element. The name of the Element in the Page Structure will change to a type-in box. You can also rename the Element by double-clicking its name on the Page Structure.
Delete the Element. The deleted Element will be available in the Page's Recycle Bin.

Sub-element Menu

For Sub-elements such as a Tab in a Tab Set or and Element on a Tab in a Tab Set, the three-dot menu can help you:

Duplicate the Sub-element. The duplicated Sub-element will be added at the end or bottom of its respective location. You can use the Page Structure's drag and drop feature to move it to a different location.
Rename the Sub-element. The name of the Sub-element in the Page Structure will change to a type-in box. You can also rename the Sub-element by double-clicking its name on the Page Structure.
Delete the Sub-element. The deleted Sub-element will be available in the Page's Recycle Bin.