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

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

Episerver User Interface - Guide - Updated: September 2016, Catharina Brodka, GMC Logging in As an editor you are logging in via: http://edit.rockwool.com/Util/login.aspx?ReturnUrl=%2fepiserver For the test envisonment you use: http://test.rockwool.com/Util/login.aspx?ReturnUrl=%2fepiserver

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

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:

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

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

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.

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.

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.

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.

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

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

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

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

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