Add Flexbox (Elementor v4 atomic) is a WordPress ability from Premium Addons for Elementor — usable via Easy MCP AI, which connects Claude, ChatGPT, and any AI assistant to your site.
Install Free Plugin →Add Flexbox (Elementor v4 atomic)
WriteAdd a new Elementor v4 atomic flexbox container to a page, with layout, background, border and spacing already set.
Requires the Premium Addons for Elementor plugin on WordPress 7.0+ for the Abilities API (abilities are registered only when the wp_register_ability() function exists). Dashboard, settings and site-inventory abilities (get-id-by-title, list-pages, list-templates, get-global-settings, get-settings, update-setting, scan-usage, disable-unused-widgets, clear-dynamic-assets, subscribe-newsletter) require the caller hold the 'manage_options' capability. premium-addons/create-page requires 'edit_pages'. premium-addons/get-widget-schema, premium-addons/get-addon-schema, premium-addons/list-available-elements, premium-addons/list-pa-addons, premium-addons/detect-atomic-support, premium-addons/check-elementor-element and premium-addons/create-elementor-template require 'edit_posts'. premium-addons/get-page-structure, premium-addons/get-element-settings, premium-addons/add-flexbox, premium-addons/add-container, premium-addons/update-element-settings, premium-addons/insert-widget, premium-addons/remove-element, premium-addons/change-post-status and premium-addons/duplicate-post require 'edit_post' on the target post_id, and deny requests for a nonexistent post_id outright.
What it does
This ability inserts a new e-flexbox element — Elementor's v4 atomic container — into a page, post or template, either at the document root or nested inside an existing container at a given position. It refuses to run when e-flexbox isn't registered on the site (check first with premium-addons/detect-atomic-support), since Document::save() would otherwise silently drop the unregistered element. Content props (tag, an optional css_id) are written into the element's settings as $$type-enveloped atomic values; every visual prop you pass — direction, justify, align, wrap, gap, width/height/min_height, background (solid color and/or linear or radial gradient), border, border_radius, box_shadow, margin and padding — is compiled into a single local desktop-variant style class attached to the element, exactly the shape Elementor's own atomic style storage expects. This lets an AI assistant build out a fully-styled v4 layout section in one call instead of creating the flexbox bare and then issuing a separate update-element-settings call for every style property.
See it in action
You ask your AI assistant
"Add a flexbox to the homepage with a column direction, 24px gap, centered items, and a light gray background."
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| post_id | integer | Yes | The ID of the Elementor page, post or template to add the flexbox to. |
| parent_id | string | No | The id of an existing container element to nest the new flexbox inside. Omit to insert at the document root. |
| position | integer | No | Zero-based index among the parent's children. Omit to append at the end. |
| tag | string | No | The HTML tag the flexbox renders as: div, header, section, article, aside or footer. Defaults to div. |
| css_id | string | No | A CSS id attribute for the element. |
| direction | string | No | flex-direction of the flexbox: row, column, row-reverse or column-reverse. Elementor default is row. |
| justify | string | No | justify-content value (e.g. flex-start, center, flex-end, space-between, space-around, space-evenly). |
| align | string | No | align-items value (e.g. flex-start, center, flex-end, stretch). |
| wrap | string | No | flex-wrap value: wrap, nowrap or wrap-reverse. |
| gap | number | No | Gap between the flexbox children. |
| gap_unit | string | No | Unit for gap (px, em, rem, %, …). Defaults to px. |
| width | object | No | Width { size, unit? (default px) }. |
| height | object | No | Height { size, unit? (default px) }. |
| min_height | object | No | Min-height { size, unit? (default px) }. |
| background | object | No | Background { color? for a solid background, gradient? { color, color_b, angle (default 180), type: linear|radial } for a gradient — both may be combined, the gradient renders above the color }. |
| border | object | No | Border { style? (default solid when width/color set): solid|double|dotted|dashed|groove|none, width? { size, unit? }, color? }. |
| border_radius | object | No | border-radius { size, unit? (default px) }, applied to all corners. |
| box_shadow | object | No | Box shadow { h_offset?, v_offset?, blur?, spread?, color?, inset? } — offsets/blur/spread in px. |
| margin | object | No | Margin { top?, right?, bottom?, left?, unit? } in px by default. |
| padding | object | No | Padding { top?, right?, bottom?, left?, unit? } in px by default. |
Returns
An object with element_id (the id of the new flexbox element) and post_id (the document it was added to).
Permission
The current user must have the 'edit_post' capability for the target post_id, checked via Helpers::can_edit_input_post(); requests for a nonexistent post_id are denied outright.
More Premium Addons for Elementor abilities
Add Container (Elementor v3)
Add a new Elementor v3 (classic) container to a page, with layout, background, border and spacing already set.
Change Post Status
Change the status of a page, post or Elementor template (e.g. draft to publish).
Check Copy Compatibility
Check whether this site can render elements copied from another site via a transfer URL, before actually importing them.
Check Elementor Element
Check whether a specific element or widget type is registered on the site before trying to build with it.
Clear Premium Addons Dynamic Assets
Clear generated dynamic CSS/JS asset files and purge the related caches.
Create Elementor Page
Create a new WordPress page or post with Elementor enabled, ready to edit.