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

Add and Delete Components

Add and Delete Components

What is a Component?

Components are the building blocks for web pages. Components hold content in data fields and then assign predesigned style to the content according to the type of component. Components are most commonly placed and edited in Pages. They can also be placed in Pages and then edited in Explorer or Content Editor.

Component Workflow

The general workflow for using components is to:

  1. Create the page where the component will live. 
  2. Create and place the new component(s) in Pages.*
  3. Add or edit component content in Pages.** 

*A few components are used as layouts or containers that hold other components created in Pages. For example, the Two-Thirds Sublayout and the Grid Container components are meant to hold other components. These layout components are added in Pages, and then additional components are added into the layout cells. Layout components will not appear in the site Content Tree. 

**Some components require using Explorer or Content Editor to edit content. For example, Main Navigation content is edited in Content Editor. Video Player video links or files are added in Explorer or Content Editor. See specific component documentation for more information on each component.

Component Toolbar

When a component is selected and active on a page, the component toolbar will appear. The toolbar icons are as follows:

  1. Grab – Use to reposition the component.
  2. Select parent element – Use to select the next level component.
  3. Name – Use to identify the type of component selected. 
  4. Move up and Move down – Use to move the component up or down one position.
  5. Select content item – Use to assign a content item to the component.
  6. Open in Explorer – Use to open the selected component in Explorer for further content editing.
  7. Delete – Use to remove the component from the page layout. This does not delete the content item data. 
Screenshot showing a Grid Container component menu bar with each icon numbered
Figure 1: The component toolbar for a selected Grid Container component. Numbers have been added to correspond to the icon legend listed above. 

Instructions for Using Components

In Pages:

  1. In the site tree, locate the page where a component will be placed. Click the page name to select.
  2. Click Components on the left panel menu to switch to the Components tab.
  3. Locate the desired component in the Components menu.
  4. Click and drag the component tile onto the page and release where the component will be placed.
Quick tip: Dark and light purple lines will indicate where a component can be placed. Red lines and shading will appear if a component cannot be placed at the cursor’s location.

Assign content item:

  1. To use an existing content item, select it from the list and click Assign.
  2. To create a new content item:
    1. Hover to the right of the Data table until an icon appears and click to select the “+” icon.

      Note: Users may opt to nest the content under another item line, such as within an accordion tab, by instead clicking the “+” next to that line item.
       
    2. Click to select the appropriate content item type from the available list. 
    3. Enter a name for the content item. The name must be unique within the page. Click away or hit the enter key to save the name.
    4. Click Assign.
  3. Edit content by following the relevant component documentation.

In Pages:

When working with an empty page or with components that can contain other components (i.e., Grid Container, Accordion tabs), placeholder cells will appear on the page. These are empty blocks where components can be added and are indicated by a purple “+” icon in a circle.

Note: In some cases, the placeholder cells and “+” icons will not appear until a specific component variant is selected in the Advanced styling panel of the right-side component menu.
  1. Click on the “+” icon where the component is to be added.
  2. Click to select the appropriate content item type from the available list. 
  3. To use an existing content item, select it from the list and click Assign.
  4. To create a new content item:

    1. Hover to the right of the Data table until an icon appears and click to select the “+” icon. 

      Note: Users may opt to nest the content under another item line, such as within an Accordion tab, by instead clicking the “+” next to that line item.

    2. Click to select the appropriate content item type from the available list. 
    3. Enter a name for the content item. The name must be unique within the page. Click away or hit the enter key to save the name.
    4. Click Assign.
  5. Edit content by following the relevant component documentation.

Components can be moved using drag and drop or arrow icons. 

Drag and Drop: 

  1. Click to select the component. The component toolbar will appear.
  2. Click and hold the icon on the left end of the toolbar (two columns of five dots) to grab the component. 
Screenshot showing the Grid Container component menu bar with the icon on the left outlined
Figure 2: The Grab icon on the component toolbar for a selected Grid Container can be used to drag and drop the component to a new location on the page.
  1. Drag the component to a new location and release.
Note: Dark and light purple lines will indicate where a component can be placed. Red lines and shading will appear if a component cannot be placed at the cursor’s location.

Arrow Icons:

  1. Click to select the component. The component toolbar will appear.
  2. Click the up or down arrow on the component toolbar to move the component above or below the nearest component. Arrows will only appear when there are components above or below the selected component.
Screenshot showing the Grid Container component menu bar with the up and down arrow icons outlined
Figure 3: The Move Up and Move Down icons on the component toolbar for a selected Grid Container can be used to move the component to a new location on the page.
  1. Repeat as necessary.
Quick tip: Drag and drop or arrow icons cannot be used to reorder tabs within components, such as Accordion or Side tabs. To move these, use the Manage Items panel in the component side menu. See specific component documentation for details.
  1. Click on the component in the content canvas to select it.
  2. On the right-side component menu, click Styling to expand the panel.
  3. Click the Spacing options to add padding around the component, if needed. Each option has an on (purple) or off (gray) setting. The amount of padding cannot be adjusted. The solid box indicates the component; the lined box indicates where spacing will be added.
Screenshot of the spacing icon panel
Figure 4: The Spacing panel on the Styling menu for a selected component can be used to add padding around the component. The left icon (selected, highlighted in purple) will add padding above the component. The middle icon will add padding below the component. The right icon will add padding to both sides of the component. These options can be combined, if desired.
  1. Click Advanced styling to expand the panel. 
  2. Adjust variant and component options, as necessary. See specific component documentation for details.

Remove or Delete Components

To Remove a Component from Displaying on a Page: 

In Pages:

  1. Locate the page in the Content Tree (left pane).
  2. Click the page to select it.
  3. Locate the component to be removed. Click to select it. The component toolbar will appear.
  4. Click the Delete icon (i.e., trashcan). 
  5. Publish the page to push the changes live.
Note: Components removed from the page are still available as content items unless deleted in Content Editor. 

To Fully Delete a Content Item: 

Content items are the data sources that are assigned to, and displayed by, a component. Deleting a component from a page does not delete the content item data source. 

In Content Editor:

  1. Locate the page in the Content Tree (left pane). 
  2. Locate the content item. It should be located in the place it was assigned during content creation. 
  3. Right click on the item name.
  4. Click Delete.
  5. Click OK.
  6. Click Save.
Note: If a user attempts to delete a content item in Content Editor that is in use in a website, a Breaking Links alert pop-up will appear. Users should stop and remove the content from any web pages before proceeding. Use the link options on the Breaking Links panel to view where existing content links are in place. 

 

Documentation updated: August 20, 2024

XMC User Guide