• Editor Rating
  • Rated 4.5 stars
$49
  • 80%

  • Elementor
  • Reviewed by:
  • Published on:
  • Last modified: October 19, 2017
  • Ease of use
    Editor: 100%
  • Functionality
    Editor: 95%
  • Price
    Editor: 100%
  • Support & documentation
    Editor: 100%

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 native WordPress editor.

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

Previously we wrote about three premium page builders in our Big Page Builder Comparison.

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

What is Elementor?

0a Main

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.

Starting basic

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.

  1. Elementor pages are built in sections. A section is like a row. You can have as many sections on your page as you wish.
  2. 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.
  3. A section can run across the whole width of a page, or it can be confined to a set box size.

Key Feature:

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

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.

1a Add New Page

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:

1b Add New Section

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

1c Two Columns

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

1d New Section With 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.

1e Edit Section 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.

1f Edit section Layout

(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:

1g Edit Section Style

(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.

1h Column 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:

1i Basic Design

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:

1j Adjust Section Width Height

  • 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%:

1k Resize Columns

  • 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:

1l Content Position

  • 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:

1m Margin Padding 1

1m Margin Padding 1

Key Feature

The dynamic size settings feature is unique to Elementor and lets you scale your content accurately.

  • 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:

1o Column Gap

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

1p Shape Divider

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.

1q Responsive Options

The Full Range of Widgets

In our example, I used the image, heading and text widgets. But there are plenty more to choose from:

1r Elementor Widgets 1

  • Columns – Create inner columns within a column.
  • Heading – Add eye-catching headlines.
  • Image – Control the size, opacity and other settings of images.
  • 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.

1r Elementor Widgets 2

  • 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.
  • Image Carousel – create a rotating carousel or slider of chosen images.
  • Icon List – Displays a bulleted list with any chosen icon and text.
  • 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.

1r Elementor Widgets 3

  • Toggle – Like Accordion, for FAQ pages.
  • Social Icons – Display social icons for networks like Facebook and Twitter.
  • Alert – Displays a colored alert box to draw the attention of the visitor.
  • SoundCloud – Add audio clips from SoundCloud.
  • Shortcode – Easily insert shortcodes from any plugin into the page.
  • HTML – Insert code into the page.
  • Menu Anchor – Link any menu to this anchor.
  • Sidebar – Add any sidebar you create into the page.

 

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:

1s Elementor 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.

Key Feature

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:

1t New Canvas Templates

Going 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:

2a 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.

More will be released soon, including integrations with Carousel and Twitter Feed:

2b Elementor Pro Widgets

Update (3rd May 2017):

 

Elementor has now rolled out integration for both MailChimp and MailPoet.

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

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:

2c Form Widget

Note: the Form Widget now integrates with MailChimp and MailPoet only, but 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)

2d Post Widgets

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.

2e Woo Widget

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.

2f Countdown Widget

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:

2g Price Table Widget

Which brings us neatly onto the next section.

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 Pro there are three options:

  • Personal: $49 for use on 1 website
  • Business: $99 for use on 3 websites
  • Unlimited: $199 for use on unlimited websites

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

The documentation is excellent and includes some super video tutorials.

Elementor is also open-source. For updates on the plugin development, you can follow their Github.

Conclusion

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.

Get Elementor Free Version  Get Elementor Pro Version

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

Cons

  • Editing the text boxes can be a little fiddly
  • More pro widgets required to integrate with other services
  • Form Widget only integrates with MailChimp &
    MailPoet (others will be added in future)

Elementor

Summary: Elementor is a fast, visual drag-and-drop page builder for WordPress. You can easily create beautiful and functional pages using the built-in elements, without any coding. The standard plugin is free, but there is also a Pro version with extra features.

RatingRated 4.5 stars

Posted by David Hartshorne

David Hartshorne is a freelance writer helping solopreneurs and small business owners build their online presence through friendly, engaging and shareable web content. When he’s not writing about WordPress and the latest digital marketing tools, you’ll find him chilling with a thriller in Spain.