How To Hide Section On Mobile in Elementor

Elementor is a powerful website builder that allows you to easily customize your website without the need for coding. One of the great features of Elementor is the ability to hide certain sections on mobile devices. This is important because what works well on desktop may not work on mobile, and hiding sections can improve the overall user experience. In this blog post, we’ll guide you through the steps on how to hide sections on mobile with Elementor.

Step 1: Open The Elementor Page Builder

First, open the page you want to edit with the Elementor page builder. Once you’re in the editor, select the section you want to hide on mobile. It’s important to note that you cannot hide a section directly from the Elementor Navigator. You must select it and make changes from the editing panel.

Step 2: Click on the Responsive Mode button

Next, click on the Responsive Mode button located in the bottom left corner of the editing panel. This will open a dropdown menu that allows you to select the device type you want to customize.

Step 3: Hide The Section On Mobile

After you’ve selected the device type, you can now make changes to that device only. To hide the section on mobile devices, first, click on the Advanced Tab in the editing panel. From there, scroll down to the Responsive section and toggle the “Hide on Mobile” option. This will hide the section on all mobile devices.

Step 4: Preview & Save The Changes

Once you’ve hidden the section on mobile devices, it’s important to preview how it looks. You can do this by clicking on the Preview button in the top right corner. Here you’ll be able to see what your website looks like on desktop and mobile. If you’re happy with the changes, make sure to save them by clicking on the Publish button.

Step 5: View The Changes On The Live Site

After you’ve saved the changes and published the website, it’s important to view the website on an actual mobile device. This will allow you to see how the website looks and feels on mobile. Make sure all of the changes you’ve made are rendering properly and that the overall user experience is improved.

Conclusion

Elementor is a user-friendly website builder that allows you to easily customize your website to improve its overall user experience. Hiding certain sections on mobile devices is a great way to improve your website’s mobile responsiveness. It takes just a few clicks to hide sections on mobile with Elementor, but it can make a big difference. If you haven’t tried using Elementor to customize your website, we highly recommend it. It’s a great tool for web designers and non-designers alike.