Atomic elements is one of the features introduced by Elementor in Editor version 4 (Elementor v4). The main highlight of atomic elements is the ability to create components. However, not every Elementor user needs the feature.
You, as the user, have the freedom to disable atomic elements if you find them annoying instead of useful.
A little note. Atomic elements are not meant to replace classic widgets. Instead, they are intended to be the complementary design elements for professional users who want to work more efficiently using a design system.
You can use atomic elements and classic widget side by side on your design. However, you can't add a classic widget to a component.
If you are not interested in using atomic elements, I will show you how to remove them from your Elementor editor and provide some reasons why doing so is logical for some users.
Shortcuts ⤵️
- Why disable atomic elements?
- Some situations where atomic elements are useful
- Disabling atomic elements in Elementor
- Summary
Want to add a premium vibe to your Elementor design? Use our button hover effects collection.
Why Disable Atomic Elements?
With Editor version 4, Elementor wants to seriously target more professional users, those who create websites with a design system. Components are part of the design system that you can create in Elementor v4.
And to create a component, you need atomic elements.
By far, Elementor doesn't allow you to add a classic widget to a component. This makes sense because classic widgets and atomic elements have different foundations and different focuses.
To be honest, the overall idea of Elementor v4, which focused on design systems, is great because you can create a scalable website more efficiently using components.
Using components to build a website is also useful if you often change the design of your website because you don't need to edit every single page on your website to edit the elements and blocks (buttons, forms, etc.).
You only need to edit once, on the component level, and the change will automatically be applied to several pages.
The problem is that not all Elementor users have adequate web design background. Some of them don't even know what a design system is. To them, to be able to create an accessible website is enough.
Also, not all users use Elementor to create a complex website that consists of multiple pages. Some use it only to create a simple landing page or a one-page website to run ads. This type of website doesn't need a design system.
Some Situations Where Atomic Elements Are Useful
Elementor runs on WordPress. With it, especially the pro version, you can create a complex dynamic website by pairing it with a custom content plugin like ACF, JetEngine, etc.
Think of a website like a listing website, a review website with lots of metadata, and so on.
With Elementor, you can also create an e-commerce website. Be it by using custom fields or by using a dedicated plugin like WooCommerce.
Those types of websites usually have multiple pages to be fully functional. And to maintain the consistency of the design of each page, you need a design system.
This is where atomic elements come into play.
You can create, for instance, a button component once and reuse it on every page that needs a button. The best part of a component is that you can replace the content (e.g. text or link) without changing the design.
If you need to change the design (e.g., changing the color), you only need to make the change once (on the component) and the change will be applied to all buttons on all pages where you added it to.
Now imagine you have a website with 10 pages. How much time you could save if you want to edit the design of a button compared to when you are editing every single page only to edit the button.
That's how atomic components can be beneficial in your development workflow.
But again. Not every user needs to create a complex website. Some only need to create a simple landing page with Elementor.
Atomic elements are useful if you:
- Want to create a complex dynamic website consisting of multiple pages
- Often change the design of your website and need a faster way to apply the design changes
- Want to maintain the design consistency on your website
Disabling Atomic Elements
Atomic elements are part of Elementor Editor version 4. On a new Elementor installation, editor version 4 is enabled by default.
If you don't like it, you can simply disable it. You can do so from the Elementor settings screen.
First, go to Elementor -> Editor -> Settings on your WordPress dashboard. This will open the Elementor main settings screen.
On the Elementor main settings screen, go to the Atomic Editor tab and click the Deactivate button.
You will be warned that you will lose all of the content you created with atomic elements if you disable atomic editor.
Once you understand this, you can tick the agreement and click the Deactivate button on the dialog window.
After deactivating the atomic editor, the atomic elements will also disappear from your Elementor editor. You will be able to enjoy the building experience with the widgets you are already familiar with.
If you change your mind in the future and want to re-enable atomic editor, you can simply go to the same location on your WordPress dashboard to get it back.
Summary
Editor version 4 is the new era of Elementor where the design system becomes the main highlight. This version allows you to create components using atomic elements. The main goal is to help you work more efficiently on complex websites.
Not every Elementor needs this feature, though, because some only use Elementor to create a simple one-page website or a landing page.
After all, people choose to use Elementor to create their websites because it has a simple editor that is extremely easy to use. When everything gets more complicated, it totally makes sense if they start to consider the switch.
Thankfully, Elementor gives you the freedom to disable Editor version 4 with its atomic elements if you don't like it. You can disable Editor version version 4 via the steps I have just covered above.