We continue our in-depth look at how Ektron developers can get the most out of Episerver, discussing content Pages and Blocks.
Wow, time flies, doesn’t it? In the last installment of this blog series, I talked about getting started with Episerver as an Ektron developer. That still applies, so if you’re looking to begin using Episerver as a developer, I encourage you to start there, as I’ll be making assumptions about what you have available in your Visual Studio installation.
Let me start by saying that this blog won’t be able to cover everything, or even most things. Episerver has some very robust capabilities for creating content, and along with that comes a bit of a learning curve. Thankfully, we can use some familiar concepts from Ektron’s PageBuilder technology to get started on the road to learning Episerver.
We can start with the basics here. Episerver content is all strongly typed content, similar to the ContentType creation process Ektron has espoused for working with Smart Forms. Thankfully, creating these strongly typed models for Episerver content in MVC and WebForms is an identical process. The only thing that is different is the display (or View) of that content, which we’ll cover in Part 3.
Episerver has a hierarchy of content that is broken down into the following: Pages, Blocks, Folders, and Media (as well as Catalog content, which we won’t be covering, as it is e-commerce specific). For the purposes of this blog, we’ll be covering the non-UI side of Pages and Blocks.
The programmatic side of pages is called a page type. Think of a page type as the combination of a Smart Form and a PageBuilder page. It can include properties specific to that page, like Smart Form fields, but it also includes something called a ContentArea. The ContentArea is similar to a drop zone in PageBuilder. Inside the ContentArea you can add Blocks (these are easiest to compare to PageBuilder widgets) and other Pages.
I found the NewsPage in Episerver’s Alloy demo site to be a great example. You can find the class that references this under /Models/Pages/NewsPage.cs. This file provides an example of a Block being added to a page (in this case, the PageListBlock, which we’ll cover later). You can define the properties as needed for this particular page type. You’ll also see that the NewsPage inherits from StandardPage (we’ll skip over this one for now, as it gets fairly complicated) which in turn inherits from SitePageData, which finally inherits from PageData. PageData is the Episerver.Core reference that every Page must inherit from. In this case, the SitePageData.cs classes goes ahead and adds some really nice to have items for every page, which makes for a great starting point.
I know that in the past, folks have asked about inherited Smart Form configurations. Well, here it is. Previously, these would be set in the Ektron properties area for a content item or Smart Form. Because Episerver uses strongly typed content by default, you now you have total autonomy to declare your own properties for every page on your site.
To keep things consistent, we’ll use the PageListBlock referenced in the NewsPage when talking about Blocks. Blocks are also strongly typed content. The biggest difference between Blocks and Pages is that Blocks can exist at runtime and can be per instance or global. If you look at the PageListBlock, it inherits from SiteBlockData. When you open that, you might be confused that it’s simply empty or contains just a comment (depending on which sample you’re using). That comment is worth its weight in gold:
/* BEST PRACTICE TIP
* Always use your own base class for block types in your projects,
* instead of having your block types inherit BlockData directly.
* That way you can easily extend all block types by modifying your base class. */
As in the case with Pages above, you can also globally influence all of your Blocks with properties. This gives you tons of flexibility and, with good planning, can reduce the work overhead of needing to extend functionality.
Moving back to the PageListBlock, you’ll see a list of public properties, similar to fields in a widget. You’ll also notice that each of those properties contains decorators. We’re going to skip over those for now, but I think you can take a stab at what they do. Just like the pages mentioned previously, each of those is a strongly typed item, getting you all the benefits of those types.
We’ve barely scratched the surface of creating and working with Content in Episerver. Hopefully this is helpful in getting started with understanding the differences and similarities between Ektron and Episerver. As always, feel free to reach out on Twitter using the #Ektron or #Episerver hashtags to join a larger, active community, or leave a comment below if you have any questions or tips of your own. Stay tuned for the next installment of this series, in which we’ll continue to look at Episerver from a developer’s perspective.
Have questions or comments about this post? We'd love to hear from you.
Related Posts

3 Methods for Improving Your Page Speed with Episerver
We’ve all been there. We’ve got this immaculate website built out and ready to show to a client. It’s beautiful, it's intuitive…and it takes 30 seconds to load.

An Ektron Developer Learns Episerver, Part 1
Ektron CMS developers need to learn a new platform following its merger with Episerver. Find out what one developer learned as he made the transition.
Website Traffic Woes?
Google search algorithm updates can wreak havoc on your website’s traffic. Don't let your organic rankings tank. Our free SEO health check can help you identify issues that make Google unhappy with your site.
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.