Elementor Page Builder: The Ultimate Guide to Using This Tool

Last Updated on

Here at GoWP, we’re all about making it easier for people to create awesome WordPress sites.

And when it comes to creating awesome WordPress sites without needing to be a tech genius, the Elementor page builder is one of the most popular tools that you’ll encounter.

To help you get a grasp for how to use this tool and everything that it can offer, we’ve created this detailed, 4,000+ word Elementor page builder guide.

In this post, you can expect a:

  • Quick introduction to the Elementor page builder, in case you’re not already familiar
  • Detailed Elementor tutorial on how to use the free core version
  • Deep dive into the new features in Elementor Pro, and how to use them
  • Look at some of the best Elementor extensions and Elementor themes

And along the way, expect plenty of screenshots to guide you along.

There’s a lot to cover, so let’s dig in to our comprehensive Elementor page builder tutorial…

If you're thinking of installing a #WordPress page builder and @Elemntor is on your list, READ 👏 THIS 👏 ARTICLE 👏 They've got it all covered, it's a must read! Click To Tweet

What is the Elementor Page Builder? Explained in More Detail

Elementor page builder tutorial

Elementor is a visual, drag-and-drop WordPress page builder that’s active on more than two million WordPress sites, according to its listing at WordPress.org.

At a very basic level, that means that it helps you create stylized, custom content without the need for any special technical knowledge or experience.

Instead of needing to know HTML, CSS, and PHP to manipulate your WordPress site, you can drag around widgets on a live preview of your site and build your content that way.

Whether you’ve never built a website or have some HTML/CSS under your belt, this visual drag-and-drop approach offers a simpler, speedier way to create custom WordPress content.

At GoWP we help agencies and web professionals manage, protect and update their clients' WordPress sites with our white label service. Let us handle the headaches so you can focus on what's important — growing your business!

Go GoWP, and grow your business

Elementor Free vs Pro: Which One Do You Need?

The Elementor page builder comes in two “versions”:

  • A free version at WordPress.org
  • Elementor Pro, which is a paid version sold through Elementor’s website (starting at $49)

They’re not separate tools, though.

Rather, the free version of Elementor is the “core version” that adds all the basic functionality. Then, Elementor Pro – the paid version – is an add-on that tacks on new functionality to the free core version.

As such, you can get started with the free version and then easily upgrade to Elementor Pro at any point in the future – you won’t need to delete the free Elementor plugin to upgrade, and you won’t lose any work in the transition.

Next question:

How much does Elementor Pro cost and what is the new functionality that you get in Elementor Pro?

That first part is easy. Elementor Pro costs $49 a year for one site, $99 a year for three sites and $199 a year for unlimited sites.

So what do you get with Elementor Pro? Well, you actually get quite a bit.

First, you get lots of new “widgets” that you can use to design your content. For example, you’ll be able to use Elementor Pro to create all types of forms on your site, insert sliders, add login forms, and a lot more.

Beyond those new widgets, you also get more styling options, like the ability to use more animations and add custom CSS directly to individual widgets (if you know your way around a little CSS, that is).

Then, beyond the enhancements to the actual editor, you also get some brand new functionality…

Theme Builder

With Elementor Pro’s theme builder functionality, you can design your entire WordPress site using the Elementor interface – including your header, footer, blog page, etc.

With this feature, you can essentially “replace” your theme and use Elementor to control how everything looks on your site.

Popup Builder

With Elementor Pro, you can also build another type of content – popups.

You can create a variety of different popup types, including modal popups, notification bars, and more. Then, you can use detailed targeted and triggering rules to control exactly where and when your popups display.

Elementor Free vs Pro: Which Should You Use?

Again, it’s easy to upgrade from the free version to Elementor Pro at some point in the future, so don’t stress too much about this decision.

However, this is a good general rule of thumb:

The free version of the Elementor page builder is good if you want the ability to design pages and posts inside of an existing theme, while Elementor Pro is a better option if you want to use Elementor to build your entire site.

That’s a little oversimplified, and Elementor Pro also has value if you’re just using it for pages and posts. But as a rule of thumb, that’s a good way to look at the two tools.

When it comes to @elemntor, you don't have to decide between the Free or the Pro version. Start out with Free and, when/if you're ready to upgrade to Pro, it's easy peasy lemon squeezy 🍋 Don't stress about it. Click To Tweet

Elementor vs Beaver Builder

If you’re researching page builders for WordPress, you may have come across the name Beaver Builder.

Beaver Builder is another quality page builder option, but when it comes to Elementor vs Beaver Builder, Elementor will be a better option for most users because it:

  • Has a much more generous free version – the free version of Beaver Builder is quite limited.
  • Offers more functionality in Elementor Pro for a cheaper starting price. For example, Beaver Builder doesn’t have the popup functionality and charges extra for its theme building functionality.

Elementor vs Divi

Divi is another popular page builder plugin that you might’ve come across.

Like Beaver Builder, we think Elementor is the winner when it comes to Elementor vs Divi because Elementor:

  • Has a free version, whereas Divi only comes in an $89 premium version.
  • Offers more functionality. For example, Divi lacks both theme building and popup functionality, which Elementor Pro offers both (and for a cheaper starting price).

How to Use the Core Elementor Functionality (AKA the Free Version)

Now that you know what the Elementor page builder is, let’s go a little more hands-on and we’ll show you how you can use the core Elementor features that are available for free at WordPress.org.

Yes – everything in this first section is available in the free version of Elementor. In the next section, we’ll show you how to use the features in Elementor Pro.

A Quick Look at the Elementor page builder interface

To create some content with Elementor, you start by creating a new WordPress post or page just like you normally would.

Then, to edit the post or page in Elementor, you click the new Edit with Elementor button to open the Elementor page builder interface:

The Elementor page builder interface

Once the interface loads, you’ll see a live preview of your site on the right side. This is where you’ll build your content using drag-and-drop.

You can see that Elementor loads your entire theme – so you’ll also see your theme’s header, footer, and maybe sidebar (depending on your theme’s layout).

It’s important to note that the free version of Elementor only lets you create the content inside of that other theme stuff – you can see the content area marked below:

Visual preview

Then, on the left side, you’ll see the Elementor panel. This panel houses all of Elementor’s settings and style options.

By default, it will show a list of “widgets”, which are the building blocks that you use in your Elementor designs. But as you make changes – like selecting a specific widget – the sidebar panel will change to reflect that:

Elementor side panel

Adding and Styling New Widgets

With the free version of the Elementor page builder, you get access to ~28 widgets to use in your designs, including widgets for:

  • Headings
  • Images
  • Buttons
  • Videos
  • Google Maps
  • Image or icon boxes
  • Galleries
  • Counters and progress bars

To add a new widget, all you do is drag it from the side panel on the left onto the live preview of your site:

Elementor add new widget

Once you add a new widget to your design, you can click on it to open its settings in the Elementor sidebar panel.

There, you’ll get three tabs to work with the widget:

Configure Elementor widget

The exact settings in each tab depend on the specific widget that you’re editing. But generally, the settings are divided as such:

  • Content – basics like content, alignment, size, etc.
  • Style – options for colors, fonts, borders, backgrounds, etc.
  • Advanced – custom margins and padding, responsive design controls, custom CSS, etc.

For text-based widgets, you can also click on the widget and type to edit the text (this is called inline editing):

Or, you can also use the text editor in the Elementor side panel. Either way, any changes you make will show up on both the page and the Elementor side panel (you can see that the changes are synced in the GIF above).

Elementor Widgets vs Columns vs Sections

Above, you learned about Elementor widgets. But Elementor actually gives you three different building blocks to create your content:

  • Widgets – the smallest block. Can be any type of content. For example, a button, an image, etc.
  • Columns – these help you divide your page horizontally into different columns.
  • Sections – these help you divide your page vertically into different sections. Think of them kind of like “rows”.

The three elements are hierarchical. That is, widgets go inside columns which go inside sections.

You can see this delineation when you hover over your content on the live preview:

Sections vs columns vs widgets

So if you wanted to create two separate blocks of text in the same row, you could add two columns inside one section like this:

Multiple columns

Beyond helping you create layouts, columns and sections also help with things like backgrounds.

For example, if you add a background to a widget, it will only appear around the widget:

Widget background

On the other hand, if you add a background to a column, it will apply to the entire column (including any widgets inside that column):

Column background

And if you add your background at the section level, it will apply to the entire section (including any columns or widgets inside the section):

Section background

So remember – sections > columns > widgets.

Elementor Templates Help You Get Started (and Save Time)

While Elementor gives you all the tools you need to build complicated layouts from scratch, you also don’t need to do that thanks to the Elementor templates library.

At any point, you can insert a template by clicking on the File icon:

Elementor templates

This opens the Elementor templates library, which is divided into three tabs:

  • Blocks – these are templates for a section of a page. For example, you can find templates for a FAQ section or a team members section. You can then build your page like putting together Legos.
  • Pages – these are templates for entire pages. For example, you could insert a complete landing page – all you need to do is edit the content.
  • My Templates – Elementor lets you save your own designs as templates so that you can reuse them later (more on this in a second).

Template library

For example, by inserting a Page template, you could quickly have a great-looking end product – all you need to do is edit the content to make it your own:

On the other end, you can also save any section as its own reusable template by right-clicking on it and choosing Save as Template from the drop-down:

Save as template

You can then insert this template anywhere else by using the My Templates in the Elementor templates library.

Elementor Responsive Design Features

Nowadays, the majority of Internet traffic – about 52.2% – happens on mobile devices, not desktop computers.

As such, you need your Elementor designs to look great on both mobile and desktop devices (this is called responsive design).

First off, all of your Elementor designs are responsive by default. So even if you don’t do anything, your designs should look pretty good on mobile devices.

“Pretty good” isn’t always enough, though, and Elementor also offers a number of tools to give you more control over the responsive design of your Elementor content.

First, you can use the Responsive Mode feature in the bottom-left corner to quickly preview your design on different devices:

Elementor responsive preview

Beyond that, you also get responsive control options when working with a widget, column, or section.

For example, you can see how you’re able to choose a different alignment for a widget based on a user’s device:

Elementor page builder responsive controls

You can also use the Advanced tab to completely hide specific widgets, columns, or sections on certain devices. For example, if you have a large hero image, you might want to hide that image for mobile visitors:

By using these responsive options, you have full control over how your designs look on different devices.

Productivity Features (Undo/Redo, Navigator, etc.)

Beyond the many design-focused features, Elementor also includes some tools to help you work more productively.

First, the Elementor page builder makes it really easy to undo or redo any changes that you make.

To go forward or backward one change at a time, you can use the keyboard shortcuts for Ctrl + Z (undo) or Ctrl + Y (redo).

Or, you can also open a full History of all your actions from your current editing session. You can revert to any place in time by clicking:

Beyond the undo/redo functionality, you can also right-click to open the Navigator, which gives you a high-level look at all the sections, columns, and widgets in your design:

You can also use right-click to quickly copy or duplicate sections, columns, or widgets.

Elementor Canvas Layout

In all the screenshots above, you can see that our test site’s header still appears above the Elementor content (and the footer below it).

Most of the time, you want this functionality, as it helps you create a cohesive website design and navigation structure.

However, there may be times – like building a standalone landing page – that you don’t want to include your theme in your Elementor content.

To help, Elementor lets you use the Elementor Canvas page layout from the Page Settings area.

When activated, this layout completely hides your theme and lets you work from a blank slate – you can see in the screenshot below how the theme header is no longer visible:

Elementor Pro Features: How to Use Them

Now that you know how to use the free core Elementor page builder features, let’s dig into some of the more advanced features you can use if you upgrade to Elementor Pro.

Once you install and activate Elementor Pro, you won’t notice any major differences in the core Elementor interface. Instead, you’ll be able to use the same interface to do new “stuff” that you couldn’t do before.

Here are some of the highlights of Elementor Pro…

Elementor Pro Form Widget

One of the most helpful widgets that you get with Elementor Pro is the Form widget. With this widget, you can skip using a dedicated WordPress form plugin and instead just use Elementor for your forms.

With the Form widget, you can first add and customize the form fields:

Elementor Pro form widget

Then, you can use the Actions After Submit area to automate actions to perform after a user submits the form.

Some examples of what you can use these actions for are:

  • Sending email confirmations or notifications
  • Adding form submitters to your email newsletter list at most popular providers (this lets you use Elementor to create email opt-in forms)
  • Connecting to Zapier, which gives you access to the 1,000s of apps on Zapier
  • Sending Slack or Discord messages
  • Opening a popup (more on popups later!)

As you add new actions, you’ll get new settings areas below to control those actions:

For example, the Email area lets you configure the text and information for your automatic email notifications:

Other Elementor Pro Widgets

Beyond the Form widget, Elementor Pro also comes with 20+ other new widgets that you can use in your designs.

We won’t cover every single widget, but some of the most notable widgets are:

  • Posts – lets you display your latest blog posts (or other custom post types) in a few different layouts. You can also use filters to, say, only include posts from a specific category or tag.
  • Slides – lets you create sliders. Has enough functionality to eliminate the need for a standalone WordPress slider plugin.
  • Price List or Price Table – helps you create great-looking pricing pages.
  • Login – lets you add a WordPress login form to any Elementor design.

You can access all of the Elementor Pro widgets from the new Pro section in the Elementor side panel:

Slider widget

Elementor Pro Theme Builder

Elementor Pro’s theme builder functionality is probably the most powerful feature in the premium version of the Elementor page builder.

Again, this functionality lets you design your entire WordPress site – header, footer, etc. – using the same Elementor interface that you’ve seen above

To access the theme builder, you’ll need to open it from your WordPress dashboard by going to Templates → Theme Builder. From there, you can click the Add New button to get started:

Then, you’ll need to choose what type of “template” you want to work on from the drop-down. For example, if you want to build your site’s header, you would choose Header:

Elementor Pro theme builder

Once you choose the type of template and click Create Template, Elementor will drop you into the same familiar interface that you’ve been working with.

You can either choose one of the pre-made header templates, or you can close the templates to build something from scratch:

Either way, you’ll get a new set of Site widgets that you can use to add:

  • Site logo
  • Navigation menus (the same menus that you configure in Appearance → Menus)
  • Search forms
  • Etc.

Once you’re finished designing your header (or another area of your theme), you can click the Publish button to choose where to use that template.

If you want to use the same header across your entire site, you can just choose the Entire Site option and call it a day.

But if you want to get more creative, like creating a custom header for a certain category of posts, you can add as many conditions as you want:

Now, Elementor Pro will replace your theme’s header with the header you just designed (for all the conditions you chose).

Elementor WooCommerce Builder

If you’re running a WooCommerce store, Elementor Pro lets you bring the same drag-and-drop Elementor interface to your WooCommerce shop and product pages.

As long as you have WooCommerce active on a site with Elementor and Elementor Pro, you’ll be able to use Elementor Pro theme builder to create two new types of templates:

  • Single Product
  • Product Archive

WooCommerce templates

For example, if you use the Elementor WooCommerce builder to create a single product template, you’ll be able to use the regular Elementor interface, along with a bunch of new Elementor WooCommerce widgets, to design your product pages.

As with other theme templates, you can opt to use one of Elementor’s included templates or start from a blank slate:

Elementor WooCommerce builder

Then, you can use the Product widgets to design your product page:

And when you publish your template, you can choose to use it for all WooCommerce products, or just certain WooCommerce products:

Elementor Pro Popup Builder

In addition to the theme and WooCommerce builder, Elementor Pro lets you design a variety of popup types that you can display anywhere on your site using several different triggers.

The nice thing about this feature is that you can use all the normal Elementor widgets, which gives you a lot more functionality than your run-of-the-mill WordPress popup plugin.

Using the popup builder functionality in Elementor Pro is a lot like the theme builder. To get started, you’ll go to Templates → Popups→ Add New.

Once you click Create Template, Elementor will take you to the regular Elementor interface and offer up a variety of pre-made templates for you to choose from (or, you can always build something from scratch):

Elementor Popups template library

Then, you can build/edit your popup’s content using all the normal Elementor widgets. For example, if you want to create an email opt-in popup or an inquiry form, you can use the regular Form widget.

Beyond accessing the regular widgets, you also get a new Popup Settings area that lets you configure basic popup settings like:

  • Size
  • Alignment
  • Close button
  • Animations
  • Etc.

Elementor Popup Builder

Once you’ve finished designing your popup with Elementor, the real fun starts. When you click Publish, Elementor will open the targeting and trigger options for your popup.

The Conditions tab is the same as you saw with Elementor WooCommerce and theme builder. That is, you can use it to choose which content your popup is eligible to be displayed on:

Popup conditions

Then, the Triggers tab lets you control what conditions trigger your popup. You can trigger a popup by:

  • Time
  • Scroll (either a percentage or when a visitor scrolls to a specific element)
  • Click
  • Inactivity
  • Exit intent

Popup triggers

Finally, the Advanced Rules tab lets you get a little more creative with your targeting rules. You can:

  • Wait to launch your popup until X page views or sessions
  • Limit how many times a popup displays for an individual user
  • Only display your popup for users arriving from a specific URL or location (like any search engine)
  • Hide popups for logged in WordPress users
  • Target popups to specific devices

Popup advanced rules

Once you’re finished, you can click the Save & Close button to make your popup live.

Other Smaller Elementor Pro Features

Finally, Elementor Pro also comes with some other smaller features that can make your life easier.

If you know a little CSS, one helpful Elementor Pro feature is the ability to add custom CSS directly to a widget, column, or section:

Custom css for widgets

Another handy feature is global widgets. A global widget is kind of like a reusable template, but with a twist.

If you update the global widget in one spot, all instances of the global widget on your site also update to reflect those changes. So if you need to reuse a widget across your site and want to make sure that the widget is always the same in each spot, Elementor Pro’s global widgets feature can save you a lot of time:

Global widget

Elementor Add-ons Make it Easy to Extend Elementor

Another thing that makes the Elementor page builder so popular is the fact that it’s extensible.

Basically, the developers of Elementor made it so that third-party developers can create their own tools based on Elementor.

As a result, there’s a vibrant marketplace of third-party Elementor add-ons that can extend the functionality in both the core version of Elementor, as well as Elementor Pro.

These Elementor extensions add new functionality like:

  • More widgets – you can get access to new and interesting widgets to help you build your content.
  • More style controls – you can also get new styles for existing widgets, like cool animations or other effects.
  • New or tweaked functionality – for example, one add-on lets you resize and adjust the Elementor sidebar panel, and another adds new features to the WordPress toolbar.

Better yet, a lot of these Elementor add-ons are 100% free, though you’ll also find premium extensions as well.

To find Elementor extensions, you can browse the WordPress.org plugin directory or Elementor’s own add-on library. Some good options to get you started are:

Best Elementor Themes to Pair With Elementor

Elementor works with any WordPress theme – so you definitely do not need a special “Elementor WordPress theme” just to use Elementor.

However, there are some popular themes specifically built for Elementor that can make it a little easier to work with Elementor.

Typically, these themes come with:

  • Detailed global style controls – rather than using Elementor to style everything, you can save time by setting the basic defaults (fonts, colors, etc.) with your theme and only using Elementor to override those defaults when needed. This approach also makes it easier to change styles in the future.
  • Page-level controls – Elementor themes make it easy to disable elements like your page title, header, footer, etc. on a per-page basis. This is really helpful because it lets you control the “canvas” that you build your Elementor content upon.

Here are some recommendations for the best Elementor themes to pair with your new page builder:

Final Thoughts on the Elementor Page Builder

The Elementor page builder plugin has quickly grown in popularity for a reason:

It makes it easy for anyone – even non-developers – to create a custom WordPress site.

To try it out, you can install the free version from WordPress.org. While you’ll miss out on some of the more advanced features like popups and the theme builder, the free functionality is still quite generous.

It will let you build custom posts and pages and give you a good taste for how Elementor works.

Then, if you decide that you do want the features in Elementor Pro, you can upgrade at any time in the future without losing any of your work.

And that wraps up our big Elementor tutorial. We hope you found this guide to the Elementor page builder helpful – now go make something awesome!

Elementor Page Builder: The Ultimate Guide to Using This Tool
4.7 (93.33%) 12 votes
Share on facebook
Share on google
Share on twitter
Share on linkedin