One the features offered by Elementor — and other page builder plugins at large — is ability to hide an element on mobile devices. The feature is especially great to implement the concept of responsive design.
Since mobile devices have a smaller screen size than desktop, it is not always necessary to display all elements. Instead, you can hide some elements that not necessary (on mobile) and display only the key elements.
For instance, you can hide the video on the hero section if you think it’s not necessary to be displayed on mobile devices.
Disabling an Element on Mobile Devices in Elementor
Elementor allows you to hide all element types on mobile devices. Be it section/container, column, or widget. To hide an element, first, click the element handle to open the settings panel.
On the settings panel, go to the Advanced tab and open the Responsive block and then enable the Hide On Mobile option.
That’s all. You can preview your page to see the result. You can resize your browser window to preview the page on mobile devices as shown on the following screencast.
A little tip if you often create websites with Elementor. You can make use of Elementor templates available on the template library to save you time.
For better performance, we suggest you use an Elementor hosting service that has proper configuration.
Summary
Not all design elements need to be displayed on mobile devices, especially elements that have big impact on performance such as large hero section image, and so on. Elementor has a native feature to allow you to hide an element on your design on mobile devices. You can use this feature to apply a mobile-first design approach.
For a better mobile-optimized design, you can also utilize other responsive editing features such as the ability to apply different settings to each screen size, etc.