Elementor Pro v 3.7

Description

Elementor Pro 3.7

Elementor PRO is a great way to show off your content with ease. It has a live form editor, which means you can edit your forms without even leaving the editor page. It also comes with live custom CSS code support. You can place Elementor templates to sidebars, footers or any other area you want viz shortcodes or widgets. It is fully compatible with WooCommerce and has inbuilt fast loading sliders.

Top 20 Elementor Pro Features

1. Theme Builder

WordPress is written in PHP. That said, to create a WordPress plugin or theme, you should also master PHP and the supporting languages like JavaScript. But it was then. Today, you can create your own WordPress theme without coding thanks to the theme builder feature offered by some page builder plugins like Elementor.

What is a theme builder?

To understand the concept of theme builder, you need to understand the components of a WordPress theme first. A WordPress theme consists of template files. Each template file controls the layout of a theme part. For instance, the header.php file controls the layout of the theme header, while the footer.php file controls the layout of the theme footer. Most WordPress themes have the following template files:

• header.php: To control the layout of the header.
• footer.php: To control the layout of the footer.
• single.php: To control the layout of the single post (blog post).
• sidebar.php: To control the layout of the sidebar.
• archive.php: To control the layout of the archive pages.
• page.php: To control the layout of the page.

A theme builder allows you to create custom templates to replace the templates above, as well as other templates belong to a theme. You can create the custom template using the visual editor of the page builder you use (Elementor in this case).

One of the advantages of using a theme builder instead of a theme is that you can set where a custom template to be applied. For instance, you can set a certain custom header template to be applied to a certain post, page, post under certain categories, the entire website, and so on. In other words, you can have different layouts of a certain theme part (e.g., the header) by creating multiple custom templates for the same part. Another advantage, you have limitless customization options (read: WordPress vs Theme Bulder).

2. WooCommerce Builder

Do you have a WooCommerce-powered e-commerce website? Elementor Pro is also capable of taking the design of your e-commerce site to the next level by allowing you to create custom templates for your WooCommerce. No need to buy a WooCommerce theme. Instead, you can customize the WooCommerce parts yourself using the visual editor of Elementor. The WooCommerce parts you can create the custom templates of are:

• Single product page
• Product archive pages (categories and tags)
• Shop page
• Cart page
• Checkout page
• My Account page

You have the following widgets to create the custom templates for WooCommerce:

3. Form Builder

Elementor Pro gives you access to the Form widget. You can use the widget to add a form to the page/theme builder template you are working. The widget allows you to create a wide range of form types, thanks to its extensive field type support. Here are the field types supported by the Form widget of Elementor:

You can integrate your form with reCAPTCHA to protect it from spammers. With a little trick, you can also use the Form widget to create a form registration on your website. Elementor also allows you to create a multi-step form to allow you to create a simplified long form, as well as to provide a better user experience to your users. Elementor itself has no default feature to manage form submissions. To do so, you can use Form Vibes. Read our previous article to learn more.

The Form widget of Elementor supports integrations with popular services GetResponse, ActiveCampaign, ConvertKit, Discord, and so on.

4. Popup Builder

Popup builder is one of the features you can unlock after upgrading to Elementor Pro. The feature allows you to create beautiful popups on your website without coding. You can even use the offered ready-made form templates to streamline your workflow. There are over 100 ready-made popup templates offered by Elementor. From email subscription popups, cookie consent popups, notification bars, and so on.

The popup builder of Elementor itself supports the following trigger types:

• On page load
• On scroll
• On scroll to element
• On click
• After inacticity
• On page exit intent

The form builder of Elementor Pro also supports display conditions, allowing you to set where a popup to appear just like theme builder templates. It also allows you to display a popup based on the following conditions:

• After x page views
• After x sessions
• When arriving from a certain URL
• When arriving search engines
• Show a popup on unlogged in users only
• Show on specific device types (desktop, tablet, smartphone)
• Show on specific web browsers

Thanks to its on click trigger support, you can also make use of the popup builder to create both a full-screen menu and off-canvas menu (you can also use JetMenu to create those menu types, as well as a megamenu). There are a bunch of creative ways to use the Elementor Pro popup builder.

5. Third-Party Integrations

As mentioned above, you can use the Form widget of Elementor to create a wide range of forms thanks to its extensive form fields support. One of which, you can use the Form widget to create an email opt-in form to generate leads. You can connect your form with popular email marketing services like ActiveCampaign, GetResponse, and so on. Here are the third-party services you can integrate your form with:

• GetResponse
• ActiveCampaign
• MailerLite
• ConverKit
• MailPoet
• Mailchimp
• Drip
• Slack
• Discord
• HubSpot

These third-party integrations are particularly useful if you want to use Elementor to create landing pages.

6. Custom CSS

It’s true that Elementor allows you to create beautiful pages on your WordPress site without dealing with CSS. However, if you want to create a completely unique website, you can make use of your CSS skills. The feature allows you to implement the CSS features that are not available on Elementor yet, such as CSS Transform to add a stylish hover effect to Elementor. You can add custom CSS to every Elementor element. Be it a section, column, or widget. You can go to the Custom CSS block under the Advanced tab on the settings panel (panel on the left side) within the Elementor editor to add custom CSS.

7. Motion Effects

Elementor Pro comes with setting options to allow you to apply motion effects to an element on the page you are working on. You can make use of the feature to add animation effects to your page without needing to understand JavaScript. You can combine this feature with Lottie animation to take your animation effects beyond.

The motion effects offered by Elementor Pro fall into two types: scrolling effect and mouse effect. In addition, you can also apply sticky option to a section and widgets.

8. Over 90 Widgets

As you know, Elementor is released as a freemium plugin, meaning that there is a free version available to allow you to enjoy the experience of using Elementor without spending a dime. The fact, Elementor Pro is technically an add-on for Elementor Free. While Elementor Free offers basic widgets, the pro version comes with more advanced widgets like Form, Posts, Login, Price List, and so on. Here are the widgets you can unlock after upgrading to Elementor Pro.

Posts	Countdown	Post Excerpt
Portfolio	Share Buttons	Featured Image
Slides	Blockquote	Author Box
Form	Facebook Button	Post Comments
Login	Facebook Comments	Post Navigation
Animated Headline	Facebook Embed	Post Info
Price List	Facebook Page	Products
Price Table	Template	WooCommerce Breadcrumbs
Flip Box	Site Logo	Custom Add to Cart
Call to Action	Site Title	WooCommerce Pages
Media Carousel	Page Tile	Product Categories
Testimonial Carousel	Nav Menu	Menu Cart
Reviews	Search Form	Lottie
Sitemap	Post Title	Code Highlight
Video Playlist	PayPal Button	Hotspot
Cart	Checkout	My Account
Progress Tracker	Stripe Button

There are over 90 widgets you can unlock in total (free widgets and pro widgets)

9. Dynamic Content

Not only you can use Elementor to create static websites. Thanks to its dynamic content support, you can also use Elementor to create a dynamic website such as a blog, a news portal, a listing website, and other types of dynamic websites. You can add dynamic content to a theme builder template or page using the following widgets:

• Site Logo
• Site Title
• Page Title
• Post Title
• Post Excerpt
• Featured Image
• Post Info
• Posts

10. Custom Fields

The widgets we mentioned on point 9 above can be used to add the default dynamic content of WordPress such as post title, post meta, featured image, and so on. What about custom fields? Elementor Pro also allows you to add custom fields. By maximizing this feature, you can use Elementor to create any type of website with minimum plugins possible. Elementor Pro is compatible with the following popular custom field plugins

• Pods
• Advanced Custom Fields
• Toolset
• JetEngine

How to integrate a certain custom field plugin with Elementor?

You can simply create the custom field group using your favorite custom field plugin and use Elementor to display the data of the custom fields you created. You can display the custom fields on a template. You can read our previous article to learn how to add custom fields in Elementor.

11. Over 300 Ready-Made Templates

In Elementor, you have two options to create a page or theme builder template. First, you can create your page from scratch using your own design concept. Second, you can create your page from a ready-made template offered by Elementor. If you use Elementor Pro, you will have access to all ready-made templates available on the template library, including the ones labelled “PRO”. Elementor itself has over 300 ready-made templates in total. You can click the folder icon on the canvas area of the Elementor editor to open the template library.

12. Template Kits

In August 2019 Elementor released its first edition of monthly template kit. What is a template kit?

An Elementor template kit is a set of Elementor templates designed specifically for a certain website type. All templates of a template kit have the same design concept. From the typography, color, and so on. A template kit allows you to get a website done more quickly. At the time of writing, Elementor already has 16 template kits.

13. Full Site Editor

The concept of full site editing makes it possible for you to edit two or more elements of your website from a single place. In the context of Elementor, you can edit the footer, header, and a template like single post template or category page template from a single place.

Say you are editing the custom single post template of your website and there are some changes you want to make on the custom header. In such a case, you don’t need to close the Elementor editor to make the changes to the header. You can simply hover your mouse over the header (or footer) and click the yellow handle. Similarly, when you are editing the custom header and want to make some changes to the custom single post template, you can simply hover your mouse over the single post template and click the yellow handle as well.

14. Global Widgets

Global widget is an Elementor Pro feature dedicated to streamlining your workflow. In addition, the feature also helps you to have consistent design on certain elements like button or form.

Say you are creating a website that consists of several pages. On some pages, you want to add a button. In such a case, you can define a global button widget. You can then use the defined global button widget on every page you are creating, instead of adding a new button widget and make styling from the start. This will save you a lot of time in getting your project done.

When you make a change on a global widget, the change will be applied to all pages where the associated global widget is added to.

15. Actionable Links

When creating a landing page using Elementor, you might want to add a certain action. For instance, you might want your visitors to contact you via WhatsApp or email. Elementor Pro allows you to add a certain action to a button or link. You can use the feature to add a WhatsApp button, email button, and so on to your landing page. Here are the actions you can set:

• Send email
• Contact via WhatsApp
• Send text message (SMS)
• Make a call
• Start a Skype chat
• Start a Messenger chat
• Start a Viber chat
• Add event to Google Calendar
• Add event to Outlook Calendar
• Add event to Yahoo Calendar

To set a certain action, you can click the dynamic icon on the link field and select Contact URL. You can then click the wrench icon to select the action you want to set.

16. Custom Fonts

Elementor already has rich font collections but if you want more, you can install the font families of your choices. The pro version of Elementor allows you to add new fonts in the following formats:

• WOFF
• WOFF2
• TTF
• SVG
• EOT

Or you can also integrate your Elementor with Adobe Fonts if you use Adobe Fonts.

17. Custom Icons

Elementor has a rich icon library to allow you to add icons to your page. Elementor itself uses a third-party provider to provide icon collections (Font Awesome in this case). If you want to use your own icons, Elementor Pro allows you to do so. You can upload a set of icons and Elementor will make them available on the icon library. You can go to Elementor -> Custom Icons to add custom icons in Elementor.

18. Dynamic Colors

Elementor Pro allows you to add dynamic content to your WordPress. In addition to custom fields and the default dynamic content of WordPress, you can also add dynamic colors. Using this feature, you can set (dynamically, of course) distinct colors to the same element on a certain template. For instance, you can use the feature to set different post title colors of your website. The post title color is defined via a custom field when you write a new post.

You can use ACF to add dynamic colors in Elementor. ACF has a Color Picker field to allow you to provide a color picker on your custom field group.

19. Role Manager

You can use the Role Manager to control who can access the Elementor editor on your WordPress site. This feature is useful if you have a large WordPress site with some users. You can access this feature by going to Elementor -> Role Manager on your WordPress dashboard.

20. Custom Code

Before Elementor Pro version 3.1.1, you had to add the HTML widget to your custom header/footer to install Google Analytics on your Elementor-powered website. But you can now install Google Analytics without editing your header or footer thanks to the Custom Code feature. In addition to installing Google Analytics, you can also use the feature to install other analytics tools like Facebook Pixel.

The Bottom Line

Elementor is a great tool to create a beautiful website without dealing with codes. Be it CSS codes, HTML codes, PHP codes or JavaScript codes. The free version of Elementor has been great, but to unleash its potential as the best page builder plugin, you need to unlock all the features, which you can do by upgrading to the pro version. In many cases, upgrading to Elementor not only allows you to unlock pro features but also disclose WordPress features you might haven’t heard of like custom fields and custom post type.

Elementor offers some pro plans which you can use according to your needs. For a personal use, for instance, you can use the ESSENTIAL plan. Or if you work for an agency, you can use the AGENCY plan.