Add Panels

Similar to the Section Component, the Panels component is a full-width page element in which you add other components. However, with the Panels component, you can add multiple panels for content and set individual backgrounds for each, creating a more varied look as compared to a single section and background.

Managing Panels

To get started, drag the Panels component to a page of your site. Next, click on the component to open the options panel. By default there are two panels in the component, but you can add more by clicking the Add button. To rearrange the order of your panels, click on the three vertical dots of an individual panel and drag it to a different position in the list. You can also delete panels by clicking the red X (note this will delete the content within the panel).

To change the background of a panel, click on a panel in the list. All common background options are available for each panel: none, color, gradient, image, image with overlay.

Layout

Within this option group are a few different options to control how other components display within the component.

• Min Height - This is the minimum height of the component. Enter a different number to increase or decrease this option. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
• Content Align - With this option you can align content to top, middle, or bottom of the component.
• Gap - This option controls the spacing between components within each panel. You can set this separately for different screen sizes as well.

Design

In this option group you can set an overall background for the component itself. This background is underneath whatever backgrounds you set for individual panels, giving you more control over how backgrounds are used across the whole component.

Spacing

There are two options to control spacing in and around the component. Both can be set separately for different screen sizes by clicking the desktop/mobile icon.

• Margin - This option sets the spacing around the component itself.
• Padding - With this option you can set how much space there is around each content area within each panel.