Experience Manager user interface overview
This section gives an overview of the Experience Manager user interface to help get you started and work more effectively.
The following diagram explains the general layout of the user interface while editing a webpage in Experience Manager:
The areas highlighted in the preceding screen capture are as follows:
- Ribbon toolbar
- Info Bar — This area gives access to user preferences, notifications and workflow items.
- Library panel — The panel slides into view when you performing tasks that involve picking an item stored in Content Manager, or creating a new item to use.
- Breadcrumb trail — When editing, the breadcrumb shows where you are on the webpage, lets you navigate to a container of the current item, and for some item types, enables you to select the corresponding item on the page.
Items with borders
This diagram is a schematic representation of a part of a webpage showing editable areas through borders. Borders appear around the following types of items:
| Item | Border appearance |
|---|---|
| Webpage (1) | If the webpage as a whole is editable, a border appears around it when hovering over the edge of the page, or when selecting it in the breadcrumb trail. |
| Region (2) | If a Region on the webpage, such as the main area or sidebar, is editable, you can select it in the breadcrumb trail to make the border appear. |
| Component (3) | If a Component on the webpage is editable, a border appears around it when hovering over the Component, or when selecting it in the breadcrumb trail. |
| Field (4) | If a field of a Component is editable, a border appears around it, but only if you select the Component first and then hover over the field. This also goes for fields within fields (5). Alternatively, you can select the field in the breadcrumb trail. |
Border colors
The color of an item border tells you something about the status of that item.
By default, an item can have a border in one of the following colors:
| Color | Meaning |
|---|---|
| blue | You can edit the item. |
| green | There are pending changes to this item for you to commit or discard. |
| red | Your changes cannot be saved, because the content you entered is invalid or incomplete. |
| grey | You cannot (currently) edit this item. |
These colors are defaults. Your application administrator may have changed them.
The color of borders around the fields of a Component are as follows:
- If the Component has a blue or green border (or its configured alternative), so do all of its fields.
- If the Component has a grey border (or its configured alternative), its fields have no borders.
- If the Component has a red border (or its configured alternative), the field or fields that are invalid also have a red border (or its configured alternative). Other fields have a blue or green border.
Border icon buttons
The following table lists all buttons that can appear on the border of a Page or Component. You can see these buttons by clicking on a border.
| Icon | Label | Description |
|---|---|---|
| You are editing | Lets you finish editing or discard the changes you made, if any. | |
| Show lock information | Shows why you cannot modify this content. | |
| Item cannot be saved | Indicates invalid content. Click on pieces of content with a red border around them to see more details about why the content is invalid. | |
| Show properties | Shows the properties of the current item, such as its location, ID and creation date, in a popup. | |
| <Item name> is assigned to you or You have chosen to work on <Item name> | If the item is assigned to you, lets you Starts Activity on this item, locking it exclusively for you. If you have chosen to work on this item (that is, started Activity on the item), lets you Finish Activity on this item, releasing the lock you placed on it. | |
| <Item name> shows targeted content | Shows targeted content based on some criteria, and gives you options to view or make changes to the region to which the current Component belongs. | |
| Component shows fallback content | Shows fallback content, meaning that any applied criteria had no effect, and gives you options to view or make changes to the region to which the current Component belongs. |
Showing and hiding borders
At any time while editing, you can change when to display borders in one of the following ways:
- You can show all borders to identify which parts of the page (Components and the page itself) are editable even if you do not hover over an item or select it. To show all borders on the page, in the Home tab of the ribbon toolbar, select Content Borders.
- You can show borders only when you hover over items (default). If you are currently showing borders all the time and want to hide them, in the Home tab of the ribbon toolbar, deselect Content Borders.