Imagine visiting a landing page for the first time and instantly seeing offers in your native language or tapping a button that works perfectly on your mobile device or specific web browsers. With the growing technology, these are no longer an imagination anymore. All the above conditions and logics are now possible with Essential Blocks’ latest feature, the advanced conditional display for Gutenberg!

In this latest feature, you can control which content you want to display or which content you want to hide. With different visibility rules and conditions, this has become easy for every user. In this blog, you will explore more of it. 

Why Setting Visibility Conditions Is Crucial for Your Website?

With the changing technology, websites are bringing variations to their visitors. Different animations and marketing techniques can be applied easily and effectively to attract visitors and bring more traffic to your website. This conditional display can play an important role in a website. Why is it important? Let us have a look at it.

Personalizes the User Experience

Conditional display allows for showing targeted messaging to specific audiences. This gives two advantages. One is that the message is tailored to specific audiences and the other is that it gives a personalized user experience, so that the message won’t get bothered by it. 

Let’s take an example here. Suppose you are launching a campaign for the US citizens on the 4th of July. So, you want to show this only to the US citizens. So you can restrict the campaign details for the UK citizens by setting a conditional display. So that is how you can implement targeted messaging for your website.

Efficient Content Management

There will be some conditions where you need to show a specific type of content to a specific role of users. For this efficiency, you need conditional display to reduce the hassle of creating separate landing pages for different conditions. 

For example, let’s say you are running a course website. There are some free and premium videos on the course landing page. Now, you want to show premium content to the logged-in users. Rather than setting up two landing pages, you can utilize conditional display settings to show the premium content to the logged-in users.

Maintain Security and Consistency

For maintaining security and consistency, conditional display can be super helpful. With this, you can set who can see what, preventing sensitive information from your website. 

Let’s say you have an old pricing plan that is no longer available for your new customers, but you want to give access to the related information to the existing customers. So, for this, you can use an archived condition to give access to the archived documents to the existing customers.

Improves A/B Testing and Marketing Strategies

Setting up conditional display advances your A/B testing on your website and helps you to be more efficient in marketing strategies. Showing content based on different conditions helps you to better understand how your web visitors behave on the site. 

For example, let us say you are confused about the design of a discount offer. Now you want to understand which will be highlighted more and grab the attention of the visitor. You can run an A/B test by setting different conditions for different users and see the result based on click numbers and set an effective marketing strategy.

Use Cases of Controlling Visibility in Gutenberg using Logical Conditions

For each block of Essential Blocks, you can add different use cases of visibility controlling. Let us look at what the use cases of it are.

Offers in Special Campaigns

You can use conditional display for different occasional campaigns, such as Christmas and Black Friday, or seasonal ones, such as Winter or Summer. For example, show a creative banner for the summer campaign, and when the campaign ends, you can hide it from the website.

Time Constrained Content

On your website, you want to give a limited-time offer for a specific product. Then, for this, you can set up a specific condition based on the specific date and time. For example, you are running a 72-hour flash sale campaign. Setting up a conditional display will help you automate it. 

Device Specific Content

Whether your visitors are coming from desktop or mobile, with conditional display, you can specify it. For example, you want to display a ‘Call us’ button on your website. For desktop users, it might have different tool dependencies. But you can set this button only for mobile users and give a user-friendly experience. 

Geo-targeted Messages

Setting up specific locations for conditional display gives you an enhanced audience segmentation based on the users’ location. You can set up different blocks for the citizens of the US and the UK or any other country around the world, which gives you the flexibility of creating one page only, rather than creating multiple landing pages. 

Customize Browser-Specific Content

For security purposes, you might have to choose some specific content. For example, you have some specific content that has a security concern. Now, you can choose a specific secured browser where your visitors can access the content. 

After selecting the block, you have to set up different conditions, visibility rules and logic types. Before jumping into applying these, let’s have a look at what these different types are. 

Get Exclusive Conditional Display Logics with Your Block Library, Essential Blocks

If you have a website in Gutenberg, then good news for you! Essential Blocks has introduced its amazing new feature, conditional display. Here, you can set up conditions based on different criteria for different blocks. 

Essential Blocks already provides a variety of block options for the Gutenberg editor. Now, with conditional display, you can enhance the possibilities of your web-making experience. You can show different desired content with different logic conditions at a selected time on the Gutenberg editor. 

Condition Types: 

• Login Status: Select this condition to show the block for logged-in or logged-out users.
• User Roles: Based on your WordPress user roles, control who can see the block on your website.
• Browser: This condition defines for which browser (Chrome, Firefox) the block will be visible or not.
• Date and Time: To specify the specific period for a specific block, you can choose this condition. The time option is available with 4 available conditions: ‘Between’ two dates, ‘Not between’ two dates, ‘Exactly on’ and ‘Not on this page’.
• Query String: To set up the condition based on query parameters, the condition is used. Select a query parameter key and expected value to show a specific block on your site. 
• URL Contains: In this condition either you can choose either the current URL or add a referrer URL. Also, there is an option to set the ‘Match Type’ as Contain or Doesn’t Contain and in the ‘String’ field.
• Archive: To display or hide any specific section of the archive page, this condition is used. Select ‘Archive Type’ from the Post Type, Search, Dates, Author, and Taxonomy as your preferences. 

Visibility Rules:

• Show If Conditions Are Met
• Hide If Conditions Are Met
• Always Hide

Logic Types:

• All Conditions Must Be True
• At Least One Condition Must Be True

As a conditional display feature, it gives Gutenberg users a lot of flexibility. You will see a step-by-step process for utilizing it with Essential Blocks.

How to Show or Hide Content in Gutenberg [Step-by-Step Guide]

Now, it is time to get into action. Here, you will learn more about how to implement conditional display with Essential Blocks. Before getting started, make sure you have installed the Essential Blocks plugin on your WordPress website.

Essential Blocks’ conditional display allows users to set specific criteria for 7 different conditions. Here we will also talk about each of these. 

Step 1: Configure Conditional Display on Content

First, go to your WordPress website and choose a specific landing page. From there, select the block where you want to implement the conditional display. Here, we have selected a block and then from the right sidebar, scroll down to ‘Conditional Display’. Click on the dropdown and enable the extension. Then, you will see different conditions, rules and logic types there. 

Step 2: Set up Condition, Visibility Rules, Logic Types

Now, let us see how you can select different rules for different conditions. Here, for example, we are using the ‘Login Status’ condition type and setting different rules for it. 

Let’s say we have selected the block, and from the conditional display dropdown menu. Now select ‘Login Status’, whether you want to show the block to ‘Logged-in users’ or ‘Logged-out users’. 

After that, from the ‘Visibility Rules’, select whether you want to ‘Show the Content’ to the specific users, or want to ‘Hide it’. 

If you are setting up multiple conditions, you can choose whether you want to make all conditions true to show the update or a specific condition. Similarly, you can add different conditions in the same way. 

Essential Blocks Conditional Display in Action

Now, let us have a look at what our selected conditions will look like on the post page. First, as logged-in users, we can see the block like below. 

After that, we logged out and went back to the page and can see that the block does not appear since we have chosen the condition to hide the block from logged-out users. 

Make Every Block Count with Essential Block’s Conditional Display

Creating blocks and showing or hiding them based on the visitors’ behavior proves you care about your visitors and focus on the business’s growth. With conditional display, you can try it out more effectively and set out the rules to stand out from the competition. So, grab the latest feature of Essential Blocks and explore more.
If you want to read more exciting blogs, subscribe to our blog, and join our Facebook community to get along with all WordPress experts.