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?
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
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:
- Text boxes
- Image widgets
- Video widgets
- Gallery widgets
- Divider widgets
- Accordion widgets
Elementor Pro adds several features aimed at businesses, including:
- Price tables
- Image carousels
- Counter widgets
- Share buttons widgets
- Custom footer and header builders
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:
How to install the Elementor page builder in WordPress
Search for Elementor and install it. Then click Activate.
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.
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.
From there, you’ll need to activate your license. To do this, go to Elementor > Licence and then click on Connect & Activate.
On the next screen, click Connect and then log in to your Elementor account.
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.
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.
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.
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.
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:
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.
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:
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.
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.
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.