Panel

Please Note: This article applies to Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before this date, please refer to the article Elements Management.

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 a background photo and adjusting the background color, position, size, and other settings.

Table of Contents

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

  • To customize Panel, click on the element to open the editing menu:

Background Tab

  • Background Color. Set the background color for your Panel by clicking the Square icon on the right of the 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. The option is available only with the following Positions: Top, Left, Right, and Bottom.

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

Style Tab

  • Proceed to the Style tab to modify:

Border

The Border allows you to add borders to images and change their color settings. 

  • To change the border color, tap the Square icon on the top left of the slide control. Select the overlay color and drag the control to set the Opacity level for the Border.
  • You can change a separate Border Location by tapping a special Icon and choosing a preferred option among Top, Left, Right, Bottom, or All.
  • Change the value in the Slide Control to set the border width.

Please Note: If the value on the Slider Control is set to zero, the Panel Border element is disabled.

Corner Radius

The Corner Radius setting allows you to change the border radius of the Panel.

  • Choose a range of radius for all corners, or change a separate range of radius by choosing a preferable option among: Top left, Top right, Bottom right, Bottom left:

  • Change the curvature of all corners by using the Curvature slider control:

  • You can also select the specific corner to change the curvature manually.

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 get a square image at 50% - maximum roundness.

Drop Shadow

  • Click the Square icon on the top left to open the color picker and change the color of the shadow:

  • Change the percentage value to set the shadow intensity.
  • Blur. Change the Blur intensity with the slider control.
  • Position. Change the shadow position with the Left/Right and Top/Bottom slider controls.

Deleting Panel

  • Hover over the Panel element and click the Delete button in the menu:

More Settings

  • Click the More icon in the editing menu to access the available options:

  • Cut. Click Cut or Ctrl+X to cut your element.
  • Copy. Click Copy or Ctrl+C to copy your element.
  • Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
  • Delete. Click Delete to remove the element. The element will be deleted immediately.