Line

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 is a Line?

A Line is a horizontal line element that can be added between other elements on a webpage to visually separate content. It can be placed within any section and between sections.

Adding a Line

Option 1

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

  • Choose the Line 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:

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

Moving the Line

To move a line:

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

Resizing the Line

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

  • To resize the line 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 the line 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 the Line

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

Editing the Line

To edit the element, click on it and choose the Edit button that appears in its toolbar:

  • Width: Choose from predefined widths (25%, 50%, 75%, 100%).

  • Alignment: Align the line to the left, right, or center.

  • Line Settings: Customize color, spacing, and style.

Duplicating the Line

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

  • The duplicate of the element will appear immediately.

Deleting the Line

To delete a line:

  • Click on it and choose the Remove button [Bin] that appears in its toolbar:

  • The element will be removed immediately.