You may find that certain elements (such as buttons, input fields, or links) on the screen are unselectable or unresponsive when attempting to interact with them in the editor.
This often occurs because the element's underlying HTML code includes the disabled attribute. When this attribute is present, browsers interpret it as a signal to make the element inactive, non-functional, and often visually greyed out. While this is necessary for the live functionality of a website, it prevents interaction within the editing environment
Solution - Deleting the disabled Attribute
To select and modify the element in the editor, you need to temporarily remove this attribute using your browser’s developer tools:
Step 1:
Open Developer Tools: Right-click on the disabled element and select "Inspect" from the context menu. This will open the browser's Developer Tools panel.
Step 2:
Locate the Element: In the "Elements" or "Inspector" tab of the developer tools, the corresponding HTML code for the element you right-clicked will be highlighted.
Step 3:
Find the Attribute: Carefully examine the opening tag of the element (e.g., <button disabled>). You will see the word disabled listed as an attribute.
Step 4:
Delete the Attribute: Double-click on the word disabled in the code, or right-click it and select "Edit as HTML". Simply delete the word disabled (and any associated value if present, though disabled is usually a standalone attribute).
Step 5:
Return to the Editor: Once the attribute is deleted, the element should instantly become active and selectable on the page, allowing you to interact with it normally in the editor.