The ultimate Elementor guide

Elementor: The ultimate guide to the WordPress page builder 2023

Table of contents

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 is because it makes it quick and easy for web designers and WordPress newcomers to create WordPress websites in no time at all. 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-Builde

What is Elementor?

Simply put, Elementor is a page builder. Technically speaking, 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. Elementor is therefore probably the best way to start creating a website, especially for WordPress newbies. But experienced web designers will also get their money's worth. This is because the plugin manages to greatly improve the internal design processes of web designers and agencies with its complete and 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
  • Simple operation without programming knowledge - As already mentioned, the visual page builder makes creating and editing WordPress websites extremely easy, even for beginners. With the ready-made widgets, you can build your WordPress website in no time at all 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 standardize and simplify productivity and internal processes.
  • Almost infinite styling options - You are completely free in the design of 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 store in just a few steps. Elementor is 100 % compatible with WooCommerce and supports you in the creation and design of your store.
  • Expandability - Thanks to the large Elementor community, you can add many useful online marketing, design and functional tools to Elementor. 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 that you like, import it, make a few adjustments and your website is ready to go online!

What does Elementor cost and what is Elementor Pro?

The plugin is basically free of charge and the basic version already offers you all the important features you need to create a fully-fledged website. In addition to the free basic version, you can also purchase the Pro version. The Pro version gives you access to many other useful widgets that make working on your WordPress website much easier. You also get access to premium support if you get stuck.

You pay 49 dollars per year for a website. As an agency and web designer, we recommend the rates starting at 99 dollars per year. Herethe more websites you create for your customers and projects. The great thing about the tariffs: You can start with the smallest package and upgrade flexibly as your requirements and number of customers increase. When you upgrade, you only pay the difference to the original package.

Overview of the Elementor functions

Drag-and-drop page builder at a glance

The drag-and-drop page builder is the heart of the plugin. It allows you to build websites according to the modular principle. Simply select your desired module, drag it to the desired position on your website and design it as you wish. 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 for 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 Own CSSwith 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 lean theme such as Hello Theme and at the same time have all the advantages of a fully-fledged theme.

With the theme builder, you can create 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. For example, if you write a new blog post, you never have to worry about the styling of your posts again, provided you have configured the template correctly.

Elementor Theme Builder

Elementor tutorial: How to install and configure Elementor correctly

Install Elementor

To be able to install Elementor, you first need a WordPress hostingwith a domain. If you don't have WordPress hosting yet, I recommend the independent comparison: WordPress hosting comparison 2022: The best WordPress hosters from to find the perfect WordPress host for your requirements.

WordPress hosting comparison

You must also Install WordPress. You can then use the WordPress Dashboard > Plugins > Install Enter "Elementor" in the search bar and Install free of charge.

Install Elementor

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

Elementor Download

Depending on which theme you are using, 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 download from your WordPress Dashboard > Design > Add theme can install.

Install Hello Elementor Theme

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

Set up and use Elementor

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

1st option: 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 customize the design to your liking. 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

About Templates > Saved templates in the WordPress Dashboard you can create individual blocks / design elements that you can add individually to the website using shortcodes, for example. 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. You can then gradually add new blocks to your existing website until your website is fully implemented with Elementor. This method is the friendliest from an SEO perspective, as you can ensure that the link tree structure remains identical.

You can also define rules for templates. For example, you can define rules as to which template should be used when you use the Deactivate or activate WordPress maintenance mode would like.

3rd option: Start from the beginning

Edit with Elementor

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

The best Elementor themes

Most popular WordPress themes are now compatible with Elementor. However, before you decide on a theme, you should still check the developer's information 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 you 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. That's why the theme comes with relatively few preconfigured design elements. So you start with a blank page and can design as you wish. Unfortunately, the Hello theme is best suited for users of Elementor Pro, as it is the easiest to customize with the Theme Builder. Users of the Free version, on the other hand, have to fall back on premium themes with preset design features.

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

1st GeneratePress

GeneratePress Theme

We from WPspace love fast-loading websites, which is why only one theme can make it to number 1 for us. GeneratePress is available in a free and a paid Pro version. Both versions are characterized by 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!

In addition to 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 prior knowledge.

In addition, the community is large compared 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 web design much easier for you

2. astra theme

Astra Theme

Most "WordPressers" are already familiar with the Astra theme. At almost 39 KB, the Astra theme is also comparatively slim 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 yourself 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 version
  • Ideal complement to Elementor Free

3. page builder framework

Page Builder Framework Theme

Unlike the themes presented above, 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.

The theme is also particularly interesting for Europeans. The developers advertise 100% GDPR compliance.

The premium version of Page Builder Framwork is particularly interesting for agencies. This is because it 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 customer 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 % GDPR-compliant
  • Multisite support
  • Ideal for agencies

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

WordPress was never originally developed for use with page builders when it was created many years ago. Although it is now normal to use a page builder with WordPress, the use of many page builders can still be felt today in a deterioration in loading speed performance. That's why we need to talk about performance in this section.

Our test environment

We want to be transparent with the test results. We would therefore like to briefly explain 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 have tested the website https://wp-space.dewhich was also created with Elementor in order to achieve a realistic result. We chose Frankfurt as the test location because the servers of WPspace are located in Germany.

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 entire website loads in no less than 723ms. The visitor only sees a white website for 478ms. Particularly worth mentioning is the TTFB, which is only 36ms. The TTFB largely relates to the response time of the server and therefore requires strong WordPress hosting. Nevertheless, the backend part is extremely short at just 12ms. This definitely speaks for a lean code base of the theme as well as of Elementor.

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

  • Lean code
  • Only code that is actually needed to display the website is loaded
  • JavaScript and CSS files are minified and optimized,
  • Optimized DOM output

So the frontend loading time is great. But what about the backend? The backend loads extremely quickly. Nevertheless, especially on very large websites, we have noticed that operation becomes sluggish above a certain size. This is not really a problem on newer PCs and notebooks, as it is not the server that cannot keep up, as you might expect, but rather the CPU of your own PC. In this respect, operation can be a little more tiring on weak PCs. Nevertheless, at no time did we have such serious difficulties that editing was not possible at all.

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

👉 More information: Improve WordPress PageSpeed
💡Also interesting: 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 AddOn Toolkit for Elementor. You'll get the most out of the add-on if you don't use other caching plugins such as WP Rocket. This is because the toolkit offers you a wide range of performance optimization functions. In our tests, however, we did not notice any significant improvements when WP Rocket was also installed.

ElementsKit (Pro)


ElementsKit is available in Lite and Pro versions and adds up to 85 new modules to Elementor. The only disadvantage: In our tests, we found that even unused elements are always loaded. This can have a negative impact 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 from BdThemes changes that.

With this add-on, you can greatly expand the range of slider functions 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 the 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 your 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 are interested in your opinion. Try Elementor completely free of charge with the free WordPress hosting from WPspace. With WPspace you get free premium WordPress hosting. Elementor and the Premium Cache plugin are pre-installed for you. Let us know what you think in the comments!

Isabell Bergmann
Isabell Bergmann
As an online marketing manager at WPspace, I love to share my knowledge around online marketing, web design and hosting.

Links marked with an * are affiliate links. If you buy a product via this link, WPspace receives a small commission. There are no additional costs or disadvantages for you!

This has no influence whatsoever on our opinion of individual products and services - we only recommend what we love ourselves 💙

Lightning fast managed WordPress hosting from WPspace

Discover how fast your website can really load with lightning-fast WordPress hosting from WPspace!

2 Responses

  1. Personally, I can also recommend custom themes that are offered on envato or similar platforms. This often gives you more differentiation from other sites as they are not the standard themes from Astra and co.

    This allows the website to stand out a little more 🙂

    1. Thanks for your input, Marius!
      I find the wide range offered by Envato and co. very exciting. However, I miss the customization options (for most) of the themes that are for sale there. As a source of inspiration and as an introduction to web design, however, I think it's a very cool option 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *