Display conditions for Elementor is a new feature that lets you define single or multiple rules for hiding elements such as sections, containers and widgets.
Implementation is straightforward and does not require the assistance of a developer.
Conditions relate to dates or date ranges, visitor status, visitor language, as well as posts, pages, post categories and so on.
You can also display information in place of the element to explain why it is not displayed. Handy when you want to reserve a widget for logged-in users only.
- The code of a hidden element is not generated, it does not appear in the page source.
- The expected format for comparing dates is 'Y-m-d' for '2024-01-25' and not any other.
- Dates are relative to the server timezone.
Turn On / Off display conditions
The Elementor plugin is installed and active.
The EAC components plugin is installed and active.
In the admin panel select EAC components link and Features tab then activate the option Display conditions entry and save settings.
List of available conditions
To date here’s a list of the available conditions
Enable display conditions in the editor
Go to ‘Advanced’ tab open ‘EAC Display conditions’ section and turn on the toggle ‘Activate conditions’.
You can add conditions as many as required by clicking on Add Item button.
- Hide element when: you can choose between ‘All conditions are met‘ and ‘Any of the condition is met‘,
- Condition: the condition to be compared,
- Comparison operator: the comparison operator, relative to the condition. ‘In the list‘ or ‘Out of the list‘ in the example,
- List of elements to be compared: the list of elements against which the condition will be compared.
Compare dates or date range
Compare today’s date with a date obtained with the Datetime picker.
The current date can be less than, equal to, different from or greater than the selected date.
Compare today’s date with a date range obtained with the Datetime picker.
The date can be In or Out of the range.
Compare roles or visitor language
Compare the current user’s roles with a list of roles.
Hide the element if its roles are in or out of the list.
Compare the visitor’s language (Browser) with a list of languages.
Hide the element if its language is in or out of the list.
Compare post type or post author
Compare the current post type with a list of post type.
Hide the element if its post type is in or out of the list.
Compare the list of authors of the current post with a list of authors.
Hide the element if the list of authors is in or out of the list.
Activate the fallback content
Fallback content must be enabled if you wish to display text message instead of the hidden element, for example to indicate that the content is reserved for logged-in users only.
You can add a previously formatted and saved section to your template using dynamic tags (Text / Template ) or dynamic ACF tags.
Both content and container can be styled directly in the ‘Fallback’ section.
Display elements to which conditions has been added
After a long time it is not easy to find the elements for which conditions has been added or if you need to work on other projects that are not yours.
We have therefore implemented a visual indicator that should guide you to these elements.
For that you just have to move the mouse cursor over the sections, container or widgets and you will see, as in the following image, that the edit handles have a yellow outline. They tell you that conditions has been added to this element.
Navigator conditions indicator
The navigator indicates that the element is affected by the Display conditions feature.
The black line of the indicator extends to show an icon when hovered over.
