Component Types

Part components are reusable, configurable components that can be placed into any region of a page. This allows content editors to build and customize pages without writing any code. There are no built-in part components, each one is implemented in the application code. Parts are typically created to render custom content, lists of content, forms, etc.

The first step in adding a part component to a page is to edit the page content and open the Insert tab of the Page widget. Click, hold and drag the () icon to the desired location on the page. The part placeholder will now appear as a blue box with a dropdown selector. The same dropdown selector will appear in the Inspect panel of the Page widget. Use any of these two dropdowns to select the desired part component.

Once a part component is selected, the placeholder will be replaced with the actual rendered part, and the Inspect tab will show the part’s config form (if it’s defined in the part schema).

Configurable parts are configured in the context of the current content. This means that the same part component can be added to multiple pages, or even multiple times on the same page, and each instance may have different configuration values.

Layout components are reusable, configurable components (similar to Part components) that can be placed into any region defined in a page component. Layouts themselves define regions where other components can be placed with the Page Editor. The primary purpose of a layout is to enable other components to be placed side-by-side. As of version 6.15, a layout cannot be placed inside another layout. There are no built-in layouts. Each one is custom made in the application code. Layouts are typically created for two or three columns and have configuration options for column widths.

In the Page Editor, drag a Layout component placeholder from the components widget to the desired region on the page. The layout placeholder will now appear as a blue box with a dropdown selector. The same dropdown selector will appear in Insert tab of the components widget. Use one of the selectors to find the desired layout component.

Once a layout is selected, the actual layout will replace the placeholder and its configuration options will appear in the Inspect panel of the Page widget. Just as with parts, config of layout components is optional and has to be defined in a layout schema inside an application.

This layout will only be allowed on a site but not, for example, on a page template or any of custom content types.

The Text component allows content editors to place text blocks into any region on a page without writing any code. Images, videos, and links can also be added inside text components. Macros allow YouTube videos, embedded code, and no-format text to be added as well. The formatting and macro options are the same as those for the HtmlArea inputs that can be found in content types and other configuration forms in the Content Studio. The only difference is that the formatting toolbar is at the top of the page for text components.

In the Page Editor, drag a Text component from the Insert tab of the components widget to the desired region on the page. A cursor will appear inside the text component and editing can begin. If another component is selected, the text component will need to be double-clicked to resume editing.

Alternatively, edit the text component directly in the Inspect panel of the Page widget.

Fragments are reusable components stored as content items. What makes a fragment special is that it uses the same configuration on every page where it’s added. When a fragment content is altered, the change is instantly visible on every page that uses it. All the other components are independently configured.