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.
  • 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 Designer 2018, 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.
  • 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.
    • 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.
    • Autoplay interval. Available for carousel containers. Allows carousel slides to automatically cycle based on the selected interval, in seconds. When set to 0, autoplay is disabled.
    • Rerun content. Available for carousel containers. When the Autoplay interval is set to a value higher than 0, the Rerun content option allows you to refresh the content on each slide of a carousel container when it appears. If Rerun content is not enabled, then the content on each slide only loads the first time it appears.
  • Content Customization. Provides access to the following properties.
    • Lock content. If disabled, allows users to change content in the panel at run time. This property is enabled, by default.
    • Path. Allows you to set the initial directory that users will see when clicking the Add content button.

      Note: To see the full value displayed in the field, widen the Properties panel area by clicking the separator and dragging it to the left.

    • Lock path. When enabled, limits the content selection area to the directory that is specified in the Path property. This property is enabled, by default.
    • Flatten list. If enabled, hides the folder hierarchy and the breadcrumb trail within the directory that is specified in the Path property. This property is disabled, by default.

      Note: This property is especially useful if you want to display different widgets to different users based on their roles. For example, you can create a series of subfolders with content and then apply security rules to show and hide these subfolders from users based on their group membership. Then you can configure the Path property to display the parent of these subfolders and flatten the list. Now each user can only see the widgets they are authorized to see in a simple list without any folders to navigate.

    • Hide tags. If enabled, hides tag buttons in a flattened list. This property is disabled by default. It remains inactive when the Flatten list property is disabled.
    • Initial view. Determines the initial view of the directory that users will see when they click the Add Content button. The options are Grid and List.

      Note: Users can change the view at run time inside the Select Item dialog box.

  • 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 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.