The Experience Editor allows content authors to see and edit their page as it will appear on the live site. 

Benefits of Editing in the Experience Editor

This editor is helpful when building a brand-new page or modifying how information displays on an existing page. In the experience editor, you can add or modify components directly on the page, creating a page that is visually similar to what will appear on the live site once the page is published.

Opening the Experience Editor

To access the experience editor, start in the content editor's content tree, select the page you would like to open in the experience editor, and then you have two options: 

1. Right Click on your selected page and choose "Experience Editor" from the options, OR
2. Open the "Publish" tab in the ribbon at the top of the window. Click on Experience Editor.
   

The experience editor will open in a new tab.

Adding Components

To add a new component to a page in the experience editor: 

1. Click on the "add a new component" icon in the upper right-hand corner of the editor to the right of the search icon.
   
   
   
   
2. Options to "+add here" will appear on your page everywhere where you can add a component.
   
   
   
3. Click "+Add here" in the location where you want to add a component. A new window will open showing renderings of all the available components for the page and location you chose. 
4. Click on the component rendering that you would like to add to the page and click "select.
   

Associating Your Component with Data

You will then need to select or create associated content. You can select associated content from or create associated content in one of two places:

1. Global Data Folder:
   
   • Shown below as "Pull Quote (Current Site)." This name will change based on which component you're working with.
   • Creating a component in the Global Folder means the component will be available to place on other pages across the site. You should create your component here if you intend to use the same component on multiple pages. Then, when you make edits to the component, you only have to edit it once and the changes will appear on all pages where the component appears.
   • Most components do not need to be created in this folder.
2. Local Data Folder: 
   
   • Components will be more commonly created in the Local Data Folder. 
   • Creating a component in the Local Data Folder means that the component will be located in the data folder of the page you're working on. Housing component data in each page's local data folder helps keep your site organized.
     

 

Editing Existing Components

To edit an existing component on a page in the Experience Editor: 

1. Click on the component you want to edit. A toolbar will appear. 
2. If your toolbar looks like this, select "More" and select "Edit the related item"
   
   
   If your toolbar looks like this, select the Folder Checkmark icon and select "Edit the related item"
   
   
   
   The Content Editor will open in a split window above the Experience Editor. 
   
   
3. Implement your intended edits (see Navigating the Content Editor for more information)
4. When your edits are complete hit "Save and Close" in the upper left of the Ribbon under Home
   

Editing Rich Text

You can edit rich text components directly in the experience editor. To edit your rich text component: 

1. Select the rich text component you want to edit.
2. Click the edit icon.
   
   
   
3. Edit your rich text. For more information on how to edit rich text, refer to Navigating the Content Editor. 

Moving Existing Components

To move an existing component to a new location on your page:

1. Click on the component you would like to move. 
2. You should see this toolbar appear. If you don't, you may need to click on the content tree icon (directly to the left of "More") and select the component you want to move.
   
   
   
   
3. Click on the "Move component" icon
4. Small "Move to here" icons will appear on your page in every location where you can move the chosen component. Click "Move to here" where you want to move the component.
   

Changing Associated Content

If you would like to change which content is associated with a component:

1. Select the component whose content you want to change
2. You should see this toolbar appear. If you don't, you may need to click on the content tree icon (directly to the left of "More") and select the component you want to edit.
   
   
   
3. Click the folder checkmark icon.
4. Select Change associated content.
5. You can then select associated content from or create associated content in either a global or local data folder as described in Associating Your Component with Data.
   

Removing Existing Components from Page

If you would like to remove a component from your page:

1. Click on the component you want to remove
2. You should see this toolbar appear. If you don't, you may need to click on the content tree icon (directly to the left of "More") and select the component you want to remove.
   
   
   
3. Click on the red "X" to remove the component. 

Note: This will not delete associated content datasource from Sitecore. It will only remove the component from your page. You can easily replace the component and re-associate the content you created earlier without losing any work. 

Saving Your Changes in the Experience Editor

When you've finished making your edits in the Experience Editor click "save" in the upper left corner of the Ribbon. Return to the Content Editor for Publishing.

Potential Pitfall! 

When you return to the Content Editor be sure to refresh your page before continuing to make edits. The Content Editor does not automatically refresh to reflect the changes you made in the Experience Editor, and if you save your page in the Content Editor without first refreshing, you will save over the changes you made in the Experience Editor and lose your work.