The first decision to make is whether to add the widget to a plugin or your current theme. In general putting the widget into a plugin allows you to reuse your widget later. It also allows you to separate your widget code, styling, and scripts from the theme. If you are creating a widget that only makes sense for your current project, then puting it in the theme might be a good idea.
In our case, well create a plugin calledelementor-dropdowninwp-content/plugins/elementor-dropdown.
In order to be able to concentrate on the items unique to an elementor plugin, were going to go with a very simple single file structure. In reality you will want to add allthestandardgoodiesto your plugin. These would include thing like internationalization, verifying that Elementor is activated, verifying the PHP version, etc. In our case, this extra boiler plate would obscure the functionality were interested in.
We want to keep the plugin as simple as possible, but the Elementor namespace is not available until after Elementor is loaded. If you try to access theWidget_Baseclass too early, youll get aClass 'Elementor\Widget_Base' not found.error. So lets move our class to a separate file and only load it after Elementor is loaded.
This issue is not documented onElementors Widget Creation Page, so I had to do a little trial an error to find the correct action to hook into.plugins_loadedstill produces the error, butelementor/widgets/widgets_registeredseems to work: