Error 1: You insert the entire text into a single text element
Use the Elementor text widget for texts:
I often see that far too much text is packed into a single text module. This has the major disadvantage that editing becomes very tedious and you can no longer easily move individual sections or containers.
Therefore, use separate text elements for individual “logical” text sections. Per paragraph. Per main heading. Possibly also per subheading.
Also use the headings module. This offers you more options for formatting the headings than the Elementor text widget.
Error 2: You insert all modules into a container
This error is very similar to #1, and applies to containers (formerly: sections).
Elementor’s flexible containers make it much easier than Divi to structure content in a meaningful way.
With containers in particular, you can nest as much as you like and create columns within columns within columns… but always make sure that you create logical sections here too.
For example, you first have 2 columns here, then 3 columns:
It looks wonderful and this freedom to nest is one of the biggest advantages of Elementor over Divi. Nevertheless, your formatting options are limited here.
Instead, use separate containers for each logical section of your website and create the columns or inner containers in these sections:
This gives you more freedom when formatting the individual sections. For example, different background colors to brighten up your website.
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
Mistake 3: You are using empty columns and the spacing widget for your design
The distance widget comes from earlier versions of Elementor:
Unfortunately, some ready-made themes for Elementor* still rely on this outdated technology to create a “design”.
The whole thing then looks like this, for example, to create a narrow column with a gap:
The problem?
To make this layout responsive, i.e. for mobile devices, you have to dig deep into your bag of tricks. And it will never work really well.
Therefore, do not use the spacing widget, columns or empty containers to achieve a design.
Use instead:
First: The setting for the content width of the container to define the maximum width. This setting has the advantage that it is displayed correctly on mobile devices without any further changes.
So you don’t have to hide any (empty) columns or make any other settings for mobile devices.
Secondly: Padding and margin for distances.
Padding defines the inner distance (i.e. in the section / widget itself) and Margin defines the distance to the next section / widget.
Both settings are responsive, i.e. you can select a different value for tablets or mobile devices by clicking on the small computer symbol.
The correct section then looks like this:
Much easier, isn’t it?
You can see the structural difference even better in Elementor’s Navigator:
Fewer elements mean a leaner website that loads faster. And that has a positive effect on your Google ranking.
Mistake 4: You change colors and fonts for each element
Elementor offers many options for each module under “Style” and “Advanced” to customize the design of the respective module. For example, you have the option of choosing every conceivable setting for fonts or colors.
The problem with this?
You distribute the settings on different pages in different widgets. This makes it very difficult to create a consistent design. If you want to change a color or font later, you have to edit every single module on every single page.
Whew.
It is therefore essential that you use the global settings for colors, fonts, buttons, etc. right from the start.
You can access this by selecting the hamburger menu at the top left and then clicking on Site Settings.
Set the global colors of your design, the default typography, the appearance of form fields, etc. here.
Don’t worry, you can of course still choose your own settings for each element, but these settings here are the default settings for your entire website.
Error 5: You paste text directly from Word into Elementor
When you create your website, the texts are probably available in the form of an email, Word document, PDF or Google Docs. Or you can copy the texts from your old website and paste them into the text module using Cmd+V (Ctrl+V under Windows).
Most of the formatting is also adopted. That’s perfect, isn’t it?
No, unfortunately it is not. Because if you insert content directly from Word into Elementor, extra classes and div tags and span tags are also transferred in the background.
Instead of text and the minimal formatting required, you now have HTML code, which bloats your website, makes it slower and can also lead to errors.
Therefore, always insert text with the key combination Cmd+Shift+V (or Ctrl+Shift+V under Windows). Although you have to redraw the formatting such as headings, bulleted lists etc. yourself, the source code of your website is clean and your website loads faster.
Error 6: You are using Elementor for posts
By default, Elementor is activated for posts, pages and all other collections (“custom post types”).
The problem with this? Elementor is not (always) the ideal editor for this.
For articles or other structured content such as events or WooCommerce products, the content is created using structured fields. There are several fields for content, short description, price etc., which then output the content with the help of a template.
Elementor is not the best choice as an editor here, as you don’t need the complex functions for layout and formatting at all, but in the long term you will find yourself in a dead end . So when I switched from Divi to Elementor, I first had to change every single blog article.
If I had used the Gutenberg editor (also known as the block editor) straight away, I could have converted any number of blog articles in a few minutes.
Therefore, avoid using the Elementor editor for posts, online courses, lessons, etc. by deactivating the editor under Elementor > Settings for these post types.
Then create a global template for this post type to display the content. More on this in the next error!
Error 7: You are not using the Elementor Theme Builder
This error is related to the previous one. Because the strength of Elementor lies in the Theme Builder. This allows you to build your site in a structured and logical way without reusing elements on every single page.
You can create as many templates as you like under Templates > Theme Builder, for example:
- for the header and footer of your website
- for the 404 error page
- for contributions, courses, projects, etc.
- for overviews of contributions, courses, projects, etc.
You can flexibly determine when and where your template is used.
A different header for all landing pages? No problem.
A different layout for products in a specific category? No problem.
A different menu for the member area? Not an issue!
So use the great theme builder from Elementor Pro right from the start to build your website in a structured way!
Elementor Pro um bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Error 8: You install extra plugins for functions that Elementor already provides
I have been using Elementor exclusively in my projects for years and I am still amazed at how many functions this page builder has to offer. What at first glance sounds like “oh, but many functions are confusing and slow” is not true.
Because by consistently using Elementor, I as an Elementor programmer save myself a lot of extra plugins, e.g.
- a newsletter plugin
- a 404 plugin
- a form plugin*
- a popup plugin …
Avoid using external plugins such as Ele Custom Skinor CrocoBlock’s JetEngine* at all costs. Elementor Pro comes with everything you need to customize blog posts, templates and more.
The advantage of not using external plugins? The functions in Elementor are all from one manufacturer and are therefore very well integrated and coordinated. Updates do not cause incompatibilities and there is a single point of contact for support queries.
I talked in detail about why you should use Elementor Pro as a professional in my presentation at WordCamp Vienna.
Error 9: You do not have a license for Elementor Pro
Believe me: you’ re saving at the wrong end if you don’t want to pay the almost 50 euros per year for Elementor Pro*.
You can upgrade some functions with external plugins (e.g. Ele Custom Skinor CrocoBlock’s JetEngine*). But even these are not necessarily free and are never as well integrated as Elementor and Elementor Pro.
Elementor has seen a massive increase in the pace of development in recent months in particular. Loop Builder, Mega Menu, tabs with any content and much more are now available as standard.
You support this development of new, perfectly integrated functions with your license. And let’s be honest, a few euros a year should be enough for the most important plugin on your website. And WordPress plugins can’t be free.
So invest in Elementor Pro*. For little money you get the best support I know (apart from the Website Heroes of course), the Theme Builder, the Loop Builder, the Mega Menu and many other widgets for which you would otherwise have to look for alternatives.
Become a Pro!
Many of the typical beginner’s mistakes have to do with the fact that Elementor Pro is a really powerful tool and can be used in a very unstructured as well as a professional and structured way.
Therefore, when creating your website, start by
- define global colors
- set global fonts
- use the Theme Builder
This structured approach will make working with your website much easier in the long term!
Do you want to avoid further mistakes in your business and really get started as a web designer? Then my WordPress Membership is just right for you. Here you will learn step-by-step in a great community how to make your web design business fly. You can find more details about the exclusive WordPress Business Membership here.
Let’s just build websites,
Michael
Questions about the most common errors
Should I insert the whole text into an Elementor text module?
No, by no means.
Use several text modules where it makes sense.
How many sections should I use in Elementor?
This depends heavily on your design. However, if you put the entire content in just one section, you can no longer customize the background or simply move modules, for example.
Should I still use the distance widget?
Apart from exceptional cases, you should not use the distance widget. Use the margin and padding settings instead.
Can I also define colors and fonts globally?
Yes, you should definitely do that. Otherwise, you will have to go through every single element of your website when making changes or adjustments. This is annoying, time-consuming and not in the spirit of the inventor :-)
It is therefore essential to define the colors and fonts globally.
What do I have to consider when copying and pasting from Word or other programs?
Be sure to paste the text with Cmd+Shift+V (Mac) or Ctrl+Shift+V (Windows). Otherwise, unwanted formatting may be adopted.
Can I also use Elementor for blog posts?
You can – but it makes absolutely no sense. Use the Gutenberg editor for posts and design the page by creating a template (single + archive).
This ensures that all posts look the same and that you can easily change the sidebar or the comment function for all posts, for example.
Should I use the Elementor Pro theme builder?
Yes, definitely. This is the only way you can easily and centrally define the header and footer in one place and determine how blog posts should look.
What additional plugins do I need if I use Elementor?
Relatively few – because Elementor (Pro) is so powerful that many functions are already included out of the box. So you don’t need any extra plugins, but can use the functions in Elementor.
Examples of this are pop-ups, forms, newsletter forms, captcha plug-ins, etc.
Which page builder can I use instead of Elementor?
You can also use one of the following 7 page builders instead of Elementor:
- Divi – take a look at the comparison of Divi and Elementor here.
- Bricksbuilder*
- Beaver Builder
- Brizy
- Thrive Architect
- Oxygen
- Visual Composer
- WPBakery Page Builder
Here you can find a comparison of page builders for WordPress.
