Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XP User Guide >

Add and Delete Components

Add and Delete Components

What is a Component?

Components are the building blocks for webpages. Components hold content in data fields and then assign predesigned style to the content according to the type of component. Components are created and edited in Content Editor and placed on pages in Experience Editor. 

Component Workflow

The general workflow for using components is to:

  1. Create the page where the component will live. 
  2. Create the new component(s) in Content Editor.*
  3. Place the component(s) on the page in Experience Editor.
  4. Add or edit component content in Content Editor. This can be done before or after it is placed on the page.

*Note: A few components are used as layouts or containers that hold other components created in Content Editor. For example, the TwoColumnContainer_66_33 and the Grid Container components are meant to hold other components. These layout components must be created in Experience Editor. Components created in Content Editor can then be placed in the layout components in Experience Editor. Layout components will not appear in the Content Editor’s Content Tree. 

Some Sitecore users prefer to create the content components in Content Editor first, then reference these when building the page layout in Experience Editor. Other users prefer to lay out the page in Experience Editor first using empty placeholder components and empty data sources, then create the actual page components. Users can use whichever approach is most comfortable to them or a mix. There’s no right or wrong way to build a page, though some approaches may be slower (e.g., hopping back and forth between Content Editor and Experience Editor for each individual component versus doing a batch in one tool before moving to the other tool.)

Instructions

  1. Open Content Editor from the Sitecore launchpad.
  2. In the Content Tree, navigate to the page where the new component will be added.
  3. Expand the page by clicking the arrow to the left of the page name.
  4. Expand the Page Components folder to see the components on the page.
  5. Right-click the Page Components folder to bring up the tool menu.
  6. Select Insert and choose a component to add from the list. The list may scroll if the window is not large enough to display the full list of available components.
A screenshot of the flyout panel that appears to insert a component on a page.
Figure 1: The Insert menu in the Sitecore Content Editor Content Tree. The Insert option is marked with a red box.
  1. Give the component a name that is unique within the context of the page. This is an internal identifier used by Sitecore and will not impact the URL. Use the default name or a more meaningful name to help content authors recall what content will be placed in the component. Component names can use a mix of lowercase and uppercase text.
  2. Click OK.
  3. Confirm that the added component now displays in the Page Components folder. 
  4. Add content to the new component. Click the component to display the component fields. Add images, text, etc., to the component, as needed. A red vertical bar to the left of a field indicates required content. 
  5. Click Save on the navigation ribbon.
A screenshot of the content panel for a rich text component.
Figure 2: An example of a Rich Text component with content fields visible in the content area. The red vertical bar next to the “Content” field indicates that this field is required.
  1. In Content Editor, navigate to the desired page in the Content Tree.
  2. Click the page name. 
  3. Select the Publish tab on the navigation ribbon. 
  4. Click Experience Editor. This page will open in a new browser tab.
A screenshot of the Content Editor publish tab where Experience Editor can be accessed.
Figure 3: The Experience Editor option (marked with a red oval) appears on the Publish tab (marked with a red box) of the navigation ribbon. 
  1. Click “Add a new component” icon located on the Experience Editor ribbon to the right of the Search icon. The icon looks like three rectangles connected by lines. This icon is always available in the top ribbon or in the Home tab. 
A screenshot of the Experience Editor navigation ribbon showing the icons for adding a component and the resulting Add Here buttons on the page rendering.
Figure 4: The “Add a new component” icon appears in the top ribbon (marked with a red box) and in the Home tab of the navigation ribbon. When the icon is selected, "+ Add here" tags will appear in the content area (marked with a red oval).
  1. Click the “+ Add here” button where the new component will be placed. 
    1. Hero banner components are placed above the page breadcrumb links.
    2. All other components are placed below the page breadcrumb links.
    3. When placing a new component, only select a “+” button that is left justified (i.e., at the left edge of the screen) and upon mouse hover displays “Add a new rendering to the ‘MainContent’ Placeholder.”
  2. Choose a component rendering to add to the page. A rendering determines the way that content is displayed on a webpage, including layout and style. Only renderings that are allowed in the identified location will appear in the selection window.
A screenshot of the Select Rendering window that opens in Experience Editor when adding content to the page.
Figure 5: The available renderings for a selected location appear in the window.
  1. Click Select.
  2. Assign associated content. 
    1. For components previously built in the Content Editor, select the component from the list of available page components. The component selected must match the selected rendering type. 
    2. For components not previously set up in Content Editor, select Create New Content, give the component a name unique within the context of the page, and click OK.
Note: Layout components must first be added in the Experience Editor before other components can be placed in them. See the MSU Sitecore User Guide and the Sitecore Component Summary document for details about each component.
  1. Repeat steps 5-9 as necessary for additional components. 
  2. When all components have been placed on the page, click Save (upper left under the Sitecore launchpad icon.) Warning pop-ups can be ignored. Click OK to close them.
Troubleshooting errors: In Experience Editor when saving a new or edited component, content authors may receive a dialog box with an error reading “Some of the fields in this item contain critical errors.” If this occurs: Scroll down in the dialog box to see the cause of the error. Save the component. After exiting Experience Editor, correct the error in Content Editor.
  1. Close the Experience Editor browser tab and return to Content Editor. The placed components will display in the Page Components folder.
  2. Scroll to the top of the screen. Wait for the spinning icon to disappear. Once saved, the Save icon will be grayed out. 
Note: Never edit content in the Content Editor and the Experience Editor at the same time. Edit using one editing tool and save changes before moving to the other editing tool. 

If both Content Editor and Experience Editor are open in browser tabs or windows, the latest Save is retained. When moving from one to the other, press Refresh (not Save) and Sitecore will pull in saved changes from the other tool.
  1. Edit previously created components, as needed, and click Save. 
  2. Add content to any components that were added in the Experience Editor using “Create New Content” and click Save. 
  3. To view the new component(s) without publishing the page, refer to the Preview page for instructions. 
  4. When the page is ready to publish, refer to the Publishing page for instructions.
Note: Extensive content work is usually easier in the Content Editor. Basic content adding and editing may be done directly in the Experience Editor, but it may be challenging to find all the available options. 

Remove or Delete Components

To Remove a Component From Displaying on a Published Page: 

In Content Editor:

  1. Locate the page in the Content Tree (left pane).
  2. Click the page to select it.
  3. On the Publish tab of the navigation ribbon, select Experience Editor. Experience Editor opens in a new browser tab.

In Experience Editor:

  1. Locate the component to be deleted.
  2. Click the component to select it. Verify that the toolbar for this component is displayed.
  3. While selected, click the red X icon to remove the component from the page.
  4. Click Save (blue diskette icon in upper left).
  5. Close the Experience Editor tab.
  6. In Content Editor, select the page in the Content Tree.
  7. Publish the page to remove the component from the published page.
Note: Components removed from the page are still available in Content Editor unless deleted. 

To Delete a Component:

In Experience Editor:

  1. Remove the component from the page following the steps outlined above.

In Content Editor:

  1. Find the page in the Content Tree and expand it.
  2. Expand the Page Components folder.
  3. Locate and select the component to be deleted.
  4. Delete the component using one of two methods:
  5. Right click the component and choose the red X option in the menu.
  6. With the component selected in the Content Tree, click the red X button in the home tab of the top main menu.

 


Documentation updated: June 17, 2024

XP User Guide