Design Mode

Specialists can add additional component options to pages.

Classic Flex UI

This information refers to the Classic version of the UBCMS.


Components that were not intended for a particular page type or layout may behave unexpectedly on published pages and their use is not supported.

Please only apply the standard components from our Components Library. These have been tested and are fully supported for general use in the UBCMS.

(In Design Mode, you'll also see untested and unsupported components that were in the original software installation, as well as experimental components that may change markedly during development.)

On this page:


A 'design' is an AEM concept separate from page, template, or site. Your site's design is set in Page Properties on the Advanced Tab of your home page -- the path to a design can be given on child pages, or if left unset, the parent page's design is used, recursively. Among other details, the design is where the settings for which components are available in each 'paragraph system' are stored.

We create a new design for each UBCMS site, configure it on the site's home page and let all the webpages inherit from there. Normal users have no way of creating a new design, so it is very uncommon for a site to have more than one design. It is possible for the design value to be adjusted, possibly set to another site's design, but this is generally avoided and can cause layout problems. Shared content pages have their own design settings, which are normally shared throughout all shared content, regardless of individual sites.

In normal conditions, the Sidekick may provide different component choices on different pages because the availability varies depending on the paragraph system (basically the page layout of the different columns shown on that page, like the main column or sidebars). The available paragraphs are limited by the page layout template chosen when the page is created, or later by any changes in Page Properties.

On any page, you can see the paragraph system names by entering Design Mode ("Design of par", "Design of leftcol", "Design of top", etc.). Click the associated Edit button and you can then see or change the options. Each paragraph must be changed separately -- there is no page-wide setting.

  • e.g. a home page layout might have top, col-1, col-2, col-3, col-4, and bottom
  • e.g. three column page with a banner might have par, banner, leftcol and rightcol
  • e.g. a two column page might have just par and leftcol.

Back in Edit Mode, if you double-click the "Drag components here" areas, it will show a list of just the components that can be added to that part of the page. For normal pages, every component in the Sidekick can be added somewhere, but most cannot be added everywhere. And even for pages adjusted using Design Mode, the changes just modify one paragraph -- additional components turned on using Design Mode cannot just be added globally anywhere on the page.

Changes made in Design Mode govern that 'paragraph system' for ALL pages that share that design, which in practice is typically your entire site. And the changes impact all users.

This all applies to Shared Content, too, except that most shared content is within a common area (/content/shared), not within any one site's path, and thus all this content shares one overarching design. So we don't recommend modifying shared content design, and thus only admin users can do so. Also, the design settings for shared content are stored with our code and will be reset to those tracked settings after each code deployment.

How to Use This Feature

Design Mode icon located at the bottom of the Sidekick.

The Design Mode icon is at the bottom of the Sidekick.

Enter Design Mode by clicking the small framing square icon at the bottom of the Sidekick.

Your page will switch to a view like Preview Mode, and reveal places to edit each of the page's 'paragraphs' (columns).

Location of the paragraph edit bars located at the top of each page column.

Click the Edit link at the top of the main column or right sidebar (highlighted in this screenshot).

Click the Edit link on the paragraph bar for the desired 'paragraph', such as the main center column, or the right sidebar, to reveal a list of ALL components in the UBCMS, including many that we do not normally use (e.g. Experimental Components).

Settings being adjusted for one of the page columns.

Settings being adjusted for a page column; e.g. addition of Experimental Components.

From the visible options, scroll down to find the desired component group, then select the entire group or choose one or more individual components from within that group. (Experimental Components is selected in this example.)

Once you have made the changes, click Save and then the Edit icon on the Sidekick. If you added an entire component group, it will be available in the Sidekick. If you just added single components, they will usually only be available by right-clicking in that 'paragraph' area and selecting New.

Changes made in Design Mode apply to all pages of that type throughout your website. For example, your home page is a unique page type, while many of your secondary pages use one standard page template.  

Changes made in Design Mode are applied site-wide but template-specific; i.e. they will impact all pages throughout your website that use that same template. You may need to adjust your home page as well as a standard template secondary page.

Changes made in Design Mode become available for all authors who have access to your website.

How to Reset Components after Unwanted Changes

Design mode is site-wide, but template-specific. There are probably only two templates in use on your site (other than shared content, which cannot be adjusted): the home page and the rest of the pages (all the one-, two- and three-column variations are the same template). Follow these instructions for your home page and also for one other page.

If you are not sure where you may have enabled extra components, the 'one other page' should be a page of type Three Column (with banner), which has every possible paragraph system on it. You can create a page like that just to follow these instructions and then delete it afterwards.

Are there non-standard headings in the Sidekick? You should ONLY see:

  • Core Components
  • Experimental Components (added optionally)
  • Form Components
  • More Components
  • Related Content Components (not on your home page)
  • Sidebar Components
  • Specialist Components

If you see more than this:

  1. Enter Design Mode by clicking the right-angle-ruler icon at the bottom of the Sidekick.
  2. Click the Edit button at the top of each 'par' (paragraph system) on the page where you think there may be extra components — these are the separate areas for content in the template. On the home page there are several of these paragraph systems. On the other pages, there may be more or less depending on the Page Type that was originally chosen when the page was created.
  3. Scroll through the list under Allowed Components and uncheck any headings not in the list above.
    • Some headings may be expanded with individual components selected. If the heading is in the list above, leave that section alone. It is probably correct. If it is not in the list above, uncheck all components under that heading by de-selecting the entire section.
  4. Click Ok to save the change.
  5. Repeat for other paragraph systems or continue to the next step and test and see if you need to try others.
  6. Go back to Edit Mode by clicking the triangle icon at the top of the Sidekick.
  7. If the Sidekick now only has the correct headings, you are done. Otherwise repeat the above steps.
  8. Remember to check both the home page and an inside page.

Was This Information Helpful?

(so we can thank you or request more details)
( addresses only please)