Creating a custom Elementor widget from an HTML template can provide a unique and personalized touch to your website. Here's a detailed guide on how to do it:

1. Install and Activate the Elementor Plugin

Before doing any coding to create elementor widget First, access your WordPress dashboard and navigate to the 'Plugins' section. Search for the Elementor plugin and click 'Install Now'. After the installation is complete, click 'Activate' to enable the plugin on your WordPress site.

2. Setup Elementor widget template

The Elementor Hello World Template is a simple, ready-to-use template that can be used to create custom Elementor widgets.

1. Download the Elementor Hello World Template: To begin, download the Elementor Hello World Template from GitHub. This template is a basic boilerplate that provides a simple and clean starting point for your custom widget.
2. Install the Template: Once downloaded, put it into your plugin folder of your WordPress site. Navigate to your WordPress dashboard and go to 'Plugins' . You will see a plugin name Helleo Elementor (we will rename it soon). click 'Activate'.
3. Navigate to the Elementor Dashboard: From your WordPress dashboard, go to the Elementor section. Click on 'My Templates' to manage your existing templates or create a new one.

2. Setup the elementor Widget plugin

From your WordPress dashboard, go to the Elementor section. Here, you will find all the Elementor related settings and options. Click on 'My Templates' to manage your existing templates or create a new one.

3. Create a New Template

Before Creating a Template lets introduce you with the Hello elemntor Template.

]

here elementor-hello-world.php is for registering any widgest you create all your widgets will be in widgets folder. Rename this file will rename your plugin. Lets creat a widget called notion_core. SO rename the file and the internal class notion_core

4. Registering Widgets :

in plugin.php add your widget

public function widget_scripts()
    {
        wp_register_script('notion-core', plugins_url('/assets/js/hello-world.js', __FILE__), ['jquery'], false, true);
    }
    public function notion_add_widget_categories($notion_add_cat_manager)
    {

        $harry_add_cat_manager->add_category(
            'harry-category',
            [
                'title' => esc_html__('Notion Core', 'notion-core'),
                'icon' => 'fa fa-plug',
            ]
        );
    }

5. Widget Structure

Next, you need to work in elementor widget file. Widgets have two parts. in register_controls you need to add whatever input field or slec element you need to add here is a example

    $this->start_controls_section(
            'section_content',
            [
                'label' => __( 'Content', 'elementor-hello-world' ),
            ]
        );

        $this->add_control(
            'title',
            [
                'label' => __( 'Title', 'elementor-hello-world' ),
                'type' => Controls_Manager::TEXT,
            ]
        );

        $this->end_controls_section();

HTML Part

inside the Render Part you need to put your desired visiable part

    protected function render() {
        $settings = $this->get_settings_for_display();

        echo '<div class="title">';
        echo $settings['title'];
        echo '</div>';
    }

6. Now check this elementor widget for elementor Dashboard

Once you're happy with the output of your elementor widget, click 'Update' to store your changes. Your new custom elementor widget will now be addded on page or post on your site.

Important Note

Creating a custom Elementor widget from an HTML template requires a basic understanding of HTML and CSS. If you're not comfortable with these languages, consider hiring a professional or learning more about them before attempting this process.

With these steps, you can create a unique, personalized widget for your WordPress website using an HTML template and the Elementor plugin. Happy designing!

💡 Feel free to contact me via Fiverr or Linkden