Elementor is still — and seems will always be — the most popular page builder plugin for WordPress despite the competition getting tighter. You may don’t like the status, but millions of people can’t be wrong. In this post, I will elaborate the differences between Elementor Free and Elementor Pro. From A to Z.
As you already know, Elementor is a freemium plugin. The free version is more than enough to create a page with standard elements like image, button, and icon. To add more advanced elements like form, pricing table, and call to action, you need to upgrade to the pro version.
Elementor offers 30 basic design elements (called widgets). After upgrading to the pro version, you will have access to 51 more advanced widgets. Plus, you can unlock extra features like theme builder, popup builder, loop builder, and so on.
⤵️ Shortcuts:
🆚 Elementor Free vs Pro at a Glance
Free | Pro | |
---|---|---|
Number of widgets | 30 | 52 (82 in total) |
Theme Builder | ❌ | ✅ |
Dynamic content | ❌ | ✅ |
E-Commerce functionality | ❌ | ✅ |
Form Builder | ❌ | ✅ |
Email marketing integrations | ❌ | ✅ |
Custom CSS | ❌ | ✅ |
Custom design assets (font and icon) | ❌ | ✅ |
Loop Builder | ❌ | ✅ |
Client mode | ❌ | ✅ |
Notes | ❌ | ✅ |
Global elements | ❌ | ✅ |
Animation effects | Basic | Advanced |
Display conditions | ❌ | ✅ |
Action links | ❌ | ✅ |
A little note that not all features on the above table are available on all Pro plans. The Essential plan, the lowest plan that Elementor offers, have no access to popup builder, custom CSS, and Notes.
You can learn more here.
📚 Elementor Pro Features
Here are more details about the above features.
👔 Theme Builder
Every WordPress website has the following parts:
- Header
- Footer
- Single post
- Single page
- Archive pages (tag, category, author, etc.)
- Search results page
- 404 page
By default, the appearance of the above parts are controlled by the theme you use via dedicated files. For instance, the header.php file controls the header, the footer.php file controls the footer, and so on.
The Theme Builder feature of Elementor allows you to create custom templates to replace the default templates of your theme.
The best part, you don’t need to deal with code. Instead, you can create the custom templates using the visual editor of Elementor. Another good part, you can assign a custom template for a specific location.
If you want it, you can create two different templates for the same site part.
To access Theme Builder, you can go to Templates -> Theme Builder on your WordPress dashboard. Here is the screenshot of the Theme Builder screen.
🛍️ WooCommerce Builder
Want to create an online store with WooCommerce?
The Theme Builder feature of Elementor allows you to create an online store with your own design. The feature allows you to create custom templates and pages to replace the default templates of the following WooCommerce parts:
- Shop page
- Single product
- Product archive
- Customers account page
- Checkout page
- Cart page
After installing and activating the WooCommerce plugin on your WordPress website, you will see a new widget category on the widget panel that hosts WooCommerce-specific widgets.
⚙️ Dynamic Content
To make Theme Builder fully usable, Elementor also supports dynamic content. You can add dynamic content according to the custom template you create.
For instance, when creating a custom template for single post, you can add dynamic content like featured image, post title, post meta, post excerpt, author name, and so on.
There are two ways to add dynamic content in Elementor.
First, you can use dedicated widgets, which you can find under the Single and Site widget categories.
Alternatively, you can click the Dynamic Tags icon on the content editor field. You can find the icon on nearly all widgets that has either text or image element. From Text Editor, Heading, Image, Button, Call to Action, and so on.
Here is the list of dynamic content that Elementor supports:
- Site Logo
- Site Title
- Site Tagline
- Page Title
- Post Title
- Post Content
- Post Excerpt
- Post Meta
- Featured Image
- Author Avatar
- Author Name
- Author Meta
- Author Info
🧩 Custom Fields
Need to add more dynamic content? If yes, you can create custom fields.
Elementor supports integration with popular custom field plugins such as ACF, Pods, Meta Box, to JetEngine.
Not only you can use custom fields to add dynamic text or image, but you can also add dynamic color.
Some field types can also be used to set value of a certain setting dynamically. For instance, you can use the Number field type on the Star Rating widget to dynamically set the rating value. This feature is super useful if you often write review articles where by you can add dynamic rating without installing a dedicated star rating plugin.
In addition to Star Rating, dynamic value can also be implemented to the following widgets:
- Progress Bar
- Price List
- Price Table
- PayPal Button
- Stripe Button
- Counter
🛒 E-Commerce Functionality
Elementor is the best WordPress page builder plugin — I repeat, the best page builder plugin — to sell digital product, e-book in particular.
You can directly sell your works without installing a dedicated e-commerce plugin.
Elementor has two dedicated widgets that you can use to accept payments:
- PayPal Button
- Stripe Button
The PayPal Button widget supports three transaction types: checkout, donation, and subscription.
Do you know the best part of Elementor e-commerce feature?
Not only you can use it to sell a single product via a static landing page, but you can also sell multiple products be leveraging dynamic content, custom fields in particular.
As I said above, both the PayPal Button widget and the Stripe Button widget support dynamic value. Meaning that you can set different value (product price) for each product.
Other elements such as product name, SKU, and shipping price can also be set dynamically.
☎️ Form Builder
Form is one of the widgets you can use after upgrading to the pro version of Elementor. With the widget, you can create a wide range of web forms. From a simple contact form, email opt-in form, file upload form, to booking form.
The Form widget of Elementor Pro has the following features:
- 20 field types
- Multi-step
- Google reCaptcha integration
- Email marketing integration
- Form submission manager
🏗️ Form Field Types
As I have just said, there are 20 field types that the Elementor Form widget supports. Here is the list:
- Text
- Text area
- URL
- Telephone
- Radio
- Select
- Checkbox
- Acceptance
- Number
- Date
- Time
- File Upload
- Password
- HTML
- Hidden
- reCAPCTHA 2.0
- reCAPTCHA 3.0
- Honeypot
- Step
🔘 Form Actions
By default, the form action is set to Email. Meaning that your form data will be sent to your email. Of course, you can change it according to your need.
If you want to collect the submissions locally, for instance, you can set the action to Collect Submissions. Or if you want to connect your form with an email marketing service like ConvertKit and ActiveCampaign, you can can also do so.
In general, the Form widget of Elementor supports the following actions:
- Send to email
- Send to form submission (locally)
- Send to email marketing service
The email marketing services and plugins that the Form widget supports are:
- ActiveCampaign
- ConvertKit
- Drip
- GetResponse
- MailChimp
- MailerLite
- MailPoet
If you want it, you can also use the Form widget to create a registration form, but you need to add custom code to do so.
👨💻 Custom CSS
If you have CSS knowledge, you will definitely love this feature. With custom CSS, you can achive many things beyond what Elementor offers.
A simple instance, you can apply a gradient text, in which it is impossible with the default styling options. Or you can also add a gradient background that consists of multiple colors (more than two).
There are two options to add custom CSS in Elementor. First, you can add custom CSS locally to an element. For this, you need to define the selector first. The selector
prefix is required to add local custom CSS.
The second option to add custom CSS in Elementor is by adding global CSS. For this option, you can add either ID or class of the element you want to target. You can go to the Advanced tab on the settings panel to add CSS ID and CSS class.
For the CSS snippet itself, you can add it via Elementor Site Settings, which you can access by clicking the hamburger icon at the top-left corner of the settings panel.
The CSS editor of Elementor supports autocomplete and generative AI.
📂 Custom Design Assets
The design assets I mean here are fonts and icons.
Elementor uses third-party providers for fonts and icons. It uses Google Fonts to provide font library, while to provide icon library, it uses Font Awesome.
For a certain project, you may want to use your own assets instead. Elementor makes it easy for you to use both custom font and custom icon.
✍🏻 Custom Font
Before installing a custom font, you can disable the Elementor and Google Fonts integration first. This will prevent fonts from Google Fonts from from being loaded on the Elementor editor, which can streamline your design process.
You can go to the Settings page of Elementor. The option to disable Google Fonts lies under the Advanced tab.
Elementor supports the following formats for font file:
- WOFF
- WOFF2
- TTF
- SVG
- EOT
To add a new custom font itself, you can go to Elementor -> Custom Fonts on your WordPress dashboard.
🗂️ Custom Icon
You can prepare an SVG file or two to use it on your design. But before you can upload it, you need to make sure that your WordPress system allow SVG file upload.
Elementor has a built-in feature to make your system allow SVG upload. Go to the Elementor settings page and enable the Enable Unfiltered File Uploads option under the Advanced tab.
After enabling the above option, you will be able to upload SVG files.
There are two options to add a custom icon in Elementor. First, you can bulk upload a set of custom icons. To do so, you can go to Elementor -> Custom Icons on your WordPress dashboard.
The second option is by uploading the individual custom icon (SVG file) directly via the Elementor editor. To do so, you can simply click the Upload SVG button on the settings panel.
You can see the above button on every Elementor widget that has an icon element. Such as Button, Icon, Icon Box, Icon List, and so on.
🔄 Loop Builder
The function of Loop Builder is pretty similar to the Posts widget. It is used to display the content on your website. Be it blog posts, pages, or custom post types.
The difference is that Loop Builder allows you to add custom element to the content feed, including custom fields. With this capability, you can leverage Loop Builder to create a more complex dynamic website. Such as directory website, listing website, and so on.
The use of Loop Builder involves two steps. First, you need to create the loop item template. Second, you can use the template using the Loop Grid widget.
The Loop Grid widget also comes with settings like pagination and query to select the content type to be displayed.
🤝 Client Mode
This feature is super useful if you use Elementor to create websites for clients.
Not all clients have IT or design background. If you grant them access to the Elementor editor, they can break the design you have tirelessly created.
The features offers three restriction types:
- Editor access
- JSON upload
- Edit content
The last mentioned restriction is the solution you can use if you want to grant your clients access to the editor, yet don’t allow them to edit the design. If it is enabled, your clients can only edit the content on your design without being able to change any design setting.
You can access the client mode feature by going to Elementor -> Role Manager on your WordPress dashboard.
📝 Notes
Notes is a built-in collaboration feature from Elementor. The way this feature works is pretty similar to the commenting feature on Google Docs whereby you can leave a comment to a certain element on your design. When adding a comment, you can mention both your team members and your client.
You can simply type “@” on your keyboard to start mentioning someone using this feature.
With this feature, you can easily ask your team members to make a revision to a certain part of your design. Be it the content or the settings.
The Notes feature of Elementor Pro comes with email notifications. You will get email notifications over new mentions and replies.
🌐 Global Elements
Some professional designers create a design system on tools like Figma and Adobe XD before they create a website.
Creating a design system is beneficial for some ways.
First, you can use it as a communication tool with your team mates. Second, it makes it easy for you to edit your design in the future.
One of the elements on the design system is pattern. You can leverage Global Elements to create the the patterns of design components. Such as button, call to action, form, and so on.
You can create a certain global pattern and add it multiple times on different pages in your website. In the future, if you need to edit the pattern, you will only need to work once. Smart!
🪄 Animation Effects
To be honest, I am not really a fan of animation effect as as it can slow down site. But, if you want to add a little animation effect, Elementor has some.
The very basic animation effect you can add to your design is hover offect. This effect is available on both the free version and the pro version of Elementor.
Some animation effects such as sticky effect, scrolling effect, and mouse effect are ony available on the pro version.
Elementor Free | Elementor Pro | |
---|---|---|
Hover effect | ✅ | ✅ |
Entrance animation | ✅ | ✅ |
Scrolling effects | ❌ | ✅ |
Mouse effects | ❌ | ✅ |
Sticky effect | ❌ | ✅ |
Parallax background | ❌ | ✅ |
👁️ Display Conditions
Display Conditions used be available for Theme Builder and Popup Builder only. But since Elementor Pro version 3.19, you can also applied Display Conditions to widgets, container, and other elements on your design.
This gives you more options to display elements based on certain criteria you like. There are many use cases of the feature.
If you have a membership website, for instance, you can use it to display content only for registered and loggen in users. The feature itself supports the following conditions:
- Page parent
- Author
- In categories
- In tags
- Date modified
- Date of publish
- Author
- Login status
- Role
- Registration date
- Date and time
- From URL
You can access Display Conditions on the Layout block under the Advanced tab on the settings panel.
🔗 Action Links
Action link is really an underrated feature of Elementor that barely mentioned. Whereas, it super useful. Especially if you often use Elementor to create landing pages.
With the feature, you can, for instance, create a CTA button to start a new WhatsApp chat.
There are several services you can connect your button with using the feature. From WhatsApp, Facebook Messenger, Google Calendar, Skype, Viber, and so on.
To use this feature, you can simply click the Dynamic Tags icon on the link field of any Elementor widget.
📞 Elementor Pro Support
Elementor says that it offers a premium support for Pro users. In reality, the support we get is not really premium. Elementor handles your issue via a support ticket just like most online services.
I have contacted the technical support of Elementor several times and they never provided a real solution. I had to find the solution myself via Google. Maybe because my issue involved custom code to get fixed. The support team didn’t provide the code, by the way.
I have to say that the Elementor support is left far behind Elegant Themes. The technical support of Elegant Themes always provides a real solution to any of my problem, even if it involves custom code. Also, Elegant Themes offer a temporary access feature to let its support team access your website to fix your issue.
Elementor offers no temporary access feature like Elegant Themes.
💰 Elementor Pro Pricing
I have been using Elementor since 2019 and have witnessed some changes of pricing plans made by Elementor.
In case you didn’t know, Elementor once increased its pricing plans by up 150% in 2021 before it reverted back to the current plans. In that pricing plans, you needed to spend $999 for the highest plan.
Today, the highest plan of Elementor Pro costs $399 per year. The plan allows you to use Elementor Pro on up to 1,000 websites. This plan targets agencies.
Elementor also has a plan for individuals who maintain only a single website. The plan costs only $59 per year, but you have no access to popup builder, email marketing integrations, custom CSS, and Notes.
Here are the pricing plans of Elementor Pro:
Essential | Advanced | Expert | Agency | |
---|---|---|---|---|
Price | $59/year | $99/year | $199/year | $399/year |
Number of sites | 1 | 3 | 25 | 1,000 |
Number of widgets | 50 | 82 | 82 | 82 |
Theme Builder | ✅ | ✅ | ✅ | ✅ |
Popup Builder | ❌ | ✅ | ✅ | ✅ |
Email marketing integrations | ❌ | ✅ | ✅ | ✅ |
Custom CSS | ❌ | ✅ | ✅ | ✅ |
Custom fields | ❌ | ✅ | ✅ | ✅ |
Notes | ❌ | ✅ | ✅ | ✅ |
Learn more | Learn more | Learn more | Learn more |
👉🏻 Alternative Method to Get Elementor Pro
Elementor Pro is now available in two versions: the plugin version and the SaaS version.
The SaaS version is pretty similar to WordPress.com whereby you will get a WordPress website with Elementor Pro pre-installed. This version is a better suited option if you prefer to spend your budget on a monthly basis.
There are also four plans you can choose from for this version. Starting from $2.9 per month to $49.9 per month.
📝 The Verdict: Should You Upgrade to Elementor Pro?
The pro version of Elementor offers more advanced features than the free version. They allow you to add more advanced elements to your design. The question is it, should you upgrade to Pro?
Well, the answer is always depends on your needs. But if you really enjoy the editing experience that Elementor offers, I strongly recommend you to make the upgrade. There are plenty of features you unlock after upgrading as I have just elaborated above. But I have one strong argument why you should make the upgrade.
With Elementor Pro, you don’t need to install too many plugins to add features to your website. You can create a form, popup, notification bar, pricing table, slider, etc. with a single plugin.
Elementor is not a perfect product, though. There are some areas that need to improved. But to say that Elementor is a great product I think is fair enough.