How can I edit text that is hidden by other sections in Webflow? I'm new to Webflow and struggling to find a solution in the editor. Thank you for your help!
TL;DR
- Use the Navigator panel to select hidden text directly.
- Temporarily hide or lower the Z-index of overlapping elements to expose the hidden text.
- Enable Outline Mode to see and access all page elements.
If a piece of text is hidden behind other sections in Webflow and you can't easily click or select it in the Designer, there are a few reliable ways to access and edit it.
1. Use the Navigator Panel
- Open the Navigator by clicking the layers icon on the left sidebar.
- Locate the hidden element by identifying the section or component it's inside.
- Click on the text element directly in the Navigator to select it, even if it's visually hidden on the Canvas.
- Once selected, press Enter or double-click the element to begin editing text.
2. Temporarily Hide Overlapping Elements
- Click on the element that's visually covering your text (e.g., a sticky navbar or an absolutely positioned section).
- In the Style panel, scroll down to the Display property and change it to Display: none.
- This will temporarily remove it from the Canvas so you can see and edit things underneath.
- Remember to re-enable it later by changing the Display setting back (e.g., to Flex or Block).
3. Lower the Z-Index Temporarily
- Select the element that's overlapping the text.
- In the Style panel, find the Z-index field and temporarily reduce its value to push it visually behind other objects.
- This change may make the hidden text visible and selectable without altering visibility settings.
4. Use the Outline Mode
- Press Shift + O or go to the top-left and open the View menu → Outline Mode.
- This mode reveals the structure of your page with transparent boxes, making hidden or covered elements easier to locate and select.
5. Preview or Zoom Out
- Sometimes you can access hidden text by zooming out (press
Cmd/ Ctrl + -) or by temporarily changing the Canvas breakpoint to reveal overlapping UI differences. - Toggle Preview mode (eye icon) off to interact only with the editable canvas, not as the user would see it.
Summary
To edit hidden text in Webflow, use the Navigator panel to select it directly, or temporarily hide or lower the Z-index of overlapping elements. You can also use Outline Mode for better visibility into the page structure.