Elementor Page Builder Review & Tutorial

Is it the best page builder for WordPress in 2018?

Elementor is the new kid on the block.

In this review we will go into full detail to see if it can compete, or even overtake, the established players.

Starts at $49

Effectiveness

Whether it’s recreating an existing page or working from your imagination, there’s very little Elementor can’t handle.

Price

The free version of the tool is virtually a complete product. PRO is available but I don’t think it’s necessary for everyone

Ease of use

It does take a bit of getting used to but there’s plenty of great information to guide you through the initial learning curve

Support

Despite a more hands off approach from Elementor, the community support groups and detailed documentation are top class

  • Core product is 100% free
  • Great user interface
  • Global widgets are awesome
  • List Item #1
  • Revision history works well
  • It’s open source
  • Active Facebook group
  • Detailed documentation
  • Forced styling by default
  • Cannot edit elements directly
  • Global vs static templates can be confusing
  • Lacking some marketing-oriented features
  • No undo button (revision history isn’t always ideal)

You know, it’s funny.

I remember when I first read a mention of Elementor.

From the context, I couldn’t really tell what it was. And if I’m honest, all I could think of was the Dementors from Harry Potter.

ginger

After binging on all 8 movies that weekend, it wasn’t long before I noticed more people talking about it.

Elementor this. Elementor that.

Now I really had to find out what it was. And this time, I wasn’t going to let my imagination get the better of me.

So I blasted opened a new tab, shimmied over to Google and punched in the word… “Elementor”.

To my disappointment, I realized it was just ANOTHER page builder.

It didn’t make sense. How could everyone be so excited about a page builder? I mean, it’s nothing we haven’t seen before.

Could it really be worth the hype?

Enter Elementor

Elementor user interface

Elementor is the new kid on the block, but don’t let that fool you. Despite heavy competition, it has quickly become one of the most popular visual page builders for WordPress, and it continues to grow at rapid pace.

Since it’s release in mid-2016, Elementor has gained over 80,000 installs and an impressive 5 star rating on WordPress.org.

The people clearly love it — but is this just the latest fad, or is Elementor truly the ultimate page builder for WordPress?

The Good, Bad, And The Ugly

For this review, I fired up Elementor to see how well this page builder fares in comparison to popular alternatives.

From here on out, I’ll share my experiences using this tool, as well as what I liked and didn’t like along the way.

Let’s do this.

User Interface

As usual, we’ll start with the user interface.

As with most page builders, the side panel makes up the majority of the tools interface.

I think this format works well, especially for visual page builders because it doesn’t take up too much space on the screen – which is obviously important in this case.

Eementor user interface

A nice little touch is that you can also expand or contract the panel by dragging.

I must admit, this is something I only realized after several hours using the builder… *blush*

Elementor sidebar
Elementor sidebar

Expanding the panel is useful when editing a text block, although I think there could be a better solution to this (more on that later).

Contracting the panel gives you more space to work with and doesn’t sacrifice usability in any way. Really handy.

I almost feel like they could have taken this further and have the element icons default to a list, allowing the panel to shrink even more.

Anyhoo…

Clicking the little arrow on the side panel slots it away completely, allowing you to preview the page. Of course, you can’t edit the page in preview.

Elementor hidden sidebar

(This is such a small thing, but the speed and simplicity of being able to preview like this was huge for me.)

Pro Tip

You can also press ‘Cmd + P’ on a Mac, or ‘Ctrl + P’ on a PC to quickly bring the side panel in and out of view.

Pretty much everything the tool has to offer is done through this panel, so let me run you through it.

In the top left, you’ll find the page settings.

Elementor page settings option

(Don’t worry, I’m going to pick this apart soon)

At the bottom, you have several more options including an exit button, page preview, device preview, support options and templates.

Elementor bottom options

And finally, the top right corner will take you back to the elements library…

Elementor Elements library

As for adding different elements to your content, it’s just a case of dragging and dropping them from the library, straight onto the page.

No complaints there.

I must admit, it did take a little while to get used to where everything is, but that’s only expected when switching from another page builder like I have.

Overall, the initial user interface is clean and super easy to use.

Layout Options & Columns

Being able to create specific layouts is what page builders are all about, so how does Elementor measure up?

To begin creating a layout, you’ll first want to add a section from the content area.

Elementor layouts

(We’ll cover the template stuff later)

Clicking the purple ‘add new section’ button brings up a little layout option.

Elementor layout options

At first, I didn’t think it made sense to have to go through this every time you add a new section, but simply dropping an element onto the page will default to a single column section anyway.

(It’s being aware of these nuances that tend to speed things up with page builders)

So let’s say I want a 2 column section…

Elementor 2 column section

Piece of cake.

And adding more columns to a section is also fairly straightforward.

Just click the column tab for any element and it’ll give you the option to add an extra column right beside it.

Elementor adding more columns to a section
Elementor adding more columns to a section

And because columns are contained within sections, you can easily stack them to create more complex layouts.

Elementor columns contained with sections

Another useful feature is being able to create extra columns by dragging and dropping elements into place.

All you need to do is drag the element using the ‘column’ tab, and you can squeeze it in virtually anywhere.

Elementor creating extra column by dragging and dropping elements
Elementor create extra columns by dragging and dropping elements

So far so good, but what about adjusting the width?

Again, pretty straightforward. Just hover over an element to reveal the border, then drag the side to increase/decrease width.

Elementor column width adjustement

Finally, there’s is a ‘column’ element in the sidebar (which defaults to 2 columns) if you prefer to do it that way.

Overall, I found the layout options worked well and I can’t see any obvious areas where it falls short.

Editing & Forced Styling

Now, let’s go a bit deeper and talk about the editing / styling experience.

(Hint: this is where things took a slight turn.)

Firstly, in order to edit my text I had to continuously go back to the panel on the left. Basically, I couldn’t make changes to the element itself.

Might not seem like a big deal, but not only do you have to click twice, you also have to move your mouse across the screen EVERY time you need to edit some text.

Elementor Heading Editor

Multiply that process thousands of times and you’ll see how a small problem like that can compound into quite a significant flaw.

On top of that, things get a little tricky when you’re working with text elements within a single block.

Expanding the panel is pretty much required (unless you wanna go insane), which also makes it difficult to actually see the changes reflected on the page.

Elementor Text editor

Again, this problem would be solved if you could just edit the text directly.

That aside, WHY are my headings blue? They shouldn’t be blue.

Going into the page settings, it became apparent to me that Elementor had it’s own styling options, completely ignoring the styling of my theme.

Elementor Global Colors

I’m still not sure why Elementor would force a color scheme on you by default. Just seems like an unpopular way to handle it from my perspective.

Same goes for fonts. I like my fonts. Don’t touch the fonts, okay?

Again, it took me a while to figure out, but you can ‘discard’ the global settings for both colors and fonts.

Elementor Global Colors settings
Elementor Global Fonts settings

And you can go one step further…

From your WordPress dashboard, head over to the Elementor settings and disable ‘global colors’ and ‘global fonts’ under Style Settings.

Elementor Style Settings

And look.

I don’t want to take anything away from Elementor here — it’s GREAT that you can even set different colors/fonts for individual pages — I’m just not overly keen on having this set as a default.

Elements / Widgets

So let’s talk about the actual elements (or widgets) within Elementor.

These are the little building blocks you use to piece your content together, and Elementor offers a generous library to choose from.

Elementor Widgets list

You’ll notice some of these are exclusive to PRO members, but I still think you get a lot to work with as a free user.

It was also nice to see that Elementor supports standard WordPress widgets, as well as any third-party widgets you may have installed.

Elementor WordPress widgets

Overall, it’s definitely not a bad selection but most would agree, it’s far from complete. Especially in comparison to some other page builders.

Question is, what’s missing?

Well, it can sometimes be hard to know until the moment you need to achieve a particular thing.

For example, let’s say you’re putting a roundup review post together and you want to finish it off with a nice comparison table.

Guess what? Elementor doesn’t have a table element.

Overall, it’s definitely not a bad selection but most would agree, it’s far from complete. Especially in comparison to some other page builders.

Question is, what’s missing?

Well, it can sometimes be hard to know until the moment you need to achieve a particular thing.

For example, let’s say you’re putting a roundup review post together and you want to finish it off with a nice comparison table.

Guess what? Elementor doesn’t have a table element.

Elementor table element

For the moment, if you want a table you’ll have to install another plugin – like TablePress – and paste the shortcode into Elementor.

Need a simple star rating?

Sorry, you’re out of luck. You’ll have to use images, or — you guessed it — yet another plugin.

How about an auto-generated table of contents for your freshly written ultimate guide?

Think again. It’s back to the plugins repository.

crying

Only since a very recent update have you been able to ‘nofollow’ a link, a HUGE reason most affiliate marketers steered clear of Elementor for so long. Better late than never, I suppose.

And I’m not just talking about single elements or features. At times, it can be super useful to drop in a group of pre-styled elements.

For example, in Thrive Architect, I can quickly drop in a pre-styled, call-to-action element like this:

Thrive Architect pre-styles call to action element

Sure, the design itself is pretty basic but for most people it’s more than enough. And, most importantly, it only took a second to drop onto the page.

To get the same result with Elementor, you’d have to build it from scratch which can take several minutes.

Elementor building call to action element

To me, this highlights one of the problems with Elementor.

It has little focus.

You can feel that it’s trying to cater for everyone.

As marketers, we have a different set of requirements to the average site builder (as illustrated above), and it becomes a frankenstein job when you’re constantly having to fill in the blanks.

That said, I do think Elementor covers the basics really well and if you don’t mind installing a handful of additional plugins, it does an excellent job at handling everything else.

Global Widgets

As you might expect from any page builder these days, Elementor allows you to create custom ‘templates’ from your content elements.

(These are different from page templates, which we’ll cover soon.)

So let’s say I’m using an ‘icon box’, and I’ve styled it exactly how I like.

Elemenor Global Widgets

If I wanted to use it again the future, I can save this (now custom) element to my library.

All you have to do is click the element, and then the little save icon.

Elementor Icon Box editor

You’ll then be presented with this popup window…

Elementor 'Save your widget as a global widget"

As you can see, saving elements automatically renders them as ‘global widgets’.

Pop in a name, hit save, and your custom element will be added to your library.

Elementor Yellow border for global widgets

The element you saved will also have a yellow border to indicate that it’s a global widget.

At this point, you can use the global widget on any page (or even again, on the same page) by going to the global widget tab.

Elementor Global widgets

Okay, so that’s how it works, but let’s get practical. What if you want to make changes to your global widget?

Well, if you click the widget you’ll notice a few things in the left pane.

Elementor Global widgets

First of all, the global widget is locked.

That means you can’t edit it or make styling changes as you would with a regular element.

You can temporarily unlock the element by clicking the ‘edit’ button, which will apply your changes to this global widget across ALL your pages.

So what if you want to make changes to the widget without applying those changes globally?

That’s where ‘unlinking’ comes in.

Elementor Global Widget unlinking

Clicking this button will effectively turn your global widget into it’s normal, ‘elemental’ form.

You’ll notice the yellow border turns back to blue, and you can make changes as you normally would within Elementor.

Elementor Global widget editor

And what’s great about using global widgets with Elementor, is that they can be used virtually anywhere throughout your site.

Just head over to your WordPress dashboard, click ‘Library’ in the Elementor flyout settings, and you’ll see this:

Elemenor flyout settings library

Elementor shortcodes work on pages, regardless of whether or not they’ve been built with Elementor.

And there’s even a dedicated WordPress widget…

Elementor library Wordpress widget

Using this, you can easily design call to actions within Elementor, and then have them display globally in your sidebar.

Here’s an example from Copyblogger.

Elementor global element in sidebar on Copyblogger

Overall, Elementor handles global widgets really well, and I can see myself especially considering some other page builders don’t offer this feature.

Section Templates

This kinda follows on from the ‘global widgets’ feature we just covered above, but ‘sections’ do work a little differently.

So what exactly is a ‘section template?’

It’s basically a container, marrying individual elements in a given section to give you control over the group as a whole.

Elementor sections

With that in mind, let’s a take a step back.

Using the example from earlier, I can actually save my ‘call-to-action’ within Elementor so I don’t have to recreate it again.

Elementor saving elements as template

In this case, we’re saving the entire section because my call-to-action is made up of several individual elements.

So, I’ll just give it a name and hit save.

Elementor "Save Your Section to Library"

Now, that section is saved to my library and I can essentially add it to any page.

But here’s where things got a little confusing because, unlike global widgets, section template don’t show up under the ‘global’ tab.

Elementor section template don’t show up under the ‘global’ tab

So where is it?

There are 2 ways you can import sections, and, as I found out, they both behave very differently.

Elementor templates

One option is to use the ‘add template’ button within the page area, and this will bring up the templates window.

Click the ‘my templates’ tab to get to your saved templates.

Elementor Templates library

You’ll now be presented with all the templates you’ve ever saved within Elementor, including ‘section’ templates.

Just click the ‘insert’ button to place it on the page.

Elementor inserting template

And the section will appear on your page. Simple as that.

The good thing about doing it this way, is that you can immediately make changes to your saved section.

Elementor section template editor

It’s all pretty straightforward, with everything working as you might expect.

And that brings me to the second option, which, strangely enough, doesn’t work the same way.

This time, we’re going to insert the section template using the template widget from the side panel.

Elementor Templates widget

As with any other Elementor widget, you first need to drag n’ drop it onto the page.

After that, it’ll ask you to select your saved template. In the case, we’ll be looking for our saved section template.

Elementor choosing template from Templates widget

Pro Tip

You may have to refresh the page for your saved section to show up in the side panel.

At this point, the section template will load… but here’s where things get a little confusing.

This time, the section templates are treated as a single block, so making changes requires clicking the ‘edit template’ button.

Elementor "Edit Template"

And once you click, it opens the section in a separate editor, where you have to make changes and resave the template section.

(This opens in a new tab)

Elementor separate template editor

Not only that, but any templates imported using the ‘template element’ are automatically regarded as global.

BUT — and this is a big but — unlike global widgets, these cannot be unlinked.

Honestly, it took me a while to figure all this out because Elementor didn’t give me any indication that these would treated differently. Very confusing.

So here’s the bottom line:

If you want a static, unlinked section, you’ll need to use the ‘add template’ button. Otherwise, use the template widget.

Page Templates

What’s a page builder without some full-page templates, eh?

Again, there are 2 ways to load a page page template with Elementor. You can do it from the side panel, or the page area.

Elementor page template

Clicking either of these will bring up the templates library.

Elementor does come pre-loaded with a bunch of professionally designed templates, which you can use right away.

Elementor Predesigned Templates

From there, click to preview an individual template, and if you like what you see, you can deploy it on your page.

Elementor template preview

One thing I noticed when inserting a template was that if you have a ton of existing content on the page, it can take a while to load.

Elementor template loading

Now, once the template loads, you’ll probably find that it doesn’t look anything like the preview you saw.

Elementor template loaded

This happens because Elementor is restricted to the boundaries of your theme.

If your theme says “content goes here”, that’s where content goes.

Elementor content area

So what next?

In order to properly utilize a full page template, you first need to have a full-width (or blank) page template for Elementor to work with.

Did You Know

A full-width template retains the header and footer of your theme, while a blank template is exactly that, blank. There’s no right or wrong one to use, it just depends on what you’re trying to achieve.

Now, I’m gonna be straight with you.

In the first draft of this review, I went on an epic rant about Elementor not having this functionality built-in, along with ways you can get around it.

Shortly after, guess what happened?

Elementor Page Settings

That’s right, they went and added it in.

And while it’s always fun deleting an entire section of your article, I was still pleased to see that we’re all on the same page. (No pun intended.)

To get to it, navigate to the settings tab and click on ‘page settings’.

Elementor Revision History

And under the ‘template’ options, you can now choose between ‘full-width’, ‘Elementor canvas’, and any other templates included with your theme.

Note: The ‘Elementor canvas’ options is just a blank template. For some reason, they decided to get fancy with the name :P

So let’s try it again with the canvas option selected…

Elementor canvas option

BOOM.

That’s more like it, Elementor.

Now, with the technical stuff out the way, what about the actual templates?

Honestly, I was quite impressed with the designs. They’re clean, professional and super easy to work with.

That said, and this is going back to a previous point, the template library doesn’t really cater for us marketers.

Don’t get me wrong, there are plenty choose from. Only thing is, Elementor does cast a wide net on these.

Elementor Predesigned Templates

Sure, there’s a handful of landing pages in there, but being so varied also makes it limited when you’re looking for a particular style of template.

For that reason, I can definitely see the relatively small selection of ‘marketing’ templates being overused.

Elementor Predesigned Templates

So, if you depend on pre-built landing pages or sales pages, don’t expect a whole lot from this plugin straight out of the box. At least not right now.

But If — like me — you’re happy to build landing pages yourself, you can simply save your own page templates to reuse again and again.

Elementor template saving

On a final note, you can import other people’s templates as well.

This site even aggregates community-made templates, so anyone can go in, download, and import them into their own copy of Elementor.

WPress.zone

Responsiveness

Not unlike most page builders today, Elementor is responsive by default, so your design will automatically adapt to different screen sizes.

One thing I was surprised to see in Elementor, is the ability to live preview different devices, right from the editor.

Elementor Responsive Modes

And what surprised me even more was that you can make independent changes for each device.

To illustrate what I mean, I’ve got 2 headings here:

Elementor independent changes for devices

If I switch over to the preview for ‘Mobile’, my headings look more or less the same…

Elementor Mobile preview

But for arguments sake, let’s say I’m not happy with the spacing between them on mobile.

All I need to do – while in mobile view – is click the element I want to change and adjust the settings.

Elementor

And here’s the magic.

If I go back to my desktop preview, Elementor hasn’t applied the same changes to desktop.

Elementor Desktop preview

Seriously, how can you not love that?

If you’ve ever battled with responsive design and struggled to make your content look good on any device, this is a real game changer.

Pro Tip

You can also press ‘Cmd + Shift + M’ on a Mac, or ‘Ctrl + Shift + M’ on a PC to cycle through the device previews.

But guys… it get’s even better.

Not only can you control styling for different devices, but you can also hide the element completely.

Elementor Visibility options

AND this isn’t limited to single elements, it also works with sections.

I have to say, I’ve yet to a see a page builder that gives you this much control when it comes to responsiveness.

If this was eBay, I’d be all like “A++++++”.

Undo & Revision History

Okay, this is one area I was eager to cover.

We all make mistakes when designing layouts. Things get moved. Other things get deleted. It just happens.

But what if you want to simply undo an action? Shouldn’t be too difficult, right?

Wrong.

Elementor doesn’t have an undo option. And if there’s one thing I despise about Elementor, it’s this.

Jackie
(Yep, even Jackie is with me on this.)

AInstead, you have to go through the ‘revision history’ tab and preview your content from saved revisions.

Elementor Revision history

Once you’ve found the revision you’re after, just click the green button to apply it.

Elementor Revision history

It works great, fair enough. I can definitely see this being a real lifesaver in certain situations.

But let’s be real here, it’s still doesn’t make up for the fact that we’re missing an undo option.

For starters, it’s not as simple as clicking a button. It requires navigating through the menus and previewing different revisions before you even find the right one.

Elementor Page settings

Secondly — and this is the real kicker — this feature is built on the WordPress revisions system, which means revisions only appear for each time you’ve hit the save button.

Basically, if you haven’t saved your changes in a while and you really mess something up, it’s game over.

Pro Tip

Having month’s worth of revisions might seem like a good idea, but they can really hog resources and ultimately slow down your site. A solution is to occasionally use a WordPress database “cleaner” plugin, like this one.

I haven’t tested the plugin myself, and I’d strongly advise making a backup before running it, but I’m told it does a solid job at cleaning up revision history (as well as other database fluff).

Though it’s not exactly a deal-breaker — and I do really like the revisions history feature — it still boggles my mind that such a well thought out page builder lacks such a basic function.

Open Source

Let’s lift the mood again :)

Easily one of the biggest differentiators of Elementor over other page builders is the fact that it’s open source.

That means… uhm… Google, what it does mean?

Did You Know

Open source: denoting software for which the original source code is made freely available and may be redistributed and modified.

Since the code is freely available, it allows users to fix bugs, improve existing features and even introduce completely new additions to the software.

In fact, you can see all the “action” on GitHub, right here.

Elementor Open source

As a result, things generally progress faster. And most people agree that open source is the way forward.

It also opens the doors to useful third-party plugins.

The effects of this are already evident when searching ‘Elementor’ in the WordPress plugin repository:

WordPress plugins

Those are all third-party plugins designed to enhance Elementor, and many of which are free.

While some of them offer minor improvements, others virtually give Elementor super powers.

A good example of this is Press Elements.

Press Elementor

This thing adds new widgets to the Elementor library, allowing you to leverage dynamic WordPress components.

These are things like the featured image, post title, post excerpt, and more.

Elementor site elements

(There are plenty of other examples, but that could be another post entirely.)

Although it’s a bit of a hassle having to install plugins on top of plugins, I’ve always been a fan of this approach because it keeps the core product lean for those who don’t need the extras.

Support

I don’t think I’ve ever seen so much praise for support than what I’ve seen with Elementor.

Where this would normally be due to some top-notch, live chat support… that’s actually not the case here.

In fact, Elementor doesn’t even offer live chat support. Instead, it has something even better.

An active, raving community of “Elementorists” at your beck and call.

Elementor Community on Facebook

I referred to this multiple times throughout the writing of this review, and no doubt I’ll continue do so for as long as I use Elementor.

While it doesn’t have a crazy number of members (4,600+), it is extremely active and any questions you have about the plugin has probably been asked/answered before.

Elementors Community

If a search comes up short, just ask in the group.

It’s a collaborative community and you’ll generally get responses flooding in within an hour or so of posting.

Aside from that, I found their YouTube channel super helpful.

Elementor Youtube channel

Elementor has a lot of moving parts and it can be overwhelming when you first start using it – particularly if you’ve never used a page builder before.

In my opinion, the videos are the perfect starting point since they cover all the core features of the tool.

(They also have detailed documentation, if you prefer to go through it all in written format)

IF for some reason you still need help, there is a more VIP option that’s only available to PRO members.

Elementor Technical Support

To be honest, I think that’s fair given the quality of free support options available to you.

The premium support is basically a ticketing system. Of course, I made a request to test how reliable it was for this review…

Elementor contact form

As I expected, it was stellar.

I asked them about the undo button, and I got a reply within a couple hours. (They told me it was already noted).

Overall, you really can’t complain. And if you did, I’m sure they’d take care of you ;)

Are You PRO, Or No?

Throughout this review, I’ve only briefly touched on the paid version of Elementor – also known as PRO.

And while Elementor is, for the most part, a free plugin… upgrading does give you a little more firepower.

Elementor pricing

So what are the benefits of going PRO?

I won’t write a book on this, because you can get it straight from the horse’s mouth, right here.

What I will do, however, is comment on the most notable differences between the free version, and the PRO version.

So for starters, you’ll get access to a bunch of extra widgets…

Elementor Pro widgets

While I’d class a few of these as slightly gimmicky, there are some useful additions. Even for us marketers.

You’ll also be able to use global widgets that can be used throughout your content, as well as other areas of your site.

Elementor Global widgets

I covered global widgets earlier in the review, so you probably won’t be surprised that I’d recommend PRO for this reason alone.

As for page templates…


You’ll be pleased to hear that upgrading will unlock a slew of premium page templates for you to dabble with.

Elementor Pro premium page templates

And the last one I’ll mention gives you an extra layer of design control with ‘live custom CSS’.

So if you’re a stylesheet-ninja, I’m sure you’ll appreciate this one.

Elementor Heading custom CSS

Personally, I feel like the idea of a page builder is to eliminate the need for CSS entirely. I almost see it as a safety net for when the tool can’t deliver.

For that reason, I don’t think this should be a PRO feature.

Rebuilding Trello’s Homepage

For each page builder we review as part of this series, we decided it’d be a great idea to recreate an existing page using each tool.

That way, it would give us (and you) a much clearer comparison of what each tool is capable of in practical terms.

As for the page, we settled on Trello’s homepage because it’s an excellent example of a modern layout that makes good use of different elements.

Check out the video to see how I got on with Elementor:

Where It Performed Well

Laying the foundation of the build was really straightforward.

In this case, since I was trying to create a replica of Trello’s homepage, the global color and font options were actually useful.

Elementor Global font options

And I really appreciated being able to set up my color pallette before getting started. I used this chrome extension to get the hex codes from Trello’s page and drop them into Elementor.

ColorPick Eyedropper Chrome extension
Elementor color picker

Adding sections and assigning a background color was a breeze – even including gradients.

This was particularly important for this type of page as it’s made up of quite a few sections.

Elementor background image alignment

Initially, I thought I’d have trouble with background images and being able to align them properly within the section.

Turns out, Elementor is kitted out with everything you need in that department.

Elementor background image options

Even the small details like rounded corners and box shadows were easy enough to implement.

Elementor Background options

Where It Fell Flat

Now onto the bad stuff and I’m really going to pick Elementor apart here because I think it’s important to understand the limitations.

The first issue I encountered was aligning buttons side-by-side. I was eventually able to do it with columns, but they still didn’t sit properly in the corner.

Elementor buttons alignment

Later on, I had a similar issue except I couldn’t even use columns to align the buttons.

Turns out, you can’t create columns inside a column.

Elementor columns limitations

Overall, I didn’t like the ‘column’ approach when it comes to placing buttons next to each other. It just felt… wrong.

Moving on.

I also noticed Trello has an image that’s actually pulled off the screen. Almost like it’s cropped, but it isn’t.

Trello

I attempted to recreate this with a negative margin, but the more I negative margin I applied, the taller my image became.

After shooting the video, I did manage to get it very close by playing the margins some more, but it wasn’t as easy as I think it should be.

Elementor Image editor

That said, I couldn’t replicate the bottom margin at all because there was no way to make the image slot in behind the section.

Elementor image editor

Another problem I faced (on multiple occasions) was with ‘section width’.

While I could adjust the width of an entire section, I couldn’t adjust the width of individual elements within that section.

Elementor section editor

(Notice how the image below the text element is much wider)

As a result, I was forced to use individual sections to house individual elements. Not ideal, but it was the only way to control width without resorting to custom CSS.

Elementor section editor

One thing I forgot to mention in the video (oops), was Trello’s sticky header.

After recording, I had a stab at it and quickly realized it was a job for custom CSS. There are currently no options for fixed sections.

Trello's sicky header

Finally, I had some issues with colors.

I noticed my link colors were inherited by the theme, and I couldn’t find anywhere to change that in the options panel.

Elementor link color

(You can, however, change this in the text editor on a case-by-case basis)

And strangely, I noticed some background colors had shifted after revisiting the page a day later.

Elementor background colors

Animation & Content Cycling

You may have noticed that Trello’s homepage has some slightly more advanced stuff going on.

Not only do some of the text and image elements fade in/out, but the content also cycles.

Trello

I didn’t include this in the main test because it’s more of a “bells and whistles” type-thing. That said, I thought it would still be a good idea to explore it.

Let’s start with animation.

Elementor does have some animation settings that can be applied to pretty much any Element.

Elementor animation settings

In this case, the “fade down” animation would be perfect, and you can even dictate the speed. Perfect.

As for content cycling, I couldn’t find a way to do it with text. At least not with the options available within Elementor.

Surprisingly though, I was able to do it with images using the Elementor ‘slides’ widget. It did require a few tweaks, but it worked perfectly.

Elementor Image carousel

Overall, I was really impressed with what I could do here.

Is Elementor Right For You?

Now that I’ve covered all the different features and functions of Elementor, weighing up the pros and cons and giving my experience along the way — let’s talk about YOU.

As with any tool, Elementor isn’t going to be the right choice for everyone, so I want to get to the bottom of who exactly this page builder is suitable for.

Budget Bloggers

I’m just gonna come right out and say it.

Elementor is a budget-bloggers wet dream. I mean, come on… it’s free.

Elementor Free version

Yes, there’s a PRO version.

And yes, as I mentioned before, it does offer some useful additions.

But this isn’t your usual “freemium” product. In most cases, freemium means getting access to a small slice of the pie. A slice that’s riddled with heavy, and often annoying restrictions.

Elementor gives you access to MOST of the pie without taking anything significant away from the product. In my opinion, it’s 100% usable without going PRO.

Does that mean you shouldn’t upgrade?

Well, not quite.

Like I said earlier, there are some definite advantages of the paid version, but these are things you can absolutely live without if… well…

No money gif

(Sorry, I just had to throw that in there.)

Beginner Bloggers

Is Elementor suitable for beginners?

Despite the slight learning curve I experienced, most likely due to being too familiar with how Thrive Content Builder works, I still think it’s a GREAT page builder for beginners.

Of course, if you’ve never used a page builder before, it will take some getting used to, but I think the same can be said for any page builder with the same capabilities.

There were some instances where things just didn’t make sense — the global vs non-global templates being a good example — but in most cases, a simple post in the Facebook group quickly cleared up my confusion.

Overall, if you’re a beginner and you’re looking for a page builder that’ll give you the least amount of friction with the most amount of flexibility, Elementor is an excellent choice.

High-Level Marketers

I touched on this earlier in the review, but I’ll say it again.

Elementor isn’t geared towards marketers, which means it’s inherently missing a few things that we – as marketers – might rely on from a page builder.

A perfect example — and I was saving this one to make a point here — is the forms builder.

Elementor forms builder

The builder itself works reasonably well with plenty of customization options. But it’s completely lacking integration with any of the major email marketing services.

Of course, there ARE ways around it.

Some people are using Zapier webhooks. Others have abandoned the forms builder altogether, in favor of third-party widgets and shortcodes. You can certainly do either of those.

The question is, are you prepared to spend some time trying to plug all the holes? If not, Elementor might not be your all-in-one solution when it comes to page builders.

Regardless, I still think Elementor deserves a place in your toolkit, even if it’s just for pages that are more content-driven, and less marketing oriented.

If you fit into this bracket and you do decide to grab Elementor, I’d highly recommend going for PRO.

Conclusion

There’s no doubt that Elementor is one of the best , if not the best free page builder on the market.

This feature-packed WordPress plugin even stands it’s ground against many premium, more established page builders, with development showing no signs of slowing.

(You can see our comparison review of Elementor against other popular page builders right here.)

Perhaps most interestingly, it’s the first open source page builder. And though it’s a little hard gauge it’s true potential is at this stage, I can’t help but be excited about the possibilities.

As for Elementor PRO, it’s already an attractive upgrade despite being in it’s infancy, and I imagine most new features from this point forward will be exclusive to members, though only time will tell.

Do you want to learn how to build 6 figure authority sites?

Subscribe to join our FREE training and…

  • Learn how to build white hat links to your site without headaches
  • Finally have a proven method to finding profitable niches
  • Get access to our foolproof keyword research methods
  • Learn how to outsource high quality content

6 Comments

  1. Hi,
    Great article! I am sure I will redesign my website with this!

    About the ‘undo’ vs. ‘revision’ when I was playing around with it, the undo works the same as in word ctrl+c so undo the last change(s).

    Daniel

  2. TIP : The following 2 plugins conflict big time with text overlay on Background images especially with background colour : PB SEO Friendly Images & Fast Velocity Minify in Elementor Free & Pro..

  3. Dunno when this was written, because there’s no date but… CTRL + Z will undo any recent changes.

  4. On the “forced style” comments: I’m just learning Elementor (my first page builder). I seem to recall seeing a setting that allowed you to keep your theme style/color settings, or let Elementor override them. I might not be thinking of the same thing you are addressing, or perhaps it has changed since you wrote this. Anyways, a nice article for me to get a quicker overall on Elementor than having to get through all the 3 hour tutorial videos out there. Thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *