How To Use Elementor: A Complete Guide

elementor-homepage-1.jpg

Interested in building an amazing website? 

Well, good news… It’s now easier than ever! There’s no need to hand-code each page from scratch or hire a team of technical wizards.

These days, all you really need is a plugin called Elementor, one of the most versatile and accessible WordPress page builders on the market. Even better, it’s totally free to get started!

homepage for elementor the world's leading page builder

In this post, we’re going to cover how to use Elementor step-by-step and go over some of its best features. By the end, you should have everything you need to build a WordPress website that wows in no time flat!

Table Of Contents

Getting Started With Elementor

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 visual look and layout of your website’s pages and posts, with dozens of widgets adding functionality through a clean drag-and-drop interface.

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. 

Installing Elementor

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

Method 1: Elementor’s Website. Visit the Elementor website and get the free version of Elementor directly. 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 thank you for downloading page

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

wordpress add plugins section menu

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

Method 2: WordPress Dashboard. Log into the backend 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.

adding the elementor page builder plugin section in wordpress

Just click “Install” and then “Activate” once it’s downloaded.

Whichever method you choose to install Elementor, you’ll be able to find Elementor 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 plugins section on the wordpress dashboard

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’s 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 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 I’ve 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 you can get. 

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 post types section

There’s also a handy Role Manager function in Elementor that lets you categorize which types of users can have access to the Elementor editor (note: this is only a feature in 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 widget settings

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
  • Divider
  • Icon
  • Spacer
  • Sidebar

All told, you get nearly 30 basic elements that give you everything you need to make a functional page. Simply drag an instance of an element to the main page.

If these basic elements aren’t enough, it’s possible to get additional widgets by upgrading to Elementor Pro. However, I would argue that most of what can you 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.

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.

Elementor Free vs. Elementor Pro

If you want a sophisticated free page builder that’s more full-featured than many paid options, then Elementor Free is a great choice!

With that said, Elementor Pro does add several desirable features to speed up your workflow and give you even more control over the appearance and functionality of your website. The additions of the theme builder, premium widgets, and global elements are all welcome, but you certainly don’t need them to make a great website. 

Comparison Table of Elementor Features

Here’s a quick overview of the major differences you’ll find between Elementor Free and Elementor Pro.

Elementor FreeElementor Pro
PriceFreeStarts at $49/year
Number of Widgets25+50+
Page builder
Theme BuilderX
Included 24/7 supportX
Dynamic ContentX
Pro Templates and BlocksX
IntegrationsX

This is a general snapshot of the differences between the two versions, but you can learn more about Elementor Pro vs Free here on Elementor’s website.

Elementor Pro Pricing

If you’re thinking about picking up one of the paid versions of Elementor Pro, you should note that all three plans offer the exact same features! 

I want to be clear: The only difference between Pro plans is how many licenses you’re purchasing at once.

elementor pro prcing tables

With Personal, you get Elementor Pro for one website for $49 per year.

With Plus, you get Elementor Pro on 3 websites for $99 per year.

With Expert, you get Elementor Pro on a massive 1,000 sites for $199 per year.

Which one is right for you? For individuals or small teams, Plus is definitely the best value, as long as it’s likely that you’ll manage more than one website with Elementor Pro in the next year.

You can always choose to start with Personal and upgrade to Plus later on if you decide you like Elementor and want more licenses.

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 ready-made 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, I’m going to 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.

new pst settings with elementor

Step 3. Drag Elements to Main Page

This page shows you exactly how your page is going to look. For now, it’s empty. 

blank elementor page with drag widget here text

We can change that by going to the Elementor sidebar and picking an element. 

elementor widget settings

Let’s create a new heading for the page. All you have to do is click on the box that says “Heading,” 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.

elementor widget area

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

elementor structure selector with different options

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.

columns section in elementor

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

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

addding widgets in the 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.

selecting heading to edit the settings of the 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 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!

final output using the elementor page builder

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 — and full disclosure, I’m not a designer — 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. And 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 Sites hat you can use. 

There’s one more huge point I 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.

How to Use Elementor’s Theme Builder 

Usually, when something gets easier to use, it has to drop useful features. Fortunately, Elementor is a special case that’s both easy to use and incredibly versatile, thanks in large part to its theme builder.

Available in Elementor’s Pro version, the theme builder is a game-changer for anyone familiar with page builders, because it allows you to create custom headers, footers, and other dynamic content for your website. It even allows you to override aspects of your WordPress theme, so you can keep what’s working and just make the changes you want!

Why would you need dynamic content? Well, sometimes you may want to host a sales page that doesn’t have a traditional header and sidebar or you may want to save a custom blog post layout that you can use every time you add a new post. The possibilities are endless.

Build a Header/Footer With Elementor 

Ready to build a customized header or footer with Elementor using the theme builder? Here’s how it’s done!

Step 1. Click on “Templates” in the WordPress Dashboard

After logging into your WordPress dashboard, go to “Templates” under Elementor in the side menu.

elementor templates panel in the wordpress dashboard

Step 2. Add New or Import Template

This is where you create a new template for your header.

saved templates section in the elementor menu

If you saw a header already that you liked the look of, you can import it to use as a starting point. Otherwise, click “Add New.” 

This will pop up a dialog box allowing you to choose the template type — header in this case — along with the name of your template. 

creating a new template welcome screen with elementor

(Note: Elementor Free only includes section and page templates. The Pro version includes several additional template categories, including global widget, header, footer, single, and archive.)

Step 3. Edit Your New Template

If this step looks familiar, that’s because it’s the same exact editor we used to make a full-page earlier. Now, it’s applied to making a custom header. 

You can go through the process to create your layout with different widgets, and even specific images or other content. Once you’ve saved your new header, it’s easily accessible from a new page.

creating a new template with elementor

Build WooCommerce Pages With Elementor

The process for creating a custom WooCommerce product page is similar to any other page or section you can build. Sensing a pattern here?

With its WooCommerce Builder, Elementor supports the ability to create a template for a “Single Product” page. Once you create a new template, you’ll see a template library full of blocks or full pages that you can use for your WooCommerce product page. 

section to create woocommerce pages with elementor

Keep in mind that this WooCommerce template will have a number of dynamic product widgets, including product title, product image, and product price. You can set the details of the products with WooCommerce, and use Elementor to display up-to-date product information on the front end.

It’s that simple! 

What Elementor is Missing

I wanted to show just how many different features Elementor’s theme builder has!

However, in spite of all this flexibility, there are still some things that Elementor can’t do. Remember, Elementor isn’t a theme — it just uses its theme builder to override certain theme features. 

To get crazy control over your theme, we highly recommend going with Astra Pro and Elementor. Astra gives you built-in header and footer options, mega menus, and a lot more! 

Astra Starter Sites for Elementor

Another huge benefit of Astra is its collection of starter sites that are ready to import into Elementor, including both free and paid options.

For example, if you were setting up a website for a fitness trainer, you could use the Fitness Trainer starter site from Astra as a solid foundation and customize it from there.

astra fitness trainer starter site with elementor with guy boxing in the background

Importing an Astra starter site is easy to do! You just need the free or paid version of Astra Theme installed, plus the free Astra Starter Sites plugin. Once you have both of them set up, you can log into your WordPress dashboard, navigate to Appearance > Astra Starter Sites, and select the website you want to import. 

Then, you’ll be able to make changes to the starter site right in Elementor! For more information, check out this detailed tutorial for importing Astra starter sites.

Ultimate Addons for Elementor

In addition to these templates, we have a plugin called Ultimate Addons for Elementor that offers additional functionality not found in Elementor. This goes even further than Elementor Pro in offering advanced widgets, such as the content toggle, modal popup, content timeline, and table of contents.

For maximum control and flexibility, it’s definitely worth checking out Ultimate Addons for Elementor!

How to Build Templates With Elementor

You can create templates for all kinds of sections and pages, including:

  • Page
  • Header
  • Footer
  • Single post
  • Blog archive
  • Product pages

For this example, let’s work with the post/page template.

Build a Page Template With Elementor 

In Elementor, both the page and post are covered by the “page template.” This is a saved template you can use for any new page or blog post, allowing you to maintain consistency, even with multiple team members doing the posting.

Even better, this one is available for all Elementor users, including with Elementor Free.

Step 1. Click on “Templates” in the WordPress Dashboard

After logging into your WordPress dashboard, go to “Templates” under Elementor in the side menu.

elementor templates panel in the wordpress dashboard

Step 2. Add New or Import Template

This is where you create a new template for your header.

saved templates section in the elementor menu

In the dialog box, choose the Page template type and give your new template a name. 

new elementor page template

Then, click “Create Template” to get started!

Step 3. Edit the Page Template

Just like earlier when we made our own page, you’ll use the same editor here. It’s as simple as creating new sections, changing the columns, and dragging different widgets to the page.

Once you’ve designed a page that you like, you can save it as a template so that it’s accessible for any of your other pages going forward.

Conclusion

Whew, we covered a lot of ground with Elementor in this post!

In terms of primary takeaways, I hope you can see why Elementor is a fantastic page builder that takes a lot of the guesswork out of web design. It strikes an ideal balance between ease of use and deep functionality, making it one of the most accessible page builders available for WordPress.

I also hope you’ll remember to give Astra a look as your WordPress theme to pair with Elementor. Astra is lightweight, fast, and incredibly flexible, adding complementary features to Elementor so that you can create anything your mind dreams up!

Thanks for reading! Hopefully, this post has given you a great starting point for success with Elementor. If you have any questions or comments, please share them with us below!


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
sendinblue