If you are working on an Elementor website that someone else created, you may encounter some elements that are hidden or locked in the editor. These elements may not show up on the front end of the website, even though they are present in the editor.
In this article, we will show you how to access and edit these hidden elements using Elementor’s Navigator tool.
Table of Contents
What are Elementor Hidden Elements?
Elementor hidden elements are elements that have been set to be invisible or inaccessible in the editor. This can happen for various reasons, such as:
- The element has been given a negative margin, a high z-index, or an absolute position, which makes it overlap with another element or go outside the viewport.
- The element has been hidden using the responsive settings, which allows you to hide or show elements on different devices.
- The element has been locked using the lock icon, which prevents you from editing or deleting it.
- The element has been hidden using custom CSS or JavaScript code, which overrides the Elementor settings.
Elementor’s Navigator is a handy tool that lets you see and access all the elements on your page in a tree-like structure. You can open the Navigator by clicking on the folder icon on the bottom left corner of the editor, or by pressing Ctrl + I on your keyboard.
The Navigator shows you all the sections, columns, and widgets on your page, and their hierarchy. You can also see the element type, name, and visibility status. You can use the Navigator to select, edit, duplicate, delete, or drag and drop any element on your page.
To access a hidden element using the Navigator, follow these steps:
- Open the Navigator and look for the element that you want to access. You can use the search box to find it by name or type.
- If the element is hidden, it will have a crossed-out eye icon next to it. Click on the eye icon to toggle the visibility of the element. You can also right-click on the element and choose Show/Hide from the menu.
- If the element is locked, it will have a lock icon next to it. Click on the lock icon to unlock the element. You can also right-click on the element and choose Unlock from the menu.
- Once the element is visible and unlocked, you can select it and edit it as usual. You can also drag and drop it to a different location on your page.
Frequently Asked Questions (FAQs)
Question: How do I hide an element in Elementor?
Answer: To hide an element in Elementor, you can use the responsive settings or the custom CSS option. To use the responsive settings, select the element and go to the Advanced tab. Under the Responsive section, you can choose to hide the element on desktop, tablet, or mobile devices. To use the custom CSS option, select the element and go to the Advanced tab. Under the Custom CSS section, you can add your own CSS code to hide the element. For example, you can use the display: none; property to hide the element.
Question: How do I lock an element in Elementor?
Answer: To lock an element in Elementor, you can use the lock icon or the custom CSS option. To use the lock icon, select the element and click on the lock icon on the bottom left corner of the editor. This will prevent you from editing or deleting the element. To use the custom CSS option, select the element and go to the Advanced tab. Under the Custom CSS section, you can add your own CSS code to lock the element. For example, you can use the pointer-events: none; property to disable the mouse interaction with the element.
Question: How do I rename an element in Elementor?
Answer: To rename an element in Elementor, you can use the name field or the custom attributes option. To use the name field, select the element and go to the Content tab. Under the Name section, you can enter a custom name for the element. This will help you identify the element in the Navigator and the editor. To use the custom attributes option, select the element and go to the Advanced tab. Under the Custom Attributes section, you can add your own HTML attributes to the element. For example, you can use the id or class attributes to assign a unique identifier or a CSS class to the element.
Summary
In this article, we learned how to access and edit Elementor hidden elements using the Navigator tool. We also learned how to hide, lock, and rename elements in Elementor using different options. We hope this article helped you solve your problem and improve your Elementor skills. If you have any questions or feedback, please leave a comment below.
Disclaimer: This article is for informational purposes only and does not constitute professional advice. We are not affiliated with Elementor or any of its products. We recommend that you backup your website before making any changes and consult a qualified web developer if you need further assistance.