Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore User Guide >

Using Page Builder

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 SitecoreAI suite. 
 

A list of SitecoreAI tools includes Strategy, Channels, Design studio, Page builder, Content editor, Performance and Agentic studio. Page builder is outlined with a red box.
Figure 1: The Tools menu, viewed upon clicking on a SitecoreAI environment dashboard icon (e.g., MSU-Green / prod icon), indicates the active environment (in this case, MSU-Green / Prod) and allows users to select a tool for working on a website. The Page Builder tool has been marked with a red box.

Page Builder User Interface

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

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 SitecoreAI Dashboard by clicking the dotted circle icon on the left
  • Open another SitecoreAI tool, such as Content Editor, using the dropdown arrow next to the dotted circle icon
  • Navigate to a different website or environment using the dropdown arrow next to the active site name. This opens the Site Name dropdown menu.
  • Select a language variant of the website to work on (for multilingual sites) using the language dropdown menu. The default setting is "English."
  • Toggle between Editor, Templates, Personalize and Analyze modes by clicking the corresponding icon.
  • Preview the page in a browser window.
  • Click Site dashboard to open the Sitecore overview analytics in a new window.
  • Click the puzzle piece icon to open the Apps menu. As of January 2026, there are no additional applications installed for MSU's Sitecore. Documentation will be added to this website if future apps are enabled.
  • Click the questionmark icon to open the Sitecore help menu. These reference documents are general to Sitecore and not specific to MSU's environments.
  • Publish the page. See "Publish or Unpublish a Page" for additional directions. 
The global toolbar is outlined in red
Figure 2: The Global Toolbar has been outlined in a red box.

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
The local toolbar is outlined in red.
Figure 3: The Local Toolbar has been outlined with a red box.

The Left Side Panel appears along the left side of the screen. Here, users can view the site and access editing functionalities. Icons appear at the top of the side panel control the content visible in the side panel (see Fig. 4). 

The pages, layers and component view selection icons are outlined in red
Figure 4: The Pages and Components menu icons have been outlined with a red box.


Use this toolbar to:

  • Access the sitemap (left icon) to locate and select a page to edit (see Fig. 5)
  • Access the layers menu (center icon) to see all components as they appear nested on the page (see Fig. 6)
  • Access the component menu (right icon) to place components on the page (see Fig. 7)
  • Select an item to view in the canvas (see Fig. 9)
The left side panel is outlined in red.
Figure 5: The Sitemap menu is open and the content tree is visible.
The left side panel displaying layers of items on a page.
Figure 6: The Layers menu is open and the page content layers are visible.
The left side panel menu displaying components that can be placed on a page.
Figure 7: The Components menu is open and component options are visible.

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:

  • Configure components with the Design tab
  • Assign content and configure certain content elements to components with the Content tab
The right side panel is outlined in red.
Figure 8: The Right-hand Pane has been outlined with a red box.

When a page or item is selected in the Content Tree, it will appear in Editor View in the canvas in the middle of the screen. 

The Edit canvas area is outlined in red
Figure 9: The Editor View canvas area has been outlined with a red box.

Create a Page

Step-by-step instructions for adding a page to a website.

Learn more
A rectangle with green bars at the top and bottom representing a header and footer and a gray vertical bar on the right representing a side menu panel. A bright green plus sign sits on the middle of the main white space.

Page Layouts

View information and use cases for the available page templates and components that can be used to build page layouts.

Learn more

Component Guide

View documentation, including use cases, best practices, data field explanations and step-by-step instructions for working with components.

Learn more

Documentation updated: Jan. 13, 2026

Is there an issue with this documentation? Report it here.