marharytakaplia
Marharyta Kaplia
Copywriter
Updated on
Other

Dynamic Visibility for Elementor Explained

Most likely, there were situations when you wanted to hide some page or website content, whether it was sales with specific dates or something banned by the law.

Just kidding. 😅

But jokes aside, probably, you needed to hide the sections, which the non-registered users shouldn’t see. For instance, the My Account menu or Wishlist page. Besides, you might face this issue when creating the website template and understand the necessity of creating the one for a particular page. It is really tiresome and time-consuming.

Yet, Elementor — that we all love for its flexibility — gives us the chance to set everything as we need on our websites and put less effort into it. Let me introduce Dynamic Visibility for Elementor, which will make your life easier.

Table of Contents

What Is Dynamic Visibility?

Dynamic visibility is a module, with the help of which you can configure visibility logic for Elementor. Using it, you can set dynamic visibility parameters for everything you insert on the page, considering meta fields’ values, user data, and many other conditions.

You might want to show some page parts based on the user’s login status or provide the content only if the user satisfies the specific conditions. In a word, when you don’t want to show something you are building right now because it’s not ready and requires more improvements, you can apply Elementor visibility control and hide any widget, column, or section.

One more thing that shows why dynamic visibility rocks. ⚡

Elementor provides us with the impressive flexibility to create templates and customize every page in a unique way. Yet, sometimes your website requires you to use different page layouts depending on the case. Or, probably, you need to make just a few changes on one page, etc. 

In this case, with Elementor visibility control tools, you don’t have to worry about useless and endless duplicating data and changing the elements in several places. Apply dynamic visibility for Elementor instead of creating dozens of templates to meet the requirements, and set conditions to hide necessary sections on any page.

In such a way, you get full control over each element on the page. Profit!

That’s How It Works — Use Cases 

You may say: OK, it’s nice, but how does it look in practice? Is Elementor visibility control only about hiding registration forms from the logged-in users? Well, no. This feature shows or hides any part of your website, from a simple Login or My Account section to multi-criteria visibility rules. Not to sound proofless, I prepared several use cases.

Each website requires personal visibility logic for Elementor, so the display conditions will vary:

  • For instance, on one website, you might want to showcase the special promotions only on weekends.
  • On another one, you can set up exclusive discount coupons for subscribed users only. 
  • Also, you may need to demonstrate a particular picture gallery only to the respective clients.
  • Another need — to show different navigation menus either to registered users or non-registered ones.
  • Or you might want to display holiday notices or particular message only for logged users.
  • With the help of Elementor visibility control, you can personalize every website page for a particular group of users, depending on their role, status, or even age.

Let’s look at some other examples.

Suppose you launched a website for some small business, say cake shop. The days you are closed are Monday and Tuesday. Of course, you can update the working hours info each Sunday evening, setting a message about being closed. Then, you need to remove this message on Wednesday morning to show you are open. 

It is unnecessary and tiresome work, and, by the way, human factors cannot be excluded. The employee responsible for it can forget to do this one time. Thus, you just need to configure a conditional display and show the required message on particular days. It is where you will need dynamic visibility for Elementor. And this is simpler. 

Another use case: if the user is logged in, don’t show them a pop-up with “Become a member” or “Register now” text. Or, if the user isn’t logged in, you may set a Subscribe Form widget visible for them.

Let’s take more other examples.

Imagine you have a grocery shop or delivery website (or both combined). When a customer visits it, they will see a pop-up with a form to insert date of birth or a switcher to choose that the visitor is of the legal age. When the visitor submits this form, and they are not of full age, tobacco-related products and alcohol are hidden from the main menu (if you set up a mega menu) and footer. All ads with these goods are hidden too, as well as those sections on a shop page.

Lastly, let’s suppose you have a website with educational content, e.g., courses. You can configure the dashboard depending on:

  • users’ roles (admins or not);
  • students’ level (to show them Basic courses, etc.);
  • give a test for the first entry users to check their lever and to direct them to the suitable lesson or course;
  • create course page, where the lessons are opened only if the previous ones are completed;
  • open some new menu entries, when the user reaches a particular level;
  • add a promo of the related courses.

Overall, there are plenty of potential use cases for the Elementor visibility control feature.

Tools to Set Dynamic Visibility

You can configure dynamic visibility for Elementor with various tools. Most of them give you complete flexibility to show or hide any part of content based on the display rules you set. 

JetEngine by Crocoblock

The first tool I will mention is — no surprises — JetEngine plugin. After enabling the Dynamic Visibility for Widgets and Sections in JetEngine’s settings, you will be able to define Elementor visibility control parameters for various page elements. Dynamic visibility  for Elementor is located in Advanced settings, which appear when you click on any element, section, widget, etc.

Note that Dynamic Visibility is toggled on for every element separately, which gives more flexibility in configuring page parts. Also, JetEngine’s visibility module provides many Conditions, which are contradictory, so be attentive to not to mix them up.

The module provides two options:

  • Show element if condition met – implies that if the requirements you set for the element are fulfilled, it will be displayed on the frontend;
  • Hide element if condition met – in this case, if the conditions are satisfied, the element will be hidden.

Don’t get frustrated with only two options — with some analysis and creative thinking, there are almost limitless possibilities of how to set everything up on the page. You can choose and set General conditions, JetEngine specific, User, and Posts. This article from Knowledge Base gives a detailed description of each condition. So you can define the rules for Switcher fields, define whether the users can add the posts, display elements that are referred to a particular post type, show any section only on the Archive pages or pages that are attached to a specific taxonomy, and so on and so forth. 

After setting up conditions, you need to define the Relation that also has two options:

  • AND – visibility rule will work only if the predefined conditions are met;
  • OR – visibility rule will work if any of the predefined conditions is met.

The Relation option gives more flexibility for setting up visibility logic for Elementor.

Pro tip

The Relation option gives more flexibility for setting up visibility logic for Elementor.

Also, with the Dynamic Visibility Column Resize option, you can resize the column in a section: e.g., you hide the left part, enable the option and get an automatically aligned column. In case you don’t toggle this option on, you’ll get the column that will take 50% of the width.

Along with it, you can define Elementor visibility control for JetEngine form fields, so it’s easy to adapt them to the website’s needs. You can display or hide the form dynamically, fill it with the pre-set data, or even set multiple rules for every part of the form. Thus, depending on the user’s role, whether they are logged in or not, it is possible to demonstrate the forms that suit them.

Lastly, Crocoblock provides a free extra plugin JetEngine — Custom visibility conditions that registers custom conditions for the Dynamic Visibility module. With its help, it is possible to show/hide sections/columns/widgets only for the author of the post with the condition “Is post by current user” or show/hide sections/columns/widgets depending on which status the post with “Post Status” condition has.

Display Conditions

Mighty Themes Visibility Control for Elementor

Display Conditions by MightyThemes guarantee that you will be able to demonstrate particular content to only the users satisfying the display rule, like in the previous case. They offer 20 Elementor visibility control options. So, MightyThemes create a set of rules for some specific cases. 

So, according to your needs, you can set:

  • Web browsers display rules — define the preferred browser and showcase the content only to those users using the one you set. All browsers are listed in the dropdown menu, so choose and configure the condition.
  • Date/Time display rules — self-explanatory; set date and time range for any rule and display widgets/sections accordingly.
  • Weekday display rules — using this rule, define on which specific day you will display some banner or section with sales or else.
  • Operating system display rules — showcase the content to the users with preferred operating systems. With the help of this condition, you can hide or show widgets/sections even only for iPhone/Android users.
  • Device-specific display rules — depending on what device the users open the website on, mobile or desktop, you might want to show or restrict some content.
  • Country-specific display rules — set the conditions for targeting the audience from a specific country. Suppose you want to show the content to the users from the United Kingdom only. Add the country to the conditional rule on the particular section and show it accordingly. 
  • User role display rules — depending on what role the user has, whether they are Administrator, Subscribers, Authors, Editors or else, define the content they will/will not see.
  • Archive display rules — MightyThemes created this one for developing complex website structures. Set various publishing rules considering Taxonomy, Post Types, Date, Author, and Search.
  • Singular page display rules — define the conditions for some specific pages, like 404 page, home page, etc.
  • Advanced display rules — set more conditions depending on the users’ IP, referrer or Search bot. In such a way, you can hide some content from Bots.

PowerPack

PowerPack Display Conditions for Elementor

PowerPack provides one more tool for configuring visibility logic for Elementor — Display Conditions. This one offers a wide range of options for showing or hiding sections and widgets and provides a large number of conditions to choose from. With the help of Display Conditions, you may show/hide various page attributes on the basis of user role, date, time, user id, etc. Thus, PowerPack allows you to set restrictions on widgets, posts, pages, particular pages, custom post types, and posts attachments.

Within Display Conditions, the rules are separated into the following categories: User, Date & Time, Page, Archives, & Misc. So any section or widget can be visible or hidden according to different user conditions.

Like the previous tool, Display Conditions allows you to set display rules based on:

  • User role — whether your users are Administrators, Subscribers, Authors, Visitors, etc., you can personalize the pages for them, as well as for Logged In or Logged Out users.
  • Set specific rules for Operating system and Browser — go to advanced Misc settings and choose the suitable OS/browser.
  • Define the display rules for: Current Date, Current Time, Current Date and Time, or Specific Day, using Specific Day Condition Logic.
  • Configure conditions for Archives and Pages, setting the restrictions based on Taxonomy, Post Type, Author, Search, etc.
  • Display considering Advanced Custom Fields to hide or show the contents based on the fields value: Textual, Choice, True/False, Post, Taxonomy, Date/Time.

The Bottom Line

Now you see that it is easy to configure Elementor visibility control, and it isn’t scary anymore. A variety of tools will help you to personalize every element on the pages according to the users’ roles and your purposes, and make your website more flexible.