1. Episerver User Interface
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Episerver User Interface
Overview of the user interface

2. Page construction A page based on a Page Type Multiple content blocks
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Page construction
A page based on a Page Type
Currently only one standard type and two special types
Multiple content blocks
Header, footer and menu is controled via the front page

3. Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Logging in
As an editor you are logging in via:
For the test envisonment you use:

4. Navigation Global menu: Available at the very top, to navigate around.
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Navigation
Global menu: Available at the very top, to navigate around.
Select, for instance, CMS to display available options in the submenu.
Global menu can always be accessed from the pull down

5. Entry points Dashboard: Customized gadgets
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Entry points
Dashboard: Customized gadgets
CMS  Edit: Website building
Commerce  Catalog: Product setup (Umbraco import)
Add-ons: For different use in the backend, e.g. Epi Language, Google Analytics
User setting: Adjusting password:

6. Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
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 have the global menu and the toolbar at the top, and adjustable panes to the left and right

7. Navigation Pange Left hand side navigation
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Navigation Pange
Left hand side navigation
The Navigation Pane displays tabs for your website’s page tree structure, language branches1, tasks and project items.
Additional this is also where you find the Site Settings
It is from the Navigation Pane that you create your pages
Don’t copy pages or blocks but create from scratch
1 If you have access to more than one language

8. Assets Pane Right hand side navigation
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Assets Pane
Right hand side navigation
This is where you store and access your content items:
Blocks
Media (images and documents)
Forms
Catalog items (Commerce)
Templates.
Don’t copy, blocks, forms and templates, but create from scrtach
Context menu
When you click the context menu of a content item, you can see that item's options. The options available from the context menu depend on the content item.

9. Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Tools - top
Pin button
Use the pin button to make the navigation pane (or assets pane) stay in place. If not, the pane will disappear when you click somewhere else in the interface.
Settings button
From the Settings button, you can add and rearrange gadgets. To remove a gadget, click on the Settings button in the gadget you want to remove.
Toggle navigation
To collaps and expand the Navigation Pane.
Compare different versions button
Click this button to compare content and properties between specific versions to see what has changed..
Create content button
Short cut to create new pages blocks and template in CMS
Toggle preview mode button
Use this button to preview the item you have currently open. Preview in different devices .
Toggle view settings button
Preview content as a specific user group, in another language, or as the content would be displayed on a specific device.

10. Main content area Publish
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Publish
When there is unpublished content, you can publish it 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..
Main content area
Page information
This area contains information such as page name, location in the page tree and when it was last autosaved.
All properties button
Click the All properties button to access the all properties editing view. That view provides access to all properties available for the currently open content. When in all properties view, the button changes into an On-Page editing button. In the on-page editing view (the view you see in this image), you can edit the page in a what-you-see-is-what-you-get view where not all properties are accessible.
Main content area
This is the main content area. What you see and are allowed to do here depends on the selected page type and how your access rights have been set up.

11. Tools - buttom New page/block button
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
New page/block button
The New page and New block button are accessed from the navigation panes only. Click these to create a new page or block. The page or block will be placed at the location you have selected...
Tools - buttom
Gadget
These are a gadget that has been added to the navigation pane. It can be expanded and collapsed with the arrow..
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.
More options button
The options available from this button depend on the context. In the navigation pane, you can copy and paste pages for example. In the assets pane, you can create blocks and folders from the More options button and also copy and paste blocks etc.

12. Sites (Navigation Pane)
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Sites (Navigation Pane)
Access to language sites
Depending on your rights. E.g. RW-SC will have access to DK, SE, NO and FI
To work on a specifc language site you first need to choose it from here

13. Pages (Navigation Pane)
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Pages (Navigation Pane)
To access existing pages and create new ones
As a default you can see all language pages
To only see your own click the settings button and choose e.g. Show Content in German Only
You can only edit language pages you have edit rights for

14. Structure in the Assets Pane
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Structure in the Assets Pane
All languages have their own folder incl. The Master Site
Blocks and Media shares the same folder structure
Safe to move blocks and media assets around in the folders
Iassets can be reused across the website
Local site
Holds local items
Don’t structure according to your site
Structure based on content types, e.g. contacts, staement panels, cases sliders, 4in1 items etc
Master Site
Holds items used on the master site
Reuse elements from here on your local site
When you need items (blocks of assets) first make sure if the master holds it before uploading/creating for your local site.
Don’t delete, copy or move anything from here
Page specific vs. Shared assets
An asset, like a block, should be placed as locally on the page if the content is not relevant on other pages
Should be placed in the folder structure if it should be reused across the site
A local placed block can always be moved to the folder structure

15. Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Naming 1/2
Blocks
As blocks are reused across the website it is important that the naming is very descriptive:
Content
Block type
Image/no image
Grey/white background
Exampels:
Contact_Customer support_Service Panel_Button
Contact_Customer Support_Service Panel_Button_no Image_White
Correct naming will also secure easy retrieval via search

16. Naming 2/2 1854x1000 2600x1000 3360x1000 Images Content Image size
Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC
Naming 2/2
Images
Content
Image size
It is recommend to always upload at least the three basic image sizes for all your images:
Examples:
Templates
Content + Language
Example: Generic Product MASTER, Product HVAC MASTER
Note: The basic image size has been changed. The reccomend sizes if therefore now:
1854x1000
2600x1000
3360x1000