Line

Table of Contents

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 customize Line. click on the element to open the editing menu:

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

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

  • Style Settings: Customize color, and line type:

Deleting the Line

  • 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 Backward. Click Move Backward 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.