Custom Elementor Widget

Structure Folder

elementor-widgets/           
|
|- cew-example/                   
|	|- cew-example.scss                 # Config Widget
|	|- cew-example-render.scss          # Template Html view
|- autoload.php

autoload.php

<?php

/**
 * Used for ....
 *
 * @package HelloElementor
 */

class My_Elementor_Widgets
{

    protected static $instance = null;

    public static function get_instance()
    {
        if (!isset(static::$instance)) {
            static::$instance = new static;
        }

        return static::$instance;
    }

    protected function __construct()
    {
        add_action('elementor/widgets/register', [$this, 'register_widgets']);
        add_action("elementor/elements/categories_registered", [$this, "register_new_category"]);
    }

    public function includes()
    {
        require_once('cew-example/cew-example.php');
    }

    public function register_widgets($widgetManager)
    {
        $this->includes();
        $widgetManager->register(new \ExampleWidget());
    }

    public function register_new_category($elements_manager)
    {
        $elements_manager->add_category("my-widgets", [
            "title" => __("MY WIDGETS", THEME_DOMAIN),
        ]);
    }
}

add_action('init', 'my_elementor_init');

function my_elementor_init()
{
    My_Elementor_Widgets::get_instance();
}

cew-example.php

<?php

/**
 * The template for Example used in Widget Elementor
 * Author: Dicky Saputra, Andigusta, M.Rizki9591
 *
 * @package HelloElementor
 */

if (!defined('ABSPATH')) {
    exit;
}

class ExampleWidget extends \Elementor\Widget_Base
{
    public function get_name()
    {
        // change this
        return "example-widget";
    }

    public function get_title()
    {
        // change this
        return __("Example Widget", THEME_DOMAIN);
    }

	public function get_keywords() {
		return ['cew'];
	}

    public function get_icon()
    {
        // change this
        return "eicon-posts-grid";
    }

    public function get_script_depends()
    {
        return ["mi_scripts"];
    }

    public function get_style_depends()
    {
        return ["mi_styles"];
    }

    public function get_categories()
    {
        return ["my-widgets"];
    }

    protected function register_controls()
    {
        // change this
        $this->start_controls_section(
            "content",
            [
                "label" => __("Content", THEME_DOMAIN),
            ]
        );

        //This is just example control
       $this->add_control(
           "title",
           [
               "label" => __("Title", THEME_DOMAIN),
               "type" => \Elementor\Controls_Manager::TEXT,
               "default" => __("", THEME_DOMAIN),
           ]
       );

        $this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings();
        require __DIR__ . '/cew-example-render.php';
    }
}

cew-example-render.php

<?php

/**
 * The template for render wisget
 * 
 * Author: Unknown dev
 *
 * @package HelloElementor
 */
?>
<button><?= $settings['title'] ?></button>