NOTE: THIS PLUGIN IS REMOVED OR NOT WORKING!
As a website owner, I am sure you are familiar with the leading page builders that claim to make your life easier when it comes to building a website. But have you ever heard of an “Element Builder”?
Me either. That is until I was introduced to the Elementary plugin developed by Pauple Studios.
In an attempt to create something that allows website owners to do exactly what they want to do on their websites in regards to design, without all the extra stuff some feature-heavy page builders come with, Pauple Studios takes a new approach when it comes to website building.
Let’s take a look at what Elementary has to offer you and how you can start designing your standout website using this revolutionary WordPress plugin.
What is Elementary?
Elementary is an element builder WordPress plugin that follows the concept that every webpage on your website consists of a unique composition of design and content. Pauple Studios feels that each element of your website works together as a ‘Collection’ to shape a finished product in the form of a webpage.
Elementary is compatible with most WordPress themes and plugins so you do not need to have a specialized grid theme for it to work. If however you do have a grid theme or even a different grid plugin that’s okay, Elementary will work alongside it just fine.
Main Features
Elementary comes with some unique features for creating perfect webpages.
Element Skin Types
Elementary provides users with a wide variety of element ‘skin’ types for creating and to be used in blogs, ECommerce, sports, portfolio, etc websites. As a visual representation of a single post in an Archive, Carousel, or Masonry grid, elements are the building blocks for your design.
- Standard-Card
- Pin-Card
- Shopping-Card
- Magazine-Card
- SimpleImage-Card
- Banner-Card
- Profile-Card
- ClassicBlog-Card
Keep in mind that this plugin is an element builder meaning you can build off of any element you choose by adding to or taking away specific features. The above-mentioned element skins are just a starting point and are by no means the only design possibilities you have available.
Content Filters
Once you have chosen the element type you want to work with, you are able to filter the content in many ways under the Content Settings tab.
First, decide whether to include or exclude any post type by selecting from the drop-down menu.
Next select the taxonomy terms you want to include so that navigation to the appropriate webpage is made easy for your visitors. You can also do the same with the Field options using the same drop-down menus.
You also have the option to display posts to your viewers within certain date ranges. Lastly, you will notice that pre-defined text, image, and link fields exist in each of your elements making up the general layout of your element.
Responsive Style Editor
Under the tab Style you can customize each element in your Collection by using the powerful Atomic CSS / Style Editor and Live Preview capability. There are four areas for making changes and each change you apply to your element can be seen in the Live Visual Editor.
- Visual. Change the background color, choose a specific overflow (such as adding a scroll bar to each element), select from one of nine border choices and change its color, radius, and opacity.
- Typography. This section is for customizing font type, color, size, and weight. You can also determine the text alignment and assign text transformation (uppercase, lowercase, capitalize, or initial).
- boxModel. Design how you want each element box to display on your website in this section. Change things like the width, height, padding, and margins so your elements have the right look.
- Positioning. Pick from the dropdown how you want your element boxes to be positioned.
In addition to using the available editor tools in the Style tab, it is worth noting that you can customize individual ‘Atoms’ or sections within each element box. By toggling the toolTipShow button a dropdown will appear next to each field you have assigned your element boxes.
You can then apply any CSS changes you wish to make using the Style tab tools and they will only apply to the chosen atom.
Collection Types
The last main feature included in Elementary is the Collection types found under the Collection Settings tab.
Remember each element that you just customized using the editing tools come together to make a Collection and thus a full webpage. Here you can choose to combine your elements to make an Archive, Masonry, or Carousel display for your site visitors to enjoy.
You can also determine the maximum number of posts you would like displayed once your Collection is published to limit how many pages are displayed all at once, include pagination, and customize how many posts are going to display per webpage. If you choose the Carousel display option you will also have to ability to include autoplay of your elements and adjust the slide interval time.
What Happens Next?
After you have completed the building process and have all of your desired elements customized you can do one last look over using the General/Desktop/Tablet/Mobile views. After you change the media view, not only do you see how the view looks for that specific media, but when you change the style settings, the styles are applied only to that media.
I think this is a nice touch for Elementary to give you an idea how your webpages will look to users on different devices. These days visitors access your website from a variety of places. It is important to cater to everyone to gain the most traffic possible.
Once you are completely satisfied with how each element looks and your Collection is built, simply navigate to your WordPress dashboard and select Elements. Here you will find a list of elements you have created with a shortcode located next to each one.
Copy and paste the shortcode of the element you want to a new page or post (or even an existing one) and click publish. All of your page building work will be right there just as you had designed it.
Beta in the Making
As if the original Elementary plugin was not enough, the team at Pauple Studios has been working overtime to release a newer version with additional features making element building ever easier.
- Drag-n-Drop Capability. A simple drag-n-drop tool that lets you drag any text, image, or button field within your element. Since there are no row or column restrictions you will be able to drag-n-drop freely.
- Add/Remove Fields. Although the plugin has pre-defined text, image, and link fields, you will soon be able to add and remove fields as you wish giving you more design control.
- Content Length and Button. Set the content length of any field within your elements. Plus, add a linkable button in your elements directing your readers to the associated post.
- Loading Animation for Elements. Want to include an exciting animated effect to your elements? Look for that feature in the near future.
Interested in what the beta version of Elementary looks like? Check out the demo here and see for yourself.
Final Thoughts
Altogether I feel that Elementary has great potential as an element building WordPress plugin. The features are clear-cut and seem to really accomplish what website owners are looking to do: build great websites. And starting at $29/year I have to say that is not a bad deal at all. We also have a special offer for our readers, use the code EARLYBIRD for 30% discount. Only 50 more activations left.
Curious to see what this plugin is all about? Check out the original demo version here and see how element building might work for your website.
Have you used Elementary to build webpages for you website? What do you think of the new beta version that is soon to be released? I would love to hear all about it in the comments below!
