Introduction
If you’ve been using WordPress for a while, you would already know that creating posts and pages are done through Gutenberg, the default block editor. Gutenberg allows you to add blocks of content (from headers, custom html, and even 3rd party widgets) into your post or page. In addition, it even allows you to create multi-column layouts. It is also lightweight and very quick. However, it isn’t perfect. It has its limits. One of these, is the lack of elements that can be used on a post or page. Another, is that it is not very customizable. Yet another is that it is still in development and has a myriad of issues. Lastly, it is not mature enough. While Gutenberg is nice enough for simple posts and pages, there are more efficient and powerful alternatives.
What are these alternatives? Page Builders.
Page Builders, as the name suggests, help build pages. Different Page Builders have different characteristics, but all provide control to create, edit and design custom post or page layouts. Because of this, they are the preferred tool of UX/UI designers.
interested? Read on.
There are many page builders in the market – free and paid.
In this review, we will be looking at one of them – Elementor Page Builder Pro. Elementor Page Builder Pro (“Elementor Pro” for short) is one of the leading page builders available in the market. It has over 5 million installs and is localized in over 50 languages and is ranked as one of the most popular plugins in WordPress.
Does Elementor Pro live up to its reputation? Read on and find out.
In this review, we will be covering Elementor Pro’s features and use.
Summary of the Good and Bad of Elementor Pro
To begin, here is an overview of Elementor’s pros and cons:
| The Good of Elementor Pro | The Bad of Elementor Pro |
|---|---|
| Easy-to-use | No “Clear Content” option |
| Intuitive drag and drop Interface | No chat support |
| What you see is what you get (WYSIWYG) when editing | |
| Full access block and page templates | |
| Efficient Editing |
Now that we’ve seen that, let’s look at it further.
Installing and Using Elementor Pro
In this section we will show how to install and use Elementor Pro.
Installing Elementor Pro
We will take a look at Elementor Pro’s installation and setup first.
For Elementor Pro to work, users need to install and activate the plugin’s basic version (which we will refer to as just “Elementor”). Otherwise, Elementor Pro will not work. Installing Elementor is easy, users just need to look for it in the “Add New Plugins” page.
Once the plugin is shown, users should click “Install Now”
Then click “Activate”.
Once that has been activated. Users can proceed to installing Elementor Pro. Since Elementor Pro is a premium plugin, users can’t find it in the “Add Plugins” page. Instead, users have to upload the plugin’s zip file.
Then activate the plugin.
Once that is done, users have to connect and activate Elementor Pro. Only then can the Elementor Pro features be used.
If you think, installing and setting up Elementor Pro is a lengthy process, we would agree. However, given the amount of elements (also known as “widgets”) and functionality Elementor and Elementor Pro add to WordPress, it is to be expected. The good thing is that once the installation and setup are done, users can start creating and editing pages without having the need for further configurations.
With that let’s proceed.
Using Elementor Pro
To use Elementor Pro, users need to create or edit a post or page. Then they need to click the “Edit with Elementor” button. In our example below, we created a new page, gave it the name, “About”, and then clicked the “Edit with Elementor”
This would redirect to the Elementor Interface. Is is through this interface that page or posts are edited or created.
We’ll examine this interface next.
The Elementor Interface
In this section, we will be looking at the Elementor interface. Both the basic version and Elementor Pro make use of the Elementor Interface. it is through this interface that custom page layouts and designs are made. All widgets, free and premium, can be accessed through the interface.
The interface has two main parts – the side panel.
And the page editor.
The Elementor Side Panel
In this subsection, we will be looking at the side panel.
The Elementor Side Panel consists of the Widget Panel, the Elementor Menu, and the Panel Footer.
The Widget Panel
The Widget Panel contains all the widgets that users can use in the page or post that is currently being edited. These widgets are the basic building blocks of sites.
Above, we see two subtabs – “Elements” and “Global”. The first tab is where all widgets – free and premium- can be found. The second tab gives access to widgets that have been created and were were configured to have a shared instance anywhere it is used, whether on a different layout section or even another page or post.
Let’s view the ELEMENTS tab first.
The ELEMENTS tab contains all of the widgets that we can place on a page or post. Elementor Pro has over 50 widgets available for users to choose from, and use. To start of, there are Basic Elements Widgets which, in our experience, are the most common and fundamentally used for designing a page.
Then there are the Pro Elements Widgets, which only come with the premium version of Elementor. These provide more functionality than basic widgets do.
Elementor Pro also has WooCommerce element which can be used for e-commerve (Note: these can only be used when another plugin, “WooCommerce” is installed and activated).
Lastly, there are Theme Elements Widgets which are dynamic and change based on the page’s , posts’, and even the site’s contents.
Looking for a widget is really easy because the widgets are grouped by category (although the grouping is different and more specific than the organization shown in the images above.)
The widget panel also has a search bar which can be used to look for elements.
Editing is done through the panel as well. To do that, users have to click on a widget on the page. This will change the contents of the side panel into the settings for the specific widget. This will enable users to change the content, the styling, and the advanced settings for that widget.
All in all, the Widget Panel is handy and efficient because it provides easy access to elements and their configuration settings. Other page builders don’t have this feature so it can be tedious looking for widgets or modify them. Not with Elementor. All widgets and their settings can be found in one location, making editing an ease.
The Elementor Menu
The Elementor menu is where users can configure the Global Styling settings, access the Theme Builder, and edit the plugin preferences. This is also where users can access a navigation tool called the “Finder” and view a page preview.
Panel Footer
The last part of the side panel is the panel footer. It is essentially a toolbar used primarily to save updates, view revision history, and change views. It can be found at the bottom of the side panel.
That’s it for the side panel.
The Elementor Page Editor
We’ll be viewing the page editor next.
The Elementor page editor is where the widgets are placed and where layouts are made or arranged. The page editor also displays what the edited page or post looks like when it is published.
Here we can see the the add section area. This is where widgets are placed.
And of course, this where sections are added. Sections are composed of at least one column as we can see below.
It is also through the page editor that users can add templates.
That is all for the page editor.
But before we proceed, we have to comment on how intuitive the page editor is. First, the buttons for adding sections and using templates have captions that tell the users what they do. In addition, there is even a caption that says that widgets should be dragged there. Lastly, adding templates and new sections is a breeze. We would have to say that is is very well designed and thought of.
Elementor Editing Features
Now that we’ve seen the interface let’s look at Elementor’s editing features.
In this section, we will be covering Elementor’s editing features in more detail.
Drag and Drop Placement and Editing
Elementor is a drag and drop editor. All users need to do is click on a widget and drag the widget onto the “Add Section” area. Doing so will display the widget on the page. Here’s an example with an image widget.
Users are not limited to adding one element in a section. We can add as many elements as we need to. In the image below, for instance, we added more elements to a section
We can also rearrange the widgets by dragging them onto their new positions.
The drag and drop feature makes editing really easy. As can be seen, all users need to do is drag and arrange the elements onto their respective positions inside a section. That’s it. That’s how they’ll appear on a published post or page.
Extensive Editing Capabilities
Widget Editing
Elementor allows users to extensively edit a widget. And we will see how.
To edit a widget, users just need to right click on the widget they need choose the widget specific edit option. To demonstrate this feature, we will edit a “Text Editor” widget. In the image below, we right clicked on the widget and then chose the “Edit Text Editor” option from the pop-up menu. This changed the content of the side panel as it displayed different tabs – “Content”, “Style”, and “Advanced”.
The Content tab, as the name suggests, is where the widget’s contents are edited. In the image below, we can see it in action. We edited the content and it was immediately reflected.
The Style tab allows users to change the appearance of the widget. See it below for a “Text Editor” widget.
Lastly, the advanced tab allows users to make further configurations for the widget. In the image below, we gave the “Text Editor” widget a motion effect and a border.
It’s not difficult to see how extensive Elementor allows users to edit widgets. From content to motion effects, users have absolute control over widget contents, appearance, and even behavior.
Section and Column Editing
Columns and sections can be edited too. To do that, users have to right click then select the edit option for the section or column. This will change the contents of the side panel, similar to what happens when editing widgets. We can edit the layout, styling, and even add advanced configurations of section or column.
Let’s view it in action. In the image below we edited the layout, style, and advanced settings of a section.
Another really handy future is that users can change column sizes by dragging the borders.
Again its amazing that Elementor gives users this much extensive control over these page components. It’s as if we were coding these components ourselves.
Site Styling
The next feature to look at is site styling. With this feature, we can edit configurations that affect the whole WordPress site.
The options can be seen in the image below.
As an example, here we are editing the global font settings.
Not only do users have control over widgets and sections, users also have control over the WordPress site’s settings.
Custom CSS
Elementor Pro extends these capabilities further by allowing users to customize the CSS of widgets, columns, or sections. Users need to write the custom CSS through the option that allows found in the “Advanced” tab.
This is particularly useful when users need more control than what the “Style” tab offers such as giving the element more advanced attributes.
Elementor Templates
Elementor comes with different templates that users can use. Although the basic version of Elementor comes only with a few of these, Elementor Pro allows users to access all these templates.
Block Templates
The first of these are block templates, which are templates for a sections. Here’s one in the image below. In it we used a FAQ block template.
We can see how sleek it looks.
Page Templates
Elementor also has page templates which as the name suggests is a template for a page (or post for that matter). Here’s one of them
And here we see how fresh it is.
Custom Templates
Lastly, we can also save parts of the post or page as a template, so that it can be reused later on as many times as needed. In our example below. we saved a section.
And here below, is us reusing it.
Custom templates reduce the amount of effort needed when designing. It streamlines the workflow of users, because there is no need to redesign an element from scratch.
That is all for templates.
Efficient Editing
In this subsection, we will be viewing Elementor’s (and consequently Elementor Pro’s) efficient editing features.
Copy Paste and Duplicate
Elementor makes it easy to copy and duplicate widgets. Users just need to right click then choose the “Copy” option from the pop-up menu. After that they just need to choose an available section to place it.
Here is the copy paste feature.
And here is the duplicate feature.
What’s great is that this works for columns and sections as well so that there is no need to recreate or even copy and paste these elements
Copy and Paste Styles
A widget’s style can also be copy and pasted. What this means is that users can use the styling of an already existing widget to another widget of the same kind without needing to configure anything.
This is really useful when you need at least two elements that have similar styling.
Deleting
Elementor makes deleting widgets, columns, and sections also really easy. Users just have to right click on the page components and choose the delete option.
Undo Changes
It is also really easy to undo changes. Users just need to press CTRL + Z and the changes are undone. This can be done multiple times so if users need to step back a few steps when editing all they have to do is undo more than once.
Revision History
If users need to go to a specific edit, there is an Elementor feature which allows them to do so – Revision History.
Users can revert their changes to an “Action” (which is a state in a current editing section.)
Users can also revert their changes to saved updates (called “Revisions”)
This is very useful when users decide that they would need a major re-edit but would like not to begin from scratch and instead build on a page or post that already has content.
Section Navigator
Elementor also has a feature which allows users to navigate a page or post easily – the Section Navigator. This navigator displays all the content in the page editor. Aside from this, users, the navigator allows elements to be focused on by clicking on the page component inside the navigator.
This is very useful when there are numerous widgets and sections on a page.
Responsive Editing
Elementor also allows for responsive editing. Users can edit and view their pages or posts in desktop mode, tablet mode, or mobile mode. This allows users to gauge and make necessary adjustments in their designs and allows them to take account of how their pages or posts would look like in non desktop screens.
There are even settings to hide a page component depending on the screen. All users need to do is toggle that option in the “Advance” tab for the page component that the users need to hide. Here is in action for an image widget.
This is a really good feature because it allows users to see and provides some control over page components when the screen changes.
Finder
The next feature is the finder, which allows users to quickly jump between pages and posts. It also allows quick access to dashboard pages among other things.
Keyboard Shortcuts
Yet another feature that adds efficiency are keyboard shortcuts.
These shortcuts save users a lot of time.
WYSIWYG
Lastly, the last feature is that Elementor is a “what you see is a what you get” editor so that how the page or post looks line when being edited is what the final product looks like,
As an example, here is what an edited page looks like.
And this is what the page actually looks like.
Elementor Pro Features
Most of the features in the previous chapter are also present in Elementor Pro. However, in this section we will be looking at Elementor Pro features.
Let’s now look at some features which only Elementor Pro
Pro Widgets and Pro Templates
We’ve already mentioned these features in previous sections, but we will be repeating it again. Elementor Pro comes with over 50 widget available. Click this link to see all widgets (Note: the e–commerce plugins are no longer part of Elementor Pro). It also comes with professionally designed templates. Click this link to see all kits (which are a collection of page templates) and individual page templates. Lastly, view the block templates in the “Add Template” window to see all pre-made section templates (Note: there is no link online to view these; they can only be viewed from the “Add Template” window)
Global Widgets
The next feature are global widgets which are widgets that have a shared instance. This means that an edit on the widget in one page or post of the site would affect all other pages or posts which the widget appears on. This is also works for widgets on the same page. Take a look at the image below. In the image, we declared a text editor widget as a global widget, duplicated it, and then made changes. We can see that a change in one of the widgets also produced changes in another.
This is very useful when users need to edit a widget that appears in multiple places. No need to edit multiple elements for a single page nor is there a need to navigate elsewhere.
Dynamic Content
Users are not limited to adding static content to a page or post. Users can add dynamic content too. This is done through the “Theme Elements” widgets we saw earlier. These widgets base their contents on the site’s contents. Let’s check one of these widgets – the Nav Menu widget. This is the widget displaying a menu.
When we delete a menu item as seen below
The widget’s contents also change.
This feature is useful because once combined with static content, it allows for the creation of “personalized and dynamic sites“.
Theme Builder
The next feature we will look at is the Elementor Theme Builder. This feature allows users to create reusable templates. Users can create templates for components which are commonly used such as headers and footers.
Let’s view an example. In the images below, we created a header.
Then we placed some contents in the template’s page editor then save it.
After saving, we can then import the template, through the “Add Template” interface
The Theme Builder isn’t limited to headers and footers. Users can also create templates for different kinds of pages as well. This feature is really useful especially when users need to design similar looking pages or posts. No need to recreate a page component from scratch multiple times.
Popup Builder
Elementor Pro also has a Popup Builder. This feature allows users to easily create and use popups in pages or posts. Creating a popup is similar to creating page templates.
Users need to add content in the popup’s editing page then save.
And then finally, users have to link it to a button.
Here’s an image of the popup in action.
That’s it. It’s that easy to create a popup using Elementor Pro
Elementor WooCommerce Builder
The last Elementor Pro feature we will look at is the Elementor WooCommerce Builder. This is simply the Elementor Interface with WooCommerce widgets (note: as was previously mentioned this can only work if WooCommerce is an active plugin). The WooCommerce Builder can be accessed from the Theme Builder by creating a “Single Product” or “Product Archive ” template. Likewise the process of creating these templates is similar to non-WooCommerce templates.
Here is the WooCommerce Builder in action for a single product template. On the side panel, we can that the widgets are different.
And here it is in action for Product Archives
To learn more about the Elementor WooCommerce Builder visit this page and also the tutorials page.
Other Elementor Features – Open Source and Extensible
Most software distributors keep the source code of their products hidden. Elementor doesn’t. The Elementor team has decided to release the source code to the public. The Elementor Team also has released the source code of Elementor Pro to the public.
This allows third party developers to report bugs, resolve issues, and build add-ons for Elementor.
We think this is great since this allows developers to extend Elementor’s capabilities. Developers can create their own extensions, develop widgets, and add custom functionality.
In fact, third parties have already released their add-ons to Elementor.
If you are a user who would like to develop with Elementor then this is really great for you.
Elementor Pro Support
Elementor offers good support. They have a knowledge base which consists of tutorials and other kinds of articles, a Frequently Asked Questions page, and a Youtube channel. They also have a very active, helpful, and responsive community. For users who purchased an Elementor Pro license, they get 24/7 hours ticketing support.
These are good. But there is one big downside.
Even with an Elementor Pro license, the Elementor team does not have chat support. Need an issue resolved immediately, too bad. The closest you will get is an email reply once you file a ticket. While this may be fine for users, it becomes arduous and tedious when users need an immediate reply. A chat support system can really help out many Elementor users. Unfortunately, it doesn’t seem that this is a priority for the Elementor team.
If this fine with you, then that’s great.
Personally, we don’t think that is good. Live support shouldn’t be hidden behind a paywall. And more importantly, support should be also be convenient.
Now don’t get us wrong, Elementor’s support is decent. We just think it could be much better.
Elementor Pro Pricing
Let’s talk about pricing.
The basic version of Elementor is free. Yes, it literally costs nothing.
However, Elementor Pro isn’t and it can be quite expensive. There are three plans for Elementor Pro, with US$49 per year being the cheapest. With this plan, users get access to all Elementor Pro features and Support for one website. The other plans offer the same except that users get to install it on multiple sites. This is useful if you run multiple blogs and want to use Elementor Pro to design them or when you will be creating a good number of sites.
Is it worth the price? That depends on your needs.
View this page for more details.
Where Elementor Pro Can Improve
Elementor is a really good page builder. It is easy to use, it is intuitive, and it has lots of features. However, we think that it could do better not just as a product but also as a service. The first of these, is that Elementor has no clear page option to delete all the contents on the page or post being edited. Instead users have to delete what they need one-by-one. The next feature, we think that Elementor. The more important though is that they should add 24/7 chat support so that any concerns users have may be resolved immediately. Other than that, Elementor Pro has no other issues.
Should You Use Elementor Pro?
Now you may be asking yourself whether you should be using Elementor Pro.
It depends.
Will you be creating a simple post or page? Then the default editor should be enough.
However, for more complex pages and posts, you will need to use a page builder. And here we cannot help but recommend using Elementor Pro.
Why?
Because Elementor Pro is intuitive, easy to use, and feature-packed. It has a non-confusing interface, It offers drag and drop editing, and it has tons of widgets to choose from. In addition, it can be extended and built upon. And since its source code is open source, you can choose to build your own custom solutions.
For those reasons, we recommend using Elementor Pro.
If you aren’t convinced, try using the free version of Elementor. It may not contain as many widgets and features, but it has the core page building functionality which Elementor Pro has. It’is also a very good way to gauge whether you would need the features which Elementor Pro offers.
Conclusion
Well, that sums up our Elementor review.
We’ve seen its features and capabilities first-hand and while we can tell that Elementor isn’t perfect, we can also tell it is great. Judging by its current development, it can only get better from here.
If you think you should give it a go. We recommend that you do.
And… that’s it.
Thank you for reading this review.
