Elementor is a prominent page builder, and one of many that make it possible for just about anyone to build their own web designs within WordPress.

Its main competitors include solutions like Divi, Beaver Builder and Thrive Architect. In this post, we’re going to take a look at Elementor to discover how simple (or difficult) it is to build custom pages with the plugin’s editor.

First, let’s briefly go over what it is that makes Elementor so prominent in the first place.

What is Elementor?

Elementor HomepageSource: Elementor
Source: Screenshot https://elementor.com/

At over 4 million active installations, Elementor has become one of WordPress’ most popular page builder plugins. Its developers accomplished this feat even with page builders like Divi and Visual Composer dominating the market at the time of its release in 2016.

It was one of the first page builders to bring live frontend editing to the WordPress ecosystem through a user-friendly interface. Today, you can use many of the features Elementor offers in its free version and unlock multiple advanced features when you purchase a premium license.

Key Features

  • Drag-and-Drop Visual Editor – Build beautiful pages and designs with an intuitive frontend editor that doesn’t require a lick of code.
  • Modern Design Components – Choose custom fonts, colors, widths, heights and other parameters, backgrounds, animation effects, and more.
  • 80+ Content Modules – The editor comes with 30 free content modules, called “widgets” inside of Elementor, and over 50 premium modules for every element you want to add to your page, from headers, buttons and text to calls to action and pricing tables. Global modules are available as well in the premium version.
  • 300+ Templates – Elementor comes with templates you can import into your page and customize to your liking to accelerate the building process. The free version comes with dozens of templates while Elementor Pro includes hundreds. A free blank page template, Canvas, is available as well for marketers who wish to eliminate headers and footers from certain landing pages. You can even create and save your own templates.
  • Theme Builder (PRO) – Customize various sections of your theme, including its header, footer, search page, blog archive page, 404 page and single post layout. You can even create your own templates and edit them dynamically.
  • Form Builder (PRO) – Use the same editor to create well-designed contact and opt-in forms complete with anti-spam and anti-bot functionalities, confirmation emails, and hidden fields.
  • Popup Builder (PRO) – This builder allows you to design a variety of different popup formats, including opt-in forms, login forms, banners, content locks, exit intent and welcome mats. Display styles vary as well and include modal overlays, bottom corner popups and sticky headers.
  • WooCommerce Compatible (PRO) – Add products and ecommerce-specific features, such as an Add to Cart button, anywhere on your site and edit product pages with Elementor’s WooCommerce builder.
  • Advanced Features – Build custom modules, use custom CSS and enjoy developer-friendly features, including CLI integration, code references, PHP hooks and beta access.
  • Integrations – Elementor has official integrations with dozens of services and tools, but you can also use third-party add-ons or build your own integrations. Plus, third-party services and tools are highly likely to have their own integrations due to how popular the plugin is.

Setting Up Elementor

Getting started with Elementor is easy. If you want to use the free version, install it from the WordPress directory as you would with any other plugin. If you want to upgrade to premium, leave the free version installed, buy a license for Elementor Pro, and install its ZIP folder.

Elementor WordPress Settings

Aside from activating your license key, Elementor requires very little during setup. The majority of the settings you can configure come down to personal choice and the way you plan on using the plugin.

You can choose which post types to enable the editor on as well as whether or not Elementor should inherit the default colors and fonts your theme uses. You can also change the content width the editor uses, configure integrations, and choose which roles have access to what inside the editor, be it the entire editor itself or just the content.

As for what using the editor itself is like, let’s kick that discussion off by covering its primary function.

How Does Elementor Handle Page Building?

Elementor works with virtually any theme, including MH Magazine Pro and its child themes, and is enabled on pages and posts by default. When you create or edit a page or post on the backend of WordPress, you’ll see an Edit with Elementor button.

Clicking this button enables the editor, at which point you’ll now be editing your page or post on the frontend of your site.

Elementor - New Page

Fortunately, Elementor does include a way for you to get back to the WordPress editor so you can fill out the page’s metadata.

You can also use this page to choose a template in the Page Attributes section. Elementor uses your theme’s default template for new pages, but you can override this by choosing the Elementor Full Width template.

The editor uses your theme’s header and footer by default, but you can hide them with the Elementor Canvas template. If you have Elementor Pro and a compatible theme, you can edit your its header and footer sections.

Elementor also has its own theme, the Hello theme, if you wish to forego a theme altogether and build your entire site with the editor.

Let’s continue this discussion by taking a deep dive into the editor itself.

The Elementor Editor

When you first load the editor, you have two options: build from scratch or import a template. Let’s start with the build from scratch route. An Elementor page is comprised of a hierarchy of sections, columns and content modules where sections are comprised of columns and columns are comprised of content modules.

When you start building your first section, you can either drag and drop modules into the editor’s content area or choose a column template, of which there are 12.

Elementor - Row Templates

Nevertheless, once you have a module or column template added to the content area, you’ll have access to a plethora of settings for each column and the section it’s within.

Sections and columns differentiate in the settings they allow you to configure, but they all organize their settings in the same way: arranged in three separate components called Layout, Style and Advanced.

The Layout component’s primary focus is centered around the way an element is structured within its parent container. For sections, as an example, you can choose to enable the Stretched setting and configure additional settings to control that particular section’s width on the page.

Elementor Layout Settings

Speaking of content width, you can find comfort in the fact that Elementor does have Global Settings you can configure per page so you don’t need to change the content width for each individual section you create.

Advanced settings allow you to configure things like margins, padding, attributes, responsive settings and motion effects. You can even add custom CSS here. For margins and padding, you can adjust each direction individually or link the values together so the directions are equal to one another.

Elementor Advanced Settings

Let’s switch gears and talk content modules. We’ll touch base on the editor’s Style settings there then switch over to templates.

Content Modules

Elementor Basic Widgets

Elementor Pro has over 80 content modules separated into the following categories:

  • Basic
  • Pro
  • General
  • Site
  • Header, Footer & Blocks
  • WordPress (native widgets)

The majority of the modules you’ll use are in the first three categories. All you need to do is drag a module over to your desired column, add content and configure its settings.

Elementor Pro Widgets

Instead of the Layout settings, modules have a component you can use to add content when you drop them into the editor. The Content component of each module differs as much as the modules differ from one another.

You can then configure Style settings, which mainly consists of adjusting typography settings and choosing colors, though each module’s style requirements are different.

Elementor Style Settings

Let’s talk templates.

Templates

The template route is definitely the quicker way to go when it comes to building pages with Elementor or any WordPress page builder for that matter. You can start by choosing a full-page template from Elementor’s template library. Make sure you’ve activated your license key if you have Elementor Pro. You won’t be able to access premium templates without it.

Elementor Page Templates

Rest assured, you can delete modules, columns and sections from premade templates or even add to them. Alternatively, you can add premade blocks from the template library, which are sections already built with content and styles.

Elementor Blocks Library

You can also save your own designs as templates as you go.

Whichever route you choose to take, you now have a way to build stunning and highly engaging posts and pages within WordPress no matter which theme you use.

Final Thoughts

Elementor was a ground-breaking page builder plugin when it first entered the market. Even today, the developers continue to innovate the product and bring simple drag-and-drop web development to WordPress in many formats, from classic page building to building headers, footers, single post layouts, forms and WooCommerce product pages.

One other thing that sets Elementor apart from other page builders is how affordable it is. It offers a lot of features free of charge, and you can receive access to all of its premium features for as little as $49/year.

A 30-day money-back guarantee is available on all plans.

Try Elementor

image sources

ClickWhale - WordPress Link Manager