Completely Disable Sections, Columns on certain devices ( Not simply Hide...)

[MrBushid0]

Prerequisites

• [X ] I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• [X ] The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
Ability to completely disable Sections, Columns on certain devices. We currently can "Hide" Sections but the content is still loaded on the DOM, and thus the users still have to download content that they do not require. This is especially problematic for mobile users when a section is heavy and is set to "Hide on Mobile," The content is still downloaded for nothing, making the page slower than it really should be based on the content that is being consumed by the user.

Describe the solution you'd like
Ideally an option on the Front-End similar to the "hide" options. If there is a Hook that can provide the functionality, I'll be happy too.

Describe alternatives you've considered

None of the alternatives is ideal:

• Hide the section
• Reduce the content/design complexity in order to accommodate the speed requirements for mobile users.
• Redirect mobile users to a different page...

Additional context
Support confirmed that this function is currently not possible but that it will be added as a feature request. Hopefully it will get prioritized if more people vote for this.

[bainternet]

@MrBushid0

We already have a hook (frontend/{$element_type}/should_render) for creating this kind of functionality:

See an example of implementation (add this to your theme functions.php file):

/**
 * Class Elementor_Disable_Section
 */
class Elementor_Disable_Section {
	public function __construct() {
		// Add hooks only if elementor is loaded
		add_action( 'elementor/init', [ $this, 'add_hooks' ] );
	}
	public function add_hooks() {
		// Add our custom control section to Section panel
		add_action( 'elementor/element/section/section_typo/after_section_end', [ $this, 'add_section_controls' ], 10, 2 );
		// Filter if the section was set as disabled
		add_filter( 'elementor/frontend/section/should_render', [ $this, 'should_render' ], 10, 2 );
	}
	/**
	 * should_render
	 * 
	 * This is the magic method that actually disables the section
	 * render if it was set as disabled.
	 *
	 * @param bool $should_render
	 * @param object $section
	 * @return void
	 */
	public function should_render( $should_render, $section ) {
		$is_disabled = $section->get_settings( 'is_disabled' );
		if ( ! empty( $is_disabled ) && 'yes' === $is_disabled ) {
			return false;
		}
		return $should_render;
	}
	/**
	 * add_section_controls
	 * 
	 * Used to add our "Disable" control to section panel
	 *
	 * @param object $section
	 * @param array $args
	 * @return void
	 */
	public function add_section_controls( $section, $args ) {
		$section->start_controls_section(
			'section_disable',
			[
				'label' => 'Disable Section',
				'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
			]
		);
		$section->add_control(
			'is_disabled',
			[
				'label' => 'Disable',
				'type' => \Elementor\Controls_Manager::SWITCHER,
			]
		);
		$section->end_controls_section();
	}
};
new Elementor_Disable_Section();

Thanks.

[itaides]

@bainternet hi, can you update the code for container too?