Set Site-Wide Heading and Button Styles in Elementor with AI
Set default styles for headings, text, and links across every Elementor atomic element, plus button and card classes ready to apply, in one approved pass.
Prerequisites
A connected site running Elementor 4.3 or newer (free is fine) with the Atomic Editor on (WP Admin, Elementor, Settings) and, on 4.3.4 and later, Enable MCP access clicked under Elementor, Elementor MCP, the WPVibe plugin active, and a backup if the site is live. Without the Atomic Editor these abilities return an error. The styles apply site-wide as soon as they save.
My site uses Elementor with the Atomic Editor. Set up site-wide styles for its atomic elements. The look I want: headings [font, sizes for h1 to h3, tight or loose letter spacing], body text [size and line height], links [color #hex, underlined or not], buttons [brand color #hex with a darker hover, rounded or square corners], and on phones [how much headings should shrink]. First check that Elementor's abilities are available. If none are listed, tell me to click Enable MCP access under Elementor, Elementor MCP in wp-admin, and stop; if they return a 403 saying the Atomic Editor is off, stop and tell me. Read the site's current default styles for h1, h2, h3, p, a, and button, its global variables, and its global classes, and show me what exists. Then propose new default styles for each of those tags, written as plain CSS with phone sizes and hover states, plus a reusable button class and card class, and wait for my approval. Keep button colors and padding out of the a defaults: a covers every linked atomic element, including links inside headings and paragraphs, so the button look goes in the button class, and the button tag defaults only reach buttons that have no link. Apply them with elementor/manage-default-styles and elementor/manage-classes, reusing any existing class with the same purpose instead of creating a duplicate. Do not edit any page. When you are done, list every default style and class you created or changed, then check [one page that uses atomic elements] on desktop and phone so I can see the result.
Skip pasting the full prompt. Drop this into your AI on a site that already has WPVibe:
Run the “Set Site-Wide Heading and Button Styles in Elementor with AI” recipe from the WPVibe cookbook on my connected site.
Elementor’s newer atomic elements let you style headings, paragraphs, links, and buttons once for the whole site, and save reusable classes for things like buttons and cards. Most people never set that up, so every new section starts from Elementor’s defaults and gets restyled by hand, a little differently each time.
You describe the look: heading sizes, spacing, link and button colors, and how things shrink on phones. The AI reads the styles your site already has, proposes site-wide defaults for each tag plus a button class and a card class, and waits for your yes. It writes them through Elementor’s own abilities: the defaults apply to every atomic element that renders that tag, and the classes land in the editor’s Class Manager, ready to apply. Link defaults reach every linked atomic element, linked headings and paragraphs included, so the button look goes in the button class rather than the link defaults. Classic Elementor widgets are not affected.
These defaults go live the moment they save and touch every page that uses atomic elements, so read the proposal carefully and take a backup on a busy site. The prompt edits no page; apply the classes in the editor where you want them. Everything here needs the Atomic Editor on, and on Elementor 4.3.4 and later, Enable MCP access clicked under Elementor, Elementor MCP in wp-admin (that switch also opens Elementor’s own MCP connection to other AI tools). If either is off, the AI tells you instead of changing anything.
Outcome
Site-wide default styles for headings, text, and links on Elementor's atomic elements, plus button and card classes ready to apply in the editor.