Customize the editor view

The XM Cloud Pages Editor mode consists of three main areas: the content area in the middle, and two collapsible panes, one on each side.

Screenshot of an XM Cloud Pages front page.

The left-hand pane changes according to the option selected in the side toolbar. In Editor mode, the left-hand pane is split into two tabs. The Site tree shows the pages for the current site. The Components tab displays the different components available for the current site. Using the side toolbar, you can navigate to other functionalities of XM CLoud Pages, such as Templates, Personalize, and Analyze.

When you select a page in the content tree, it is displayed in the editor view in the middle of the screen.

The right-hand pane contains information and possible configurations about items selected in the editor view, be it a component or a placeholder. You can use the right-hand pane to configure and style components, assign content to components, or apply formatting to written content in rich text fields.

With the top toolbar, you can choose which website, which version of the page, and which language to work on. You can use device icons for viewing how the page will look on different types of devices, or open a new tab with a preview of the page. You can also Preview and Publish a page.

This topic explains how to use the Pages toolbars to customize the editor view in XM Cloud Pages.

Open a page in the editor

To open a page in the editor:

  1. Click the Editor tab in the side toolbar to view the Site tree in the left-hand pane.

  2. In the Site tree, click the page or item you want to edit.

  3. The page opens in the editor area in the middle of the screen.

Note

If you know the item ID of the page that you want to open, you can edit the URL in the address field of your browser to navigate to it.

Make more room for the editor

You can make more room for the editor by collapsing the side panes.

To collapse or expand the right or left pane:

  • In the editor view, click the corresponding Collapse/Expand icon .

Select a site or language

The name of the current site is displayed in the site selector, and the current language is displayed in the language selector.

To select a different site or language:

  • In the top toolbar, click the selector and select an option from the drop-down menu.

Switch the device view

XM Cloud applies responsive design to the pages on your site, so pages adjust to the size of the device they are displayed on. The page editor can display the current page as it appears on different devices.

To view the current page with a different device layout:

  1. Click the device icon you want to use for the current page.

  2. Some types of devices may not be visible. To make them appear, open the list of devices and select the type of device you want to display.

    Click on the arrow to open the list of device types.

Open a preview of the page

To open a preview of the current page in a different browser tab:

  • Click Preview .

The new browser displays the page that is currently opened in the editor. You can navigate to other pages as you would on the live site by clicking links and menus on the page.

Note

When opening the preview in a new tab of a Chrome browser, you also have the option to use the Inspect Elements tool to see the page in different viewport sizes.

Do you have some feedback for us?

If you have suggestions for improving this article,