Atomic Elements (Elementor 4.0+)

Elementor 4.0 introduced an entirely new element system called atomic elements. They use a typed props system (every value wrapped in a $$type object) and a separate styles map for visual styling: fundamentally different shape from legacy widgets.

EMCP Tools adds 13 dedicated tools for atomic elements that only register when ELEMENTOR_VERSION >= 4.0.0. Older Elementor versions are unaffected. The legacy widget tools continue to work for everyone.

Detection

`emcp-tools/detect-elementor-version`

Returns the active Elementor version and whether atomic elements are supported. Call this first before deciding which tool family to use.

Returns: { version: "4.1.2", atomic_supported: true, atomic_tools_available: ["..."] }.

Atomic containers (2)

`emcp-tools/add-flexbox`

Adds an atomic flexbox container (e-flexbox).

Input:

post_id, parent_id, position
direction: row or column
justify: start, center, end, space-between, etc.
align: start, center, end, stretch
gap: number (px)
wrap: nowrap or wrap
tag: HTML tag (div, section, article, etc.)
padding: number or { top, right, bottom, left }
background_color: hex or globals/colors?id=... reference

`emcp-tools/add-div-block`

Adds an atomic div-block container (e-div-block). Simpler than flexbox: no flex-specific settings.

Input: post_id, parent_id, position, tag, padding, background_color.

Universal atomic tools (2)

`emcp-tools/add-atomic-widget`

Adds any atomic widget by type with raw $$type settings. The escape hatch for atomic widgets that don’t have a convenience shortcut yet.

Input:

post_id, parent_id, position
widget_type: atomic widget type (e.g. "e-heading", "e-button", custom)
settings: already-$$type-wrapped settings object
styles: optional local styles map

`emcp-tools/update-atomic-widget`

Partial-merge update on an existing atomic widget. Handles $$type wrapping automatically: pass flat values, plugin wraps them.

Input: post_id, element_id, settings (flat: plugin wraps), styles (optional).

All shortcuts take simple flat values; the plugin handles $$type wrapping internally. Each shares these base params: post_id, parent_id, position, css_id.

Tool	Widget	Extra params
`add-atomic-heading`	`e-heading`	`title`, `tag` (h1-h6), `link`
`add-atomic-paragraph`	`e-paragraph`	`content`, `link`
`add-atomic-button`	`e-button`	`text`, `link`, `target_blank`
`add-atomic-image`	`e-image`	`image_id` or `image_url`, `alt`, `link`
`add-atomic-svg`	`e-svg`	`svg_id` or `svg_url`
`add-atomic-youtube`	`e-youtube`	`video_url`
`add-atomic-video`	`e-self-hosted-video`	`video_url`, `video_id`
`add-atomic-divider`	`e-divider`	(no extra)

The data shape (for context)

Atomic elements look fundamentally different from legacy widgets when you read them via get-page-structure:

{
  "id": "abc1234",
  "elType": "widget",
  "widgetType": "e-heading",
  "settings": {
    "tag": { "$$type": "string", "value": "h2" },
    "title": { "$$type": "string", "value": "Welcome" }
  },
  "styles": {
    "abc1234-style-0": {
      "variants": [
        {
          "props": {
            "font-size": { "$$type": "string", "value": "32px" },
            "color": { "$$type": "string", "value": "#111111" }
          }
        }
      ]
    }
  }
}

Key things to know:

Content props live in settings, each wrapped in { $$type, value }.
Visual / layout props live in styles[class_id].variants[].props, also $$type-wrapped.
Style class IDs are auto-generated per element.

The convenience shortcuts hide all of this. The universal add-atomic-widget requires you to pass it pre-wrapped, useful for custom atomic widgets from third-party plugins, harder to get right by hand.

Mixing atomic and legacy

You can have both on the same page. Legacy widgets and atomic elements coexist in the same _elementor_data array. The plugin’s tools route by element type, so add-heading operates on legacy widgets and add-atomic-heading operates on atomic ones. Pick whichever fits the page you’re working with.

For new builds on Elementor 4.0+, atomic is the future. For editing existing pages built with legacy widgets, stick with the legacy tools. Converting wholesale isn’t supported.

Atomic Elements (Elementor 4.0+)

Detection

emcp-tools/detect-elementor-version

Atomic containers (2)

emcp-tools/add-flexbox

emcp-tools/add-div-block