How to Show and Hide Elements in Elementor

Have you ever wanted to show and hide elements in Elementor based on a user’s device, login status, or even the time of day? You’re not alone. Controlling the visibility of your content is a powerful way to create a more dynamic and personalized user experience. It can transform a static webpage into an interactive journey, guiding visitors to the information they need while hiding what they don’t.

Controlling visibility in Elementor is more than just a fancy trick; it’s crucial for user experience (UX) and search engine optimization (SEO). A cleaner, more focused design improves user engagement, while strategically hidden content can still be valuable for SEO purposes.

This guide will walk you through the various methods available, from Elementor’s built-in tools to more advanced add-ons and coding techniques. We’ll cover everything you need to know to master showing and hiding elements effectively.

Understanding Elementor Display Conditions for Show and Hide

Elementor Display Conditions are a powerful feature, often found in Elementor Pro or through add-ons like The Plus Addons for Elementor. They allow you to show or hide a section, column, or widget based on specific rules. These conditions are a game-changer for creating dynamic content without writing a single line of code.

You can find and enable Display Conditions right in the Elementor editor. Simply click on the element you want to control, go to the Advanced tab, and look for Display Conditions. Here, you can set the rules to determine when the element is visible.

Read More: How to Change Column Width in Elementor

Types of Display Conditions You Can Use

Elementor’s display conditions offer incredible flexibility. You can set rules based on a variety of factors. For example, you can use dynamic tags to create particular regulations. The Plus Addons for Elementor expand on these possibilities, offering even more options.

Here are some of the most common display condition types:

• Login Status: Show content only to logged-in or logged-out users. This is perfect for member-only content.

• User Role: Display specific content to users with a particular role, like “Administrator” or “Subscriber.”

• Author: Show content created by a specific post author.

• Taxonomy: Display content based on categories, tags, or other taxonomies.

• Date/Time: Schedule promotional banners or announcements to appear only during a specific time frame.

• URL Parameters: This option shows content based on parameters in the URL, which is great for tracking or personalized landing pages.

You can also combine these conditions using AND/OR logic groups. This lets you create complex rules, like “Show this section if the user is logged in AND has the ‘Subscriber’ role.”

Common Use Cases for Display Conditions

The applications for Elementor display conditions are endless. Here are a few common scenarios:

• Troubleshooting when display conditions are not showing: Sometimes, display conditions may not work as expected. This is often due to caching conflicts. If you experience this, try clearing your website’s and browser’s cache. If you still have issues, check community forums on YouTube or dedicated sites like crocoblock.com for solutions.

• Show content only to logged-in or specific role users: This is ideal for a members-only area of your website. You can create a welcome message or a special dashboard that only appears after a user signs in.

• Hide promotional banners outside business hours or on mobile: You can set a condition to hide a banner promoting a flash sale after 5 PM. Or, you could use a responsive condition to hide it on mobile to save screen space.

Explore More: How to Display Your Custom Post Types in Elementor

Using Responsive Controls: Hide Sections on Mobile, Tablet, Desktop

One of the simplest ways to show and hide elements is with Elementor’s built-in responsive controls. These settings allow you to hide entire sections, columns, or widgets on specific devices, such as mobile, tablet, or desktop. This is perfect for optimizing your design for different screen sizes.

To use this feature, select the element you want to hide, go to the Advanced tab, and click on Responsive. You’ll see toggles for “Hide On Desktop,” “Hide On Tablet,” and “Hide On Mobile.” Simply enable the toggle for the device you want to hide the element.

Best practices:

• Hide mobile vs. hide desktop: A common mistake is to try to redesign a section by hiding a desktop element on mobile and then recreating it for mobile. Instead, it’s often easier to create two versions of the section, one for desktop and one for mobile, and use the responsive controls to hide each version on the other device.

• Regenerate CSS: It might be a CSS issue if your responsive changes aren’t taking effect. Elementor caches CSS to improve performance. Go to Elementor → Tools → Regenerate CSS and click the button to clear and rebuild the CSS files.

Troubleshooting Responsive Visibility Issues

Sometimes, a hidden element may still appear in the editor preview or on specific devices. This can be frustrating. Common causes include caching or theme-related conflicts. If you encounter issues, check the Elementor community on WordPress.org or Reddit for similar experiences and solutions.

If the native controls fail, you can always use custom CSS using @media rules. This method gives you complete control over which elements appear on specific screen sizes.

Also Read: How Can Experiments in Elementor Transform Your Website Design

Show and Hide Elements with JavaScript or Button Toggles

You might need to use a manual show/hide via HTML, CSS, and JavaScript for more advanced functionality. This approach is ideal when you need a user to click a button to reveal or conceal content actively. A classic example is a “Read More” button that expands a text block.

Here’s a simple example using custom IDs and JavaScript:

• Include an HTML widget or create an element that has a custom ID, such as my-hidden-content.

• Create a button and assign it a unique ID like toggle-button.

• Implement a JavaScript function on your site that controls the element’s visibility when the button is clicked. For guidance, refer to examples on Stack Overflow.

This method offers more control and flexibility. One of its cons is that it requires basic coding knowledge.

Using The Plus Addons or Unfold Widgets Without Code

Third-party add-ons are the perfect solution if you want the functionality of a manual show/hide without the code. For example, the Plus Addons for Elementor offers an Unfold & Expand Toggle widget. This widget allows you to effortlessly create “Read More” or “Show More” toggles.

With this tool, you can create an accordion-style FAQ section or a section with hidden content that users can expand with a click. A significant advantage of this method is that the hidden content is still crawlable by search engines, making it SEO-friendly.

Further Reading: How to Use Custom Attributes in Elementor

Dynamic Visibility Add-Ons, Like JetEngine or Premium Addons

Add-ons like JetEngine and The Plus Addons for Elementor offer robust dynamic visibility modules for even more granular control. These tools go far beyond Elementor’s native display conditions.

JetEngine’s Dynamic Visibility module allows you to set conditions based on user role, date/time, and even post metadata. For example, you could show a specific sidebar to mobile users or display a holiday banner only on a specific date or within a particular region.

The Plus Addons for Elementor’s Display Conditions module offers similar features, with rules based on location, browser, device, URL, and custom fields.

Related: Best Elementor Addons

SEO Best Practices When Hiding or Showing Elementor Content

The way you show and hide content can impact your site’s SEO. Following best practices is crucial to avoid negatively affecting your search engine rankings.

• Ensure hidden content is still indexable: Content that is hidden but intended for search engines (like the text under a “Read More” toggle) should be structured correctly. Search engines generally understand content hidden by a simple JavaScript toggle, but avoid overly complex or convoluted methods that might make the content difficult to crawl.

• Avoid hiding important content from crawlers: Google might ignore content that CSS hides (display: none) or JavaScript if it suspects you are trying to manipulate rankings. Ensure that any content you hide is not essential for the user or the page’s primary purpose.

• Accessibility considerations: Always consider accessibility. Screen readers and keyboard navigation tools must be able to access the content on your page. Ensure that toggles and hidden sections are structured correctly so all users can interact with them.

Discover More: How to Add Text Over Image Using Elementor

Step-by-Step Tutorials: Key Scenarios Covered

Let’s walk through some practical examples to see these methods in action.

Scenario A: Hide a section on mobile only (responsive control)

• Select the section you want to hide.
• Go to the Advanced tab.
• Click on the Responsive section.
• Toggle the Hide On Mobile option to “Yes.”

Scenario B: Show a promo banner during business hours (display condition date/time)

• Select your banner section.
• Go to the Advanced tab and find Display Conditions (requires Elementor Pro or an add-on).
• Add a condition for “Date/Time” and set your promotion’s start and end times.

Scenario C: Show content only to logged-in users (display condition: login status)

• Select the content section.
• Go to Advanced and then Display Conditions.
• Add a “Login Status” condition and set it to “Show if Logged In.”

Scenario D: Toggle FAQ answers with a button (using The Plus Addons Unfold widget)

• Add the Plus Addons Unfold & Expand Toggle widget to your page.
• Place your FAQ question as the “Expand Text” and the answer as the “Unfold Content.”
• Customize the button text and styling.

Scenario E: Use custom JavaScript to toggle containers based on a select menu (coding method)

• Add an HTML widget with your select menu and the containers you want to toggle.
• Assign unique IDs to each element.
• Add a custom JavaScript function to your site to listen for the select menu’s change event and toggle the visibility of the corresponding container.

Read Further: A Complete Guide to the Compatibility Tag in Elementor

Hiding Specific Elements in Elementor

Elementor also provides specific controls for hiding various elements beyond sections or columns.

Hiding Page Titles in Elementor

Sometimes, the WordPress page title can clutter a beautifully designed landing page. To hide it, you can use the Page Settings panel. Go to the gear icon in the bottom left of the Elementor editor, click Page Settings, and toggle Hide Title to “Yes.”

Hiding Headers and Menus in Elementor

You might need to hide the entire header and menu to create a full-screen hero section or a splash page. The easiest way to do this is often through your theme’s settings. For example, in Elementor’s Hello Theme, you can disable the header and footer for a specific page. You can also achieve this with custom CSS using display: none; on the header’s CSS class or ID.

Hiding Images or Columns in Elementor

You might want to hide decorative images or entire columns to simplify mobile views. Just like with sections, you can use the Advanced → Responsive controls for a specific image or column to hide it on desktop, tablet, or mobile. This is a quick and efficient way to optimize your design for smaller screens.

Best Practices for Managing Element Visibility

Optimizing element visibility in Elementor is crucial for delivering an efficient and pleasant user experience. Here are a few key practices to keep in mind:

User Experience

Always consider your audience and their needs. Tailor content to match their context to enhance user engagement.

For example, if you’re running an online clothing store, you might want to show tailored product recommendations based on a user’s browsing history or previous purchases. Displaying a banner with seasonal promotions only to users from relevant geographic locations can also increase the relevance of your content.

Performance Improvements

To ensure your site loads quickly and smoothly, hide elements that do not serve the user’s immediate needs. 

For instance, avoid displaying high-resolution images or media-intensive elements for mobile users if these elements are not essential. This can significantly improve page load times on mobile devices where bandwidth might be limited, making the browsing experience more efficient and enjoyable.

Thorough Testing

Testing across various devices and user scenarios is critical to maintaining consistent performance and function.

Suppose you’ve set visibility conditions based on user login status. Testing these settings by simulating both logged-in and logged-out experiences is essential to ensure the correct content is shown or hidden.

Similarly, check your site on different devices and browsers to confirm that visibility conditions behave as expected under multiple environments. This will help avoid any unexpected outcomes that might disrupt the user experience.

Learn More: How to Use Request Parameters in Elementor for Dynamic Content

Limitations and Considerations When Hiding or Showing Elements

Navigating the world of Elementor’s visibility settings is powerful, but it’s not without challenges. Understanding a few key limitations and best practices is crucial to preventing unexpected behavior and frustrating troubleshooting sessions.

Plugin Conflicts and Theme Restrictions

Elementor works seamlessly with most themes and plugins, but occasionally, you might encounter conflicts that affect visibility. These conflicts usually happen when multiple plugins try to control the same element’s behavior.

Plugin Conflicts

Third-party add-ons, especially those with dynamic visibility modules, can sometimes clash with Elementor’s native display conditions. For example, a specialized membership plugin might have its rules for hiding content from logged-out users, which could override or confuse Elementor’s settings.

A common culprit is caching plugins, which can serve an outdated, static page version, preventing your live visibility conditions from taking effect. If you suspect a plugin conflict, the best course of action is to temporarily deactivate other plugins one by one to isolate the issue.

Theme Restrictions

Your WordPress theme also significantly influences how elements are displayed. Many themes, particularly those designed for specific niches, have built-in options for hiding page titles, headers, or footers. These theme-level settings often have priority over Elementor’s controls.

Always check your theme’s customizer settings or page options before spending hours troubleshooting a hidden element that your theme controls globally.

Display Logic Priority and Testing Tips

Setting up conditions is only half the battle; you must also understand how Elementor processes them and how to test your work properly.

Clear All Cache: After making changes, clear your browser cache, Elementor cache (Elementor → Tools → Regenerate CSS), and any caching plugin to ensure you see the most recent version of your page.

Display Logic Priority

When you set multiple visibility conditions, their order and logic are critical. Elementor’s responsive controls generally take precedence over display conditions. This means if you put a section to “Hide on Mobile,” it will remain hidden on mobile devices, even if a display condition (like “Show to logged-in users”) would typically make it visible.

Remember the difference between AND and OR logic when combining multiple display conditions. An “AND” group requires all conditions to be met for the element to show, while an “OR” group only requires one condition to be true.

Thorough Testing

Never rely solely on the Elementor editor’s preview mode. It can sometimes fail to represent the final, live page accurately.

• Use an Incognito Window: Always check the live page in a private or incognito browser window to test conditions based on login status or user roles. This perfectly simulates a logged-out user.

• Check on Multiple Devices: Test your responsive settings on actual mobile devices and tablets, not just in your browser’s dev tools.

• Clear All Cache: After making changes, clear your browser cache, Elementor cache (Elementor → Tools → Regenerate CSS), and any caching plugin to ensure you see the most recent version of your page.

Read More: How to edit global widget in Elementor

Conclusion

Mastering the art of showing and hiding elements in Elementor is a critical skill for any web designer. Whether you’re optimizing for mobile with native responsive controls, personalizing content with dynamic display conditions, or building interactive features with no-code widgets and JavaScript, Elementor provides a robust toolkit. The key is to choose the right approach for your goal, balancing ease of use with the level of control you need.

Start experimenting with these methods today to create a more engaging, efficient, and user-friendly website. Try showing a different message to logged-in users or a simplified layout for your mobile visitors. The possibilities are endless, and they all begin with a single click.

FAQs About Hiding and Showing Elements in Elementor