Develop Custom Elements for Orchard Layouts

Develop Custom Elements for Orchard Layouts

Orchard Layouts introduced in Orchard CMS 1.9 provides elements that can be placed on the layout canvas. Orchard Layouts has a number of built-in elements, but of course, you can build custom elements for specific needs in your Orchard Website.

Developing Custom Elements for Orchard Layouts

In an early post I mentioned Snippets in Orchard Layouts, which are harvested Orchard Shapes that are exposed as a Snippet Elements and placed on the layout editor's toolbar. Snippets don't have editors, which you often need for your elements. When you need an editor for you element you will currently need to develop a custom element.

In one of my client Orchard Websites I needed a blockquote element to allow the client to easily sprinkle quotes throughout their web pages. One can certainly add blockquotes as HTML, but quotes were both prominent and numerous across the website so a blockquote element was indeed useful from a productive and maintenance standpoint. Orchard Layouts doesn't come with a blockquote element so I added it.

Custom Blockquote Element for Orchard Layouts

The custom element allows one to easily drag a blockquote onto the Orchard Layouts' Canvas and add the author and quote. It's all pretty simple and displays the proper symantic HTML as you would expect. This is the real power of custom elements and snippets in Orchard Layouts- abstracting the complexity of those repetitive and daily content management needs.

First, we have the custom element as it resides in the Orchard Layouts' Toolbar. One could create a special category for your custom elements, but I kept the category as "Content".

Custom Element in Orchard Layouts

Once you drag-and-drop the custom element on the Orchard Layouts' Canvas the editor displays asking for the author and quote to display on the Orchard Website.

Custom Element Editor in Orchard Layouts

Finally we have the design-time display of the custom element as it resides on the Orchard Layouts' Canvas. My personal rule here is to keep it really simple and save the beauty for the runtime display of the page, which will be different depending on your CSS.

Custom Element Design-Time Display in Orchard Layouts


Developing custom elements and snippets for use with Orchard Layouts in Orchard CMS is enjoyable and really helps with the content management needs on the Orchard Website.

I am an Orchard Website Developer for hire. If you're interested in an Orchard Website, custom Orchard Modules, and/or Orchard Themes, please contact me.