Table of contents

Elementor the ultimate guide for the WordPress PageBuilder

Elementor: The Ultimate Guide to the WordPress Page Builder 2022

Elementor is one of the most popular page builders for WordPress. With over 5+ million active installations, the plugin has become a standard tool for many web designers and WordPress experts. The success of Elementor with its simple drag & drop builder is obvious. This makes it possible for web designers and also WordPress newcomers to create WordPress websites quickly and easily. Without any CSS, HTML or other programming knowledge. In this guide, we would like to give you a complete overview of the functionalities and advantages of the popular page builder.

Elementor Page Guild

What is Elementor?

Simply put, Elementor is a page builder. Technically, it is a WordPress plugin, which has the advantage that you can use Elementor with most WordPress themes.

With the simple visual drag-and-drop page builder, you can create stunning websites in no time at all without any programming knowledge. Especially for WordPress newcomers, Elementor is probably the best start for creating a website. But experienced web designers will also get their money's worth. Because the plugin manages to greatly improve the internal design processes of web designers and agencies with its complete and self-expandable template library.

Advantages of Elementor

We have already mentioned two of the most important advantages. However, the WordPress plugin has much more to offer:

Elementor Drag and Drop Builder
  • Easy to use without programming knowledge - As already mentioned, the visual page builder makes creating and editing WordPress websites extremely easy, even for newcomers. With the ready-made widgets, you can build your WordPress website in no time and add your own personal touch.
  • Global elements and template library - WordPress experts and agencies in particular benefit from global elements and an expandable template library that standardise and simplify productivity as well as internal processes.
  • Almost infinite styling possibilities - you are completely free to design your website. You can see changes to the design immediately in the visual editor. Experts can also use their own CSS.
  • WooCommerce compatibility - With the free WordPress plugin WooCommerce, you can turn your WordPress website into a fully-fledged online shop in just a few steps. Elementor is 100% compatible with WooCommerce and helps you create and design your shop.
  • Extensibility - Thanks to the large Elementor community, you can extend Elementor with many useful online marketing, design or functional tools. So no wishes remain unfulfilled!
  • Template templates - With the included template templates, you can create complete websites in just a few minutes. Simply choose a design you like, import it, make a few adjustments and your website is ready to go online!

How much does Elementor cost and what is Elementor Pro?

Basically, the plugin is free of charge and already offers you all the important features in the basic version to create a fully-fledged website. In addition to the free basic version, you can also purchase the Pro version. With the Pro version, you get access to many more useful widgets that make working on your WordPress website much easier. In addition, you get access to Premium Support if you get stuck.

Elementor prices

For a website, you pay $49 per year. As an agency and web designer, we recommend the rates starting at $99 per year. The more websites you create for your clients and projects, the bigger the discount. The beauty of the rates: You can start with the smallest package and upgrade flexibly as your requirements and number of clients increase. When you upgrade, you only pay the difference of the original package.

Overview of Elementor functions

Drag-and-Drop Page Builder at a glance

The drag-and-drop page builder is the heart of the plug-in. With it, you can build websites according to the modular principle. Simply select your desired module, drag it to the desired location on your website and design it freely according to your wishes. Probably the biggest advantage, however, is that you can even add sub-columns in columns:

What we particularly like about the modules is that the setting options of the individual modules are always divided into three equal categories. Under Content you can maintain your content, format it and configure additional functions. In the Style category, you can set the general look and feel of the module. In the "Advanced" tab, you can set everything else that would otherwise have to be laboriously set using CSS. This includes, for example, margins, paddings or animations. For all experts, there is also the item Custom CSS, with which you can additionally style the module.

Elementor Widgets

Theme Builder at a glance

The theme builder is one of Elementor's greatest advantages. It makes it possible to use a slim theme such as Hello Theme and at the same time have all the advantages of a full-fledged theme.

With the Theme Builder you can build templates for blog posts, landing pages, product pages or headers & footers. Once configured, these templates can be used as often as you like. You virtually build your own theme without ever having to write a single line of code. When you write a new blog post, for example, you never have to worry about the styling of your posts again, as long as you have configured the template correctly.

Elementor Theme Builder

Elementor Tutorial: How to install and configure Elementor correctly

Install Elementor

In order to install Elementor, you first need a WordPress hosting, with a domain. If you don't have a WordPress hosting yet, I recommend the independent comparison: WordPress Hosting Vergleich 2022: Die besten WordPress Hoster by kopfundstift.de to find the perfect WordPress host for your needs.

WordPress Hosting Comparison

You also need to install WordPress. Then you can go to the WordPress Dashboard > Plugins > Install and enter "Elementor" in the search line and install it for free.

Install Elementor

If you have purchased the Pro version and would like to install it as well, you must download the ZIP file in the Dashboard at elementor.com and activate it in your WordPress Dashboard under Plugins > Install Plugin > Upload, upload and activate the plugin. For the plugin to work, both the Pro and Free versions must be active.

Elementor Download

Depending on which theme you use, you may need to make minor adjustments to the theme or the respective subpages so that your website continues to display correctly. If it is a new WordPress website, we recommend the Hello theme, which you can also install via your WordPress Dashboard > Design > Add Theme.

Install Hello Elementor Theme

👉 Pro tip: With WPspace , WordPress and Elementor are already pre-installed. And that's already in the free tariff! Simply register and test Elementor now for free!

Set up and use Elementor

Now that you have installed the page builder and chosen a theme, you can start creating your first website with the new page builder. You have several options for this:

Option 1: Start with a template from the Kit Library.

Elementor Kit Library

The Kit Library allows you to choose the perfect style for your website from over 100 ready-made templates. You can choose your desired design from over 19 categories, such as beauty, business & services, health & fitness. Then all you have to do is add your content, make adjustments to the layout and finally create the design according to your wishes. Your new website is ready to go online.

The following video explains how to use the Kit Library correctly:

Important: This variant overwrites the entire design of your website. Therefore, this method is initially only recommended in test environments or for new websites.

2nd option: Start in blocks

Elementor Template

Via Templates > Saved Tem plates in the WordPress Dashboard , you can create individual blocks / design elements that you can add to the website individually, for example, using shortcodes. This method is best suited for a hybrid conversion of the website design. For example, you can first create a new header using the templates and add it to the website. Then you can gradually add new blocks to your existing website until your website is fully implemented with Elementor. This method is the friendliest from an SEO point of view, as you can ensure that the link tree structure remains identical.

You can also define rules for templates. For example, you can set rules for which template should be used when you want to deactivate or activate the WordPress maintenance mode.

Option 3: Start from the beginning

Edit with Elementor

If you want to build your website from scratch and let your creativity run free, you can also build your website completely without templates. To do this, create a new page in the WordPress Dashboard via Pages > Create. Then click on Edit with Elementor. You can then get started with the intuitive Elementor Page Builder.

The best Elementor Themes

By now, most well-known WordPress themes are compatible with Elementor. However, before you decide on a theme, you should check the developer's specifications to see whether your desired theme is 100% usable with Elementor.

Basically, we can recommend the Hello theme for most use cases. The Hello theme is developed directly by Elementor, is free of charge, guarantees fast loading times and offers you the greatest compatibility with Elementor. The theme was developed with the idea of giving you enough freedom for your own creativity. Therefore, the theme comes with relatively few preconfigured design elements. So you start with a blank page and can design as you like. Unfortunately, the Hello theme is best suited for users of Elementor Pro, as it is most easily customisable with the Theme Builder. Free version users, on the other hand, have to resort to premium themes with preset design features.

We show you what we think are the three best Elementor themes:

1. GeneratePress

GeneratePress Theme

We at WPspace love fast loading websites, so only one theme can make it to number 1 for us. GeneratePress is available in a free and a paid pro version. Both versions stand out for their incredible speed. The code is lean and unnecessary features have simply been left out. In our test, an empty GeneratePress page came to just 29 KB!

Besides the lean code and fast loading times, GeneratePress offers you much more. The Site Library gives you access to a large number of ready-made designs that save you a lot of time when implementing new projects. In addition, the numerous premium modules offer you many useful design elements that you can use with Elementor to create your website according to your ideas without any previous knowledge.

In addition, the community is comparatively large with over 300,000 active installations. This is also reflected in the support.

Advantages of GeneratePress at a glance:

  • Extremely lean code
  • Fast loading times
  • Ease of use
  • Very good support
  • Large community
  • Large library with many design templates
  • Many Elementor Premium modules that make your web design much easier

2. astra theme

Astra Theme

Most "WordPressers" are already familiar with the Astra theme. The Astra theme is also comparably slim with almost 39 KB and loads very quickly! What we particularly like about Astra Pro is that it offers many premium modules that are normally only available in the Elementor Pro version. From our point of view, it's the perfect theme if you want to save the annual Elementor Pro fee.

The Astra theme is also available in a free and premium version. In our opinion, however, even the free version offers a very wide range of functions.

Advantages of Astra at a glance:

  • Lean code and fast loading times
  • Wide range of functions in the free variant
  • Ideal complement to Elementor Free

3. page builder framework

Page Builder Framework Theme

Unlike the previously presented themes, the Page Builder Framework was developed specifically for use with a page builder such as Elementor. Similar to the Hello theme, the Page Builder Framework also scores with maximum flexibility and fast loading times.

In addition, the theme is particularly interesting for Europeans. The developers advertise 100 per cent DSGVO compliance.

The premium version of the page builder Framwork is particularly interesting for agencies. This allows you to use the Swift Control Pro and Ultimate Dashboar Pro functions. These make the theme multisite-compatible, which you can use to your advantage to create several client websites with one WordPress instance.

Advantages of the Page Builder Framework Theme at a glance:

  • Fast loading times
  • Specially developed for page builders such as Elementor (maximum compatibility)
  • 100 % DSGVO compliant
  • Multisite support
  • Ideal for agencies

Elementor Performance: How fast does a website load when created with Elementor?

Originally, when WordPress was created many years ago, it was never developed for use with page builders. While it is now normal to use a page builder with WordPress, the use of many page builders can still be felt today in a degraded performance of the loading speed. Therefore, we need to talk about performance in this section.

Our test environment

We want to be transparent with the test results. Therefore, we would like to briefly discuss the test environment. For the test, we use the WordPress hosting from WPspace. We also use the Hello theme and the premium caching plugin WP Rocket. We tested the website https://wp-space.de, which was also created with Elementor, in order to achieve a realistic result. We chose Frankfurt as the test location because WPspace 's servers are located in Germany.

🥳 Pro tip: The premium plugin WP Rocket is available for free with every WordPress hosting plan at WPspace!

Test result

One thing first. Elementor is one of the fastest page builders on the market. Our test results also prove this:

Elementor PageSpeed

The complete website loads in no less than 723ms. The visitor sees a white website for only 478ms. Especially worth mentioning is the TTFB, which is only 36ms. Admittedly, the TTFB largely refers to the response time of the server and thus requires strong WordPress hosting. Nevertheless, the backend part is extremely short at only 12ms. This definitely speaks for a lean code base of the theme as well as Elementor.

Web Vitals are also becoming increasingly important. Especially if your website is to be found by search engines like Google. These are also completely in the green here. The Cumulative Layout Shift (CLS) is particularly worth mentioning. The CLS is a big problem with most page builders such as Divi. Here the developers of Elementor have done a great job! This is due in particular to the performance features that Elementor also provides:

  • Lean code
  • Only code that is really needed for the presentation of the website is loaded.
  • JavaScript and CSS files are minified and optimised,
  • Optimised DOM output

So the frontend loading time is great. But how does it look in the back end? The backend loads extremely quickly. Nevertheless, we can see that the operation becomes stiff from a certain size, especially on very large websites. It is not really a problem on newer PCs and notebooks, because it is not the server that is slow, as you might think, but rather the CPU of your own PC. In this respect, the operation can be somewhat more tiring on weak PCs. Nevertheless, we never had such serious difficulties that editing was not possible.

However, the fact that a page builder with very large websites brings the CPU of one's own PC to its knees is a general problem of page builders under WordPress. We actually had the worst experience with Divi in our tests.

👉 More information: Improve WordPress PageSpeed
💡Alsointeresting: Improve Google ranking: PageSpeed as a key factor

Our recommended Elementor AddOns

Elementor can be extended with many great functions. So you can get even more out of your WordPress website. We recommend three add-ons that we like to use ourselves:

Toolkit for Elementor

Toolkit for Elementor

Not only we, but also the developers of Elementor recommend the add-on Toolkit for Elementor. You will get the most benefit from the add-on if you do not use other caching plugins such as WP Rocket. The toolkit offers you a wide range of performance optimisation functions. In fact, however, we did not notice any significant improvements in our test if WP Rocket was also installed.

ElementsKit (Pro)

ElementsKit

ElementsKit is available in Lite and Pro versions and expands Elementor by up to 85 new modules. The only disadvantage: In our test, we found that unused elements are also always loaded. This can have a negative effect on the loading time.

Prime Slider from BdThemes

Prime Slider from BdThemes

Both the Free and Pro versions of Elementor offer you only limited options for configuring sliders. Prime Slider by BdThemes changes that.

With this add-on, you can increase the slider functionality enormously based on templates. Simply select a template, insert content, design it according to your wishes and go live!

Prime Slider is also available in a free and a greatly expanded Pro version.

Our conclusion on Elementor Page Builder

In our opinion, Elementor is the ultimate plugin for WordPress beginners and experts. The scope of the page builder is massive, so you can confidently do without many plugins that would otherwise be necessary. This not only keeps the WordPress backend tidy, but also ensures super-fast loading times. For these reasons, we have also decided to run our websites exclusively with Elementor. We can recommend the page builder without reservation.

But now we're interested in your opinion. Try Elementor completely free with free WordPress hosting from WPspace. With WPspace you get free premium WordPress hosting. Elementor and the premium plugin WP Rocket are pre-installed for you. Write us your opinion in the comments!

Share article:

Facebook
Twitter
LinkedIn
WhatsApp
Reddit
XING

About the guest author

Patrick

Hi, I'm Patrick and a junior web designer and online marketing manager. I would like to share my curiosity about new topics and the associated new knowledge with other people as comprehensibly as possible. With the background that people with interest in the respective topic can access it.

Similar articles

Write a comment

Your email address will not be published.