AI Abilities is a Premium Addons for Elementor feature that connects AI clients such as Claude, Cursor, and Codex to your WordPress site through a built-in MCP server. Each ability is one action the connected AI can perform on your site. This doc covers one of the Build abilities: Add Flexbox.
Add Flexbox lets your AI client add an Elementor v4 flexbox to a page, post, or template. Flexbox is the atomic layout element that replaces the classic container in Elementor’s v4 editor, so this is the Build ability the AI uses to lay out sections on sites running the new atomic experience.
Along with placement, the ability accepts the flex settings that define the layout (direction, alignment, wrap, and gap) plus sizing, background, border, box shadow, margin, and padding. Behind the scenes it stores the visual settings the way v4 expects: as a local style class on the element, exactly as if you had styled it in the editor.
At a Glance
| Category | Build |
| Access | Write |
| Destructive | No |
| MCP tool name | premium-addons/add-flexbox |
| Available since | Premium Addons v4.11.85 |
Before You Start
This ability is part of the AI Abilities feature. If you have not set it up yet, follow the Elementor AI Abilities (MCP Tools) Tutorial first to enable the feature and connect your AI client. The ability must also be switched on under Premium Addons → AI Abilities & MCP Config, in the Build category:
Use Cases
Build v4 layouts by prompt. Ask your AI client to “Build a three-column features section on my homepage with a 24px gap, centered content, and a light gray background.” The AI adds a row flexbox, nests a column flexbox per feature, and sets the alignment and gap on each.
Port a design to the atomic editor. Prompt “Convert my exported Figma design to an Elementor page using Premium Addons.” On a v4 site, the AI mirrors the design’s frames as nested flexboxes, carrying over direction, spacing, and backgrounds before filling in content.
Add a styled section to an existing page. Ask for “a full-width call-to-action strip at the bottom of my Pricing page: column direction, centered, radial gradient from #0f172a to #334155, 80px vertical padding.” The AI finds the page, appends the flexbox with those settings, and reports back the new element ID.
Good to Know
- Elementor v4 atomic elements must be active on your site. When they are not, the ability returns an error and points the AI to
premium-addons/add-containerinstead. The AI can check upfront withpremium-addons/detect-atomic-support. - Visual settings are saved as a local style class with a desktop variant. Tablet and mobile variants are not created here; responsive tweaks come later through
premium-addons/update-element-settingsor the editor. - Elementor validates atomic elements on save. If a value does not fit what v4 expects, the save is rejected and the error comes back to the AI rather than broken data landing on your page.
- A background color and gradient can be combined; the gradient renders on top of the color.
- The border radius is a single value applied to all corners, and setting a border width or color fills in a solid border style automatically.
Inputs
| Parameter | Required | Description |
|---|---|---|
post_id | Yes | The page, post, or template to add the flexbox to. |
parent_id | No | An existing container element to nest the flexbox inside. Omitted, it lands at the top level of the page. |
position | No | Where among the parent’s children to insert it, counting from 0. Omitted, it goes last. |
tag | No | The HTML tag it renders as (div, header, section, article, aside, or footer). Defaults to div. |
css_id | No | A CSS id attribute for the element. |
direction | No | Flex direction: row, column, row-reverse, or column-reverse. |
justify | No | How children spread along the main axis (center, space-between, and the other justify-content values). |
align | No | How children align across the axis (center, stretch, and the other align-items values). |
wrap | No | Whether children wrap: wrap, nowrap, or wrap-reverse. |
gap | No | Gap between children, with gap_unit choosing the unit (px by default). |
width / height / min_height | No | Sizing, each as a size plus unit (px by default). |
background | No | A solid color, a gradient (two colors, linear or radial, with an angle), or both. |
border | No | Border style, width, and color. |
border_radius | No | Corner radius applied to all corners. |
box_shadow | No | Shadow offsets, blur, spread, color, and an inset option. |
margin | No | Margin per side, in px unless another unit is given. |
padding | No | Padding per side, in px unless another unit is given. |
Output
| Field | Description |
|---|---|
element_id | The ID of the new flexbox, which the AI uses to nest elements inside it. |
post_id | The document the flexbox was added to. |
Come & Join the Community
Feel free to join our Facebook group and subscribe to our YouTube channel to keep up with our newest features, improvements, and helpful video tutorials.
