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.
Do You Really Need to Hide an Element on Module Devices?
If you have ever noticed the websites of big brands, you will find the same fact: not all elements are displayed on mobile devices. It makes sense enough since mobile devices have smaller screen size than desktop devices.
Thus, it also has limited space to display all the elements. For the sake of user experience, you can disable some desktop elements on mobile. This is one of the best practice when designing a responsive page.
Take a look at the following screenhots:
The above screenshots are the homepage of the Stripe website. The left image is the hero section of the Stripe homepage on desktop, while the right one is the hero section of the Stripe homepage on mobile.
Can you spot the difference?
Correct. The smartphone image is disabled on the mobile version. The decision is reasonable since the image takes a large portion on mobile devices. Disabling it can give extra space for essential elements on mobile.
In Elementor, you can easily disable an element on mobile devices using a built-in setting option.
How to Disabe 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.
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.
