Using Page Builder

Content authors can use Page Builder to create and edit webpages and the content that appears on these webpages. Most users needing to create and edit pages will work exclusively in this tool.

The components and page templates have been developed with a goal of ensuring that most functional needs can be met using Page Builder. It is the most user-friendly tool in the Sitecore XM Cloud suite.

Nav-PageBuilder — Figure 1: The Tools menu, viewed upon clicking on the XM Apps Dashboard icon, indicates the active environment (e.g., MSU-White / prod icon) and allows users to select an application for working on a website. The Page Builder app has been marked with a red box.

Page Builder User Interface

Expand the tabs below to review the different areas of Page Builder.

Global Toolbar

The Global Toolbar appears at the top of the window. Selections on this toolbar will apply to all screens in Page Builder. Use this toolbar to:

Navigate to the XM Cloud Apps Dashboard by clicking the X icon
Open another XM Cloud app, such as Content Editor, using the dropdown arrow next to the X icon
Navigate to a different website or environment using the Site Name dropdown menu
Select a language variant of the website to work on (for multilingual sites)
Toggle between Editor, Templates, Personalize and Analyze modes
Preview the page in a browser window
Publish the page

Screenshot of Sitecore Page Builder with the top navigation bar outlined with a red box — Figure 2: The Global Toolbar has been outlined in a red box.

Local Toolbar

The Local Toolbar appears below the Global Toolbar. Settings here are specific to the selected website. Use this toolbar to:

Change the version of the page being edited
Refresh the Canvas (i.e., editing panel)
Undo the immediate past action
Redo an action
Preview the page on different types of devices

Screenshot of Sitecore Page Builder with the preview navigation bar outlined with a red box — Figure 3: The Local Toolbar has been outlined with a red box.

Left Side Panel

The Left Side Panel appears along the left side of the screen. Here, users can view the site and access editing functionalities. Use this toolbar to:

Access the content tree (left icon) to locate and select a page to edit
Access the component menu (right icon) to place components on the page
Select an item to view in the canvas (see Fig. 5)

Screenshot of Sitecore Page Builder with two icons on the left side outlined with a red box — Figure 4: The Pages and Components menu icons have been outlined with a red box.

Screenshot of Sitecore Page Builder with the left side content tree menu outlined with a red box — Figure 5: The Pages menu is open and the content tree is visible.

Right Side Panel

The Right Side Panel appears along the right side of the window. The content here varies depending on what is selected in the main editor view area. The pane provides information and possible actions for the page or selected component, field or placeholder. If the pane is not visible, click the small arrow in a circle icon to expand the pane. Use this pane to: