Shape


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.

Add and manipulate various geometric and organic shapes with the Shape element. The Shape Element can be placed on any layer above the Background Image, including behind or above Text, Photo, etc.

Adding a Shape

Option 1

  • Hover over the desired section and click Add Element:

  • Choose the Shape element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

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 and drop it using the grid.

Customizing the Shape

  • To customize Shape. click on the element to open the editing menu:

Changing the Shape

  • Click the Shape icon in the editing menu and choose the desired shape from a variety of predefined options:

  • To resize the Shape element, locate and drag one of the small square 'handles' on the corners or sides of the element box. As you drag, you will see the element resize in real-time:

Color Settings 

  • Click on the Color icon in the editing menu, and select your desired color from the color picker, or enter a specific HEX color value:

  • Drag the control to set the Opacity level:

  • You can also choose the color from Theme or Page colors: 

Style Settings

  • Click the Style icon in the editing menu to access the Style settings:

Border

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

  • To change the border color, click 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 clicking a special Icon and choosing a preferred option among Top, Left, Right, Bottom, or All:

Please Note: The Border setting allows you to change the border radius of the Square shape only.

  • Change the value in the Slide Control to set the border width.

Please Note: If the value on the Width slider control is set to zero, the Border element is disabled.

Corner Radius

Please Note: The Corner Radius setting allows you to change the border radius of the Square shape only.

  • 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: The Curvature 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 Shape

  • Click the Remove button [Bin]:

  • The element will be removed immediately.

More Menu

  • 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.
  • Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
  • Move Forward. Click Move Forward or Ctrl+⇑ to move your element.

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.