User interface

The toolbar and the panels in the Optimizely Content Management System (CMS) (SaaS) edit view provide easy access to functions when working with content. When entering the edit view, you have the top menu and the toolbar at the top, and adjustable panes to the left and right.

Main window layout

1. Product chooser – If you have more than one Optimizely product, you can select the one you want to work with.
2. Left navigation bar – provide access to the following:
   • Dashboard – Displays information about your content that lets you access it from one place. See Dashboard.
   • Edit – See On-Page editing view and Get started with Visual Builder.
   • Reports – See Reports.
   • Settings – See Settings. See also My settings.
3. Content tree – Contains the page tree structure (Pages) and tasks management (Tasks).
4. Recent – A gadget that can be added to the navigation panel. It can be expanded and collapsed with the arrow.
5. Content functions – 
   • Toggle Navigation panel (content tree)
   • Create Content
   • Toggle view settings
   • Toggle preview mode
   • Compare different versions
6. Properties – Scrolling up from the content page exposes properties for the content. These are basic info properties where you can add a simple address, set access rights for a page, change the name in the URL, and so on. Additional properties are displayed in the All Properties view. 
7. Content page – This is the main content area. What you see and can do here depends on the selected page type and how your access rights were set up.
8. Language selector – If you have more than one language installed, you can select the language.
9. Comments – Click to open a panel in which you can add comments about the page.
10. Options – When you have unpublished content open, this button says Publish? Otherwise, it is called Options. When there is unpublished content, you can publish it (if you have publishing rights) from this button. You can also schedule it for later publishing or revert to publish. In that latter case, the current draft is discarded, and the last published version is displayed instead.
11. On-page edit and All Properties views for pages and block – On-page Editing view provides quick access to direct editing of a selection of content properties. All Properties view provides access to available properties, including more advanced ones such as access rights and language settings.
    Visual Builder and All Properties views for experiences, elements, and sections – When Visual Builder is active, this shows a Select view menu with All Properties and Visual Builder. See Get started with Visual Builder.
12. Assets tree – Contains the Media and Blocks folder structures. Drag and drop one or multiple items from the assets panel into the content you are currently working on.
13. Assets – Displays assets associated with the selected Blocks or Media folder.

The toolbar contains features like preview and view options and lets you add items such as pages or blocks.

The page information area below the toolbar displays the page name, the path to the page, and when it was last autosaved. If you can undo the latest changes you made to the content, there is also an Undo link.

A notification toolbar may be displayed below the toolbar, showing information, confirmation, error messages, and so on.

Panels

The user interface has a left and right-hand panel, which can be adjusted and extended with additional gadgets.

– Panel pin is used for expanding and locking the panes in an open position.

– for a panel or a gadget let you configure or remove a gadget or rearrange gadgets in a panel.

Content tree

Left-hand navigation panel.

Contains the page tree structure (Pages), language branch (applications) navigation and tasks management (Tasks) by default.

Assets panel 

Right-hand navigation panel.

Contains the Media and Blocks folder structures by default. Drag and drop one or multiple items from the assets panel into the content you are currently working on.

You can also drag and drop multiple items within the assets panel and delete, cut, or copy and paste them from the context menu or with standard keyboard shortcuts. Any unselected children folders are also moved, copied, or deleted.

Dashboard

The CMS (SaaS) dashboard displays information about your content that lets you access it from one place. Numbers are displayed on each tab; to update the numbers, click on the tabs.  

Editing

The toolbar on top displays an actions menu with context-sensitive publishing options, which vary depending on content status and user access rights. During editing, content status and autosave information are displayed.

When you work with content such as pages, blocks, and media in CMS, use On-page Editing and All Properties with buttons to switch between them.

– On-page editing view provides quick access to direct editing of a selection of content properties. See On-page editing view.

– All Properties view provides access to available properties, including more advanced ones such as access rights and language settings. See All Properties.

When editing content properties, these options are common when adding, deleting, or selecting items:

• – Click to select (a category, for example).
• – Click to select (an image in a media folder or a page in the page tree).
• – Click to remove (a category, for example).

Gadgets

A gadget is a small application to add to the assets and navigation panels in CMS (SaaS). As a developer, you can develop custom gadgets to extend the features of your CMS (SaaS) solution.

When installed on the application, you can add some add-ons as gadgets to the navigation or assets panels in edit view. Some gadgets are available by default in the user interface, while others must be manually added.

Select Add Gadgets, and select a gadget to add from the list of available gadgets.

The Gadgets dialog box displays.

• Blocks – used to access blocks (default in the assets panel).
• Media – used to access media files (default in the assets panel).
• Recent – displays items you have viewed during your current browser session.
• Recently changed – displays recently changed content on the application.
• Tasks – displays tasks to be done on the application. This gadget lets you filter items on status. You can, for example, see a list of items set as Ready to Publish.
• Versions – used to manage content versions. See also Compare versions of content for information on working with versions.

To move or remove a gadget:

• Select Rearrange Gadgets, select a gadget, and drag it to the desired position on the dashboard or in a panel.
• Select Rearrange Gadgets, and click the Remove gadget symbol next to the gadget you want to remove from the dashboard or panel.

My settings

You can change some of your account settings under the top menu > your avatar > My settings.

Your username is set in an external system, such as Windows or an SQL database, and cannot be changed in CMS in that case.

In the Display Options tab, you have the following settings:

• Views – Limit touch support – On touch-screen devices, browsers may have difficulties prioritizing between input from the screen and the computer mouse, which may cause problems such as making it impossible to resize panes using the computer mouse. If you experience problems with CMS and the touch screen, enable the Limit touch support feature. This feature prioritizes computer mouse input over touch screen input and enables the computer mouse to interact with drag and drop, resizing panels, and so on.
  
  

• Reset Views – You can reset your user interface views to the settings. If you have changes to the user interfaces, such as added, moved, or deleted gadgets, these changes are undone, and the default views are displayed.

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 window, for example, a page delete confirmation. The background is then dimmed, meaning 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 display if an error requires 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 displays.
• Keyboard commands – Standard keyboard commands are supported in many areas, such as moving pages in the page tree or 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.
• Support for time zones – Publishing actions in the edit view is done in your local time zone, whereas administrative actions are based on server time.
• Context menus are available in many areas, such as the panels, page tree, and item listings. The menu displays different options depending on where you are in the interface and what you are doing.