Container Components

Container components are components which other components can be placed inside of They help organize your information on a page. Some available container components include tab systems and accordions.

Image alt text

A container component available in Umbria

Image alt text

A container component available in Umbria

Placing Components in Containers

Placing a component directly on the page (without nesting it in a container) will display a full blue line at the drop location of the component.

Image alt text

Line appears when placing a component in the editor

Image alt text

Line appears when placing a component in the editor

When placing a component in a container this line will be indented and inside the "Drop Items Here" dotted box.  Only items with this dotted box can contain other components.

Image alt text

Line is indented and within a component when nesting components in containers

Image alt text

Line is indented and within a component when nesting components in containers

Navigating the component menu and dragging and dropping a component in a tab system

Navigating the component menu and dragging and dropping a component in a tab system

Reordering

Some container components such as tab systems, accordions, and Stepper Systems can have parts that can be reordered. For example, tabs can be reordered in a tab system or steps in a Stepper System. 

Image alt text

The Stepper System in Umbria

Image alt text

The Stepper System in Umbria

To reorder parts of a container first select the component, then navigate to the "General Settings" tab in the right sidebar under "EDIT COMPONENT".  In this tab there should be an "Order" setting preceded by whatever component is being selected at the moment.

Image alt text

"General Settings" tab for the Stepper System component

Image alt text

"General Settings" tab for the Stepper System component

Click the gripper and drag and drop the Stepper section into position. 

Image alt text

The gripper on the left of the "Step 2" Stepper section

Image alt text

The gripper on the left of the "Step 2" Stepper section

Last Updated On 2024-03-23
Was this page helpful?
Last Updated On 2024-03-23
Was this page helpful?

Container Components

Container components are components which other components can be placed inside of They help organize your information on a page. Some available container components include tab systems and accordions.

Image alt text

A container component available in Umbria

Image alt text

A container component available in Umbria

Placing Components in Containers

Placing a component directly on the page (without nesting it in a container) will display a full blue line at the drop location of the component.

Image alt text

Line appears when placing a component in the editor

Image alt text

Line appears when placing a component in the editor

When placing a component in a container this line will be indented and inside the "Drop Items Here" dotted box.  Only items with this dotted box can contain other components.

Image alt text

Line is indented and within a component when nesting components in containers

Image alt text

Line is indented and within a component when nesting components in containers

Navigating the component menu and dragging and dropping a component in a tab system

Navigating the component menu and dragging and dropping a component in a tab system

Reordering

Some container components such as tab systems, accordions, and Stepper Systems can have parts that can be reordered. For example, tabs can be reordered in a tab system or steps in a Stepper System. 

Image alt text

The Stepper System in Umbria

Image alt text

The Stepper System in Umbria

To reorder parts of a container first select the component, then navigate to the "General Settings" tab in the right sidebar under "EDIT COMPONENT".  In this tab there should be an "Order" setting preceded by whatever component is being selected at the moment.

Image alt text

"General Settings" tab for the Stepper System component

Image alt text

"General Settings" tab for the Stepper System component

Click the gripper and drag and drop the Stepper section into position. 

Image alt text

The gripper on the left of the "Step 2" Stepper section

Image alt text

The gripper on the left of the "Step 2" Stepper section

Last Updated On 2024-03-23}
Was this page helpful?
Last Updated On 2024-03-23}
Was this page helpful?

Container Components

Container components are components which other components can be placed inside of They help organize your information on a page. Some available container components include tab systems and accordions.

Image alt text

A container component available in Umbria

Image alt text

A container component available in Umbria

Placing Components in Containers

Placing a component directly on the page (without nesting it in a container) will display a full blue line at the drop location of the component.

Image alt text

Line appears when placing a component in the editor

Image alt text

Line appears when placing a component in the editor

When placing a component in a container this line will be indented and inside the "Drop Items Here" dotted box.  Only items with this dotted box can contain other components.

Image alt text

Line is indented and within a component when nesting components in containers

Image alt text

Line is indented and within a component when nesting components in containers

Navigating the component menu and dragging and dropping a component in a tab system

Navigating the component menu and dragging and dropping a component in a tab system

Reordering

Some container components such as tab systems, accordions, and Stepper Systems can have parts that can be reordered. For example, tabs can be reordered in a tab system or steps in a Stepper System. 

Image alt text

The Stepper System in Umbria

Image alt text

The Stepper System in Umbria

To reorder parts of a container first select the component, then navigate to the "General Settings" tab in the right sidebar under "EDIT COMPONENT".  In this tab there should be an "Order" setting preceded by whatever component is being selected at the moment.

Image alt text

"General Settings" tab for the Stepper System component

Image alt text

"General Settings" tab for the Stepper System component

Click the gripper and drag and drop the Stepper section into position. 

Image alt text

The gripper on the left of the "Step 2" Stepper section

Image alt text

The gripper on the left of the "Step 2" Stepper section

Last Updated On 2024-03-23
Was this page helpful?
Last Updated On 2024-03-23
Was this page helpful?
ON THIS PAGE
Container Components
Placing Components in Containers
Reordering
Back to top