Panel

The Panel is the layout element to separate two text sections and highlight important text parts or images. You can customize a panel by adding the background photo and changing the background color, position, size, etc.

Adding a Panel

Option 3

  • Hover over the desired section, and click the Add Element:

  • Choose the Panel element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section.

Moving and Resizing a Panel

Please refer to the Elements Management article to learn more about moving and resizing elements.


Customizing a Panel

Hover over a Panel to display the Edit button in its top-right, and modify the item:

Background Tab

  • Background Color. Set the background color for your Panel by clicking the Square icon on the right to Background Color functionality.
  • Background Photo. Drag and drop the background image onto the Add Photo placeholder.
  • Opacity. Change the Opacity settings.
  • Position: Choose the panel's position (Fill, Top, Left, Right, Bottom).

Please Note: After changing a Position, an additional Resize settings slider appears at the bottom.

  • Resize. You can Resize the image after changing its Position:

Please Note: The option is available only with the following Positions: Top, Left, Right, and Bottom.

Design Tab

Border

  • Opacity. Use the slide control to adjust the thickness of the border.
  • Border Color. Select the color by clicking the Square icon on the right to slide control.
  • Border Location. Choose a separate border location by clicking a special Icon and choosing a preferable option among: All, Top, Left, Right, or Bottom:

Radius

  • Opacity. Use the slide control to adjust the thickness of a shape radius.
  • Radius Color. Select the color by clicking the Square icon on the right to slide control.
  • Radius Location. Choose a separate Range of Radius: All,Top left,Top right,Bottom right, orBottom left.

Please Note: Panel Border Radius is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will receive a square panel, and the maximum roundness at 40%.

Shadow

  • Opacity. Use the slide control to adjust the intensity of the shadow effect
  • Pick a Shadow Color, click Apply and choose a Range of Shadow. 

Hover Effects

  • Hover Effects: Configure visual effects when hovering over the panel: Sliding Up, Sliding Down, Sliding Left, Sliding Right, Zoom In, Zoom Out, Transparency:

Deleting Panel

  • Hover over the Panel element and click the Delete button [x] in its top-right:

Related Articles