Author: Editorial Team
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!
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!
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.
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.
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.
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.
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.
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 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.
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.
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:
- Text Editor
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:
- Flip box
- Price table
- 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
|Elementor Free||Elementor Pro|
|Price||Free||Starts at $49/year|
|Number of Widgets||25+||50+|
|Included 24/7 support||X||✓|
|Pro Templates and Blocks||X||✓|
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.
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.
Step 3. Drag Elements to Main Page
This page shows you exactly how your page is going to look. For now, it’s empty.
We can change that by going to the Elementor sidebar and picking an element.
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.
After you’ve clicked the plus button, you’ll see an option to “Select Your Structure.” Let’s go with three equal columns.
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.
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.
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.
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!
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.
Step 2. Add New or Import Template
This is where you create a new template for your header.
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.
(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.
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.
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.
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:
- Single post
- Blog archive
- Product pages
For this example, let’s work with