Elementary – A new way to build WordPress

elementaryIf you are hearing the term “Element Builder“ for the first time, you are not alone. Many of us have heard and used page builders and the grid builders for some time now. So, what is a element builder? The concept behind element builder is from the fact that almost every major component in your webpage has a smaller unique element which is a composition of design + content. This basic elements are the building blocks of the big components and hence the webpage. This is how Elementary approaches building pages and websites.

Elementary is an element builder WordPress plugin which helps you create elements and present them as Collections. Collection, as the name suggests, is a collection of elements presented in a unique way. You might already be using a few collections already including Archives, Carousels, Masonry and the like.

The plugin comes with a slick visual editor setup, so building elements / collections is as easy as 1, 2, 3.

Let me introduce you step by step, how easy and powerful it is:

1. Choose an element skin:

Elementary now comes with around 10+ base element skins to choose from. Also, there is a frequent update of new element skins to look forward to. Below you see a picture of the banner-card skin.


2.Customize the element (skin):

You can customize the element’s style, layout and even fields.

Style: Elementary comes with a truly simple yet powerful Atomic CSS / Style Editor. So, you can change your styles and get a visual feedback with the Visual Editor’s preview area.


Layout: From version v 1.1 (which is in beta as of today, to be released from beta on the first week of May 2016 ), we have a drag-n-drop feature built in, so you can re-align the element’s inner fields / content ( images, title, text, description, etc. )

Add / Delete Fields: You also have options to add new fields in addition to the default fields. You can add almost any field available to the posts you have filtered using the Content Filter options. (more about content filter options later in this article ). Together atomic style editor, layout drag-n-drop and Fields options give you complete customization ability over the elements.

3. View Controller:


The view controller has 2 simple controls to change what you see in the visual editor.

Media Controller:

The media controller lets you choose between General, Desktop, Tablet and Mobile views. When you change the view say from General to Mobile, then you can see how the elements / collection looks in the mobile screen size. Also, when you change the style properties in this view, it applies only to the mobile view. Read more about these options in our documentation.

Single / Collection:

This controller lets you switch from viewing a single element to collection of elements. You might use this controller on various scenarios. Also the drag-n-drop is best used with the single mode.

4. Filter Content:


The filter content options give you complete control over what content you show, just like the previous set which gave you control over the appearance of the element.

Using the filter options,

1. You can choose to include / exclude post types, taxonomies of the chosen post types, and the terms of the chosen taxonomies.
2. You can choose to include / exclude post types and then filter by values of fields like post ID.
3. You can also filter by choosing a date range with options like “on”, “before”, etc.

This gives you complete control over what content you want to filter.

5. Collection Settings:

After you are satisfied with the previous customizations, you can also customize your collection settings. Here are some of the options available for the collection settings:

1. Archive:
Archive comes with default pagination. You can choose the posts per page and the max number of post values. The maximum number of posts is the total number of posts to show. Say if you have 150 posts on the specific filtering of posts, if you want to show just 100 at any point of them in the archive, then you can set the maximum number of posts to 100.

2. Masonry:
The masonry comes with the same options as the archive as of now, but you can accept further improvements in the coming days.

3. Carousel:
The carousel has the options to show the maximum number of posts and also other carousel specific options like Autoplay on / off and Autoplay timer interval.

This is not the end, just the beginning. We are constantly working on new elements, new collections and new tools to make them work together better. Using heaps of plugins to make a slightly different layout or function is a huge waste in terms of money, page load, time taken to learn, maintain and update them. So what do you do? You don’t need Sherlock to tell you, “Elementary, my dear Watson.”

You can also be a part of our beta program, to know about the beta program, go here.

Essekia Paul

Essekia is the author / lead developer of Elementary WordPress plugin. Loves tinkering with new ideas, philosophy and building cool things. The author feels there is a lot to explore about himself and will let you know when he does.