Adding Panels to a Responsive Container


You can utilize responsive panel in panel behavior by adding items to a panel in panel container. When you run the page, top-level containers in the page, including the panel group container, fold responsively based on the size of the browser, and the panels within the panel group container fold based on its current size, independent of the rest of the page. Additionally, items in the panel group container are kept together when folding occurs, making the panel group container a good way to group together closely related content that you want to be visually separated from the other items on the page. This is particularly true when related items are arranged vertically, as items typically wrap based on rows.

To create a panel group container, click the Container tab on the sidebar, select the Panel group container, and drag it onto the canvas. You can then resize it like any other container.

To add a panel to a panel group container, drag a content item or another container into it. You can then resize the new container inside the panel group container.

You can use the Properties panel to add a toolbar and title to the panel group container. Properties applied to the entire page or to the panel group container, such as margins or styling, affect all panels within it, unless specifically overridden.