CMS for editors > Getting started > User interface

User interface

The toolbar and the panes in the Episerver edit view provide easy access to functions when working with content. When entering the edit view, you will have the global menu and the toolbar at the top, and adjustable panes to the left and right.

The global menu provides access to other areas of the Episerver platform. The toolbar contains features like preview and view options, and lets you add items such as pages or blocks.

The Episerver user interface is flexible allowing developers to plug-in customized features when implementing websites. This description refers to a "standard installation" of Episerver without customizations.

General features

  • Context-sensitive actions. Some features are only available in certain context. The toolbar, for instance, 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 instance, you can drag pages, media files and blocks into the rich-text area or content areas, or re-arrange the page tree structure using drag-and-drop.
  • Keyboard commands. Standard keyboard commands are supported in many areas, for instance, when moving pages in the page tree or in the rich-text editor.
  • Search. Supported in many areas to locate, for instance, 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 are done in your local time zone, whereas administrative actions are based on server time.
  • Context menus are available in many areas, for instance, 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.

Panes

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

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

Settings for a pane or a gadget allow you to configure or remove a gadget, or rearrange gadgets in a pane.

Left-hand "navigation" pane

Contains the page tree structure (Pages), project items (Project Items), language branch (Sites) navigation and tasks management (Tasks) by default.

Right-hand "assets" pane

Contains the Media and Blocks folder structures by default, for easy access to drag items into the content you are currently working with.

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 working with content such as pages and blocks in CMS, or catalog content in Commerce, there are two editing views, On-Page Editing and All Properties, with toggle buttons to switch between them.

On-Page Editing provides quick access to direct editing of a selection of content properties.

All Properties provides access to all available properties including more advanced ones such as access rights and language settings.

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

Click to select, for instance, a category.
Click to select, for instance, an image in a media folder, or a page in the page tree.

Click to remove, for instance, a category.

Using touch-screen devices

On touch-screen devices, browsers may have difficulties prioritizing between input from the screen and from the mouse, which may cause problems such as making it impossible to resize panes using the mouse. If you experience problems with Episerver and the touch screen, enable the Limit touch support feature found under the global menu > your user name > My settings > Display options. This feature prioritizes mouse input over touch screen input and enables the mouse for interactions such as drag and drop, resizing of panes, and so on.

back to top




Episerver User Guide update 15-5 | Released: 2015-11-16 | Copyright © Episerver AB | Send feedback to us