Conditional Display

🎯 Conditional Display — Show or Hide Elements Based on Rules

The Conditional Display extension allows you to dynamically show or hide any Elementor section, column, or widget based on specific user roles, browsers, login status, or system values. This feature enhances personalization, user targeting, and content control.

🔧 Step-by-Step Guide

1. Enable the Extension

• Go to Topper Pack → Extensions
• Find Conditional Display and toggle it ON.

2. Edit Any Elementor Widget or Container

• Go to any section, column, or widget in the Elementor editor.
• Navigate to the Advanced tab.

3. Enable Conditional Display

• Scroll to the Conditional Display (TP) panel.
• Toggle Enable Conditional Display to “Yes”.

4. Set Your Display Action

• Action: Choose whether to:
  • Show Element → Display only when conditions are met.
  • Hide Element → Hide if conditions are met.

5. Choose Display Logic

• Display When:
  • All Conditions Are Met
  • Any Condition is Met

6. Add Your Conditions

• Click + Add Item to set rules.
• Select a Type:
  • Browser (e.g., Google Chrome, Firefox)
  • Login Status (Logged in / Logged out)
  • Role (Admin, Editor, Subscriber, etc.)
• Choose the logic: Is or Is Not
• Select or enter the value (like “Google Chrome” or “Administrator”)

📌 You can add multiple rules and combine them with AND/OR logic using the “Display When” selector.

🛠 Use Cases

• Hide admin-only sections from visitors.
• Show promotions only to logged-out users.
• Browser-specific layouts (e.g., avoid animations on older browsers).
• Role-based dashboards or messages.