In this article, we’ll show you how to hide specific elements in your page.

1. Reasons Why to Hide Elements

It is possible to hide certain elements on your pages. You would use this option when:

  • You want to temporarily hide an element
  • You are adding a new element to the page, but you are still busy drafting it. You do not want to show it online until it is finished.
  • You want to hide an element for mobile users, but visible for desktop users.
For a video about this topic, you can watch the following video: How to Hide Elements


2. How to Hide Elements

  1. Open the page you would like to edit in Elementor:
    • By navigating to the specific page and clicking on ‘Edit with Elementor’ in the top black menu
    • By going to the back end > Pages > All Pages > ‘Edit with Elementor’
  2. Navigate to the specific element in the page you would like to hide, and press the ‘six dots’-icon on top of the element. Make sure the blue line is showing around the complete and specific element you want to hide (so you are hiding everything you want to hide):
  3. On the left side the following menu will appear:
    Navigate to ‘Advanced’ > ‘Responsive’ > ‘Visibility’ and press all three switches to hide the element everywhere.

  4. If you only want to hide the element on one specific device, you only press the switch behind the specific device you want to hide it on (so it turns blue). For example, when you created a special item that should only show on mobile devices, then press ‘Hide on Desktop’ and ‘Hide on Tablet’ to only make it visible on mobile devices.
  5. Press ‘Update’ on the bottom of the menu to save your changes.

If you want to unhide the element again, just follow the steps above again and press the blue switches again to unhide the elements.