Episerver Interface Explained

After you have logged into Episerver, the first thing you will see is the editing section of Episerver. The edit section is where most content editors and marketers will spend their time using Episerver, although there are several other sections that allow you to manage different aspects of your site. The editing section, as the name implies, allows you to manage the web pages of your site.  The interface and features available may vary from site to site, based on what permissions you have, the version of Episerver that runs your website and what add-ons your website uses.  An editor only account will not be able to see as much as an administrator account.  So, if your website looks slightly different than the screenshots below, don't worry too much.

Top Navigation Menu

First, at the top of the page, you have the main navigation area.  As you can see there are a few editor related links on the left and some account management features on the right. episerver_interface_explained_1 First, on the left we have these links:

  • EDIT: This is where you create web pages, edit content and do cool stuff.
  • ADMIN: This is the area where you do the website maintenance.  Depending on what type of Episerver user account you have been assigned, you may or may not have access to this.
  • REPORTS: This area gives you some basic reports about your content.
  • VISITOR GROUPS: This area allows you to create personalised content in your web pages.  For example, you may want to display a discount code to a visitor if they have added a certain product to their shopping cart.

As mentioned above, in the top right-hand corner, you have the standard account features.  Log-out, search, help etc...  I won't go over these links in too much detail, as they are all pretty self-explanatory.

Top Editor Menu

Directly under the top Episerver menu, you start to see the editor controls, as seen below: episerver_interface_explained_2 Episervers interface is quite user-friendly, so there's not that much to be afraid of here.

Left Side Of Menu

On the left-hand side you will see 5 icons: episerver_interface_explained_3 The first button will open the left-hand navigation panel: This panel is where you will navigate the website, add pages, delete pages, re-order pages etc..  the tree view which shows the structure of your website. To navigate the tree you can click on the page, or, plus arrow to the left of tree items.  Clicking on a page will load that page’s into the large content area on the right of the tree view. episerver_interface_new_page The second item in the Top editor menu is a '+' sign.  This button will create new pages.  More information about creating a new page can be found in, How To Create A Page in the Episerver Editor. episerver_interface_explained_5 In the modern age of the responsive website, omnichannel marketing (buzzword alert!) your website's content might need to look different depending on what device the website user has chosen to browse your website with.  Web pages might look different for mobile, tablets etc..  if you want to create personalised content, you might want to view your web page as the site visitor.  All these different types of views are all set in here.  Depending on how your developers have set-up your website will determine what views and options you have available.  Everything in this section is just buttons, so feel free to go in and click whatever as you won't break anything. episerver_interface_explained_6 The next icon is the preview icon.  When you work in the Episerver editor using on-page-editing the page might not display 100% as it will on the website.  The Episerver content areas can make the display slightly different.  The preview button will switch Episerver into real life view mode, so you can double check the page looks how you want it to. episerver_interface_explained_7 The last icon is the compare version button.  This button is really useful for organisations that have to adhere to compliance regulations etc...  if Episerver has been enabled with workflow, you can view new page revisions with what was previously created and decide if you want to allow it to be published.

Right Side Of Menu

Asides from the buttons on the left, there are also some useful buttons you need to know about: episerver_interface_explained_8 The first thing you notice on the right-hand side is the publish status.  If the page has any content changes that haven't been made live yet, you will see a bright blue publish notification and a 'Publish' dropdown.  If you Episerver account has the correct permissions, you will be able to publish any changes using the big green 'Publish Changes' button. The next button is the On-Screen editing button. episerver_interface_explained_10 This button will toggle the view between 'On Page editing' and 'All Properties' view.  The last button is the view/hide assets panel button:   episerver_interface_explained_11 Clicking on this will expand the Assets panel>  The assets panel is where you will manage components within your templates, like blocks and media. episerver_interface_explained_12  

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top