Help Center

Dynamic Visibility Overview

The tutorial details the main settings of the Dynamic Visibility for Widgets and Sections module of the JetEngine plugin to manage visibility conditions for meta fields, posts, listings, and relations in Elementor and Gutenberg.

Module Activation

The module is one of the JetEngine’s modules: JetEngine > JetEngine > Modules. The Dynamic Visibility for Widgets and Sections toggle activates this module.

dynamic visibility module toggle

Dynamic Visibility for Elementor Widgets

The Dynamic Visibility tab is located in the Advanced section of any Elementor’s widget: Advanced > Dynamic Visibility. The Enable toggle activates it.

enable dynamic visibility

Now you can change visibility parameters for this element. However, if you want to customize visibility for another element, you’ll have to enable the module for it separately.

Dynamic Visibility Settings

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.

visibility condition type

Selection of Conditions

The Conditions drop-down menu lists different groups of conditions. Users can add one or some conditions to every element. They cover different options; therefore, some of them can have minor differences.The “Add Item” button adds a new Condition. You can also duplicate any of the added Conditions by hitting a duplicate button (the one with a doubled paper sheet icon).

add condition

General Conditions

The General Conditions includes Query Has Items and Query Has Not Items options. If chosen, they turn on the Query to check drop-down menu to select a query with or without the necessary items accordingly;

enable dynamic visibility module
  • Equal, Not Equal, Greater than, Greater or Equal, Less than, and Less or Equal options, if chosen, turn on the Field, Value fields, and Context drop-down menu.
    • the Field allows typing a field name or choosing the meta-fields from the drop-down menu by pressing the “Dynamic Tags” button. For the last case, you can select a meta-field developed by the JetEngine plugin or associated plugins, i.e., JetReviews.
jetengine dynamic visibility tags

The JetEngine meta fields have the following functionality:

  • Custom Image, Custom Field, and JetEngine Gallery are fields that users can add to a meta box or custom post type. When choosing Custom Image, you select the Media field type, JetEngine Gallery ― the Gallery meta field type, and Custom Field for all other meta field types. The Meta Field Types Overview tutorial explains the available field types.
  • Term Field and Term Image fields allow adding terms and images, respectively.
  • Option, Image from options, and Gallery from options are fields created in the Options Pages tab of the JetEngine menu. To learn more about them, read the Options Page tutorial.
  • User Field and User Image are fields responsible for all the meta fields attached to the user accounts.
  • Dynamic Function tag sets the dynamic ranges of numerical field values.
  • The JetEngine meta fields have the following functionality:
  • Custom Image, Custom Field, and JetEngine Gallery are fields that users can add to a meta box or custom post type. When choosing Custom Image, you select the Media field type, JetEngine Gallery ― the Gallery meta field type, and Custom Field for all other meta field types. The Meta Field Types Overview tutorial explains the available field types.
  • Term Field and Term Image fields allow adding terms and images, respectively.
  • Option, Image from options, and Gallery from options are fields created in the Options Pages tab of the JetEngine menu. To learn more about them, read the Options Page tutorial.
  • User Field and User Image are fields responsible for all the meta fields attached to the user accounts.
  • Dynamic Function tag sets the dynamic ranges of numerical field values.
  • Macros field specifies the macros to return the necessary fields. The tutorial Macros Guide explains the main features of the macros developed by JetEngine.
macros field settings
  • Current Object Field dynamic tag returns data from SQL queries.
  • Profile Page URL dynamic tags adds the link to the user profile to their single pages.
  • Data Stores: Post Count, Data Stores:Store Count, Data Stores: Get Store dynamic tags add appropriate data from data stores. The tutorial Data Stores Module overviews the Data Store Module settings.

After you choose the Tag, you can customize it more precisely. Clicking the gear icon on the left side of the bar allows editing the drop-down menu.

  • The Value field allows setting values or values lists (numbers, letters, words, even phrases) to compare data. 
  • The Context drop-down menu has two options: Default and Current List object options to get value from a current post by default or the current listing item object.

Additionally, the Equal, Greater than, Greater or Equal, Less than, and Less or Equal options have the Data type drop-down menu: Chars (alphabetical comparison) – letters are compared according to the alphabetical order. In it, every letter has its sequence number (“b” has priority over “a,” for example); Numeric – numbers are compared according to their value; Datetime – date or time are compared according to their position in the timeline.

  • In the list and Not in the list are dynamic tags for the Checkbox, Select, and Radio meta fields. The element will be shown or not if a user chooses from the list the value you type into the Value text area accordingly.
  • Exists and Doesn’t exist conditions mean that the element will appear or not on the page only if the chosen meta field is filled or filled with data accordingly.
  • Contains and Doesn’t contain conditions 一 the element will be shown or not only if the selected meta field contains or doesn’t contain the data you type into the Value text area accordingly.
  • Between and Not Between conditions allow displaying elements with values between or not between two values accordingly.
  • Regexp and Not Regexp conditions display or do not display elements if the element matches or does not match the regular expression value accordingly.
  • Is mobile device condition allows displaying elements on mobile devices only.

JetEngine Specific conditions

jetengine specific conditions
  • Is Profile Page conditions mean that the element will be displayed on the user’s profile page only.
  • 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 conditions

user dynamic visibility conditions
  • User meta is. The element will be shown if the user has a specified value in the meta field. You can add custom meta fields to users via Meta Box;
  • User has required field. Enter user fields that need to be checked into the Fields List textarea. It can be default WordPress fields (e.g., first_name, last_name, description, user_nicename) or custom meta fields added via Meta Box. The condition will be met if the user has the provided data in all the specified fields;
  • User meta is equal to post meta (put post meta key into value). Shows the element if user and post metadata have the same values. Enter the post meta key into the Value field to compare its value with the user metadata;
Warning

The “User meta is,” “User has required field,” and “User meta is equal to post meta (put post meta key into value)” conditions are available after enabling the Custom visibility conditions toggle in the WordPress Dashboard > JetEngine > JetEngine > Modules > External Modules tab.

  • User Can Add Post. You can restrict some users from publishing certain post types in the Profile Builder maintenance window. This condition means that the element will be visible to users who have permission to publish this type of post. Proceed to this tutorial to learn how to limit user’s access with Profile Builder;
  • User logged in. The element is shown only to authorized 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 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.

Posts conditions

posts conditions
  • Post Status Is. The element will be shown only on pages with the specified status;
  • Is post by current user. The element will be shown only on pages built by the current user. It can be used on the user Account page;
Warning

The “Post Status Is” and “Is post by current user” conditions will be available only if you install and activate the Custom Visibility Conditions add-on. Learn more from the Custom Visibility Conditions Add-on tutorial.

  • Is post by queried user. The element will be shown only on pages built by the queried user. It can be used only on the Profile Builder pages and in the listing for users;
  • 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 post type. 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 element will be shown for all posts except posts of the post type with a slug you will type in the Value text area;
  • Post Type Archive is. Shows element only on the post type archive with a slug you enter in the Value text area;
  • Post Type Archive is not. The element is visible for all post type archives except the one with a slug entered in the Value text area;
  • Taxonomy Archive is. Shows element only on the taxonomy archive, with a slug you enter in the Value text area;
  • Taxonomy Archive is not. The element will be shown for all taxonomy archives except the one with a slug entered  in the Value text area;
  • Is Search Results. Shows the element only on the Search Results Archive page. To learn how to create a custom archive for the search results, proceed to this tutorial;
  • Is Not Search Results. Shows the element everywhere except the Search Results Archive page;
  • Is Current Post Author. Displays the element only if the current user is the post author;
  • Is Not Current Post Author. Displays the element if the current user is not the author of the post;
  • Post Has Terms. Shows the element if a post has assigned terms;
  • Post Hasn’t Terms. Shows the element if a post doesn’t have assigned terms;

Activation of hierarchical conditions for posts

The Is Parent Post, Is Not Parent Post, Is Child Post of, and Is Not Child Post of conditions are active if the WordPress Dashboard > JetEngine > Post Types > Hierarchical toggle is enabled.

hierarchical post type

This toggle additionally allows making post type hierarchical, setting parent and child posts. If enabled, the “Page Attributes” option from the Supports drop-down menu in the “Quick Edit” panel sets parent posts. You can go to the hierarchical post type and click “Quick Edit” of one the posts, select the Parent post, and press the “Update” button.

quick edit post

Date&Time conditions

date and time-conditions
  • Time Period. The element will be shown only at specified time periods. Enter the preferred time into the Time From and Time To fields in the 24-hour format (For example, 23:00);
  • Days of week. The element will be shown only at specified days of the week. Set the desired weekdays in the Days of Week selector.

Listings

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.
is N item dynamic visibility condition

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.
visibility relations

Applying Dynamic Visibility to Gutenberg Blocks

The 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.

dynamic visibility in Gutenberg

Once you click on it, you will see a pop-up window with the Enable toggle.

dynamic visibility toggle

Turn it on and proceed to set up the visibility conditions for the current block.

dynamic visibility enabled for the block

Set the visibility type and add the necessary conditions.

visibility conditions added to the block

Once you’re done with the settings, close the conditions windows and update the page.

That’s all about the Dynamic Visibility for Widgets and Sections module intended to show or hide site elements according to different conditions.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.