In this tutorial, you will learn about content areas and how you can customize one within Episerver 11. A content area is an Episerver property that can be added onto a page or block type that allows content editors to create dynamic layouts. Within a content area, the content editors can:

  • Add components (known as blocks)
  • Arrange the order in which the blocks are stacked
  • Determine the width of each component

The content area property is so powerful it will be off on your go-to tools on any Episerver project. The first time every a frontend designer looks at the rendered output of a content area they usually get a little shock.  The content areas will display two extra div tags around everything.  Assuming that a simple text-block had been added into a content area that rendered this but of text:

Hello World

When the block is added to a content area and eventually rendered out by Episerver, the markup would look like this:

If you want to know why, then it might be a good idea to open up the Episerver editor and have a look at the content area:

When you look in the editor you can see Episerver's inline editing feature.  This will highlight the content areas and add in context menus so people can set display options and various other things.  

This 'magic' is all done by those two extra div tags that the Episerver content area injects.  On most projects, it usually makes life a little more interesting compared to a standard static HTML website build, as it makes the end HTML a little harder to predict.

How Do I Make My Episerver Content Area Display Correctly?

There are a few approaches that we can take to cater to this issue and I'm going to spell them out for you.

  1. You can write your HTML to take into account the extra divs.  This can work in some situations, but if you're trying to create an accordion block for example, with an ordered list, the extra divs can cause your HTML to fail a validation check.  So Episerver provided a way to override the extra divs.  

  2. To render a content area as I mentioned we use content areas.  In our Razor views, the Episerver PropertyFor HTML helper is used to get the HTML out of Episerver.  With the PropertyFor helper, you tell Episerver which content area you want to display and it does its thing., like so:

Another really useful feature of the PropertyFor HTML helper is the additional overload that takes a number of optional parameters.  These extra parameters will allow you to specify the tags and CSS classes that the content area will wrap around your blocks.  These classes include:

  • CustomTag - Specifies the type of tag that will be used to render the first div.
  • CssClass - Specifies the CSS class to be used on the first div
  • ChildrenCustomTagName -  Specifies the type of tag that will be used on the child divs.
  • ChildrenCssClass -  Specifies the CSS class to be used on the child divs
  • EditContainerClass - Specifies an edit mode only class to be rendered

     To give you an example, you could use PropertyFor in your Razor view like this:

Which would result in this mark-up:

Setting the content area markup like this can be done on a per content area basis, so you can have content areas on different pages and different blocks producing different markup, which is a pretty standard approach.  

On most projects that I've worked on, this feature usually provides the easiest and quickest way to configure Episerver in a way that meets the designer's needs. This is usually the first option I recommend that you start looking into.

  1. In some cases, I've worked with designers who just want to get rid of the extra div tags completely. In this approach, a developer will have to create a custom content area render that completely strips out the tags.

To get the inline Episerver editing to work, you still need the extra div tags in the editor though... so this approach can cause issues.  In this situation, you have one set of HTML rendered on the page (no div) and a slightly different set of HTML rendered in the Episerver editors (with divs).  In this instance, you normally need to create a custom Episerver editor CSS file to fix these differences.  

To learn how to do that I suggest you read, How To Add Your Own Custom CSS In The Episerver Editor.

Being the issues of running a website with two different sets of HTML in mind, the code you will need to strip out the div tags is provided below:

The HTML Helper will look like this:

The HTML will then look like:

I've written the explaination of how this code works in the Episerver 7 version of this tutorial, here.

The code is basically getting the class and tag attributes that you pass in via the helper and then override the view bags rendering settings that Episever uses by default. In this way we can change the tags and classes easily.

Episerver Content Area Sample Demo Code

All the above code can be downloaded in a fully working website from my github account here. #ILoveEpiserver

Content Area Takeaway

Episerver is a very powerful and flexible system.  If you are new to Episerver then the main takeaway I'm hoping you get is that the more control you give to content editors the more unknown your end HTML will be.  As Episerver is so flexible there are a number of different ways of working.  

There is definitly no one-size fit all approach and on a usual project, its very common to take a mix and match approach, using one technique for one situation (like injecting the tags and classes via the property for, and then in another using the no div render contant area to achieve a different result somewhere else. 

If you can write your HTML to take into account the extra div tags then life would be very simple... however, we also may all be out of jobs so, swings and roundabouts!