Elementor Review – Updated For 2.0 – Theme Building, Blocks + More!
Back in June of 2016, we were one of the first sites to write an Elementor review.
It’s been almost two years since then. And in those two years, we’ve seen Elementor undergo some incredible growth. Not only have they gone from zero to 700,000+ active installs, but we’ve also seen the Elementor team continue to push out tons of great new features like inline editing, maintenance mode, and lots more. Can it beat other page builders? You can see the comparison between Elementor and Visual Composer here.
That growth is why we actually use Elementor to power this very site you’re reading right now. Yup – we put our money where our mouth is and use Elementor (and GeneratePress) to style WPLift.
Now, with Elementor 2.0 and Elementor Pro 2.0, Elementor has officially moved into full-on theme building functionality. In addition to designing your regular content with Elementor, you’re now able to build your header, footer, single/archive templates, and other areas using the same Elementor interface.
That means our original Elementor review needed some updating. So here it is – a completely rewritten review of what is now one of the most popular page builders out there.
If you’re already familiar with Elementor and just want to skip to the new theme builder features in Elementor Pro 2.0, click here to jump ahead to that part of our Elementor review.
Elementor Review: What Does This Thing Do?
At its core, Elementor is still a WordPress page builder.
If you’re not familiar with that terminology, it just means that Elementor helps you build your content and website using simple drag and drop controls and a live visual preview of your website, rather than requiring you to mess around with the underlying code. Again, you:
- Put your page together like Legos. You just drag and drop different “elements” together to create a design.
- Don’t need to know any code.
- See exactly what your visitors will see, which makes it easy to know exactly how your finished design looks.
Most non-developers absolutely love page builders because they let you create more styled content without needing to learn HTML/CSS. You can even import premade templates that have already done much of the work for you.
The core Elementor page builder is 100% free. Just by itself, you can already make some pretty stellar pages with just the free version.
If you purchase the Elementor Pro add-on, though, you’ll also get access to:
- Theme building – as of Elementor Pro 2.0, Elementor lets you build your header, footer, archive pages, single pages, and more with the same drag and drop interface.
- More elements – you get lots of helpful new elements to build your website.
- Pro templates – while the free version of Elementor includes some free templates, most of the best templates are part of Elementor Pro.
- Global widgets – these let you reuse the same widget on multiple pages and then edit that widget from one location.
- Live custom CSS – easily add custom CSS right from the Elementor interface.
How The Main Elementor Interface Works
There’s a lot of nitty-gritty details to cover, but let’s start things off with a basic look at how you can build a page with the free Elementor page builder.
When you first launch Elementor, you’ll see a live preview of your website, with some added elements (these are what let you actually create your designs).
There are three core areas you’ll work in (marked below):
- 1 – this is where you see a live preview of your design. You see exactly what your visitors will see when they come to your site, which makes it very easy to design. This is also where you can create “sections” which help you organize your “widgets”
- 2 – these are the widgets you can use to build your designs. You just drag them over to the live preview. Then, you’ll be able to customize each widget using the same sidebar.
- 3 – these are helpful controls that let you see how your design will look on a different device (like a smartphone), undo/redo changes, and some other helpful functionality.
Building Your Page With Widgets/Elements
If you’re already familiar with page builders, this might not blow your mind. But if you’re not…this is pretty cool.
Here’s why people love page builders:
Let’s say you want to add a button to your page…
Rather than needing to mess around with HTML/CSS like you normally would, all you do is drag over the element:
To add more design elements, you just keep dragging over widgets. Once you get the hang of things, you’ll be able to create something like this without writing a single line of code:
This example is taken from our post on how to create a landing page with Elementor. You can see the process in more detail there.
Editing Individual Elements
Once you drag over an element, you’ll likely need to edit it to make it behave the right way.
There are two main ways to edit your elements.
First, if you’re dealing with an element that has text, you can just click on that text and type (this is called inline editing):
Then, you also get the sidebar area with 3 different tabs. The settings available in each tab vary depending on which element you’ve used, but the general idea is the same no matter what:
- Content – this is where you control basic functionality. E.g. for a button, it’s where you choose the button size, where the button links to, etc.
- Style – this is where you control fonts, colors, and other basic stylistic elements.
- Advanced – this is where you can control responsive settings, add custom margins/padding, use custom CSS (in Pro) and other more advanced things.
These controls are what allow you to really dig in and make the page design your own. And because you’re working in a visual editor, the instant that you tweak something small (like font size or padding), you’ll immediately see those changes on the preview of your site so you know exactly how things look.
Styling Your Sections Or Columns
If you just want to add some styling to regular posts, you might not need to ever dig into sections or columns. But if you want to create landing pages or otherwise build a more “full” website, you’ll need to use them.
Sections are kind of like a container for one or more widgets. They’re helpful because they let you:
- Group things together to provide better spacing
- Control that entire group as a single entity (like adding a background to the entire section, rather than just a specific widget)
- Add shape dividers and other cool features
Columns are another grouping element that sit inside a section. They help you divide up your page horizontally if needed.
For example, in the screenshot above, I had two different elements. By editing each element individually, I could add backgrounds to those actual elements like this (this is ugly – I’m just proving a point!):
But most of the time, that’s not what you’ll want to do. Instead, by editing the section directly, I could add one cohesive background like this:
You can view this as a kind of hierarchy:
A section contains one or more columns. Each column can then contain anywhere from zero to unlimited widgets/elements.
Once you get the hang of the interplay between these different classes, you’ll be able to unlock the full power of Elementor.
Previewing And Controlling How Your Design Looks On Different Devices
Ok, now that I’ve done a basic introduction to how Elementor works, let’s look at some of the specific features that take Elementor from “just a page builder” to “one of the fastest growing and most popular page builders”.
First up, you have Elementor’s responsive design controls. In a world where mobile Internet traffic is huge, you need your design to look as great on mobile devices as it does on desktops.
To help you make that a reality, Elementor gives you two helpful options.
First, you can preview how your design looks on different devices using a button in the bottom-left corner:
But beyond that, you can also show or hide elements, columns, or sections based on a user’s device in the Advanced tab:
This feature is super helpful because you’ll almost always have some elements that look great on desktops, but get in the way on mobile (think big images).
Using Revisions To Undo Mistakes
We all make mistakes…
And while the rest of life might not make it easy to undo a mistake, Elementor does.
At any time, you can click on the History button to review a list of:
- Actions – specific actions that you’ve taken during a session are listed here.
- Revisions – each time you save or publish the content, it’s listed here
To roll back to a previous version, all you do is click:
While many page builders offer this functionality, Elementor stands out for how flexible it is in letting you move back to past versions.
Changing The Template To Design A Page From A Blank Canvas
This is a super simple feature…but massively important and one of the reasons I’ve always loved Elementor.
If you want to use a page builder to create a landing page, you need a way to hide your WordPress theme’s header, footer, and sidebar.
While you can find themes that make this easy, most themes don’t offer this functionality.
With many other page builders, that means you’re out of luck. But with Elementor, you can just use the included Elementor Canvas template to instantly work from a blank slate:
Pre-Built Templates Save You Tons Of Time
Sometimes, you don’t want to build your entire design from scratch. When that happens, Elementor templates save the day.
Elementor templates let you easily import designs that you can then edit and tweak using the regular Elementor interface.
Elementor itself includes a built-in library of templates (some are free, while others require Elementor Pro):
Templates come in two different formats now, which is another improvement from Elementor 2.0:
- Blocks – these are individual page sections that you can put together to build a page (kind of like Legos). They also come in handy for the theme building features of Elementor Pro.
- Pages – these are full-page designs where everything is already put together for you.
Beyond the templates that Elementor offers, you can also:
- Save your own designs as templates to reuse them later
- Import Elementor templates from third-party sources
If I told you that you could use the same interface from above to design your entire WordPress site – header, footer, blog post page, etc. – that would be pretty cool, right?
That’s what people are so excited about in Elementor Pro 2.0. This version adds true theme building functionality to Elementor.
That means you can essentially use Elementor to design 100% of your WordPress site. Elementor even created a free theme that’s designed to make this as easy as possible.
Here’s how the new Elementor Pro theme builder functionality works…
Create A New Template
The theme builder works via “templates”. When you create a template, you can choose what type of template it is from the drop-down:
For example, to design your header, you’d choose Header. Similarly, to design a single post template, you’d choose Single.
I’m going to design a Header post template, but the same general principles apply no matter what part of your theme you’re working on.
Choose A Block Or Build From Scratch
Once you choose what type of template to create, Elementor will display a list of Blocks that fit that type of content
While you can always build everything from scratch, these blocks can save you some time.
Once you launch the interface, you can edit or build your theme part using the exact same Elementor interface from above.
You’ll also get a new set of Theme Elements to use. For example, while “Your New Blog” in my demo doesn’t look very impressive, that’s actually using the Site Title widget (which pulls automatically from your WordPress settings):
All of these Theme Elements pull in information dynamically. For example, if you use the Post Title element, it will dynamically show the actual title of each post.
You’ll also get new styling options that apply to that specific theme part.
For example, if you style the section that contains your header elements, you’ll get a Scrolling Effect option that lets you create a sticky header on certain devices:
Publish Your Theme Part
Once you go to publish your theme part, Elementor will let you use Conditions to control exactly where your theme part displays.
For a header, you might want to choose the Entire Site option to display it everywhere.
But these controls are actually pretty detailed, which can come in handy if you, say, just want to apply a specific post template to a certain category of blog posts:
And once you publish it, your theme part will start working right away. You can see that, while I didn’t design an especially nice-looking header, it is indeed live on my site:
Theme Builder Is Only Going To Get Better
The theme builder feature is already pretty polished as far as regular WordPress content goes. You can even use it to create designs for custom post types.
But in the future, I think it’s going to get even more powerful because the Elementor team has plans to add more detailed integrations for plugins like WooCommerce, Advanced Custom Fields (ACF), and Toolset (hopefully Pods, too!).
All this functionality means that you can build truly custom sites that rely on custom post types and custom fields. All without code! That’s a powerful value proposition.
5 Other Features That I Love About Elementor Pro
Even before the new theme builder functionality in Elementor Pro 2.0, Elementor Pro already had a number of helpful features. Here are some of the best…
Lots Of Helpful Widgets (That Can Replace Other Plugins)
Elementor Pro adds a bunch of helpful new elements that you can use in your designs:
These elements can replace a lot of plugins on your site. For example, you get elements to easily create:
- Price tables
- Social share buttons
And you also get elements that help you display your latest blog posts (this is what we use to display Recent Blog Posts on the WPLift homepage – check it out), as well as WooCommerce product information.
Global widgets are super helpful if you need to reuse the same content across multiple pages. Basically, you can insert the same global widget anywhere you want.
Then, to update every place where that widget appears, you can just edit the global widget one time.
Live Custom CSS
If you know CSS, Elementor Pro lets you add custom CSS directly to widgets, sections, or columns.
While many other page builders let you add a CSS class or ID, Elementor lets you write the actual CSS code without leaving the interface, which is way more convenient:
Finally, you also get access to a bunch more page templates and blocks, which can speed up your design process.
Third-Party Elementor Extensions Make Things Even Cooler
Beyond just plain creating a stellar product, I think another reason that Elementor has been so successful is because the Elementor team embraced the third-party developer community.
If you need even more functionality, you can find lots of free and premium Elementor extensions to give you even more control over your WordPress site. Here are some of our favorite Elementor add-ons.
Elementor Review: How Much Does It Cost?
The core Elementor page builder plugin is 100% free and available at WordPress.org. Even by itself, the free version is already pretty powerful.
But if you want access to theme builder and all the other cool features in Elementor Pro, you have three different options, starting at just $49:
I’m not going to directly compare Elementor to the competition (you can do the math yourself)…but if you look at how other popular page builders are priced, I think Elementor Pro is very competitive, especially when you consider that you now get theme building without any increase in price.
Should You Use Elementor On Your Site?
Just looking at functionality, Elementor is already my favorite page builder. While I’m still locked into Thrive Architect on some of my sites for legacy reasons, Elementor is what I’ve personally used on every new website that I’ve launched.
So I feel pretty comfortable recommending it just on functionality alone.
But there’s also another valuable thing that you get when you choose to build your site with Elementor:
The Elementor team doesn’t rest on its laurels.
Despite already achieving a good amount of success, they’re still constantly pushing out new features (like the recent theme builder functionality).
Because choosing a WordPress page builder is a long-term decision, that’s a pretty important consideration. You want to go with a team that’s in it for the long haul and is going to continue to not just maintain the plugin, but also improve it.
While Elementor certainly isn’t the only team that fits that criteria (Divi Builder and Beaver Builder are also pretty active, to name just two), I think the Elementor team has the most impressive resume over the past two years in terms of pushing out helpful new features.
For those two reasons, I think Elementor is the best page builder for both now and in the future.