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:

0-elementor-configuration

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:

1-elementor-page-builder-plugin

The Elementor live drag-and-drop interface will pop up right after. Here’s what the blank slate looks like:

2-elementor-page-builder-interface

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:

3-1-elementor-add-section

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:

resize-sections

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:

elementor-edit-section

Elementor Widgets

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:

3-elementor-elements

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:

elementor-add-element

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:

5-elementor-elements-added

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.

Editing Widgets

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:

6-edit-elements-elementor

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:

  • desktop
  • mobile
  • tablet

This is a nice feature which allows you to get the most out of responsive design. A great addition by Pojo.

Adding Widgets

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:

elementor-add-widget

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:

elementor-responsive

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:

  • Desktop
  • Laptop
  • Tablet
  • 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/elementor/issues

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?


Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

Siteground Hosting
Does WPLift load fast for you? That’s because we use Siteground for hosting, WPLift readers can click here to get up to 60% off hosting for your site.

Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Leave Yours +

10 Comments

  1. It’s an awesome tool. It can radically change the WordPress editing experience.

    Unlike other builders, you see the result on your front-end. Very simple and intuitive.

  2. I think its really great tool that many bloggers and wp users was expecting for years. The widget list is short but its on its early stages it looks promising.
    I think that new third party addons from other developers will come as a plugin earn a popularity.

  3. Luke Cavanagh

    Tested it out when it was released on a local dev site.

    Really impressed with it!

  4. Mike

    I found this incredibly difficult to work with. How do you position items within a section? Like suppose I wanted to make a big hero video header, with some text and a picture. There doesn’t seem to be any way to control elements positioning?

    • I think you would edit the section to set the background video (not use the video element). Then you can use widgets to add the text/button inside the section and control their positioning. Does that accomplish it? Maybe they should make that more obvious.

    • Hi, I’m Ben CMO at Elementor. First of all Mike you should know that you can contact our support on the WordPress page.

      The Elementor page builder actually has much more control over positioning widgets like video, text or images than any other page builder. It’s actually one of the key advantages of our plugin so I find it strange to hear this complaint.

  5. Mike

    I’m making a little more progress with Elementor. As a tutorial for myself, I decided to try and duplicate the elementor.com home page and it’s getting better. There are some UI things that they could improve upon, but really for a free product, I can’t complain.

  • Comments are Closed

Our Sponsors

SEND ME FREE WORDPRESS STUFF!

Join our Newsletter to Receive 6 Free WordPress Themes

We will also send you our weekly Newsletter packed with the Latest WordPress Content.

We will look after your email & Never Spam!

You have Successfully Subscribed!