Elementor is one of the most popular WordPress page builders currently available. And for good reason: Elementor is packed with features that make creating custom websites easier than ever. In this post, you'll learn everything you need to know about Elementor.
If you're curious about how to use Elementor, you've come to the right place. Today it's all about Elementor - including tips on installation and the best themes & add-ons. Because using Elementor can be confusing, especially at the beginning. We take a closer look at the following topics:
- Elementor: What Elementor is and how the page builder works
- Advantages 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: explained step by step
- The best Elementor themes and how to use them
- Recommended add-ons for Elementor
- Conclusion: How to use Elementor - the comprehensive guide
Elementor: what it is and how it works
What is a page builder anyway?
Elementor is a plugin for creating websites that was developed for WordPress. Elementor adds a whole range of drag & drop functions. This means that even beginners can create stunning websites that look professional.
The biggest advantage of Elementor is that you get a complete live view of your website - while you make changes.
Elementor creates an intuitive design experience, especially for beginners. To achieve this, the plugin uses dozens of widgets, a complete template library and a change history feature.
The Elementor core plugin is free and comes with many basic elements. If you need more advanced features, Elementor Pro is available. This premium version of Elementor has several pricing tiers, starting at $49/year for one website and going up to $999/year for 1,000 websites.
Advantages of using Elementor as a WordPress page builder
As you may have guessed, Elementor has a few advantages. Let's explore a few before we get into the actual Elementor tutorial. Some of the most important advantages are:
- Easy to use. Visual frontend editing combined with widgets makes working with the Elementor Page Builder incredibly easy, even for newcomers.
- Flexible and extensible for developers. A robust template library, block editor and complete control over output means that even more experienced developers can learn how to use and work with the Elementor Theme Builder.
- Tons of options for styling. You can use the editor panel with sliders to customize settings in the design within a comfortable editing framework.
- Global widgets that save time. Change, customize, save and use widgets across multiple websites.
- Drag & drop theme creation. Create an Elementor theme from scratch with the built-in widgets - or use Elementor Pro templates as a basis.
- E-commerce integration. Use the widget panel to create an online store with the full responsive control you're used to from other WooCommerce compatible builders.
- Built-in marketing tools. Especially when getting started with Elementor, you will immediately notice the following: You can customize form styles, create an Elementor landing page and use plugin widgets to build your web presence and marketing strategy at the same time.
- Large third-party community and marketplace. A big advantage of Elementor is the large developer community behind it. You can spend hours browsing through all the Elementor page templates, WordPress themes and add-ons that extend the core functionality of Elementor.
The 15 most popular WordPress page builders in comparison
Differences between Elementor and Elementor Pro
Before we go any further, it's important to mention that there is a Pro version of Elementor. You can get pretty far with the free version, but if you're looking for even more features, you should consider Elementor Pro.
The free version of Elementor includes everything you need to create a website, including building features:
- Header
- 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
- Picture Carousels
- Counter widgets
- Pop ups
- Social Buttons Widgets
- Custom footer and header builder
- Call to Action
You can also add custom fonts and breakpoints and use numerous premium widgets. Here you can find a comparison of the free version of 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 into the dashboard of your WordPress website, go to Plugins > Add New.
Search for Elementor and install it. Then click on Activate.
If you choose Elementor Pro (or want to upgrade from the basic Elementor plugin), go to the Elementor website at My Account and click on 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 must have the free version of the Elementor plugin installed and activated for this to work.
From there, you mustactivate your license at . To do this, go to Elementor > License and then click on Connect & Activate.
On the next screen, click on Connect and then log in to your Elementor account.
You will be redirected back to the dashboard. The message at the top of the screen asking you to activate your license should have disappeared.
How to use Elementor: explained step by step
Now that the installation is complete, it's time to get to grips with how to use Elementor in practice. Elementor recommends installing the Envato Elements plugin, which provides you with a selection of Elementor page templates in the dashboard. Make sure you have the default WordPress theme installed and activated.
To get started, navigate to Elements in the WordPress dashboard. You can choose between free and premium template kits. Decide which one you prefer. Then choose a template that suits you.
Scroll down in the template menu and select a homepage design that you would like to import. Repeat this for each specific new page template you want to create. Many often choose to use it to create pages such as About Us, Service and Contact Us - but that's up to you.
Once you have created your pages, you can edit them with Elementor. To do this, go to Pages > All, move the mouse over the page you want to edit and click on Edit with Elementor.
Once the page has loaded, you should see the Elementor Editor in action. On the left side of the screen you will see the activated editor mode. And on the right side you will see the editor preview. This is basically a live view of your website that you can rearrange, reformat and edit directly.
The content is divided into sections in edit mode. If you move the mouse pointer over the sections, they should be highlighted in light blue.
If you click on a section, you can edit the content in it directly. If you click with the right mouse button, the section control panel opens. Here you can see how, after clicking on an image in the template, the control panel for the image appears on the left-hand side:
Working with widgets is a similar process: if it already exists in the template, simply click on the gray pencil icon to open the edit mode for that particular widget. This will then appear again on the left-hand side.
If you want to make changes to an image carousel widget, you can click on it in the ready-made template and then make changes to the settings by adjusting the size, the associated text and the images.
As you learn how to use Elementor templates and customize your page layout to your liking, you can start thinking about styling. You can customize colors by adjusting them on a global level (for your entire website if you're using Pro) and also on a widget basis.
Changing the color of the text in your headings is a piece of cake:
You can customize the fonts and font sizes, whether or not the text has a drop shadow (and its opacity), and various other style settings for spacing, margins and borders. You can even customize the row size of the divider widget and its pattern.
You can insert social media icons, adjust their color and size and determine 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 time and revert to an older version of your website with one click.
Likewise, the navigator makes it easy to see every section, inner area and widget at once, so you don't have to endlessly scroll up or down. Manipulating each part of your website is similar with Elementor. Select a section or widget, make changes and save your work. And when you're ready, you can publish your website.
If you want to add more features or want an even more robust starter theme, you can use Elementor themes and add-ons - which is exactly what we'll cover next. Now that you understand the basics of using Elementor, let's take a look at some of the most popular themes available for the platform.
The best Elementor themes
- HelloHello is a free and easy-to-use theme developed for Elementor. Hello is a real theme for getting started with Elementor. Hello does not contain any styling or scripts, but is equipped with the most important WordPress plugins compatible.
- Layers: Elementor has adopted Layers so that it is now compatible with the plugin and offers a design selection suitable for professionals - completely free of charge.
- Astra: Known as the most popular WordPress theme of all time, Astra is lightweight, quick and easy to customize via Elementor. The free version is feature-rich, but there's also a Pro version that offers a larger selection of pre-built widgets and customization options. Prices start at $47/year.
- Hestia: Hestia is another theme that is compatible with Elementor. It offers you a modern design for free. You can also upgrade to the Pro version to get more options for widgets and improved Elementor compatibility. Prices start at $69/year.
- GeneratePress: This free and open source WordPress theme is a solid choice for creating any type of website. There is also a Pro version with more features that starts at $44/year.
- OceanWP: This premium WordPress theme offers full Elementor compatibility, including multiple demos, extensions and widgets, starting at $39/year.
- Customify: This theme is free of charge. Thanks to the integration with Elementor and the Header & Footer Builder, it offers you plenty of customization options. You can also upgrade to the Pro version, which is available from $59/year for additional modules, updates and support.
- Neve: This theme has a mobile-first design that works with Elementor and is free to use. There is a Pro version with even more features, which is available from $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 broader set of features, starting at $59/year.
Recommended add-ons for Elementor
Elementor is packed with features. You now know how to use Elementor Themes. But you should also consider the various popular add-ons to further extend the functionality.
While you're learning how to use Elementor, take a look at the following add-ons:
- Ultimate Addons: Extends Elementor with additional add-ons, widgets and blocks, from 55$.
- Essential Addons for Elementor: This is the most popular Elementor library for Elementor and comes with over 70 options, starting at $39.97 for a single website.
- Elementor Pack: This package is packed with free Elementor widgets and add-ons. The Pro version offers 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 includes support and updates, starting at $7.92/year.
- ToolKit for Elementor: ToolKit aims to simplify the creation of Elementor websites thanks to performance improvements and more intuitive admin tools. You can get started with this add-on for $49/year on up to three websites.
- Happy Addons: Last but not least, there are Happy Addons. The add-on adds new widgets, sections and presets to Elementor. There is a free version and a Pro version. The latter comes with additional features such as Live Copy, 24/7 support and updates. The price starts at $29/year.
Conclusion on the Elementor Page Builder
Elementor is often hailed as the best page builder plugin for WordPress. There's a good reason for this: the feature-rich design, robust community and availability of themes and add-ons make Elementor 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. At Raidboxes, we offer WordPress specific hosting that covers a variety of needs. If youhave any questions about our plans, feel free to contact us.