How can I find the "Visible" setting in Webflow for my new project? It's an important setting that I frequently use.
TL;DR
- Select the element you want to control.
- Open the Element Settings panel (gear icon or press D) and use the "Visibility" section to toggle visibility per device.
- Alternatively, use the Style panel to set the Display property (e.g., None) for custom visibility across breakpoints.
To locate the "Visible" setting in Webflow, you'll need to access it in the Element Settings panel, which controls the visibility (display) of elements on different breakpoints.
1. Select the Element
- Click on the element (e.g., a Section, Div, or any object on your page) that you want to control.
- Make sure it's selected in the Navigator or directly on the canvas.
2. Open the Settings Panel
- With the element selected, click the "gear" icon in the right-hand sidebar to open the Element Settings panel.
- Alternatively, press D to quickly open the Settings panel.
3. Find the Visibility Controls
- Scroll to the "Visibility" section in the Element Settings panel.
- You’ll see toggle options to control the visibility of the element for:
- Desktop
- Tablet
- Mobile Landscape
- Mobile Portrait
- You can also find visibility under the Style panel (paintbrush icon) by adjusting the Display property (e.g.,
none,block,flex).
4. Use Style Panel for Conditional Visibility
- If you're applying custom visibility using classes, go to the Style panel, and under the Layout section, change Display to
Noneto hide the element. - Use visibility rules per breakpoint by selecting the device type at the top of the Designer and setting display accordingly.
Summary
To access the "Visible" setting in Webflow, select the desired element and use the Element Settings panel or the Style panel to control visibility per device. The toggle controls let you easily manage what appears on different screen sizes.