Page Editor

Pages are ideal for building content structures that do not fit naturally into the schema of a content type. Examples include landing pages and rich, structured documents.

Pages can also be combined with content types and mixins when you want a structured content core and the freedom to adjust its composition.

Page templates can provide a consistent starting structure for content such as products or articles. Editors normally select a content type rather than a page template when creating content; Content Studio resolves a compatible template behind the scenes.

The following concepts define pages and their composition:

Content Studio manages the page component structure and its content. A front end can retrieve this structure through APIs and determine how to present it. Visual editing and preview depend on the available front-end integration. The following sections explain the editorial controls. For the underlying page model and front-end integration, see the Enonic CMS pages reference.

When the content does not yet have its own page setup but a matching page template exists, the page preview is marked Locked. Click the preview to open a context menu, then select Page settings.

This opens Page settings in the context panel’s Inspect tab. The same settings are available later by selecting the Page root in the Page Components tree and choosing Inspect.

A page that uses a template remains linked to it and reflects later changes to the template. To create an editable, item-specific copy of the page structure:

Content Studio copies the template’s component structure and configuration into the content item. The page becomes editable and the Insert tab is activated.

After customization, the page is no longer linked to the original template, and later template changes do not affect it.

Several page templates may be compatible with your content type.

In some cases, you may want to pin a specific template to your content rather than build a custom page. For example, you might choose a different page structure for an article or product.

Follow these steps to pin a template to your content:

The page remains linked to the selected template until it is customized.

You may also create a page from scratch by selecting a root component directly in Page settings.

The Insert tab is available when the page has an editable, item-specific setup. It lists the component types that can be added to the current page. Use these items with the visual drag-and-drop workflow described under Working in the page preview.

You can also insert a component after a selected component or into a region from the component context menu. Layout insertion is unavailable inside another layout.

The Inspect tab follows the current selection. Its title identifies the selected item, such as Page, Part, Layout, or Fragment.

Selecting the Page root opens Page settings. Selecting another component opens its configuration and, where applicable, a selector for its Part, Layout, or Fragment. The fields are supplied by the component’s application and therefore vary between components.

Use Apply when it is shown to save configuration changes to the draft and refresh the preview. Applying changes does not publish the content.

The Page tab in the Content Form contains a tree of the Page root, its regions, and all components. Selecting an item in the tree selects the same item in the page preview, when available, and opens its Inspect view.

The tree is useful when visual editing is unavailable and for navigating nested structures or empty components. Drag components to reorder them or move them between compatible regions, or open an item’s context menu to use its available actions.

When the Content Form is collapsed, the Page Components tree becomes a floating panel above the visual editor, regardless of whether the preview is interactive. Collapse the floating panel to dock it as an icon in the vertical toolbar. Click the icon to reopen it.

When visual editing is enabled, you may click directly on the page to select an element. The Page Editor highlights the element, selects it in the Page Components tree, and opens its configuration in the Inspect tab.

As in the component tree, you may use the context menu to perform actions such as inserting or deleting components.

To add a component, drag a component type from the Insert tab to a region in the preview. The Page Editor indicates whether the current position is a valid drop location. After dropping a Part, Layout, or Fragment placeholder, the component is automatically selected, and you may configure it from the context panel.

Drag an existing component to another valid position to reorder it or move it between compatible regions. Some components occupy the same visual area as a parent Layout or are difficult to select directly. Use Select parent from the context menu, or select the exact item in the Page Components tree.

Empty regions are shown as drop zones:

Empty components are shown as placeholders with icons that identify their component type:

A Part is a configurable component supplied by an application. Parts can represent page elements such as article lists, forms, navigation, or promotional blocks.

The same Part can be used several times on a page, and each instance has its own configuration.

Applications can limit where a Part is available by content type or other rules. See the component filtering reference for the application-side configuration.

A Layout is a configurable container that introduces one or more regions. Layouts are commonly used for columns or other grouped arrangements, and their configuration can control presentation such as relative column widths.

Layouts cannot be nested inside other layouts.

A Fragment references a component stored as a separate content item. The same Fragment can be used on multiple pages, and editing it updates every page that references it.

Fragments can be created from existing components, inserted into pages, edited, or detached through the component actions.

See Fragment for the content-side behavior and lifecycle.

The Text component places a rich-text block directly in a page region. It supports formatting, links, images, media, and macros through the Rich Text Editor.