Learning how to hide a section in Elementor is essential for refining your WordPress website design. Whether you're building a page layout for different devices or want to temporarily remove content without deleting it, Elementor provides several flexible options to manage section visibility.
Use Responsive Visibility Settings
One of the easiest ways to hide a section in Elementor is through its responsive visibility settings. This allows you to show or hide sections on desktop, tablet, or mobile views.
- Select the section you want to hide.
- In the left panel, go to the Advanced tab.
- Open the Responsive dropdown.
- Toggle visibility for Hide on Desktop, Hide on Tablet, or Hide on Mobile.
Apply Custom CSS to Hide Sections
If you want more control, Elementor section CSS tricks can help. You can use CSS to hide sections under specific conditions or states.
- Select your section and go to the Advanced tab.
- Open the Custom CSS field (Pro version required).
- Enter the following code:
selector {
display: none;
}Use Conditional Display with Plugins
To hide a section based on dynamic conditions, consider using plugins that extend Elementor’s core functionality. This lets you manage section visibility in WordPress Elementor by conditions like user roles or login status.
Recommended plugins
- Elementor Custom Conditions – Adds display logic options to widgets and sections.
- Dynamic Visibility for Elementor – Enables conditional display in Elementor based on rules you set.
Hide a Section Without Deleting
If you simply want to hide a section temporarily during design, use the built-in Navigator or section options. This is ideal when you need to test layouts or delay content without removing it entirely from the editor.
- Open the Navigator (right-click anywhere on the page and choose "Navigator").
- Find the section you want to hide and right-click it.
- Select Disable from the menu to deactivate the section.
- You can also click the eye icon to hide the section from the visual editor without deleting it.
This method is especially useful if you're learning how to hide a section in Elementor without deleting your content — ideal for previewing design alternatives or maintaining unused sections for future updates.
Control Visibility Through Display Settings
You can also use Elementor’s built-in display settings to customize Elementor layout visibility at a granular level.
| Method | Description |
|---|---|
| Responsive Toggle | Show/hide on desktop, tablet, or mobile. |
| CSS Display | Hide using display:none in custom CSS. |
| Plugins | Conditional logic for user-based visibility. |
| Navigator | Hide in editor using disable/eye icon. |
Tips for Hiding Elements in Elementor Editor
Use consistent naming. Rename sections, columns, or widgets in the Navigator panel to reflect their content or visibility purpose—for example, “Mobile Only Header” or “Hidden Banner Desktop.” This improves clarity when revisiting the page for future edits.
Preview before publishing. Don’t rely solely on the editor view. Use Elementor’s preview mode and toggle through desktop, tablet, and mobile breakpoints to ensure hidden elements behave correctly across devices. Sometimes hidden widgets may still leave spacing or margin artifacts—check for these.
Avoid overuse of hidden sections. Hiding too many blocks instead of deleting them can clutter the layout, slow down the page editor, and make your content structure harder to manage. If you plan to reuse a section later, consider saving it as a template or using Elementor’s “Save as Draft” instead.
Use custom classes or IDs for control. When using custom CSS or conditional logic (via plugins), apply unique and descriptive classes or IDs to the elements you want to hide. This makes your code more maintainable and reduces the chance of accidentally hiding the wrong element.
Leverage role-based visibility with plugins. If your goal is to hide elements based on user roles (e.g., logged-in users only), consider using addons like Elementor Pro’s Dynamic Visibility or third-party plugins like “Visibility Logic for Elementor.” These tools offer advanced control beyond CSS.
Useful Links
Responsive editing for mobile and tablets – Official Elementor guide on how to show or hide sections for desktop, tablet, and mobile using the Advanced → Responsive controls.
Custom CSS in Elementor – Elementor’s documentation on where and how you can apply CSS at site, page, or element level (Pro), including using it to hide sections.
Dynamic Visibility for Elementor (plugin) – Official plugin page offering conditional display options (user roles, date, device, etc.) to hide or show Elementor sections.
Your Elementor Website Can Do Even Better!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Knowing how to hide sections in Elementor gives you powerful control over your WordPress website layout. From using responsive settings to CSS tricks and plugin-based conditional logic, each method offers flexibility to refine and streamline your design. Apply the right technique based on your needs and ensure a better experience for your visitors.
Explore Elementor’s advanced settings guide to further refine how your content appears across all devices.
