Elements Management (New Grid)


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

What are Elements?

An element is a pre-designed layout component that you can use to create custom, professional-looking website pages with the Site Editor.

Adding Elements

Option 1

  • Hover over the desired section and click Add Element:

  • Choose the element from the modal that appears:

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

Option 2

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

  • Choose the element:

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

Moving Elements

To move an element:

  • Hover over the element to display the grid. Then, drag the element to a new position:

Resizing Elements

You can resize elements vertically and horizontally in the Site Editor:

  • To resize an element vertically, hover over it, click the resizing control that appears at the top or bottom, and drag it upwards or downwards. Drop the control to save changes.

  • To resize an element horizontally, hover over it to display parallel vertical lines to its right and left. Drag one of the lines to resize the element and release it to save changes.

  • Similarly, you can resize an element by dragging the corners. Release the corner to save changes:

Customizing Elements

To edit, duplicate or delete the element, click on it and switch between the buttons that appears in its toolbar:

Editing Elements

  • Click on the element and choose the Edit button that appears in its toolbar:

  • Switch between Layout and Design tabs to modify the element:

Duplicating Elements

  • To duplicate the element, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately:

Layering Elements

To layer elements within Site Editor, follow these steps:

  • Add a new element over the existing one. The newly added element will be on the top layer:

  • Click on the element and select Move Forward or Move Backward options:

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

Deleting Elements

  • To delete an element, click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be immediately removed.

Grouping Elements

To group elements, follow these steps:

  •  Multi-select two or more elements by pressing Shift+Click of the mouse:

  • Then, click the Group Elements button that appears:

Please Note: You can group a group of elements with other elements/groups via Shift+Click and clicking Group Elements.

  • Drag and drop a group of elements to move it across the page:

Editing a Group of Elements

Click on a group of elements and use the toolbar for the following editing actions:

  • Ungroup elements.
  • Duplicate the group.
  • Delete the group.

Managing Elements within a Group

To access and edit each element within a group, follow these steps:

  • The first mouse click opens the group toolbar; click the desired element within the group to display its toolbar.
  • The standard editing actions will now be available, allowing you to edit, duplicate, move the element forward or backward in the layer order, or delete it:

Please Note: A duplicated element will also be a part of a group. Deleting an element won't affect the other elements within a group.

  • If an element is moved or resized within a group, the group will be expanded to accommodate the new size, but the position of other elements in the group won't be affected:

Element Groups in Mobile View

  • Groups of elements are prioritized as a single element both in desktop and mobile view:

Please Note: Grouping functionality is only available in desktop view; elements cannot be grouped in mobile view.