How to set display conditions with elementor

Display conditions for the free version of 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.

List of available conditions

To date here’s a list of the available conditions

Liste of available conditions
List of available conditions

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.

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.
Activate display conditions
Feature Display conditions overview

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.

Comparison of dates
Compare today's date with another 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 date range
Compare today's date with a date 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.

Comparison of roles
Compare user's roles

Compare the visitor’s language (Browser) with a list of languages.
Hide the element if its language is in or out of the list.

Comparison of languages
Compare visitor language

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 post type
Compare post type

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.

Compare post authors
Compare post authors

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.

Compare fallback content styled
Fallback content displayed in place of element
Dispaly the fallback content
Activate and use fallback content

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.

Display conditions customized handles
Container and widget with customized handles

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.

Navigator indicators conditions
Navigator indicator conditions

Leave a Comment