Atomic Elements and when to use classic widgets

Atomic Elements are small on purpose. Each one does a single job and outputs clean HTML. As of 4.3 the group includes:

The set grows with each release. Elementor's public roadmap lists more Atomic versions of familiar widgets, such as lists and carousels.

A Heading has a Tag setting (h1–h6) in the General tab. The tag gives the page its structure, which is what search engines and screen readers use. It is not a size setting, so set the size in Style.

• One h1 per page, usually the main headline.
• h2 for each section, h3 for items inside it. Don't skip levels to get a smaller font.
• Use Paragraph for body text. Double-click either element to edit it inline on the canvas.

An Atomic Button has text and a link in General. Links in v4 come from a single Link control used across elements. Set the URL, choose whether it opens in a new tab, or pick a page from your site with dynamic content.

Elementor blocks nested links, so you can't put a linked Button inside a linked Div block. That's correct HTML, not a bug. If the whole card should be clickable, link the card and use plain text inside it.

• Image: choose the file and a sensible Resolution (don't serve a 3000 px original in a 400 px card). Always fill in alt text in the Media Library.
• SVG: for logos and icons. It stays sharp at any size and is tiny in file size.
• YouTube and Video: the YouTube element embeds a video; Video plays a file you uploaded. For full-bleed video behind content, layout elements support a background video (new in 4.3).

Use Object fit and Aspect ratio in Style › Size to keep images the same shape in a grid, whatever the original proportions.

Atomic Tabs and Accordion are containers. Each tab or panel can hold any layout and elements, not just a block of text, so a pricing toggle or an FAQ with images is built the same way as the rest of the page.

You don't have to build everything with Atomic Elements. Classic widgets are still in the panel and work on the same page. Use them when there's no Atomic equivalent yet:

• Icon List, Testimonial, Counter, Progress Bar, Google Maps, Social Icons (free).
• Loop Grid, Posts, Slides, Price Table, Countdown and the Theme Builder widgets (Pro).

Rule of thumb: Atomic first for layout and basic content, and classic when you need a ready-made feature. Version 4 can sync your Variables to the classic Global Colors and Fonts, so both kinds of element still match visually (lesson 07).

• Choosing heading tags by size. An h4 picked because "it looked right" breaks the page outline.
• Uploading phone photos straight in. Resize to around 2000 px wide at most, then let image optimization handle the rest.
• Rebuilding a classic widget from scratch "because Atomic". Use the widget that already does the job.