How to hide an Element on Certain Devices with JupiterX
In some cases, you might need to hide a particular element or widget on specific devices to ensure your website looks its best across all screen sizes. With JupiterX and Elementor, this task is simple and customizable to suit your responsive design needs. You can control visibility on three screen size ranges: Desktop & Laptop, Tablet, and Mobile.
Here's how to hide an element on certain devices:
- Navigate to Your Element
- Open your page in the Elementor editor.
- Click on the element you wish to hide, or find it in the Navigator pane if you prefer a structured view of your page elements.
- Access Visibility Settings
- With the element selected, click on the ‘Advanced’ tab in the Elementor panel on the left-hand side.
- Scroll down or look for the ‘Responsive’ section within the Advanced settings.
- Adjust Visibility Options
- In the Responsive section, you'll find the Visibility controls.
- Check the boxes corresponding to the device sizes where you want the element to be hidden.
- These options include:
- Hide on Desktop
- Hide on Tablet
- Hide on Mobile
- Apply Changes
- After you've made your selections, be sure to click 'Update' to save the changes to your page.
Remember, hiding elements can greatly alter the user experience, so use this feature thoughtfully to maintain a functional and aesthetically pleasing site across all devices.
[callouts color="blue"] Note: Changes take effect only on the preview or live page and are not visible in editing mode in Elementor. [/callouts]
Follow these steps, and you'll be able to control the visibility of elements across various devices with ease, making your website responsive and user-friendly.