Elementor Pro Guide 2024 - The powerful WordPress Page-Builder

My ultimate Elementor Pro guide, the most powerful Page-Builder for WordPress. In the days before Gutenberg, it was hard to create sophisticated websites if you weren’t a programmer. At least without a visual Page-Builder. With Elementor, you could suddenly easily, create column layouts, insert icons and make many small changes that were previously reserved for web designers.

The Elementor WordPress plugin is a visual Page-Builder for both amateurs and professionals. With the so-called widgets, stunning designs with partially moving elements can be created. All this without any programming knowledge, similar easy as you are used to from Word.

Page-Builders are supposed to help you create beautiful pages without having to involve expensive developers. Elementor has managed to do that with a great feature set without being clunky and slowing down the website significantly.

Elementor is undoubtedly one of the best WordPress builders I’ve tried. It’s intuitive, feature rich, and easy to use. With the widgets, you drag and drop sections, columns, pricing tables, headers, and popups. Great effects and animations come with it.

Here’s what we’ll talk about in my review:

What is Elementor?

Elementor is a landmark for web developers, designers and content editors. With an easy-to-use interface that combines the building blocks of any website with real-time HTML, CSS, and JavaScript editing tools, Elementor is revolutionizing the way websites are built.

The Page-Builder creates building blocks for websites – called elements – that any designer or developer can drag and drop into their website template. This way you can create high-quality, unique designs.

The editor works in the front-end of your website, which means it shows you the results of your work immediately in a true“What You See Is What You Get” view, which is a significant advantage. Every change is immediately visible in a user-friendly way. This allows you to work on the content of your website in a relaxed and fast way. With a little training you will quickly find your way around the functionality and the logical structure.

You can use it to create any content or page layout you can think of – regardless of what your current WordPress theme allows you to do, so you can keep your current design and still get all the benefits of Elementor.

Usage stats

In just a few years, the beloved app has become the most used WordPress Page-Builder.

Elementor is used by 6.4% of all websites.

In comparison, WordPress is used on 42.7% of all websites. The source is W3Techs.

Another interesting statistic comes from BuildWith.

The most used WordPress plugin is Yoast SEO. After that comes

• Elementor with 6%,
• closely followed by Visual Composer with 6
• and a bit behind is WPBakery with 5%.

More tutorials

How much does the Elementor Page-Builder cost?

The Elementor Pro costs.

Unfortunately, the times when the WordPress plugin was cheap even for many websites are over. However, you already have all the important features with the Essential and Plus plans.

	ESSENTIAL	PLUS	EXPERT	STUDIO	AGENCY
Updates and Support	1 year	1 year	1 year	1 year	1 year
Websites	1	3	25	100	unlimited
All Pro Features	Yes	Yes	Yes	Yes	Yes
20 Expert Website Kits	No	No	Yes	Yes	Yes
Elementor Expert Profile	No	No	Yes	Yes	Yes
VIP Support	No	No	No	Yes	Yes
Price	$ 49,00	$ 99,00	$ 199,00	$ 499,00	$ 999,00

30-day money-back guarantee on all plans.

The paid version of Elementor, the Pro Version

Now, for whom is the Elementor Pro version the right choice? If you are looking for more features and more possibilities, and want to build a comprehensive business website. Moreover, Elementor Pro version offers you all paid templates. Besides popups, form extensions, Google Maps, you can also find many solutions for an online store with WooCommerce.

Is it worth upgrading to Elementor Pro version? Definitely, if you really want to look professional. The sitebuilder is not only fast, but also offers the possibility to consider different devices, which is an unbeatable advantage.

Is the Pro version worth it? Read my Elementor Free vs Pro article.

How do you get Elementor and how do you install it?

Let’s start at the very beginning. Basically, Elementor is even available to you for free in the basic version, which already comes with many features on board.

No matter which theme you have installed, you can add Elementor.

To do so, go to Plugins > Install and search for “elementor” in the upper right corner.

Install elementor and activate it afterwards.

From this point on, all the basic functions of Elementor are already available to you in the backend of your WordPress installation.

You can access them in the side navigation.

Install Elementor Pro

After you bought the Pro version, you need to log in to your account there and download the additional Pro plugin. So you need both plugins.

Now install the .zip file in the WordPress admin under Plugins > Install > Upload Plug in and activate it.

Afterwards you have to connect your installation with your Elementor account in the menu Elementor > License.

Elementor Cloud Websites

With the Elementor Cloud Websites service, you create your website and don’t have to worry about the technology.

The main Elementor Cloud features:

• Google Cloud Platform
• CDN from Cloudflare
• All Elementor Pro features
• WordPress pre-installed
• Premium support
• Free SSL certificate
• Custom domain
• Advanced Caching (Full caching of static files and HTML (Posts & Pages) in Cloudflare CDN).
• Site Cloning (Cloning within your Elementor hosting account. Cloning into another account will come later).
• phpMyAdmin

For only $99.00 annually, your website will be ready installed on hosted in the super fast Google Cloud.

Look at that!

Elementor Features

Designed for speed and simplicity, the page builder is invaluable for professionals and beginners alike. Elementor uses a modern approach to page building that allows you to create pages without writing a single line of code.

Elementor gives you the tools to design any page layout without the need for programming skills.

Drag & Drop Live Editor

As a front-end builder, Elementor gives you a real-time preview of the changes you make. Whether you need to add and tweak a button, correct content, or switch from a single-column to a multi-column layout, you can see your changes instantly.

For me, it’s so much more fun and I can use my time more efficiently.

Use the individual features to create unique and high converting landing pages, squeeze pages, sales pages, promotion and affiliate pages, portfolios and blogs.

CSS Grid in Container (new)

Create pixel-perfect, responsive, grid-based layouts. In the container, you can switch between Flexbox and Frid.

• Sophisticated layouts – nesting flexbox containers inside CSS grid containers
• Design consistency – align elements throughout the container
• Responsive – adapt your design to any device size
• Improved performance – reduce DOM output (performance)

Global Styles System

Setting up a global design system ensures that you not only speed up your workflow when creating a website, but also maintain the consistency that is crucial for professional-looking websites.

Elementor’s design system includes:

• Global fonts
• Global colors
• Global Widgets

Managing your design becomes even easier with the design preview. This is super handy.

Template management

Currently, there are incredibly diverse options of templates for Elementor. But what is a template anyway? Template, translated the template, are pre-made design templates that you can use either for free or for a fee.

There is something for every genre, every industry and every taste. A template provides you with a ready-made design template with color scheme, fonts, images and styles. If in doubt, you can use it directly without changing anything and just fill the template with your own text. Or you can use Elementor’s functionality to further customize these templates according to your wishes and needs.

You can then access the templates here. Create a new page in WordPress. There you will find the button “Edit in Elementor”. Call this function and you will see this view:

Press the button “Add template” and the import interface appears.

Here you can find both free and paid templates for Elementor. Now you can choose a design template according to your taste and style. Once you have found your design, press the import function on the corresponding template.

All necessary files and settings will be automatically loaded to your website. After the import the site is available. Depending on your hosting package, the import may take a while. Wait until this process is finished.

You can immediately open your preview and see the result of your import. To do that, click the icon with the preview in the form of an eye in the lower navigation.

As you can see, the complete Elementor design was imported. All design elements including graphics were imported and placed. The page is structured and ready for publishing. However, now you should adjust the text to your website.

The changes from the text in Elementor

Now it becomes easy for you and Elementor shows its first strengths here. If you move the mouse over the individual fields, different elements appear. The so-called sections, also called widgets. Once these elements are selected, you have the possibility to edit, delete and change the text.

You can see all the changes immediately. If you press the “Save” icon in the bottom navigation, all changes will be saved permanently.

Elementor Widgets

In the left navigation you can find the basic elements of Elementor. There you will find everything you need to edit your website.

You can drag and drop elements directly onto your page. Elementor helps you to find the right position by showing you where you can place the element. Every changed design can be saved as a personal design template. So it is available for further use on other pages.

Here I recommend you to just try everything to get a first impression. You can easily undo any change. Drag some elements one by one to your page and see what is offered to you.

As an example, here I dragged the green button from the left onto the web page and placed it below the text.

Mega Menu

In the Pro version you get the menu widget with many new options and style variations.

With the new menu widget, you can create an expandable menu that lets you display more content. This improves the visitor experience by making it easier for site visitors to find specific categories and subcategories, and allows you to create a unique and outstanding site design.

To use the new Menu widget, you must enable the Menu, Flexbox Container, and Nested Elements features in Dashboard > Elementor > Features.

Editing the style of the elements

Now that you have placed your necessary elements, you can edit and customize the style of these elements. Go to Style in the upper left navigation and call the text element by clicking on it. Immediately, you will be offered the possibility to change the text element in the left navigation.

Here you can set the text color, text typography, size and even a text shadow. So there are no limits to your imagination and creativity.

For each special element there is a corresponding dialog that appears automatically as soon as you call the element on the website.

The advantage is already clearly demonstrated here. The quick selection with the left edit box immediately gives you the possibility to design everything on your site according to your taste.

Through countless other external third-party plugins, you can add more widgets. Even in the paid Pro version you get a wide range of additional extensions. The Elementor Pro version costs a one-time amount of 49 euros. There are also time-limited offers that you can use then. This amount has to be paid once.

Once you have made friends with the interface, it is advisable to upgrade to the Elementor Pro version. It offers you useful and necessary functions. Also in the template library you will have the possibility to access all templates. In the admin you can find the link to Elementor main page, there you can buy your license.

WooCommerce support – WooCommerce Builder (Pro)

If you want to run your own online store, you will find numerous blocks in the Elementor Pro version to define your store optimally. Thus, you are offered the possibility to build up a store individually. All page contents can be put together flexibly. Thus, you can create your own overall image.

Hardly any other Page-Builder offers you more freedom for this design. If configuration options are missing in the Elementor Pro version, it is possible to expand the functionality considerably through third-party providers.

It almost seems that Elementor has now built its own independent functional cosmos. Third-party developers prove their creativity in extending the basic functions of WooCommerce, the online store plugin, in a variety of combinations in conjunction with Elementor. However, the sheer mass of offers on the Internet does not make it easy to put together the necessary functions and extensions.

Popup Builder (Pro)

Drag and drop Elementor popup builder without code. Create custom popups without any programming effort. Choose a responsive template created by designers and make it your own.

Choose from a variety of over 100 pre-made, high-converting popups, including lightbox, fullscreen, side banner, top or bottom banner. The popups in the library are designed to look pixel perfect and follow the latest design trends.

The following triggers are available:

• On Page Load
• On Scroll
• Scroll on Element
• On Click
• On Exit Intent
• After Inactivity

Precise targeting. Engage your audience with the right triggers, display conditions, and advanced settings. Convert leads on the fly with Elementor’s custom forms, built-in form submissions, and integrations.

• Full Screen
• Modal
• Slide-In
• Top / Bottom Bar

You can use the popups only with the Pro version.

Landing Page-Builder and Marketing Elements

The landing page bu ilder is a really great thing. Especially with the countless templates you download with one click to your website.

Choose from a variety of high-converting, fully responsive landing page templates. Grow your audience, promote a new product line, or give away a giveaway.

A few seconds later you can replace the default texts and images with your own and put your new landing page online.

Theme Builder (Pro)

Elementor allows you to define the basic structure of your website. All page areas can be flexibly added and customized. The so-called box elements enable you to customize the templates for each individual page.

If you don’t want to use any of the suggested templates, but create your own design, this is also possible.

If you go to the navigation point Templates > Theme Builder, you get the possibility to call up and apply different arrangements in this dialog box.

Depending on the page or post, you can define how the page should be structured. For this, you can either use the Elementor to create entire solutions, or you can define individual sections of your page. From the header, to the sidebar, to the footer, everything is possible here.

Elementor Form Builder (Pro)

Elementor Site Kits

The Elementor Kits Library comes not only with single templates, but with complete site kits that also include all necessary subpages.

With this, you start new websites much faster and most importantly created by professional designers.

Unfortunately, most kits are only available for Elementor Pro users.

Workflow Optimization

By workflow Elementor means the use of global colors, page templates, fonts and styles.

If you start with a site kit, you even have the most important pages ready to go. With the theme builder you can also customize the header and footer.

All these tools help you simplify your web design workflow.

Dynamic content (Pro)

With dynamic content you can create post types for movies, reviews, portfolios, WooCommerce products and any other use case. The video explains “Dynamic Content” very well. You’ll need to understand a bit of English, though.

Elementor also works with Advenced Custom Fields, Meta Box and Toolset.

Elementor AI

Elementor AI is an extension for WordPress Page-Builder that uses artificial intelligence to automatically generate design suggestions for websites. This allows web designers and developers to save time and provide an optimal user experience.

• In the content area of each widget, there is a new feature called “AI Writing”. This feature is available when certain texts are highlighted in the widget panel or editor to facilitate content creation through artificial intelligence.
• The HTML widget provides an “AI Code Assistant” to help create or enhance HTML.
• Customers with a PRO subscription now have access to an “AI Code Assistant” in the custom CSS section of each widget. The “AI Code Assistant” creates custom CSS that is tailored to the specific widget and provides relevant results.
• For customers with a PRO subscription, the custom code in the WordPress dashboard also features an “AI Code Assistant”. This AI Code Assistant generates custom code snippets like Google Analytics code or Facebook Pixel code to measure the effectiveness of a website’s pages.

Integrations – working with other services and plugins

Elementor also stores your contacts and newsletter subscribers directly in WordPress for you, but most online marketers prefer to use external email services. The following providers are currently integrated:

• AWeber
• MailChimp
• Drip
• ActiveCampaign
• ConvertKit
• HubSpot
• Zapier
• GetResponse
• MailerLite
• MailPoet
• Brevo

These plugins are actively supported by Elementor:

• WooCommerce
• Yoast
• Rank Math
• ACF
• Toolset
• Pods
• LearnDash
• Tutor LMS
• MemberPress
• WP Offload Media
• PeachPay

Others:

• Adobe Fonts
• Google Fonts
• Font Awesome 5
• Font Awesome PRO
• Custom Icons Libraries
• reCAPTCHA

As you can see, Elementor can handle all the major tools.

More Elementor Pro features

Elementor has gained so many features over the years that I can’t mention each one individually. But after that I will list some important Pro features:

• Over 300 Pro templates
• 20+ integrations
• Live Custom CSS
• Custom Header & Footer
• Custom 404 pages
• Global Widgets
• Post & Portfolio Widgets
• Price Tables & Price Lists
• Custom Field Integrations
• Interactive Carousels
• Role Manager
• Custom Fonts
• Custom Icons
• Sticky Elements
• Embed Anywhere
• Access To Pro Updates

Responsive Design – Elementor’s strength

60% of all internet users now use portable devices. From smartphones to tablets, they have it all. Not every theme, i.e. the design template for a WordPress installation can meet the requirements here. But what problems do these different devices now?

From screen formats, sizes to resolutions, a wide variety of devices are offered. Sometimes the width is not right, sometimes the height. Texts are displayed too large on smartphones, then again too small on tablets. It’s an extreme challenge for any web designer to find answers here.

This is where Elementor comes into its own once again. You can easily adapt your website to the different devices in independent views.

If you go to the very bottom of the left navigation, you will find the function for setting different end devices. The responsive mode leads you to the respective setting options. Before you go online with your website, you should definitely take a look here and check how your website looks on different devices.

At the top of the screen view, you’ll find this bar that allows you to select different resolutions and the formats of end devices. The default settings of Elementor in each resolution correspond to the current standards. However, you can also customize them according to your wishes.

Here I show you the example for smartphones. All elements of this website are arranged downwards and not sideways, as in the view on a laptop. The proportions are also automatically adjusted. So graphics and images get smaller the smaller the screen you are using. The tool thus ensures that each view is displayed as optimally as possible.

If elements are not displayed optimally, you have the option to adjust the size ratios independently in each view. This means that you can change settings and sizes in the smartphone view without affecting the other settings from the laptop view and the tablet view.

The user roles distribution in Elementor

The user role distribution in Elementor allows you to specify which registered user is allowed to operate the tool. For example, if you are a web designer, you can specify whether your client is allowed to access Elementor’s interface and administration.

If you are the sole admin, this area is less relevant.

Good for SEO?

Google is in a constant process of change. Google’s AI is constantly expanding. Up to 200 criteria are important for the ranking of a website, which Google takes into account.

In recent years, in addition to speed, the responsive design of a website counted a decisive role. Of course, also the content, which is still the king. But also the size and loading speed of graphics and images affect the ranking of your website.

In recent years, voices became louder that Elementor makes your WordPress website slow. In fact, that has been the case. Just in the last year, developers have been working on the code base to make the Page-Builder generate fast websites again.

Moreover, the Elementor also allows the possibility to work together with additional professional SEO plugins like Yoast SEO.

Compatibility

Elementor is compatible with almost all premium themes. Also, many free themes like the OceanWP and GeneratePress work with the creator without any problems. As long as the themes you use are always up to date with WordPress. Therefore, you should definitely pay attention to whether the theme you use also receives regular updates.

Recommended themes for Elementor:

• Astra Theme
• Hestia Pro
• GeneratePress
• OceanWP
• Hello

The same applies to the plugins. All premium plugins are compatible with Elementor. Also here the actuality is crucial. But you can see this in the history of the respective plugin.

Elementor Extensions

As mentioned before, there seems to be an own cosmos around Elementor. Every day, new third-party extensions come onto the market. In fact, the possibilities already seem almost unlimited. There is a solution for every profile and every wish, you just have to look long enough.

It is also becoming apparent that plugin and theme developers are increasingly looking to use Elementor. Other Page-Builders do not have this advantage.

Especially for online stores with WooCommerce, there are an incredible number of possibilities in the flexible combination of functions and their display.

Ultimate Addons for Elementor

Those who use the popular Astra theme also use the Ultimate Addons for Elementor. 40 widgets, 100 templates and 200 blocks. All of them high quality and technically well implemented.

» The Addon

The Plus Addons for Elementor

A great collection of 120+ powerful Elementor widgets, 18+ templates, 300+ UI blocks and an amazing listing builder for post types to surprise your clients with amazing websites.

» The Addon

Element Pack Pro

The brand new Element Pack Pro brings incredibly advanced and super flexible widgets and A to Z essential addons for Elementor Page-Builder for WordPress.

200 widgets, 300 page templates and 1700 blocks.

» The Addon

Essential Addons

The widget collection from WPDeveloper. Includes more than 70 elements and 7 extensions.

» The Addon

Premium Addons for Elementor

In total more than 56 additional widgets like “Dual Header” and “Modal Box”.

» The Addon

Crocoblock

Crocoblocks are part of the growing collection of JetPlugins. Meanwhile, Gutenberg blocks and many other add-ons are also part of the brand.

» The Addon

Happy Addons

This element collection has been on the market for a long time and is popular with a great many designers. There are also many templates included. It comes with 89+ Free & Pro Elementor widgets and 16+ problem solving Elementor features.

» The Addon

Elements Kit

A lesser known plugin with 70+ widgets, 500 ready-made blocks and 25 templates.

» The Addon

Let your imagination run wild

On the web, it’s important to stand out from the crowd. Even though Elementor comes with many ready-made page templates and blocks, you shouldn’t create your blog exclusively with it.

Use your imagination to create your own stunning designs. Your visitors will remember your site much better this way for the future.

Elementor alternatives

The market of Page-Builders for WordPress is very competitive. If you use the Divi theme, you will surely stay with the included Page-Builder. The same goes for the Thrive Suite.

If you like to look for alternatives, I’ve listed the most popular ones for you:

• Divi Builder
• Gutenberg
• Beaver Builder
• Thrive Architect
• Brizy
• Visual Composer
• WPBakery
• Oxygen Builder

The future

Page-Builders in themselves seem to be the future. Elementor already has a clear lead here with well over 5 million installations. The market is highly competitive in front-end website editing. Gutenberg by WordPress is the latest example here.

The bottom line is, the future looks bright for the page creator, no question about it. So the investment is worth it. So far, the developers’ consistency and business model are convincing. Elementor delivers. Other Page-Builder providers will struggle, except perhaps WPBakery Page-Builder.

This Page-Builder also shines with an incredible number of extensions. However, it takes a hybrid approach. In addition to the editing option in the frontend, the WPBakery offers the extensive editing option in the backend. However, the disadvantage here is clearly the steep learning curve for users. However, the Visual Composer primarily plays to its strengths when theme developers also get heavily involved in the functional possibilities. Only through the central integration of Beaver Builder can this extension shine.

In terms of simplicity and speed, however, Elementor is unrivaled. This will then probably secure it a strong position in the Page-Builder rankings in the future.

Elementor Criticism

What I don’t like about Elementor – and all other Page-Builders – is that additional JavaScript and CSS files have to be loaded. Also, there is more nesting of the HTML code. Both increases the loading time and the page load, which is not good.

This problem will not be avoided in the near future. For that, the basic structure of HTML containers would have to be simplified.

Therefore, you should think carefully whether you really need a separate Page-Builder or whether you can get by with the standard block editor.

My Elementor Tutorial Conclusion

I have been using Elementor myself for many years. Mainly for customer projects where the users still want to work on the pages. In my experience, non-professionals get up to speed faster with Elementor than with the competition.

Elementor Pro is a drag-and-drop Page-Builder plugin for WordPress of a special kind. It’s not for nothing that there are already over 5 million websites created with this Page-Builder.

In short, you can easily create, customize and modify posts and pages that are unique compared to the default templates that come with your WordPress theme.

Elementor is compatible with many WordPress themes and is an extension as a plugin. Thereby, you can access many features.

I hope my Elementor step-by-step guide could help you.