This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Use Elementor Page Builder With WordPress

August 20, 2021

9 Min Read
elementor plugin review

When we talk about WordPress page builders, the most popular and the one with the biggest number of active installations and the largest community is definitely Elementor. So far, there are around 8 million+ sites built with Elementor. It is recommended by many experts for its ease of use, speed, and enormous possibilities when building WordPress sites.

I have tested the Pro version of Elementor and built a landing page. It comes with the drag-and-drop functionality and works with any theme and you can use all Free, Pro, and WordPress widgets at the same time. Let’s read this article to know more about Elementor installation and configuration with WordPress.

Why Choose Elementor Page Builder?

Elementor is one of the first and one of the most advanced WordPress Page builders on the market at the moment. It also has a huge ecosystem around it and many smaller authors are building useful add-ons and templates you can use to reduce the time needed for the end result.

In Elementor’s case, the end result can be a really awesome site, well designed with all functionalities you need or you might need. You will not find any type of WordPress site that you cannot build by using Elementor. If you need some extra functionality, it can be easily implemented with shortcodes.

Features of Elementor Page Builder

The free version of Elementor comes with a limited number of Elements but with the Pro version, you get add-ons like QI, Ultimate Add Ons, etc. Besides, you will have a bunch of useful elements and templates to build your site with ease.

It wouldn’t be fair to leave out the Crocoblock add-on for Gutenberg and Elementor, which is one of the favorite tools for most Elementor users as it extends the native Elementor’s functionalities.

Elementor divided its features into 4 categories.

1. Basic Widgets

Basic Widgets comes with the free version and these are quite sufficient to build a stunning website that doesn’t require advanced options like Table Of Contents, Portfolio, or Form. Also, in the free version, you cannot build a Header/Nav Menu and you might need to find some cool WordPress theme with the Navigation Menu you like.

Basic Widgets

2. Pro Widgets

Pro Widgets with Elementor Pro are covering almost every aspect and every widget you might need to build any kind of website. Add and pick posts from different categories, post types or simply list the latest ones, Price Tables, Gallery, Flip Box, Easy Social Media Networks embed, Various Media Carousels, Lottie Widget, and HotSpot (I will talk about this one later).

Pro Widgets

3. Theme Elements

Theme Elements also comes with Elementor Pro and they are important to build all template pages and single post template of course. As you know there are pages that are dynamically populated with content like Category, Tag, Author, etc.

For those pages, you need to create a template by using theme elements. The same comes for the Single Post, where you can design a beautiful template for your posts that will be used by all posts without the need to create them every time. Just add the content like you’re used to and you’re done.

Theme Elements

4. WooCommerce Widgets

And last but not the least, WooCommerce Widgets. These widgets allow you to create again similar to Theme Builder, the template pages, and the single product template with ease by using WooCommerce elements.

WooCommerce Widgets

Pricing and Plans of Elementor Page Builder

Elementor Pro comes with 5 different plans, all of them contains the same Elementor Pro page builder and features like:

  • Drag & Drop Live Editor
  • Responsive Design
  • 90+ Basic & Pro Widgets
  • 300+ Basic & Pro Templates
  • Theme Builder

The lowest plan is Essential for 1 site at the price of $49. With this plan, you get Premium Support, which means you can expect a response in 24h. The next plan is Advanced and it covers a license for 3 sites at the price of $99 with the same type of support.

Probably the most popular is Expert at $199 for 25 sites. Additionally, you will get an Elementor Expert Profile, where you can post your projects completed in Elementor and get some new clients.

One before the top is Studio for 100 sites at the price of $499 and there you have an extra benefit of VIP Support, which means you have priority and your tickets will be answered in 30 minutes. The same comes with the most expensive plan Agency for 1000 sites at the price of $1000.

All plans are yearly and if you wonder what happens with sites if your subscription expires, the answer is, sites will look the same as before but you will not be able to edit or use elements and templates from Elementro Pro.

Elementor Pricing

System/Hosting Requirements of Elementor

According to Elementor’s system requirement page, it should work even with 128MB of PHP, MySQL 5.6 or greater or MariaDB 10.0 or greater. Also, it should work with any PHP 7+. For the testing purpose, I’ve used VultrHF with 2GB PHP Memory.

Of course, you would need the latest WordPress version and all other plugins up to date.

Install and Configure Elementor Page Builder

Installing the free version of Elementor is as same as for any other plugin on the WordPress plugin repository, Go to your WordPress Dashboard → Plugins → Add New, browse for Elementor, Install and Activate the plugin.

For the Pro version, you need to buy the plan which will automatically create an account at Elementor. When you log in there, you will see the download button to download the latest Pro version.

Connect Your Site to Elementor

While you’re still logged in to the Elementor dashboard, log in to your WordPress Dashboard → Plugins → Add New and select Upload, browse the downloaded file of Elementor Pro from your computer, Install and Activate it.

When you’re done in the left-hand sidebar on your WordPress Dashboard, go to Elementor → click on License → click Connect & Activate button.

Activate Elementor License

When clicked, it gets you automatically redirected to your dashboard on Elementor to Activate it. Click the green Activate button and you’re done. Your Elementor Pro is connected and activated.

Connect and Activate Elementor License

After activation, you will see the confirmation that your Elementor is Active. However, if you’ve built the site on a staging domain and you don’t want to buy another license for live, you can easily disconnect the account on staging and activate it on the live domain.

Elementor License Settings

It is time to start using Elementor and build your website. My suggestion is to use the Hello Theme by Elementor specifically built for Elementor.

To do that, let’s start by creating a page “Homepage” and edit it with Elementor. Go to Pages → Add New, name it Homepage and Publish it, then click Edit With Elementor button.

Edit With Elementor

On the Edit page, you will see Elements you cannot edit because the Layout is set to default. In order to use Elementor on an empty canvas, pick Elementor Full Width or Elementor Canvas by clicking on the gear icon in the bottom left corner.

Elementor Page Settings

Before you start building the site, make sure to click on the burger icon in the top left-hand corner and set all global settings needed for the rest of the job.

Elementor Site Settings

Site Settings are quite similar to setting up the theme. Here, you can select the global colors, fonts you will be using, and the complete site typography for each HTML tag.

Besides that, you can set the global button style, header, footer, Custom CSS if needed, and everything you need to set ones and keep like that across the whole site to keep consistency as well.

Elementor Global Elements

The second option is Theme Builder, which allows you to create the template pages and single post/product templates, which will be automatically used by the specific dynamically generated page, post, or product. Like every WordPress theme needs to have template files to display all of the above, Elementor will let you do it without writing even a single line of the code.

Elementor Theme Builder

The last option is user preferences, where you can set up your working environment in Elementor, nothing that affects the site itself but your UI as an administrator.

Elementor Preferences

To kick off your site, all available widgets are placed in the left-hand sidebar and everything can be edited visually and by drag and drop. If you would like an easier way to do it, you can start by using one of the pre-made blocks or templates by clicking on the folder icon.

Elementor Elements

The folder icon will open a pop-up, where you can see pre-made blocks and templates, as well as the ones you saved before. You can also save a block or a whole template you created and re-use it on some other internal page. It’s quite common to use your saved block for testimonials, some specific call to action that shouldn’t be displayed on every page but on some.

Elementor Library

There is one more thing you need to know when you start building a website without any previous experience, it is easy to use, quite intuitive and without any previous experience in a few days, you will be more than capable of building yourself a nice website, I can say even professionally looking one.

However, your site needs to look great on all device sizes, and the same way you edited the desktop version, you can edit all other sizes. Please note that the elements and widgets can be only added to the desktop version and then you can trick the look on smaller sizes.

Elementor Responsive Design

Also, you can easily set the widget or section visibility on different devices, so you can have different content in a similar section by leaving one section visible on a desktop but hidden on a tablet and mobile. Similarly, another hidden from a desktop but visible on tablet and mobile.

To edit mobile and tablet versions, click the icon responsive mode at the bottom of the left-hand sidebar, it will show your site on mobile. And on the top, you can switch between different screen sizes.

For more clarity, I’ve added two sections where one is hidden on mobile and tablet and the other section is hidden on desktop. Please see the example below.

Elementor Desktop Result

The end result is on mobile.

Elementor Mobile Result

And the end result on the desktop has only one section but the different one.

Elementor Page Builder Performance on Cloudways

Elementor performs quite nicely and it scores 100 on GTMetrix and the other testing tools show a really great performance. Please note that I haven’t optimized any images to have the exact same page size and images for all tests we did.

Results of Elementor on GTMetrix

– Results of Elementor on GTMetrix

Results of Elementor on Pingdom Tools

– Results of Elementor on Pingdom Tools

Results of Elementor on WebPageTest

– Results of Elementor on WebPageTest

Summary

If you need an intuitive and easy-to-use page builder, Elementor might cover all aspects needed to build a nice website. It is not that hard to build pixel-perfect sites from the design if you have any knowledge of CSS.

With the huge community and hundreds of add-ons and external plugins extending the basic Elementor functionalities, I cannot see any type of website that cannot be built by using Elementor.

We often see how Elementor is bloated, a lot of unnecessary code is loading, it’s hard to optimize but as you can see from tests, it seems Elementor performs quite well on Cloudways. I’ve tested the landing page with 25 images inside and 7 sections + Header and Footer, which is above average for the homepage.

Another great thing about Elementor is that the learning curve is not steep but quite light and in just a few minutes by using some pre-made templates or blocks, you can have a really nicely designed, modern-looking website.

Q. Can I build a WooCommerce store with Elementor?

Yes, you can! With Elementor, you have a WooCommerce builder, which allows you to create pages and a single product page quickly and easily.

Q. Does Elementor have pre-built templates?

Elementor has the template library as well as many add-ons for various templates. Also, you can connect Envato Elements and use any of the templates there.

Q. Who should use the Elementor Page Builder?

Elementor has been built with the designers and front-end developers in mind. It’s quite easy to build a site of any kind, but also at the same time if you are a web designer or front-end developer you get a lot more out of Elementor.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Aleksandar Savkovic

WordPress Developer, Lecturer, the product guy interested in Agile product development. WordCamp and WP/Woo Meetup speaker and Organizer, and Community Manager at Cloudways. Also, a Formula 1 and MotoGP freak.

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

x

For 4 Months

Promo: BFCM2021
  • 28

days

  • 28

Hours

  • 28

Mins

  • 28

Secs