Priority Support
Help Center > Elementor AI > Angie > How to create custom widgets using Elementor Angie AI

How to create custom widgets using Elementor Angie AI

Last Update: February 17, 2026

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

Using Angie, you can describe a widget or code you’d like to use on your site and it will create it for you. To create a custom widget with Elementor Angie, open the Elementor Editor and enter a detailed description of your desired widget into the Angie prompt panel. After Angie generates the widget in Test Mode, verify the design and functionality on the canvas, then click the Publish button to save the widget to your live site library.

What you need to create custom widgets

Before building custom widgets, ensure your WordPress environment meets these requirements:

How do you create a custom widget with Angie?

Create a custom widget that you can use throughout your site.

  1. Open the Editor: Launch the Elementor Editor on any page or post.
    Note
    You can also create widgets from WP Admin or anywhere the Angie panel is open.
  2. Enter the Prompt: In the Angie panel, enter a description of the widget you would like to create. For this example we’ll use the prompt: Create a new Elementor widget called ‘Image Stack Group’. The widget should display a horizontal stack of images (like a user avatar group) using a repeater control that allows users to upload an image, set tooltip text, and add a link for each item.
    Screenshot of the Angie prompt panel with a text description
  3. (Optional) The Angie prompt box offers the following options:
    1. :Add a file to the prompt box to help guide your prompt. For details, see What kind of files can be uploaded to Angie?
    2. : Open up the Elementor prompt library. These premade prompts can help guide you in creating your own widgets. 
    3. : Send Elementor feedback about Angie. For details, see Request features and report bugs.
  4. Angie creates a new widget according to your specifications and places it on the canvas.
    Your new image appears in the canvas
  5. Verify in Test Mode: You now enter Test Mode. When in Test Mode you’ll see a Test Mode window at the bottom of your screen and the canvas is surrounded by a pink border. No permanent changes take place while in test mode to ensure no critical errors are introduced by the AI.
    Warning
    If you exit test mode without saving the widget (see Save your widget below), the widget is no longer visible. If you re-enter test mode, you can access the widget again. For details, see How to use Angie Test Mode for Elementor widgets and snippets.

    You can further refine the widget by adding more information.
  6. In the Angie panel enter: Include the following customization options:
    1. 12 Design Presets: Default, Default (Shadow), Border Color, Border w/ Tooltips, Border Radius, Dark Color, Drop Shape, Border Radius Gradient, Square Shape, Square Shape (Alt), Corner Shape, and Border Radius Corner.
    2. Group Hover Animations: Options for ‘None’, ‘Expand’, ‘Fan Out’, ‘Lift Up’, and ‘Shake’.
    3. Responsive Controls: Sliders for ‘Image Size’ and ‘Overlap’ (negative margin) with mobile support.
    4. Tooltips: A switcher to enable/disable tooltips, with a dropdown for positioning (Top, Bottom, Left, Right).
    5. Tooltips: A switcher to enable/disable tooltips, with a dropdown for positioning (Top, Bottom, Left, Right).
    6. The widget must handle image overflow correctly so tooltips are not clipped, and use wp_enqueue_script / style for assets.

The new features are added to the widget. To check this:

  1. Select the widget: Click on the widget on canvas.
  2. Open settings: In the Content tab, open the Settings field.
    Open the Settings field
  3. View Presets: Open the Design Preset dropdown menu.
    Notice that the designated presets are added.
    A list of preset added to the widget
  4. Publish: Click Publish to save any changes you made to the new widget.

Save your widget

There are several options to add the widget to your live site.

Ask Angie

  • Go to the Angie prompt box and enter: Publish the widget to the live environment  and exit test mode.

Use the code snippet manager

  1. From WP Admin: Navigate to Angie>Snippets.
    In WP Admin, go to Angie and then Snippets
  2. Publish: Click Publish to Live to save the widget.
    Click Publish to Live to add the widget to your site
    You can now use this widget on any of the site’s pages.

Reuse the widget

Now that you’ve created this widget, you can use it on any of your site’s pages.

  1. Locate: In the panel search box, enter Image Stack Group.
    Look for the Image stack group
  2. Place the widget: Drag the widget to the canvas.
On this page

Share this article

Hosted with