How can I manage the layer order of components?
Managing the layer order of components allows you to control how elements are stacked in your document. By adjusting the order, you can ensure that key elements are displayed on top or behind others, creating the desired visual hierarchy.
When you right-click on a component, you will see the options "Bring to Front" and "Send to Back" in the context menu. The "Bring to Front" option moves the selected component above all other components, while "Send to Back" places it behind all other components, giving you full control over their arrangement and display order.

The exception is the Image component, which is always displayed as the first layer on the page, unless it is placed in the Container component.
If the Image component is placed on the page, then it is always rendered as the first layer and no other components can be rendered behind it. To overcome this limitation, you can place the Image component and other components into the Container component, where the layer order is respected, allowing you to send the required component(s) behind the image.


Container component
How to set a Background Image (Watermark)?
Image component
When you right-click on a component, you will see the options "Bring to Front" and "Send to Back" in the context menu. The "Bring to Front" option moves the selected component above all other components, while "Send to Back" places it behind all other components, giving you full control over their arrangement and display order.

The exception is the Image component, which is always displayed as the first layer on the page, unless it is placed in the Container component.
Image component
If the Image component is placed on the page, then it is always rendered as the first layer and no other components can be rendered behind it. To overcome this limitation, you can place the Image component and other components into the Container component, where the layer order is respected, allowing you to send the required component(s) behind the image.
Editor view

Preview

Related articles you may find helpful
Container component
How to set a Background Image (Watermark)?
Image component
Updated on: 21/01/2025
Thank you!