Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Introduction to Elementor

Elementor is one of the most versatile and accessible WordPress page builders on the market. It is technically a WordPress plugin, which we have discussed in the previous lesson. It has a free version with limited functionality, which you can install directly from the WordPress official plugin directory, but once you are comfortable with it and want full access to all the functionalities, we recommend purchasing the full version.

We will show you how to install, activate and start using Elementor with the Astra plugin.

Installing Elementor in WordPress

Elementor is a popular page builder that pairs well with lightweight WordPress themes such as Astra. This page builder allows you to control every aspect of the look and layout of your website’s pages and posts, with dozens of widgets adding functionality through a clean drag-and-drop interface.

To learn why Elementor is so famous, check out our in depth review on Elementor.

Now, keep in mind, Elementor itself is not a WordPress theme — it’s strictly a plugin. This is important because you’ll still need to choose a dedicated theme to handle other aspects of your website.

Once you’ve installed WordPress and a chosen theme for your site, there are a few different routes you can take to install the Elementor page builder:

Method 1: Elementor’s Website.

Visit the Elementor website and get the free version of Elementor. A download button is prominently displayed at the top of the home page.

Once you enter your email, your browser will automatically download the ZIP file.

Elementor using process

Next, navigate to the Plugins section on the back end of your WordPress website, click “Add New,” and upload the .ZIP file to your website via the “Upload Plugin” button at the top.

Upload plugin

Once installed, just hit “Activate” and it’s ready to go!

Method 2: WordPress Dashboard

Log into the back end of your WordPress website and prepare to install the plugin by hitting the “Add New” button from the Plugins tab.

To find Elementor, just type the word “Elementor” into the plugin search bar.

The Elementor Page Builder should pop right up as the first plugin option for you to install.

Install Elementor plugin

Just click “Install” and then “Activate” once downloaded.

Whichever method you choose to install Elementor, you’ll be able to find it in your list of installed plugins” from now on — and it’ll also have its own entry in the side menu.

From that area, you’ll be able to adjust the plugin’s settings.

Elementor Settings

Unlike with many plugins, however, Elementor’s greatest functionality happens on the pages themselves.

That means you’ll spend most of your time using Elementor when you’re creating or editing pages and posts.

Exploring Elementor Options

We’ll take a look at building our own pages and templates with Elementor shortly, but first, let’s take a high-level look at the options you have with Elementor!

One of the most important features of any page builder is the ease of use. You need to be able to jump in and make your vision a reality without a lot of head-scratching and frenzied YouTube searches.

Fortunately, Elementor is one of the easiest page builders we have ever used. It’s a front-end editor, which means you can see exactly how the page is going to look while you work on it.

Once you get accustomed to the workflow of dragging widgets onto the page and tweaking properties in the sidebar, you’ll realize that it’s about as intuitive as it can be.

Most of the customization options you’ll find in Elementor are based on the widgets that come with the plugin.

Elementor Settings

Elementor has a handful of top-level settings you can find directly in the plugin. This allows you to do things like check which types of posts Elementor works with, set default font and spacing, and adjust responsiveness settings.

Elementor General settings

There’s also a handy Role Manager function in Elementor that lets you categorize which types of users can have access to the editor (note: this is only a feature in Elementor Pro).

What Widgets Are Included?

In general, Elementor is based on a drag-and-drop editor that accommodates sections, columns, and widgets.

The system is broken down as follows:

  • Sections – Containers for columns and widgets.
  • Columns – Sections that contain widgets.
  • Widgets – Individual elements on the page.
Elementor basic widgets

These widgets are simple categories of content that allow you to customize your webpage. In the free version of Elementor, you get access to basic elements.

Here’s a quick list of several basic widgets you’ll use often:

  • Heading
  • Image
  • Text editor
  • Video
  • Button
  • Divider
  • Icon
  • Spacer
  • Google Maps

You get nearly 30 core elements that give you everything you need to make a functional web page.

Simply drag an instance of an element to the main page and customize it to your needs.

If these basic elements aren’t enough, it’s possible to get additional widgets by upgrading to Elementor Pro.

However, we would argue that most of what you can do in Pro is possible in the free version — it just takes longer.

It’s up to you whether you need the premium widgets found in the Pro version.

Here’s a quick sampling of the dozens of widgets found in Elementor Pro:

  • Portfolio
  • Form
  • Flip box
  • Price table
  • Blockquote
  • Call to action

These Pro elements will help make your site look slick and more professional, and are also designed to support eCommerce efforts, including in-depth integration with WooCommerce.

We have created a quick article on creating contact forms with Elementor Pro; check that out!

Lastly, Elementor does support third-party widgets.

You can find plenty of third-party Elementor add-ons that expand your available widgets further, or even develop your own widget with dev resources from Elementor!

Not sure you want to add extra widgets?

While it can be convenient to have widgets for everything you want to do on your website, it’s not absolutely necessary. There are still countless free third-party WordPress plugins that work well in tandem with Elementor and your WordPress theme.

How to Use Elementor’s Free Page Builder

So, with all of that out of the way, are you ready to see Elementor in action?

This page builder works with custom post types and has plenty of readymade templates to choose from, but for this post, let’s see what it looks like to start at square one.

Step 1. Create New Post or Page

Go to the dashboard of your WordPress website and click “Add New” under Posts or Pages. For this tutorial, we’ll make a new blog post.

Step 2. Edit With Elementor

Once you get to this screen, you can choose to edit the page with the default WordPress editor. To use Elementor, you should click the “Edit With Elementor” button.

Edit page with elementor

Step 3. Drag Elements to Main Page

This page will be empty initially. Pick and drag elements from the Elementor sidebar.

Let’s create a new heading for the page. All you have to do is click on the box that says “Heading” then hold down the mouse button, and drag it to the widget area on the page (where it says “Drag widget here”).

If you don’t want this element to take up the full width of your page (which it does by default), you can click the little “plus – +” button to customize the structure of that section of your page.

Add widget to the page

After you’ve clicked the plus button, you’ll see an option to “Select Your Structure”. Let’s go with three equal columns.

Elementor columns layout

After we click that icon with the three columns, we now see a brand-new section on the page with three columns, each with a plus button.

Edit elementor column layout

And if we want to customize what we see in this section? You guessed it, we drag a widget there.

We dragged a video element to the middle column, which is preloaded with an Elementor video playlist by default.

Added video in column

Step 4. Edit Settings

For every section or element you place on the page, you have options to customize it further. Just look for the six dots.

Edit Elementor section

If we select the heading, for example, we can change its content, style, or advanced features like margins and padding, responsiveness, and so on.

Step 5. Publish Your Page

Once you’re happy with the settings, it’s time to check out the finished product.

We’ve seen what this page looks like in the editor, but if we take a peek at the preview of the actual page, we see that it’s the same!

That’s a very good thing. It means that once the page you’re working on is live, you can be confident that it looks exactly like it did while you were editing it. That’s one of the most important features of Elementor.

Page Builder Summary

This was obviously a quick example, but it shows you how easy it is to place elements and make a working website!

The bottom line is, you don’t have to be an expert to build a website with Elementor. With tons of templates to choose from, you never have to start from scratch unless you want to.

We highly recommend you look at Astra Theme, it has tons of included Elementor templates called Starter Templates that you can use.

There’s one more huge point we want to emphasize here:

Whether you choose Elementor Free or Elementor Pro, the nuts and bolts of Elementor’s page builder are identical. Pro just offers more advanced functionality through premium widgets to help you right out of the box with marketing, eCommerce, design, and integrations with other common tools like MailChimp and Adobe TypeKit.

It was a great decision to set up Elementor this way because you aren’t having to relearn anything once you’re ready to make the leap from Elementor Free to Elementor Pro.

Scroll to Top