Here at WPfy.me, we are currently in the process of examining page builders. We have already covered the Visual Composer, and ZOOM Builder.
The first review of a page builder however goes back to September 2012, when we had a look at the ElegantBuilder – a plugin from Elegant Themes, which is also known as the Elegant Themes Builder.
An new review of that plugin gives us the opportunity to test the latest version of the Elegant Builder. Moreover, we can follow the same procedure as with the Visual Composer and ZOOM Builder – which will make comparing the different page builders a lot easier.
And again we use the Genesis Sample theme to test the page builder. The Sample theme is a free theme that comes with the earlier reviewed Genesis Framework. However, the ElegantBuilder works with any WordPress theme.
Installation and Updates
The ElegantBuilder installs like any other WordPress plugin. You can upload the zip archive with WordPress, or upload the unpacked version over (S)FTP. When installed, you activate the plugin from the Installed Plugins screen.
The plugin adds a page to the Tools panel. That page lists the available post types, including pages and custom post types. Here you have the opportunity to enable or disable the ElegantBuilder for selected post types by clicking a checkbox.
When you check the Widgets page upon activation of the ElegantBuilder, you will notice that the plugin registered five additional widget areas: Layout Builder Widget Area 1 to 5. Through these widget areas, you have the ability to include any widget with your ElegantBuilder layouts.
In order to enable auto-updates, you have to activate the Elegant Themes Updater plugin. You can download this plugin from your account panel with Elegant Themes.
The updater plugin extends the WordPress General Settings page with two fields, where you enter your Elegant Themes’ username and an API Key. This API Key is available within the Account section of your Members Area at Elegant Themes.
The Layout Builder
The ElegantBuilder adds a meta box labeled “Layout Builder” below the editor of selected post types. The core part of this box is the Page Builder.
When do not want to use the Page Builder on every page, you can simply disable it by clicking the “Disable page builder” checkbox.
The Page Builder comprehends three tabs:
- Add a Module
- Add a Column
- Sample Layout
Modules
Layouts are composed by dragging Modules to the Page Builder Canvas.
With the ElegantBuilder you have the following modules at your disposal:
|
|
Modules on the canvas have three handlers, like the blue Text Block here above. Clicking the most right icon allows you to drag the module to another location. But basically, you can click anywhere for this purpose – except for the other two icons.
The list icon at the right displays the configuration options of the module concerned – just as with regular WordPress widgets. The x at the left deletes the module – including the configuration options and any included content.
Columns
By default, modules on the canvas are stacked in one column rows. However, it is possible to divide rows in two or more columns – just drag a column of the desired width to the canvas.
You can choose from:
- 1/2 column
- 1/3 column
- 1/4 column
- 2/3 column
- 3/4 column
- resizable column
The pointer of your mouse will change into a slider when you hover over the right border of a Resizable Column. To adjust the size, simply pull the slider to the left.
In the image above we have created a row with three 1/3 columns, and a second row with a 2/3 and a 1/3 column. Once a column is placed, you can add one or more modules to that column.
Thus, just drag the preferred module to the canvas, when you need a full width 1/1 column. Otherwise, you first create the desired columns, and then add your modules.
And of course, you can always rearrange modules and columns by dragging these to another location.
ElegantBuilder Project
Building a web page with the ElegantBuilder is pretty straight forward:
- (optionally) add columns
- add your modules
- configure the modules
- rearrange when needed
- publish
We are going to create a homepage following this recipe.
For the first row, we need a text covering the full width of the content area. We achieve this by positioning a Text Block at the top of the canvas.
Clicking the list icon opens the Text Block Settings, where we enter the welcome message. You can use the WYSIWYG editor or the HTML editor to style your text.
Optionally, you can add a CSS class to the text block. Applying your own classes is usually very convenient – you made them up yourself, so they are easier to remember. Hit the [Save Changes] button. We are done with the first row.
Hopefully you do not mind, but I cheated a bit. When discussing columns, I already created the second and third row for our homepage.
With the columns in place, we continue adding the desired modules.
The second row on the homepage will be dedicated to the latest posts from the categories Frameworks, Plugins, and Themes.
The ElegantBuilder creates five widget areas. For this row we use three Genesis Featured Posts widgets to select the latest posts from each category. For other themes you could turn to a plugin like the Flexible Posts Widget.
First add the widgets to the widget areas, then select a widget area with a Widget Area module as here above in the image. Repeat this two more times.
The third row, the final row, has two asymmetrical columns. The first column is intended for a Google Map with our office location.
You can either use a plugin like the Google Maps Widget, or enter the Embed map code from Google Maps in a Text Block – as above. For the finishing touch, we put a heading on top the Google maps iframe.
For the contact form, the last element on the homepage, we use a Text Block as well. Here we enter a heading, followed by the shortcode of the form concerned. This form has been created with the Contact Form 7 plugin, by the way. In case you prefer a drag and drop form builder, have a look at WPForms Lite.
This is how the finished homepage looks in the page builder:
To jazz it up a bit, I have added a Horizontal Bar below the first and under the last row.
It is possible to save your layout by hitting the [Create Sample Layout] button. By doing so, you can re-use the layout for other pages. Saved layouts appear under the Sample Layout tab.
And this is the page in live action:
ElegantBuilder Templates
In the image above, you see two templates. The template at the right, is the homepage that we constructed during this review. Saved layouts can be deleted.
The Sample Layout showcases everything you can do with the ElegantBuilder:
Please visit the ElegantBuilder Demo to see the live version of the Sample Layout. FYI – the URL of the demo states “convertible”, because the ElegantBuilder has been distilled from the Convertible theme, and both products share the same demo.
Plans & Pricing
You can not purchase an individual plugin or theme from ElegantThemes. You can subscribe to one of the membership plans:
The Personal Membership is $69 – for less than the price of two premium themes, you get access to all current and future themes, as well as to the support forum, for as long as you decide to remain a member.
For $89, about the price of two premium themes, you can opt for a Developer Membership. The Developer plan includes everything the Personal plan offers, plus PhotoShop (PSD) files, and all premium plugins.
A third option is obtaining Lifetime Access. This membership gives you the same privileges as the Developer Membership, but instead of paying yearly $89, you pay only one time $249 – less than the subscription fee for three years!
More information on these plans is available on Elegant Themes’ Join page.
Thus, to get the ElegantBuilder, you can either choose for the developer plan, or become a lifetime member.
For those $89, you not only get the ElegantBuilder, but also the Monarch Social Sharing Plugin, and 87 themes – including Divi. Seems like a good deal to me – but as a lifetime member, I might be a little biased.
Just leave a comment, when you have any questions or remarks. It will be my pleasure to get back to you.
Leave a Reply