Skip Navigation
Training
Editor Playground
The Experience Editor

The Experience Editor

Entering the Experience Editor

  1. Open the global menu
  2. Click CMS > Edit
    1. Experience Editor Edit.png
  3. Click Navigation Pane Icon.png Asset Pane Icon.png these buttons (in the top left and right corners) to open the left and right panes.
  4. Click the pin Pin Icon.png button (visible when the pane is open) to lock the panes in position.
    1. Editor Panes Pinned.png
    2. The left side, called the navigation pane, is for managing pages and projects
    3. Arrange pages into a hierarchy to create your site structure. 
    4. Drag and drop to move things around.
    5. The main menu mimics our page structure shown (4a).
    6. Click the options menu (see image) to edit, cut, copy, or delete a page.
      • Navigation Pane Options Menu.png
    7. The right side, called the content asset pane, is for content blocks & media (Images, PDF’s, Docs, etc.). 
      • Create folders to keep content organized.
      • Drag and drop to move things around.
      • Drag blocks to the editor to add them to pages.
      • Click the options menu (see image) to edit, cut, copy, or delete blocks or other assets.
        1. Asset Pane Options Menu.png

Edit Methods for the Experience Editor

  1. On-Page Editing

    1. This display mode shows the page as it appears on the site, using the template’s layout and styles. You can click directly in active (blue-bordered) areas on the page to add/edit content. The icon for this display mode is to the right of the Options button. Some properties or fields may not be editable in this view, but it is good for a more visual perspective.

      On-Page Editing.png

  2.  All Properties Editing

    1. This display mode provides a list of every property available for the template. Tabs are used to organize similar page properties in groups.

      All Properties Editing.png

Customize the Experience Editor

Description:

Description:

Set your default view

  1. Click Navigation Pane Icon.png (in the top left corner) to open the left pane. Click the pin button Pin Icon.png (visible when pane is open) to lock the pane in position 
  2. Click Asset Pane Icon.png (in the top right corner) to open the right pane. Click the pin button Pin Icon.png (visible when pane is open) to lock the pane in position

Optional: Arrange the sorting order of your subpages, default is sorted by creation date.

Learn more about: Settings Tab Properties

Add, Rearrange & Remove Gadgets

  1. Add

    1. Click the settings icon Settings Gear.png (above right and left panes) and select “Add Gadgets” 
    2. Add the Recent gadget to list items you have recently accessed
      • Optional Gadgets:
        1. Project Items - For viewing items belonging to a project. 
        2. Tasks - Displays tasks to be done on the website. This gadget lets you filter items on status. You can, for example, see a list of all items you’ve made changes to but haven’t published.
        3. Versions - For managing content versions. See Working with versions for more information.

  2. Rearrange

    1. Click the settings icon Settings Gear.png (above right and left panes) and select Rearrange Gadgets, select a gadget, and drag it to the desired position in a pane.
    2. Once the gadget is in the desired position select Rearrange Gadgets again to complete your action.

  3. Remove

    1. Select Rearrange Gadgets, and click the Remove gadget symbol Remove Gadget.png next to the gadget you want to remove from the dashboard or pane.
      • Remove the Forms gadget from the right pane
    2. Once the gadget is removed select Rearrange Gadgets again to complete your action.

Understanding the Experience Editor

Understanding Experience Editor-Onpage view.png

Editor Layout

The image above is used as a reference for the text below. Each number corresponds to a position within the image.

  1. Top Menu - In the top menu you will find the Editing part of the Optimizely platform
    1. Choices (Right side)
      • Help - Access the user guide and detailed information pertaining to editing and the Optimizely platform
      • User Account - Access your personal account details or logout
      • Search - Use Optimizely Find to search files, blocks & pages within PGCPS.org
  2. Navigation Pane - The navigation pane displays tabs for PGCPS website page tree structure, language branches, tasks and project items. See: Navigation Gadget Overview
    1. Any page published in this pane is visible to everyone and will show up in search.
    2. Arrange pages into a hierarchy to create your site structure. 
    3. Drag and drop to move things around.
    4. Click the options menu to edit, cut, copy, or delete a page.
  3. Page Information - This area contains information such as page name, location in the page tree and when it was last autosaved.
  4. Preview Mode (Toggle) - Use this button to preview the item you have currently open. Learn more about previewing content…
  5. Compare Versions (Toggle) - Click this button to compare content and properties between specific versions to see what has changed. Learn more about comparing versions…
  6. Publish or Options button - When you have unpublished content open, this button says Publish, Otherwise it is called Options. When there is unpublished content, you can publish it from this button. You can also schedule it for later publishing or “revert to published.” In that latter case, the current draft is discarded and the last published version is displayed instead.
  7. On-Page & Properties View buttons - Switch between the different editing views
    1. On Page All Properties Buttons.png
    2. On-Page Editing Details
    3. All Properties Editing Details 
  8. Gadget - This is a gadget that has been added to the navigation pane. It can be expanded and collapsed with the arrow.
  9. Main content area - This is the main content area. What you see and are allowed to do here depends on the selected page type (#7)
  10. Assets pane - This is the assets pane. Assets are content items such as blocks, folders, media (images and documents).
    1. Create folders to keep content organized. 
    2. You have 3 folders already - Blocks, Docs and Images. The Docs folder content will show up in search.
    3. Blocks should be created using this naming convention.
    4. Drag and drop to move things around.
    5. Drag blocks to the editor to add them to pages.
    6. Click the options menu to edit, cut, copy, or delete blocks or other items.
  11. Gadget - This is a gadget that has been added to the navigation pane. It can be expanded and collapsed with the arrow.
  12. Project bar - From the toolbar, you can create and delete projects, activate an existing project and access the project overview. Learn more about projects…
  13. Context menu - When you hover over a content item in CMS, you can see that item's context menu. The options available from the context menu depend on the content item.
  14. New page/block button [+] - The New page and New block button [+] are accessed from the navigation and Asset panes. Click these to create a new page or block. The page or block will be placed at the location you have selected.
  15. More options button - The options available from this button depend on the context. In the navigation pane, you can copy and paste pages, or view content approval sequences, for example. In the assets pane, you can create blocks and folders from the More options button and also copy and paste blocks etc.
  16. Settings button - The Settings button is found in all panes and gadgets. The options found under this button depend on the pane and gadget you access it from. For example, in a pane, you can access the trash from this button. In a gadget, you have the Remove gadget option.
  17. Show Comments - You add and view comments in the comment panel. It is opened and closed by clicking the comment symbol. The icon is black when the comments panel is hidden, and blue when it is visible.
  18. Notifications - The bell icon in the toolbar displays the number of new notifications you have; click the icon to display a list of notifications. From the notification list, you can go to the item that needs to be reviewed.

General Features

  • Context-sensitive actions. Some features are only available in certain contexts. The toolbar (for example) presents relevant actions depending on what you are currently doing, and the add (+) button also offers context-sensitive options.
  • Primary actions. Some actions open in a new window, for example, a page delete confirmation. The background is then dimmed, meaning that you must finish the primary action to continue.
  • Action feedback and notifications. Successful actions are confirmed by a message in the notification bar. A notification may also appear in case of an error requiring you to take action.
  • Drag-and-drop operations. Drag and drop is supported in many areas. For example, you can drag pages, media files and blocks into the rich-text area or content areas, or rearrange the page tree structure using drag-and-drop.
  • Tooltips. Hover over a button or field and a short tooltip appears.
  • Keyboard commands. Standard keyboard commands are supported in many areas, such as when you move pages in the page tree or in the rich-text editor.
  • Search. Supported in many areas to locate, such as pages in the page tree or media in the folder structure.
  • Adaptable work environment. Resize and pin the panes depending on what you are currently doing, and add and remove gadgets of your choice for quick access to functionality. The editor remembers your selections, allowing for consistency after each new login.
  • Context menus are available in many areas, such as in the panes, the page tree and in item listings. The menu displays different available options depending on where in the interface you are and what you are doing.