Untitled

/** Add calc widget to elementor **/

function add_options_container( $element, $args ) {
	
	// Heading Option
	$element->add_responsive_control(
		'custom_width_label',
		[
			'label' => __( 'Custom Width Options', 'elementor' ),
			'type' => \Elementor\Controls_Manager::HEADING,
			'separator' => 'before',
		]
	);

	// Add Calc CSS
	$element->add_responsive_control(
		'calc_width',
		[
			'label' => __( 'Calc CSS', 'elementor' ),
			'type' => \Elementor\Controls_Manager::TEXT,
			'separator' => 'before',
			'description' => __( 'Use the CSS Calc function to use a custom width of the container.', 'elementor' ),
			'selectors' => [
					'{{WRAPPER}}.e-con' => '--width: {{VALUE}};',
			],
		]
	);
	
	// Add Min Width
	$element->add_responsive_control(
		'min_width',
		[
			'label' => __( 'Min Width', 'elementor' ),
			'type' => \Elementor\Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'vw' ],
			'range' => [
				'px' => [
					'min' => 500,
					'max' => 1600,
				],
				'%' => [
					'min' => 0,
					'max' => 100,
				],
				'vw' => [
					'min' => 0,
					'max' => 100,
				],
			],
			'default' => [
				'unit' => '%',
			],
			'separator' => 'before',
			'description' => __( 'Select a value for the min-width of the container', 'elementor' ),
			'selectors' => [
					'{{WRAPPER}}.e-con' => 'min-width: {{SIZE}}{{UNIT}};',
			],
		]
	);
	
	// Add Max Width
	$element->add_responsive_control(
		'max_width',
		[
			'label' => __( 'Max Width', 'elementor' ),
			'type' => \Elementor\Controls_Manager::SLIDER,
			'size_units' => [ 'px', '%', 'vw' ],
			'range' => [
				'px' => [
					'min' => 500,
					'max' => 1600,
				],
				'%' => [
					'min' => 0,
					'max' => 100,
				],
				'vw' => [
					'min' => 0,
					'max' => 100,
				],
			],
			'default' => [
				'unit' => '%',
			],
			'separator' => 'before',
			'description' => __( 'Select a value for the max-width of the container', 'elementor' ),
			'selectors' => [
					'{{WRAPPER}}.e-con' => 'max-width: {{SIZE}}{{UNIT}};',
			],
		]
	);
}

add_action( 'elementor/element/container/section_layout_container/before_section_end', 'add_options_container', 10, 3 );