Work with sections and separators

Sections divide a page into logical groups. Separators visually divide a page with a solid, dashed, or dotted line. Each section has a grid to help you position components such as buttons, text blocks, and tables. The grid becomes visible when you drag a component on a section or reposition it.

To work with sections and separators: open a page by clicking it in the Site pane and click Edit.

The following describe how to:

Add a section

Add a section to a freeform page:

  1. Click Edit.
  2. Hover on the page to reveal the section buttons.
  3. To:
    • Insert a section above, click the Add Section button at the top.
    • Insert a section below, click the Add Section button at the bottom.
  4. When you are finished editing, click Save.

Remove a section

Remove a section from a freeform page:

  1. Hover in the main white area of the section to reveal the action buttons on the right.
  2. Click Remove
  3. When you are finished editing, click Save.

Configure a section grid

Configure a section grid:

  1. Hover in the main white area of the page to reveal the section buttons.
  2. Click Edit Section.
  3. Enter values for:
    • Number of rows
    • Grid Gap: Sets the gap between the columns and the rows in pixels.
  4. When you are finished editing, click Save.

Move a section

Move an existing section:

  1. Hover in the main white area of the page to reveal the section buttons.
  2. Click Move Up or Move Down.
  3. When you are finished editing, click Save.

Add a separator

To add a separator:

  1. Hover near the header and click Add elements.
  2. Click Separator. A separator appears on the page.
  3. Drag the separator to the appropriate location.
  4. Click the edit pen to change:
    • Line style
    • Color
    • Width
  5. Use the handles to re-size the separator.
  6. Grab the separator to move it.
  7. When you are finished editing, click Save.

Remove a separator

To remove a separator:

  1. Select the separator. The component toolbar displays:
    Toolbar

  2. Click the trash can icon.

The following describe how to work with: