Skip to content
AI Puffer manual

Cookbook › Elementor · Integration

Reuse responsive Elementor styles

Elementor3 minutesChangesTested 25 Oct 2026
Paste into ChatGPT or ClaudeCreate a reusable workshop-card style in Elementor with 24px padding on desktop, 12px on phones and #B91C1C text on hover. Use my brand colour and font variables for its normal text. Apply it to the workshop heading, preserve its other styles and check the result on desktop and mobile.

Changes content or settings on your site. See the recipe below for approval requirements. Read only cannot make changes.

What happens

Section titled “What happens”
  1. Your assistant reads the existing classes and design variables before creating or updating a shared style.
  2. It applies the requested responsive and hover rules and attaches the class to the chosen element.
  3. It checks the saved references and the rendered desktop, mobile and hover appearance.

Good to know

Section titled “Good to know”
  • Requires AI Puffer 2.5.16 or later, Elementor Free 4.3.5 or a compatible version, Atomic Editor and Elementor’s own MCP opt-in.
  • At Standard, these native Elementor changes require WordPress approval. Trusted runs them with your connected user’s permissions.
  • Shared styles and variables affect every element that references them.
  • Local element styles can override global defaults; your assistant checks those differences.

Need a variation of this recipe, or a different one? Request a recipe