Elementor is a great page builder plugin which has drag and drop interface to create pages ultra fast. We will create a custom widget to insert our custom layout or section using elementor interface. Creating a widget for elementor is similar to creating a widget for WordPress.

We need to extend the base class of the widget and add the basic setting to display our widget on elementor dashboard.

Creating a custom class and extending "Widget_base"

<?php

class oodles_create_widget extends \Elementor\Widget_Base {
//add class methods here
}
?>

Elementor widget base class has preset methods to define widget structure such as get_name(), get_title(), get_icon() etc. We will use these methods to create our custom widget structure.

<?php

class oodles_create_widget extends \Elementor\Widget_Base {
    
    public function get_name() {
		return 'add-iframe';
	}

	public function get_title() {
		return __( 'Add iframe', 'add-iframe' );
	}

	public function get_icon() {
		return 'fa fa-code';
	}

}
?>

Now we will the widget control to change the values using _register_controls() method. We would need to add a URL input box to save URL for the iframe.

<?php

class oodles_create_widget extends \Elementor\Widget_Base {
    
    public function get_name() {
		return 'add-iframe';
	}

	public function get_title() {
		return __( 'Add iframe', 'add-iframe' );
	}

	public function get_icon() {
		return 'fa fa-code';
	}
    protected function _register_controls() {

		$this->add_control(
			'iframe_url',
			[
			'label' => __( 'URL', 'add-iframe-plugin' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'input_type' => 'url',
			'placeholder' => __( 'https://example.com', 'add-iframe-plugin' ),
			]
		);

		$this->end_controls_section();

	}

}
?>

After creating the controls, we need to display the output of our widget on the screen. For that, we will use render() function to embed an iframe to the page.

<?php

class oodles_create_widget extends \Elementor\Widget_Base {
    
    public function get_name() {
		return 'add-iframe';
	}

	public function get_title() {
		return __( 'Add iframe', 'add-iframe' );
	}

	public function get_icon() {
		return 'fa fa-code';
	}
    protected function _register_controls() {

		$this->add_control(
			'iframe_url',
			[
			'label' => __( 'URL', 'add-iframe-plugin' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'input_type' => 'url',
			'placeholder' => __( 'https://example.com', 'add-iframe-plugin' ),
			]
		);

		$this->end_controls_section();

	}

    protected function render() {
         $setting = $this->get_settings_for_display();
          $url = $setting['iframe_url'];
          echo '<div class="custom-elementor-widget">';
               if($url){
                echo '<iframe src="'.$url.'"></iframe>';
               }else { 
                   echo 'No URL to Display'l
                  }
          echo '</div>';
}

Elementor has recently launched its developer API which has open lots of possibility to create a well customized page builder. You can visit developers site from here.

Elementor has provided lots of controls to add in widget. So you don't have to worry about the fields and their validations. You can see the complete list of controls.

NOTE: Creating an independent plugin for the custom widget will be a good approach instead of adding this to your child functions.php file.