Back to contents

JetEngine: Dynamic Visibility Module Options Overview

Enabling the Dynamic Visibility module
1 Step – Turn the module on
2 Step – Enable Dynamic Visibility

Setting the Dynamic Visibility module options
1 Step – Define Visibility condition type
2 Step – Choose Conditions
3 Step – Define the relation

This tutorial reveals all possibilities of the Dynamic Visibility module. You will learn how to set visibility of every element and show each of them only when necessary.

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.

dynamic visibility module on

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.

dynamic visibility enable

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.

visibility condition type

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

add condition

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.

conditions list

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.

user role

Equal

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.

Field

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:).

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

dynamic tags
  • 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.

Value

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. 

Not Equal

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.

Greater than

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.

Less than

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.

Exists

This condition will match if the chosen meta field is filled with some data (thus, exists). Then the element is shown.

Doesn’t exist

The element will appear on the page only if the chosen meta field is not filled with data.

Contains

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.

Doesn’t contain

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

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.

post type slug

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 slug

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

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?