- Enabling the Dynamic Visibility Module in Elementor
- Setting the Dynamic Visibility Module Options
- Applying Dynamic Visibility to Gutenberg Blocks
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.
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.
- Switcher enabled / Switcher disabled. These two conditions are created especially for the Switcher meta fields. The element will be shown if the switcher in the mentioned Field is enabled or disabled;
- Value is checked / Value is not checked. The conditions for the specific JetEngine Checkbox meta fields. You can choose the Field and the Value. When the user ticks that value – the element will be shown.
- User Can Add Post. In the Profile Builder maintenance window, you can choose to restrict some users from publishing certain post types. This condition says, that the element will be visible to a user that has permission to publish that type of posts;
- 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;
- User ID is. Only the users whose ID numbers you type into the User IDs field will see the element;
- User ID is not. The users whose IDs you will type into the User IDs field won’t see the element.
- 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;
- Is Current Post Author. The element is visible only to the author of the current post;
- Is Not Current Post Author. The element is visible to everyone but the author of the current post;
- Post Has Terms. The element is visible if it has terms belonging to a certain taxonomy. Select the needed taxonomy from the Taxonomy drop-down menu or type one or several term slugs in the Value field. If you want to enter several term slugs, ensure to separate them with commas;
- Is Parent Post. Shows the element if it is set as a parent in the hierarchical post type;
- Is Not Parent Post. Shows the element if it is set as a child in the hierarchical post type;
- Is Child Post of. The post is visible if it’s a child to the parent post whose ID is typed in the Value field;
- Is Not Child Post of. The post is visible if it’s NOT a child of the parent post whose ID is typed in the Value field.
Complete two simple steps, to make post type hierarchical, set parent and child posts, and use Is Parent Post, Is Not Parent Post, Is Child Post of, and Is Not Child Post of conditions.
Firstly, proceed to WordPress Dashboard > JetEngine > Post Types and hit to edit needed post type. Unfold the Advanced Settings tab and enable the Hierarchical toggle.
To be able to set parent posts in the “Quick Edit” panel, pick the “Page Atributes” option from the Supports drop-down menu. Then, push the “Update Post Type” button.
Secondly, go to the hierarchical post type and click to “Quick Edit” one of the posts. Select the Parent post and press the “Update” button.
These conditions can be applied to the elements in the Listing templates. For example, by setting the “Is even item” and “Is odd item” conditions, you can alternate different elements in the listing. Also, be aware that these conditions are applied only to the nearest listings and aren’t applicable from the nested listing to the parent and vice versa.
- Is even item. Shows the element if the Listing Item in the Listing Grid widget or block is even (second, fourth, etc.);
- Is odd item. Shows the element if the Listing Item in the Listing Grid widget or block is odd (first, third, etc.);
- Is N item. Shows the element if the Listing Item is N in a row. E.g., if you set the Number to “3,” the element will be shown if the Listing Item is third in a row. If you enable the Each N Number toggle, the element will be displayed for every third item.
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.
Applying Dynamic Visibility to Gutenberg Blocks
JetEngine plugin got updated, and now it allows applying Dynamic Visibility to the blocks of the WordPress default editor.
Select a block in Gutenberg. There will be an eye-shaped icon on the toolbar on top of the block.
Once you click on it, you will see a pop-up window with the Enable toggle.
Turn it on and proceed to set up the visibility conditions for the current block.
Set the visibility type and add the necessary conditions.
Once you’re done with the settings, close the conditions windows and update the page.
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?