Elementor Review: A Page Builder Plugin That Breaks Boundaries

Tell me, honestly, do you like designing pages with the WordPress editor?

I’m not referring to your typical blog post. I’m talking about Home Pages, Landing Pages, and Contact Pages.

If you’re like me, then you’re probably disillusioned after grappling with the limitations of Classic Editor, and the bugs within Gutenberg.

I much prefer using a page builder plugin to create my pages in WordPress. And judging by the explosive growth in the page builder plugin market, it looks like I’m not alone.

In this post, we’re going to look at one of the newer page builder plugins for WordPress, called Elementor.

What is Elementor?

Elementor is a visual drag-and-drop page builder plugin for WordPress. The plugin lets you design and create pages using its built-in elements – called widgets – without the need to use code, HTML, CSS or shortcode.

And as it’s a front-end editor you can see your page as it evolves without having to hop backward and forward between the design and preview screens.

We’ll talk about the Pro version in a moment, but first let’s take a look at some of the main features.

The basics of building pages with Elementor

You can download Elementor from the WordPress repository or install it directly via the WordPress admin panel.

Once installed you’re ready to go.

But before you start designing a page, it’s important to understand a few basic principles.

Elementor pages are built in sections. A section is like a row. You can have as many sections on your page as you wish.
Each section divides into one or more columns. You place widgets inside each column to create the overall design of your page. A widget is an element; e.g. an image, a text box, a list box, an icon, etc.
A section can run across the whole width of a page, or it can be confined to a set box size.

Note: Elementor allows you to create full-width pages with any WordPress theme.

Most page builder plugins require you to use the vendor’s theme to create full-width pages. For instance, the Beaver Builder plugin requires the Beaver Builder theme.

OK, now you can start using sections, columns, and widgets to build a basic page with Elementor.

Designing a basic page with Elementor

1. Start by adding a new page

Go to Pages > Add New.

You’ll notice you have an Elementor button now, as well as the standard WordPress editor.

2. Add a section

Press the ‘Edit with Elementor’ button to start designing your page.

Elementor opens with a Content Area and a list of Widgets on the left-hand menu. You have the option to add a new section or add a template to the main content area:

We’ll come back to the templates later, but for now, we’ll add a new section with two columns:

Now you have a new section with two columns. You can drag widgets from the menu into the columns:

Plus you also have the default option to add the next new section when required.

3. Add a background

When you design your page, you can edit the whole section or individual columns.

In this example, I’m adding a background color to the section.

On the layout tab, I’ve set the width to 1102px and the minimum height to 400px.

(You can see the faint dotted outlines of the columns with the blue background going across the section.)

On the style tab I’ve added a gray background color:

(You could add an image or a video background if you prefer.)

4. Add widgets to the columns

Next step is to add some content to the columns using the widgets.

(You can add multiple widgets to a column.)

I’ve added an image to the left-hand column, and a heading plus a text block to the right-hand column:

5. Perfect your design

Once you’ve added your widgets, you can edit their settings to perfect your design. Here are a few examples of what you can do:

Adjust the Section Width and Height – This squeezes the columns together and leaves the background the same; eg. set the width to 800px and the height to 300px:

Resize Columns – It’s easy to resize the columns in Elementor. You can grab one of the sides and drag it until it’s the right size; eg. set the image column to 40% and the text column to 60%:

Position Columns and Content – You can position the content to the top, center, or bottom of a column. You can also position the column within the section in the same manner; eg. position the heading and the text widgets at the bottom of the column:

Set Margins and Padding – You can set the padding and margin for sections, columns and widgets, using px, EM or %; eg. set the margins to 3% and the padding to 5% on the text column:

Change Column Gaps – You can alter the gaps between columns to let your design breathe a little. Choose from no gap, narrow, extended wide, or wider. By changing the column gaps at the same time, you can decide which one is the best design; eg. increase the columns gap to wide:

Add Shape Dividers – You can make your sections less rigid with a choice of shape dividers; eg. use the mountain setting:

That’s just a sample of the page building you can achieve with one section, two columns and three widgets in Elementor.

There are a load more design options available. For instance, you could add that special “designer touch” by including unique features like box shadows, hover and entrance animations, advanced buttons and more.

Responsive mobile design

Elementor is perfect for creating mobile pages as it lets you create a responsive website in a visual way.

You can select from different font size per device, to reverse column ordering.
You can even choose to show or hide specific widgets depending on a user’s device; i.e. desktop, mobile, or tablet.

The full range of widgets

In our example, I used the image, heading and text widgets:

But there are plenty more to choose from:

Columns – Create inner columns within a column.
Text Editor – A WYSIWYG text editor, just like the WordPress editor.
Video – Add YouTube or Vimeo to your page.
Button – Add and design buttons to the page.
Divider – Add a line that divides different elements in the page.
Spacer – Add a space that divides the various elements.
Google Maps – Embed maps into the page.
Icon – Place one or more of 600+ icons.
Image Box – Create a box that includes an image, headline, and text.
Icon Box – Works the same as the image box, only with icons.
Image Gallery – Displays your images in an aligned grid.
Counter – Show stats and numbers in an escalating manner.
Progress Bar – Include an escalating progress bar.
Testimonial – Include customer testimonials for social proof.
Tabs – Vertical or horizontal tabs that display different pieces of content.
Accordion – A collapsable display of content.
And much more…

These are just the standard widgets. There are more widgets available in the Pro version, which we’ll cover soon.

The template library

Starting with a blank page can sometimes be daunting. That’s why Elementor includes a growing collection of pre-designed templates:

There are templates for different industries:

Law Firm
Restaurant
Agency
Coffee Shop
Fitness
Interior Design
Copywriter

And different page categories:

Homepage
About
Contact
Landing Page
Services
Pricing
Product

Elementor also allows you to store your own designs in the Template Library, so you can reuse them and save time.

Plus you can also export and import any template for use in other websites. This allows you to share your templates with other designers or reuse them yourself.

Note: Elementor Canvas lets you start with a complete blank canvas without any default theme header and footer. (It doesn’t matter which theme you are using.)

This is perfect for creating conversion-focused landing pages where you don’t want any distractions.

There are also some pre-designed templates built with Canvas to give you some ideas.

What’s in Elementor Pro?

Elementor Pro is the premium version, and it extends the basic features even further.

You get all the same design and edit functionality from the standard plugin, plus exclusive pro widgets and templates.

Pro Widgets

Here is the current list of Elementor Pro Widgets:

Posts – Display a list of any custom post types in various layouts.
Portfolio – Display your portfolio projects in a unique and visual way.
Form – Create a new form without leaving the page you’re designing.
Price List – Create catalogs and menus that include pricing.
Price Table – Create advanced price tables that display your products or services.
Flip Box – Create animated boxes that flip to the other side (front/back), once the visitor hovers over them.
Countdown – Add countdown timers to your page to increase sales.
Slides – Create simple slides that work perfectly, without a fuss.
Template – Embed Elementor templates in sidebars and footers.
WooCommerce – Display and filter the exact products you want to display.

And you’ll find plenty of third party plugins that add extra elements.

Note: Since we first published this review, Elementor has continued to roll out updates to their Essential offering.

They now offer a lot more email integrations. This includes; MailChimp, MailPower, Mailerlite, Drip, ConvertKit and more.

In addition to what we’ll cover below, you’ll find a CTA element, countdown timer, and more.

One of the best additions is the theme builder functionality. This means you can replace your header, footer, and other elements of your theme.

Here’s a look at a few of the Pro Widgets in more detail.

Get Elementor Pro

Form Widget

The Form Widget lets you create a new contact form without leaving the page you’re designing. You can select your fields, increase the spacing, and set your columns and layout.

Here’s an example of a Contact Form found in one of the Pro Templates:

Note: if you don’t use one of the supported email marketing services, other providers can be integrated when the Form Widget is used in combination with Zapier’s webhooks.

Posts Widget

The Posts Widget allows you to display a list of any custom post types in various layouts and ways. This is useful for displaying recent posts, or featured and popular posts.

You can use advanced filters that show the exact content you want your visitor to see first. For example:

Display posts by Categories, Tags, and Author
Order posts by Date, Title, or Menu (in ascending or descending order)

WooCommerce Widget

The WooCommerce Widget gives you a wide variety of options to display products from your WooCommerce store. You can create advanced filters to showcase your products in the best way possible.

Note: You’ll need the WooCommerce plugin for this widget to work.

Countdown Widget

The Countdown Widget lets you add a countdown timer to your page. Countdown timers can help to create anticipation or urgency on your site, depending on how you deploy them.

Simply set the destination date and time for your countdown and the widget starts ticking down.

Price Table Widget

The Price Table Widget lets you create advanced price tables that display your products or services. The widget gives you full control over the different elements of the price table, like colors, prices, text, buttons, and ribbons.

Here’s a basic Price Table I created:

Which brings us neatly onto the next section.

Elementor pricing

The basic version of the Elementor Page Builder plugin is free.

If you want to take advantage of the additional premium features in Elementor there are three options:

Essential: $59/year for use on 1 website
Expert: $199/year for use on 25 websites
Agency: $399/year for use on 1,000 websites

Each option includes unlimited free updates and one full year of support.

The documentation is excellent and includes some super video tutorials.

Elementor pros and cons

Pros

Free and open-source
Easy to use with instant, real time results
Create high-end designs, without any coding
Responsive mobile design options
Includes 20+ pre-designed templates
Compatible with most themes and plugins
Create full-width pages with any WordPress theme
Scale your content accurately with the dynamic size settings
Zapier integration allows you to connect more email providers (but it’s not as straight forward to setup as a regular API connection)

Cons

Editing the text boxes can be a little fiddly
More pro widgets required to integrate with other services
API integrations are limited to a handful of email marketing services
Mobile settings can be fiddly to get right
A few core elements look a little dated

Wrapping up this Elementor review

Elementor is fun and easy to work with. And it’s also quick. There’s no time lag when you make changes – everything is instant, giving you the best possible design experience.

Since it was launched, the developers, Pojo, have continued to add more functionality making it even more attractive. The vast amount of features in the standard version alone is unbelievable. And you can expect more pro features to be released over the coming months.

Elementor is one of the best page builder plugins available. And it keeps on getting better.

Download it today, and start designing and building pages without losing your hair.