Hop in, folks. Today, we’re taking the brand new Elementor Page Builder plugin for a drive.
Elementor is a new free and open-source front-end page builder from Pojo.
Page builders are all the rage these days. They let you set up beautiful sites without any coding knowledge. Some themes come with page builders built in, while other page builders are standalone plugins. Elementor Page Builder is one of the latter - it’s a separate plugin that plays nice with all your existing themes and plugins.
One of its unique selling points is truly fluid live editing. That means you can edit the front-end design in real time, with no lag or glitching. Elementor also boasts tons of support for responsive design, great-looking icons, and widgets, as well as full control over styling and layout dimensions.
Does Elementor live up to the marketing material? Let’s find out.
Elementor User Interface
I set up a fresh WordPress install using the Twenty Sixteen theme to play around with Elementor.
After installing Elementor, you can set up some basic information in the settings menu. You'll be able to set which post types you want Elementor to be enabled for, as well as user roles restrictions and some other basic settings:
Once that's done, you’ll see this button on any page or post, assuming you enabled Elementor for that type. Just click the button to enter the Elementor interface:
The Elementor live drag-and-drop interface will pop up right after. Here’s what the blank slate looks like:
As you can see, everything loads as it looks in real life. You can then edit in real-time. No switching back and forth between your back-end and front-end interfaces. You’re looking at the same thing your visitors will be looking at. This makes it super easy to create some beautiful designs.
Setting up your layout
Elementor makes it easy to set up your layout. If you want something other than a basic one column layout, you just click the “ADD NEW SECTION” button, and it will give you 12 preset structures to choose from. Click any one of these structures to instantly set up a layout:
You can add as many sections as you want.
Resizing sections is easy. If you want to resize the horizontal spacing, you can just drag the arrow between the two sections like so:
Resizing is incredibly smooth. I didn't experience any lag or glitching in any of my use (and I'm not exactly working on a powerhouse computer).
In the section settings options, you can also add vertical spacing between columns, set up background colors, and much more:
Widgets are the building blocks of your website design. You can add them inside the sections I discussed above. You simply drag them to your site from the left menu. Elementor currently has 22 widgets, plus additional WordPress widgets:
Besides all the standard widgets like headings, images, etc. Elementor has some cool additions. One of my favorites is the Counter widget. I also think there are some potentially cool implementations of the Google Maps and Progress Bar widgets.
With that being said, I would love to see this list grow in the future. I'd say it's only average - definitely better than most free page builders, but not as broad as premium plugins. Don't expect pricing tables or specific widgets like that in Elementor's current release.
To add a widget, you just drag it to the section where you want it to appear:
To illustrate how quickly Elementor lets you build pages, here’s a quick layout I put together in about 30 seconds. I know this design is nothing special in the world of page builders, but I was impressed with just how fast you can move around the interface and get things done:
From my time playing with the interface, I can confidently say Elementor is lag and glitch-free. Widgets show up instantly when you drag them. For widgets like counters, you can even see their live functionality as soon as you add them. The counter started moving as soon as I dropped it. This adds up to an easy-to-use and frustration-free interface.
Elementor gives you plenty of options to edit each widget you add to your page. When you add a widget, you can customize its information, styling, and spacing:
Elementor also lets you choose whether the widget is responsive or not. You can choose to show or hide widgets depending on the user's system. You can set options for:
This is a nice feature which allows you to get the most out of responsive design. A great addition by Pojo.
In addition to its 22 built-in widgets, Elementor also allows you to add WordPress widgets to your designs. The method for adding them is the same as normal - just drag and drop them to your desired location:
If you have any other plugins which created custom widgets, they'll also show up in this list, which makes it easy to include them in your Elementor designs. Elementor plays nice with other plugins, which is a huge bonus for ease-of-use.
Preview Responsive Design
Elementor makes it easy to preview what your page will look like on different devices. This feature is incredibly useful and will save you a ton of time. No more guessing what your page will look like on mobile - you can preview things right away without leaving the Elementor interface:
I often find myself updating my site and then loading it on my phone to see how it looks - thankfully that's a thing of the past with Elementor. This is one of my favorite features. It works well and you can switch between devices without any lag or load time.
Elementor has presets for:
- Mobile Landscape
- Mobile Portrait
Just click on any of the options and you can edit your site in real-time as it will appear on that device. Super cool!
Pricing and Documentation
Elementor has an incredibly attractive price-point - FREE! Currently, it's just 100% free. No paid add-ons, no limited features. You get all the widgets and functionality for no money.
It's also open-source, which is a pretty awesome decision from Pojo. They plan to release extra widgets and features every week. For updates people can follow their Github: https://github.com/pojome/
As for documentation, it exists but is a bit sparse currently. I'm sure that as the plugin ages, the documentation will also grow, so I wouldn't consider this a huge knock right now.
Rounding things up
Overall, I think Elementor is one of the best free page builders out there. It allows you to create beautiful designs with a lag-free front-end interface. Its widget selection isn't perfect, but it provides enough for most people to have what they need. It also shines with responsive design, which is increasingly important.
Pros of Elementor:
- Free and open-source
- Awesome support for responsive design
- Smooth and lag-free interface. See things exactly as your end users will
- Works well with different plugins and themes
Cons of Elementor:
- The widget list is a bit short compared to some premium page builders.
Have you tried Elementor? How do you think it stacks up?