How To Add A Component / Block Onto a Page In The Episerver Editor

Episerver provides a new powerful way for you to design your pages layout yourself.  Gone are the days where a marketing team is provided with very restrictive templates, that an only be changed with developers help.  Instead, Episerver came up with the concept of components/blocks that can be added to the page via the editor.  This new way means you as content editors have a lot more power… but at the cost of having a bit more to learn!

episerver_editor_guide_content_area_1
In your templates if you come across a property like the one above, that says ‘You can drop content here, or create a new block’ then this is how you can add components to the page yourself.  There are two ways you can add new components to a page.

Option One

The quickest is to click the ‘create a new block’ link.  This will open up the ‘New Block’ screen:

episerver_editor_guide_content_area_2

The option you see in here will vary based on your website.  To add a new component click on the one you want to create:

episerver_editor_guide_content_area_3
Again, the options you will see will vary based on what component you have picked and how the developers have built it.  You will always have to add a name for the block, though.  When you have finished adding everything in, press the ‘Create’ button in the top right-hand corner:

episerver_editor_guide_content_area_4

You have now added a component onto the page.  As you have changed the content of a page, if you want the component to be added to your website you will have to publish the page before you will see it displayed. How To Publish Content Within The Episerver Editor .

Option Two

Option two will allow you to add existing blocks onto your page.  In the top right-hand side you should see the assets panel button:

episerver_editor_guide_content_area_5

Click on it, to expand the ‘Assets Panel’.

You should see the ‘Blocks’ panel and from here you can browse all the blocks that have been created in your website, the same way you would browse your website in the navigation panel.  If you want to use an existing block you can drag it onto your content area.  If you want to create a new block, you can also click on the ‘New Block’  button as shown above.  This will create a new block under the page you have selected, that you can then drag onto your content area.  Personally, I think option one, creating a block from a content area, is a lot quicker that option two.  Unless I need to add an existing block onto a page I very rarely use this method.

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

More Posts

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *