Panel

Please Note: This article only applies to Website, Website+Marketing and eCommerce packages created on or before 18 December 2024.

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

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

  • Choose the Panel element from the modal that appears:

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, or Bottom 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: