In the JetEngine 2.4.0 update, the plugin got a useful improvement – Dynamic Visibility module. It allows users to define parameters of visibility for every element on the page. In simple words, this module gives a user the opportunity to choose who will see any of the website’s blocks and in what circumstances.
Let’s start by enabling the module.
Enabling the Dynamic Visibility module
1 Step — Turn the module on
In your admin panel, go to JetEngine > JetEngine dashboard and match the Dynamic Visibility for Widgets and Section checkbox. Hit the “Save” button.
2 Step — Enable Dynamic Visibility
Proceed to the page or post you want to work with and click “Edit with Elementor.” Select any of the elements on the page (let’s assume it is a section) and go to Advanced > Dynamic Visibility. Enable it.
That’s it, now you can change visibility parameters for the concrete element. However, if you would like to customize visibility for another section, you’ll have to enable the module for it separately.
Setting the Dynamic Visibility module options
1 Step — Define Visibility condition type
This drop-down menu has only two options:
- Show element if condition met – the chosen element will be visible if the conditions you choose are satisfied;
- Hide element if condition met – the element will be hidden if conditions are fulfilled.
Let’s assume you choose the Show element if condition met option.
2 Step — Choose Conditions
You can add as many conditions for every element as you want. To add a new Condition, press the “Add Item” button. You can also duplicate any of the added Conditions by hitting a duplicate button (the one with a doubled paper sheet icon).
There are a lot of visibility Conditions you can add for an element. Some of them are contradictory, so be attentive when setting visibility parameters.
Let’s take a look at what those conditions mean.
User logged in
The element is shown only to logged-in users.
User not logged in
The element is shown only to non-authorized users.
User role is
The element is shown only to the users who have a specific role assigned to them. To learn how to assign the role to a user, take a look at this WordPress tutorial.
User role is not
The element is shown only to the users whose roles don’t match with the ones you mention.
After choosing this option, you have to fill the Field and Value bars. The value of the chosen meta field should match the value added in the Value text area; in this case, the element will be shown.
You have to insert the name of the meta field here, and there are two ways to do it. The first one is to copy the name of the field right from the page or post you are currently customizing (you need the word that goes right after Name:).
The second way is to click the “Dynamic Tags” button and choose the field from the drop-down menu. If you are using the free Elementor version, you will see only those dynamic tags that belong to JetEngine.
- Custom Image, Custom Field, and JetEngine Gallery – those are fields that a user can add to a meta box or custom post type. Choosing Custom Image, you choose the Media field type, picking JetEngine Gallery is picking the Gallery meta field type and Custom Field is responsible for all other meta field types. To remind yourself about the available field types, go through the Meta Box tutorial.
- Option, Image from options, and Gallery from options – the same situation here but those are fields created in the Options Pages tab of the JetEngine menu. To learn more about them, take a look at this Options Page tutorial.
- User Field and User Image – JetEngine allows you to attach meta boxes to users. User Field and User Image are responsible for all the meta fields attached to the user accounts.
- Dynamic Function – those are tags that are used to set dynamic ranges of numerical field values.
After you choose the Tag, you will be able to customize it more specifically. Click the gear icon on the left side of the bar and do the editing in the drop-down menu.
The data you type in here will be compared to the values of the meta fields, chosen in the Field bar. You can place any type of characters here – numbers, letters, words, even phrases. Just pay attention to writing everything correctly.
If the value of the chosen meta field on this page differs from the data you typed into the Value text area, the element will be shown.
The element will be shown if the value of the chosen meta field on this page is greater than the one you put into the Value box. The Field and Value options are the same as the ones in the Equal condition. However, there’s an additional feature here – Data type. It has three options in its drop-down menu:
- Chars (alphabetical comparison) – letters are compared according to the alphabetical order. In it, every letter has its sequence number (“b” is bigger than “a,” for example);
- Numeric – numbers are compared according to the value;
- Datetime – date or time are compared according to their position in the timeline.
The element will be shown if the value of the chosen meta field on this page is lesser than the one you put into the Value box.
In the list
This condition is for Checkbox, Select, and Radiobutton meta fields. The element will be shown if a user chooses from the list the value you type into the Value text area.
Not in the list
If in the Checkbox, Select, or Radiobutton meta field, the Value you mention won’t be selected, the element will be shown.
This condition will match if the chosen meta field is filled with some data (thus, exists). Then the element is shown.
The element will appear on the page only if the chosen meta field is not filled with data.
According to this condition, if the value of the chosen meta field contains the data you put into the Value box, the element will be shown on the page.
The element will be shown only if the chosen meta field doesn’t contain the data you type into the Value text area.
Post ID is
With this condition chosen, the element will be shown only on the pages you mention in the Value area. You have to type in the page ID there (the number only). Every post or page has its unique ID number. To find it, open the post or page and look at its URL. The number after “post=” will be the post ID. If there’s more than one post, separate the values with commas (no additional spaces needed).
Post ID is not
In this case, the element will be shown on all the pages except for the ones you mention in the Value area.
Single Post Type is
For this condition, you have to type in the post type slug to the Value text area. The element will be shown only on the pages that are referred to that type of posts. To find the necessary slug, go to Dashboard > JetEngine > Post Types and look at the Post Type Slug column.
Single Post Type is not
The same situation here except for the element being shown only on the pages that don’t refer to the chosen post type.
Post Type Archive is
This condition is almost similar to the Single Post Type, but you have to put the archive post type slug to the Value box in this case. The element thus will be shown only on the archive pages having the same slug.
Post Type Archive is not
Here, the element will be shown on all the pages except the archive ones that match the slug.
Taxonomy Archive is
With the help of this condition, you can show the element only on the chosen taxonomy pages. To do so, enter the taxonomy slug in the Value bar. All the custom taxonomies you create are stored in JetEngine > Taxonomies. Or, you can find the custom post type menu and take a look at the taxonomies you attached to it there.
Taxonomy Archive is not
The case is similar here. The element will be shown on all the pages that are not attached to the chosen taxonomy.
Is Search Results
Although this and the next condition could be applied to any element, it will be most efficient with the ones that are displayed on all pages (like headers, footers, sidebars, etc.). When this condition is chosen, the element you are working with will appear only on the Search Results page.
Is not Search Results
And conversely, in this case, the element will be shown on all the pages except the Search Results page.
3 Step — Define the relation
The last feature to define is Relation and it has only two options:
- AND – Visibility condition type will work only if all the defined conditions are met;
- OR – Visibility condition type will work if any of the defined conditions are met.
If you like video tutorials here is a nice dynamic visibility video overview:
As you can see, the Dynamic Visibility module is likely to help you make your website even more flexible. With the freedom to show or hide content dynamically, you won’t have to rebuild every page manually for different conditions. Convenient, isn’t it?