Common elements - modularity on a whole new level

Apr 23, 2015 comon-elements-featured

Last week we announced few new functionalites added to the unroole. One of these, Common elements, will tremendously speed up page building process in unroole, and make it even more modular and scalable.

In short, Common elements group widgets that are often used together, so you don’t have to add each one to each page where you would like to use them. And when you would like to make some changes to a group, you don’t have to repeat the change on each page. Remember, removing repetitive tasks is what unroole is all about.

In this article we will cover:

How to create a common element
How to create a widget to display a common element

How to create a common element?

As we said in our announcement post - common elements are a mashup of Pages and Widgets in unroole. You build them by adding and configuring a series of widgets in the editor, just like you build pages. Unlike pages, you insert them, like widgets, into pages or layouts.

For demonstration purposes we’ve set up a demo website and used a common element for creating services boxes on the Homepage and Services page. Each service box is a widget that displays the icon and article based on the configuration.

Before common elements were introduced, you would have to add each widget on each page and configure it, and re-configure it if changes were needed.

Also, you would have to create a wrapper widget with the apropriate html markup to hold these widgets. In our case this is the Services wrapper widget with the following code:

<div id="services">
    <div class="container">
	<div class="row">
	{{structured}}
        </div><!-- row -->
    </div><!-- container -->
</div><!-- services section -->

Now, there is a new tab in Appearance menu in the sidebar, Common Elements. Here you can create a common element, its versions, and schedule and unschedule them, same as you do with the pages.

To add widgets, open a version in the editor, by clicking open in page editor icon.

When in page editor, process is the same as building pages. Click on new widget action button in the bottom tray. On the right you select a widget you would like to add and configure it.

In our example we have added three Services item widgets, and configured them to show appropriate icons and articles.

Next we will add this common element to our Home and Services pages.

How to create a widget to display a common element?

To add a Common element to a page or layout you should create a widget holding a {{common_element}} liquid tag. Wherever you place the common_element tag in your widget html, that is where the widgets of the common element will be rendered.

Here is the code of our new Services common element widget.

<div id="services">
    <div class="container">
	<div class="row">
	{{common_element}}
        </div><!-- row -->
    </div><!-- container -->
</div><!-- services section -->

You’ll notice that the only difference between this and our old Wrapper widget is that we are now using common_element instead of structured liquid tag.

In Page editor, we now have Services common element widget available, and when we add it to a page we can select which Common element to show.

Note on reusability and modularity

As common elements can be used with different themes, and channels it is always best to assign it neutral classes and ids when coding, so styles of different themes can be easily applied without much modifications to the themes.

Common elements are available in all your old and new accounts so go on, sign in to your dashboard and take them for a spin. We promise, you’ll never look back.

Back to Blog