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.
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:
- 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.
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 tutorial: How to install and configure Elementor correctly
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 kopfundstift.de to find the perfect WordPress host for your requirements.
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.
If you have purchased the Pro version and would also like to install it, you must download the ZIP file in the dashboard under elementor.com 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.
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.
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
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
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
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:
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
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
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.
One thing first. Elementor is one of the fastest page builders on the market. Our test results also prove this:
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
- 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.
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
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 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
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!