In this guide, we will show you how to use the Conditions Widget on your Elementor website. The Conditions Widget, available in the Unlimited Elements plugin, allows you to show or hide elements based on custom rules or interactions. You can control what appears on your page depending on triggers, user actions, or other conditions, making your website more dynamic, personalized, and interactive.
Let’s explore the customization options available in the Conditions Widget for Elementor below.
Elementor Free Conditions Widget Tutorial Video
Add a Free Conditions to Elementor
Add a Free Conditions Widget to an Elementor Page
Elementor Conditions Widget General Settings
Action
This sets the primary command that is executed:
Show: Makes a hidden element visible.
Hide: Makes a visible element hidden.
Toggle: Switches the visibility state (if shown, hides it; if hidden, shows it).
Add Class: Adds a specified CSS class to the element.
Remove Class: Removes a specified CSS class from the element.
Toggle Class: Adds the class if it's not present, or removes it if it is present.
Open Elementor Popup / Toggle Elementor Popup / Close Elementor Popup: Controls the visibility of standard Elementor Popups.
UE Remote Connection (Next/Previous/Go to Item): Controls elements remotely, likely for sliders or tabs (from a third-party addon like Ultimate Elementor/Unlimited Elements).
UE Open Simple Popup / UE Toggle Simple Popup / UE Close Simple Popup: Controls the visibility of a simple popup element (from a third-party addon).
Animation
This determines the transition effect when the action is executed:
None: No animation; the change is instantaneous.
Fade: The element gradually appears or disappears.
Slide: The element slides into or out of view.
Title
Sets an internal name for the specific rule.
Trigger Type
Selects the type of user interaction that starts the action.
Click: The action is triggered when the user clicks the element defined in the Trigger Selector.
Mouse Enter: The action is triggered immediately when the user's mouse pointer moves over the Trigger Selector element.
Mouse Leave: The action is triggered immediately when the user's mouse pointer moves away from the Trigger Selector element.
Focus: The action is triggered when the user focuses on an input field.
Blur: The action is triggered when an element loses focus.
Keydown: The action is triggered when the user presses a key while focused on the element.
Day of the Week: The action is triggered based on the current day of the server's week.
Time of the Day: The action is triggered based on the current time of the server.
Current Date: The action is triggered based on a specific calendar date.
ACF Field: The action is triggered based on the value or status of a specific field created using the Advanced Custom Fields (ACF) plugin.
Trigger Selector
Specifies the CSS selector of the element the user interacts with.
Target Selector
Specifies the CSS selector of the element that is affected by the action.
Conditions Widget Design Examples For Elementor
Here are some live use cases for the Conditions widget.
Luxury Rooms With Conditions.
Thank you for using the Conditions Widget for Elementor! This powerful and flexible tool lets you show or hide elements based on custom rules, triggers, and user interactions, giving you full control over how content appears on your site. Designed to create dynamic, personalized, and interactive experiences, it adapts seamlessly to any layout. For support or inspiration, feel free to get in touch or explore our demo.