How To Use Elementor : A Start-To-Finish Setup Guide

How to Use Elementor: Your Full Setup Guide for the WordPress Website Builder

Elementor is one of the most popular WordPress page builders currently available, and for a good reason. It’s packed full of features that make custom website design simpler than ever. But if you’ve only ever heard of this tool in passing, it might seem confusing.

If you’re curious about how to use Elementor, you’ve come to the right place. Here, we’ll uncover:

  • Elementor: What it is and how it works
  • Benefits of using elementor as a WordPress page builder
  • Differences between elementor and elementor pro
  • How to install the elementor page builder in WordPress
  • How to use elementor: Step by step
  • The best Elementor themes and how to use them
  • Recommended add-ons for Elementor
  • Final thoughts: How to use Elementor

Elementor: What it is and how it works

What is a page builder?

A page builder is more or less a "construction kit" for the content of your website, in which you can drag and drop individual elements to the desired locations and fill them with your own content. In our article you will learn the advantages and disadvantages of page builders.

Elementor is a website page builder plugin that’s designed for WordPress. It adds a whole host of drag-and-drop functionality so even inexperienced designers can create stunning websites that look professional.

Elementor’s biggest draw is that you get a full live view of your website as you make changes. This creates an intuitive design experience, especially for beginners. T

To achieve this, the plugin employs dozens of widgets, a full template library, and a revision history feature. 

The core Elementor plugin is free and loaded with many basic elements. If you require more advanced features, Elementor Pro is available. This premium version of Elementor’s pricing has several tiers, starting at $49/year for one website, and up to $999/year for 1,000 websites.

Benefits of using elementor as a WordPress page builder

As you might have guessed, Elementor has several advantages. Let’s explore a few before we get to the tutorial section. Some key benefits include: 

  • Easy to use. Visual front-end editing combined with widgets makes the Elementor page builder incredibly easy to work with, even for newbies. 
  • Flexible and extensible for developers. A robust template library, block editor, and complete control over output mean more experienced developers can learn how to use Elementor theme builder and run with it. 
  • Tons of styling options.You can use the editor panel with slider controls to adjust design settings within a comfortable editing framework. .  
  • Global widgets that save time. Modify, adjust, save, and reuse widgets across multiple websites. 
  • Drag-and-drop theme building.  Create an Elementor theme from scratch using the built-in widgets or grab Elementor Pro templates to serve as a foundation. 
  • E-commerce integration. Use the widget panel to build an online store with the full responsive control you’ve come to expect from other builders with WooCommerce compatibility.
  • Built-in marketing tools. When you learn how to use Elementor Pro, you’ll find you can adjust form styles, create an Elementor landing page, and use plugin widgets to build out your web presence and marketing strategy at the same time. 
  • Large third-party community and marketplace. A huge benefit of Elementor is the robust development community that surrounds it. You can spend hours browsing all the Elementor page templates, WordPress themes, and add-ons that add to its core features. 

The 15 Most Popular WordPress Page Builders Compared

There's more than just one WordPress page builder on the market. We'll introduce you to 15 different plugins to help you get started faster with WordPress. Get to know the best WordPress page builders.

Differences between elementor and elementor pro

Before we go any further, it’s important to note that there is a Pro version of Elementor available. The free version can get you quite far, but if you’re looking for even more features, consider Elementor Pro

The free version of Elementor  includes everything you need to build a website, including features for building:

  • Headers 
  • Text boxes 
  • Image widgets 
  • Video widgets 
  • Gallery widgets
  • Testimonials 
  • Divider widgets 
  • Accordion widgets 

Elementor Pro adds several features aimed at businesses, including:

  • Forms 
  • Slides 
  • Portfolios 
  • Price tables 
  • Image carousels 
  • Counter widgets 
  • Pop-ups 
  • Share buttons widgets
  • Custom footer and header builders 
  • call-to-action

You can also add custom fonts, custom breakpoints, and take advantage of numerous premium widgets. Here’s a side-by-side breakdown of the free version of Elementor versus Elementor Pro: 

Differences Between Elementor  and Elementor  Pro
Infographic detailing a side-by-side comparison of features between Elementor and Elementor Pro

How to install the Elementor page builder in WordPress

Toinstall Elementor, you need an installed WordPress with a hosting plan and a domain name. When you are logged in to Dashboard of your WordPress website, go to Plugins > Add New

How To Install the Elementor  Page Builder in WordPress
WordPress plugins search screen in the Dashboard

Search for Elementor and install it. Then click Activate

How to install the Elementor  plugin
Installing and activating the Elementor plugin in the WordPress dashboard

If you opt for Elementor Pro (or decide to upgrade from the base Elementor plugin), go to My account on the Elementor website and click the Download Plugin button. This will save a ZIP file to your computer. 

Elementor  account view
Elementor account view, accessing the Downloads menu

Next, log in to your WordPress dashboard and navigate to Plugins > Add New. Upload the ZIP file you just saved to your computer, click Install and then Activate. You’ll need to have the free version of the Elementor plugin installed and activated for this to work. 

Adding plugins to WordPress
Adding plugins to WordPress

From there, you’ll need to activate your license. To do this, go to Elementor > Licence and then click on Connect & Activate

Activating the Elementor  Pro licence in the WordPress  dashboard.
Activating the Elementor Pro licence in the WordPress Dashboard

On the next screen, click Connect and then log in to your Elementor account. 

Connecting the Elementor  licence with your WordPress  website
Connecting the Elementor licence to your WordPress website

You’ll be redirected back to the dashboard. The message at the top of the screen prompting you to activate your license should be gone. 

How to use elementor: Step by step

With installation complete, it’s now time to get down to how to use Elementor in a practical setting. Elementor recommends  installing the Envato Elements plugin, which puts a resource of Elementor page templates on hand from within the dashboard. Make sure you have the default WordPress theme installed and activated. 

Downloading the Envato Elements plugin in the WordPress  dashboard
Downloading the Envato Elements plugin in the WordPress dashboard

To begin, navigate to Elements in the WordPress dashboard. You can select from either free or premium template kits, so pick which you’d prefer. Then choose a template that suits you.

A list of free template kits by Envato Elements in WordPress
A list of the free template kits by Envato Elements in WordPress

Scroll down the templates menu and select a homepage design you’d like to import. Repeat this for each specific new page template you want to create. People often opt to create About, Services, and Contact Us pages. You may have other preferences, however.

A list of free template kits by Envato Elements in WordPress
Homepage template options in the CoWorking Space template kit

With your pages created, you can then begin to edit them using Elementor. To do this, go to Pages > All, then hover over the page you want to edit and click Edit with Elementor

Once the page loads, you should see the Elementor editor in action. On the left-hand side of the screen, you’ll see editor mode activated. And on the right-hand side, you should see the editor preview, which is essentially a live view of your website that can be rearranged, reformatted, and edited directly. 

How to Use Elementor: Your Full Setup Guide for the WordPress Website Builder
Editing a homepage in Elementor

Content is divided into Sections in the editing mode, so if you hover over them, they should be highlighted in light blue. 

If you click on a Section, you can edit the content within it directly. If you right-click, it’ll open the section control panel. Here, you can see how after clicking on an image in the template, the control for image appears on the left: 

Editing images in Elementor
Editing images in Elementor

Working with widgets is a similar process. If it’s already present in the template, just click the grey pencil icon to open the editing mode for that specific widget. This will appear on the left-hand side once again.

If you want to make changes to an image carousel widget, you can click on it in the premade template, then make changes to settings by modifying the size, related text, and images. 

Adding an image carousel widget in Elementor
Adding an image carousel widget in Elementor

As you progress through learning how to use Elementor templates and get your page layout as you want it, you can start thinking about styling. You can customize colors by adjusting them on a global scale (across your entire website if you’re using Pro) and on a widget-by-widget basis as well. 

Adjusting the color of the text in your headers is a snap:

Changing the colour, font, and style of text in Elementor
Changing the color, font, and style of text in Elementor

You can adjust the fonts, font sizes, whether or not text has a drop shadow (and its opacity), and several other style settings for spacing, margins, and borders. You can even adjust the line size of the divider widget and its pattern. 

You can insert social icons, adjust their color and size, and customize their placement. You can also change their shape, add columns, and change their alignment. 

Adding social media icons using Elementor
Adding social media icons using Elementor.

The entire workflow with Elementor is user-friendly. If you make a mistake, it’s easy to fix as you can view your revision history at any moment and revert to an older version of your website with a single click. 

The Revision History and Navigator views in Elementor
The Revision History and Navigator views in Elementor

Likewise, the Navigator makes it easy to view every section, inner section, and widget at once in outline form, so you don’t have to scroll up or down endlessly. Manipulating every part of your website is a similar proposition when using Elementor. Select a section or widget, make changes, then save your work. And when you’re ready, you can publish your website. 

If you want to add more features or desire an even more robust starter theme, consider using Elementor themes and add-ons — which is precisely what we’re diving into next. Now that you understand the basics of how to use Elementor, let’s take a look at some of the most popular themes available for the platform. 

The best Elementor Themes

  • Hello:Hello is a free and easy-to-use theme designed for Elementor and serves as a real-deal starter theme. Hello doesn’t have styling or scripts included but is compatible with top WordPress plugins
  • Layers: Elementor acquired Layers, so it’s now compatible with the plugin and offers design choices suited for professionals — completely free. 
  • Astra: Described as the most popular WordPress theme ever, Astra is lightweight, fast, and easy to customize via Elementor. The free version is feature-rich, but a Pro version is available that includes a wider range of pre-built widgets and settings options. Pricing starts at $47/year.
  • Hestia: This theme is another Elementor-compatible choice that provides a modern design for free. You can upgrade to the Pro version for more section and widget options and enhanced Elementor compatibility, starting at $69/year.
  • GeneratePress: This free and open-source WordPress theme is a solid choice for building any kind of website. There’s also a Pro version with more features, starting at $44/year. 
  • OceanWP: This premium WordPress theme offers full Elementor compatibility, including several demos, extensions, and widgets, starting at $39/year. 
  • Customify: This theme is free and offers tons of customization options thanks to integration with Elementor and the Header & Footer Builder. You can also upgrade to the Pro version, which starts at $59/year for additional modules, updates, and support.
  • Neve: This theme has a mobile-first design that works with Elementor and can be used for free. There’s a Pro version available with even more features, starting at $59/year.
  • Phlox Pro: This premium theme is available on ThemeForest for $49 and includes over 150 Elementor templates. 
  • Zakra: This theme is designed for speed and SEO and includes over 65 starter templates. The Pro version includes premium demos and a wider feature set, starting at $59/year. 

Recommended add-ons for Elementor 

While Elementor is loaded with features, and you now know how to use Elementor themes, consider the several popular add-ons available for extending functionality further. 

As you learn how to use Elementor, having these options on hand along with their pricing can be helpful:

  • Ultimate Addons: Adds more add-ons, widgets, and blocks to Elementor, starting at $55. 
  • Essential Addons for Elementor: This is the most popular elements library for Elementor and comes with over 70 options, starting at $39.97 for a single website. 
  • Elementor Pack: his package is chockfull of free Elementor widgets and add-ons. The Pro version adds even more widgets as well as support and updates, starting at $29/year.
  • Prime Slider: With this add-on, you can create a slider in the header and hero section of your Elementor website. You can download the plugin for free or opt for the Pro version, which adds support and updates, starting at $7.92/year.
  • ToolKit for Elementor: ToolKit aims to make it easier to create Elementor websites thanks to performance tweaks and more intuitive admin tools. You can get started with this add-on for $49/year on up to three websites.
  • Happy Addons: Lastly, there’s Happy Addons, which adds new widgets, sections, and presets to Elementor. There’s a free version, and the Pro version comes with additional features, such as live copy, 24-hour support, and updates. Pricing starts at $29/year. 

Final Thoughts: How to use Elementor

Elementor is often celebrated as the top page builder plugin for WordPress, and there’s a good reason for that. Its feature-rich design, robust community, and availability of secondary themes and add-ons make it a flexible and accessible way to build a website. 

If you want to learn how to use Elementor, you need to start with a solid hosting plan. We at Raidboxes offer WordPress specific hosting that covers a wide range of needs. If you have any questions about , please feel free to contact us.

Your questions on using Elementor

What questions do you have for Maddy? We look forward to your comments. Are you interested in WordPress and web design? Then follow Raidboxes on Twitter, Facebook, LinkedIn or via our newsletter.

Did you like the article?

With your rating you help us to improve our content even further.

Write a comment

Your e-mail address will not be published. Required fields are marked with *