Editing Page, Section, and Container Properties


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

The following properties are available when you select an entire page.

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.
  • Show page heading. Toggles between hiding and showing the title in the header.
  • Show page toolbar. Toggles between hiding and showing the page toolbar.
    • Show page refresh. Toggles between showing and hiding the refresh button on the page toolbar.
    • Show export. Toggles between showing and hiding the Export menu on the page toolbar. You can export a page as a PDF or as a .png image. Select just the PDF or just the Image check box to make just one of these export options available from the page, in which case the Export menu turns into an Export button.
  • Include Page Filters. Select this check box to add a filter toolbar to the page, even if no filters have been added yet. Clear this check box to remove the filter toolbar.

    If Include Page Filters is selected, you can select one of the following options to change the position of the filter toolbar:

    • Below Header. The filter toolbar is placed below the page toolbar and header. This is the default.
    • Above Header. The filter toolbar is placed above the page toolbar and header.
    • In Modal. The filter toolbar is accessible in a modal window overlaid onto the page. Click the Show filters button on the page toolbar to open the modal window and make filter selections.

Format tab:

  • Theme. Allows you to select a theme for the page. The default options are Designer 2018, Light,  Midnight, and Vivid. Administrators can configure additional themes that will be available to users from this property. For more information, see Applying Themes and Styles to Pages.
  • 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 from the canvas 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. Additional header text formatting can be done using CSS. For example, you can assign a class to the page and use the font-family property to change the header text font.

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.

Format tab:

  • Style. Allows you to choose a style for the selected section, or select Default to use the theme selected for the page.
  • 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.

  • Number of Columns. Allows you to change the number of columns in a section, enabling more granular panel widths. Panels snap to the nearest column and row when you resize them. 12 columns are used by default, and 28, 45, and 80 column options are also available.

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.
    • Show title. Toggles between hiding and showing the title.
    • Show 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.
  • Container Customization. Provides options that allow users to change the content in a page at run time. Includes the following properties.
    • Lock container. If disabled, allows users to change content in the panel at run time. This property is enabled by default.
    • Select content from. Allows you to set the initial directory that users will see when they click 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 right.

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

Format tab:

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

The following options are available for content items in a page assembled from existing content. New content items in a page provide standard content creation options, in addition to these.

Settings tab:

  • Content. Provides access to the following properties.
    • ID. Contains a read-only unique CSS identifier of the content item. 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.

Format tab:

  • Content Format. Provides access to the following property.
    • Theme. Select a theme to apply to the content item. You can explicitly select a theme, or have the item inherit the theme used in the page. When the item is part of a page assembled from existing content, you can also select Use content theme to use the theme originally applied to the item, ensuring that it does not get overwritten by the page or portal theme. For more information, see Applying Themes and Styles to Pages.