Page builders are all the rage today. They allow people with no coding skills to easily create a unique website the way they want, and they bridge the gap between having a beautiful website and spending a significant chunk of cash to get it.
As more and more people use WordPress on a daily basis, it’s become commonplace for a good majority of themes to include a page builder of their own. But there are still plenty of themes that don’t include a page builder because their developers believe such functionality belongs in a plugin.
The reasoning behind this is simple: using a theme with a built-in page builder means all your custom built layouts will not transfer over if and when you decide to change your website’s theme.
Using a page builder, on the other hand, allows you to keep the layouts you created even if you change your theme.
A relative newcomer to the page builder scene is Elementor. Elementor boasts itself as the most advanced front-end drag & drop page builder which allows you to create high-end websites at record speed.
But does it live up to its claims? In this post, we’ll take a look at Elementor, its features and capabilities, and see if it performs as well as it says.
What is Elementor?
Elementor is a drag and drop page builder that allows you to create responsive page layouts using a live editing interface so you can see the changes as you make them. It includes advanced features like parallax scrolling, full-width background images, advanced buttons, custom headings and more.
Elementor’s biggest selling point is its speed and ease of use. Pojo, the plugin developers, set out to create a unique page builder, with various advantages that set it apart. Let’s take a look at the main features of the plugin.
For the purposes of this review, we are using Elementor on a fresh WordPress install with Twenty Sixteen as the active theme.
After Elementor has been installed and activated, you can set up some basic information in the settings menu. The settings panel is very simple, offering the ability to set which post types you want Elementor to be enabled for, as well as user role restrictions, the default font option, and finally, the option to send anonymous data about plugin usage to the plugin developers.
Once that’s done, you’ll see Elementor’s button on any page or post if you enabled Elementor for that type. Clicking the button will open the Elementor interface which is where the main action happens.
The plugin’s live drag-and-drop interface will show up immediately. A new blank page with Elementor enabled looks like this:
As you can see, you can work on your page layout and see the changes you are making instantly. All the editing happens in real-time. There is no need to switch back and forth between your back-end and front-end interfaces. This makes it extremely easy to create beautiful designs.
After Elementor has been loaded on the page you are editing, you can further customize settings such as fonts and colors. There are also a couple of settings which are marked as coming soon which include Page settings and Revision history.
Setting Up the Layout
Elementor gives you a starting section for your design – one full-width column which you can delete by clicking on Section and then the ‘X’ button. Setting up the rest of the layout is easy. Adding more columns requires simply clicking the “ADD NEW SECTION” button, and choosing the desired number of columns from 12 preset structures to choose from, ranging from 1 to 10 columns.
You can add as many sections as you want. Each section is comprised of columns which are the place to put the content for your layout.
It’s worth mentioning that all the columns can be easily resized. The width of a particular column can be changed by simply dragging the arrow between the two columns. Clicking on the individual column allows you to duplicate it, add a new column or delete it.
Resizing is very smooth and it happens without any noticeable lag or a glitch.
Clicking on the individual section’s settings options, you can also change the layout from boxed to full-width, add vertical spacing between columns, set up background colors and much more:
The structure settings of a particular section gives you the option to change the column widths without manually resizing them.
Once the structure and the layout are done, you can then add widgets. Widgets are the building blocks of your design. They can be easily added by simply dragging them from the left panel into the desired section and column. Elementor currently has 24 widgets plus you can add any of the WordPress default widgets into the sections.
And if you are using a plugin that comes with a widget of its own such as WooCommerce, you can use those widgets in the sections as well. Elementor plays nice with other plugins, which is a huge bonus for ease-of-use.
Elementor’s widgets include the standard ones like headings, image, text, video, button and others but also some more specific ones like a counter widget, Google Maps widget, HTML widget, progress bars and more. Unfortunately, the widgets do not include pricing tables or similar widgets, but the plugin’s homepage does have plans to release a social media widget, an audio widget, and a testimonial widget.
Editing and Styling the Widgets
Elementor has plenty of options to edit each widget you use in your design. When you add a widget, you can customize its information, styling, and spacing, as well as the alignment of the widget.
Elementor also lets you control the responsiveness of individual widgets and enter custom settings for mobile design. On top of that, you can choose to show or hide widgets depending on the user’s system and set the options for desktop, mobile, and tablet, which is a nice feature that allows you to get the most out of responsive design.
Previewing Responsive Design
One of the nice things about Elementor is that the plugin makes it easy to preview what your page will look like on different devices, which saves a ton of time when designing and eliminates the guesswork out of how your page will look like on mobile devices.
Elementor includes presets for:
- Mobile Landscape
- Mobile Portrait
If you click on any of these options, you can edit your site in real-time as it will appear on that device.
Other Notable Features
Elementor works with any theme. Building a custom layout is incredibly easy, intuitive, and fast. There are no loading circles as with some other page builder plugins when you are adding the widgets, and the widgets themselves appear as soon as you drop them in their place.
Another notable feature is that Elementor also provides support for RTL themes. On top of that, Elementor has been built to be multilingual right from the start. Elementor has already been translated into German, Polish, Italian, Portuguese, French, Hebrew, with more languages being constantly added.
The benefit of this is that you get a translated panel out of the box, as well as RTL typography support, and developer options to add even more languages.
On top of all this, Elementor is also compatible with custom post types which can be enabled in the settings panel of the plugin.
Pricing and Documentation
Unlike many page builder plugins, Elementor is completely free and can be downloaded from the official plugin repository. There are, of course, other page builder plugins which offer a free version but have limited functionality. With Elementor, this is not the case. The plugin has no paid add-ons and no limited features. You get all the widgets and functionality for free.
Elementor is also open-source, on top of being free. The developers are currently planning to release extra widgets and features every week. For updates on the plugin development, you can follow their Github: https://github.com/pojome/elementor/issues
The plugin also offers documentation, which is a bit sparse at the moment of this post’s writing but it serves as a nice starting point for people who aren’t familiar with page builder plugins.
All things considered, Elementor is one of the best free page builders out there. It allows you to create stunning designs directly on your front-end without any glitches or lag. The widgets included with Elementor might be considered pretty basic by some standards, but it provides enough for most people to have what they need, without overwhelming them with too many choices.
One of the best features of the plugin is the way it handles responsive design. With custom controls for sections and widgets, and the ability to preview how your design looks, Elementor truly makes responsive design a breeze.
Elementor definitely has its set of pros as well as cons. Pros include the fact that the plugin works with different themes and doesn’t conflict with other plugins. What’s more, it provides great support for responsive design and doesn’t add additional load on your server. Using the plugin provides a smooth experience.
Disabling the plugin doesn’t leave your page littered with shortcodes and re-enabling the plugin doesn’t interfere with the layout you have built.
On top of everything, Elementor is free and open-source with new features in development.
When it comes to the cons, the widgets included with Elementor are not as extensive as the rest of the page builders on the market, but that’s to be expected from a relatively new plugin that is still actively being developed.
Another caveat is the fact that with themes that don’t have a true full-width layout, Elementor doesn’t have the option to override the theme’s default layout. As the plugin’s documentation explains, to achieve this you will have to get your hands dirty with a little coding, or download a child theme of Twenty Sixteen that Pojo built.
If you’re not too keen on using Twenty Sixteen child theme or really don’t want to switch theme, you will have to make a small change to your theme’s files.
Thankfully, the plugin developers have a thorough explanation which guides you through the process in their documentation.
Once you’ve made those changes, you can go to your page, select the full-width template, edit with Elementor, and create stunning full-width sections for your page.
In conclusion, if you are looking for a free page builder without a lot of overwhelming options, but that’s still powerful enough to create great-looking responsive layouts, give Elementor a try.