Customize the editor view
The page builder Editor mode consists of three main areas: the content area in the middle, and two collapsible panes, one on each side. There is also a top toolbar with controls for navigation and other important functions.
With the top toolbar, you can:
-
Choose which project, environment, website, and language version to work on.
-
Switch on the Shared layout mode so your changes to the layout of the page are also applied to all its versions.
-
Navigate between Editor, Templates, Personalize, and Analyze modes.
-
Open a preview of the page in a new tab of your browser with
. -
Publish the page, and optionally its subpages and other language versions of the page.
The left-hand pane changes according to the option selected in the top toolbar. In Editor mode, the left-hand pane is split into two tabs:
-
The Pages tab shows the pages for the current site.
-
The Components tab displays the different components available for the current site.
When you select a page in the site tree in the left-hand pane, it opens in the editor view in the middle of the screen. On the page top toolbar, you can:
-
Choose the version of the page you are working on, or create a new version of the page.
-
Choose to work on the default editing host, or a local host.
-
Undo or redo your recent changes.
-
Use device icons for viewing how the page will look on different types of devices.
The right-hand pane contains information about and possible configurations for items selected in the editor view, for both components and placeholders. 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. This is also where you set up A/B/n tests.
This topic explains how to customize the editor view in the page builder.
Open a page in the editor
To open a page in the editor:
-
Click the Editor tab on the top toolbar to view the Pages site tree in the left-hand pane.
-
In the site tree, click the page or item you want to edit.
-
The page opens in the editor area in the middle of the screen.
-
To open the settings of the page in the editor, in the site tree, click
> Settings.
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:
-
At the bottom of the editor view, click the corresponding Collapse/Expand icon
.
Select a site or language
The name of the project and environment, the current site, and the language version of the site are displayed on the top toolbar.
To select a different environment, site, or language:
-
On the top toolbar, click the relevant selector and select an option from the drop-down menu.
Change 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:
-
On the page top toolbar, click the device icon you want to use for the current page.
-
Some types of devices might not be visible. To make them appear, open the list of devices and select the type of device you want to display.
Open a preview of the page
To open a preview of the current page in a different browser tab:
-
In the top toolbar, click Preview
.
The new browser displays the page that is currently opened in the editor. You can navigate to other pages in the same way as on the live website by clicking links and menus on the page.
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.