Editing Page, Section, and Container Properties

The Properties panel displays the properties for the element that is selected. To access container properties, click a container or item with the Properties panel open. To access section properties, click the grid inside the canvas. To access page properties, click the page header or the toolbar. If the page header and the toolbar are hidden, you can access page properties by clicking the canvas outside a grid section.

The following properties are available for pages.

Settings tab:

• ID. Contains a read-only unique CSS identifier that you can reference in custom JavaScript and CSS code.
• Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
• Title. Toggles between hiding and showing the title in the header.
• Toolbar. Toggles between hiding and showing the page toolbar.

Style tab:

• Theme. Allows you to select a theme for the page. The options are Default, Light, and Midnight. Administrators can configure additional themes that will be available to users from this property.
• Margin. Controls the size of the margin between the border of the page and the content.

  Note: If the margin property is set to 0, you cannot select a section on the page or access the section shortcut menu options. As a workaround, change the margin property value to 20px temporarily to gain access to the section and its options.

• Maximum width. Controls the maximum width of the page.
• Page Heading Style. Provides a selection of typeface styles for the page heading.

The following properties are available for sections.

Settings tab:

• ID. Contains a read-only unique CSS identifier that you can reference in custom JavaScript and CSS code.
• Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
• Collapsible. Toggles between collapsible and noncollapsible modes of the selected section.
• Row height. Sets the height of the section that is currently selected on the canvas. The default value is 60px.

  Note: Changing the row height does not change the margin, which can be configured on the page level.

Style tab:

• Section Style. Allows you to choose a style for the selected section.

The following properties are available for containers.

Settings tab:

• Container Settings. Provides access to the following properties.
  • ID. Contains a read-only unique CSS identifier that you can reference in custom JavaScript and CSS code.
  • Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code.
  • Title. Toggles between hiding and showing the title.
  • Toolbar. Toggles between hiding and showing the container toolbar.
  • Show On. Allows you to hide the selected container or item from displaying on specified devices. The options include desktop, tablet, and mobile.
• Content. Provides access to the following properties.
  • ID. Contains a read-only unique CSS identifier of the panel in which content runs. You can reference this ID in custom JavaScript and CSS code as well as drill-down targeting procedures.
  • Classes. Allows you to add one or more custom CSS classes that you can reference in custom JavaScript and CSS code as well as drill-down targeting procedures.

Style tab:

• Container Style. Allows you to choose a style for the selected container or item.