Elements Management (New Grid)

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:

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.