A brief becomes a real page.Create a reusable Elementor widget
Validate a structured widget design and inspect it before use.
Video coming soon
Your next step is ready.
Follow the complete written guide below.
The video will join it here when it’s ready.
Before you start
- A verified connection and a practice site.
- EMCP Pro and enabled Widget Builder tools.
- Elementor, manage_options, and unfiltered_html permissions.
Let’s do this, step by step.
Step 01
Choose a small widget
Ask for a simple stat card with editable heading, value, text color, and background controls.
A small widget is easier to validate and reuse. The AI supplies a structured design; the plugin generates the widget code.
Step 02
Read and validate the specification
Discover supported controls, prepare the widget specification, and run validate-widget-spec.
Validation should happen before saving. Fix reported problems instead of asking the AI to bypass them.
Step 03
Create an inactive draft
Create the widget, then open Build → Sandbox → Widgets. It is an inactive draft; create-custom-widget cannot activate it.
Creating a widget now always leaves it inactive. The AI cannot turn it on. Open the Sandbox and inspect the generated code first.
Step 04
Review, activate and test
Choose View code and review findings. A human switches the widget on in Sandbox → Widgets. Then place it from Custom (EMCP) on a practice draft and test every control.
Read the code and validation results before switching the widget on. Once active, add it to a practice page and test its controls, mobile layout and empty state.
Step 05
Add live data only after the basic widget works
Discover supported query or shortcode providers. Configure provider keys privately under Connection → 3rd-party services → Live data providers.
Map fields explicitly and test missing data. A remote data source needs loading and empty states; credentials should not become widget text or cloud settings.
You’re done when…
The widget's actual status is known and its editable controls work on a draft.
Keep the reference handy.
The docs cover tool details and requirements for this lesson.