Recently, Elegant Themes has just released Display Conditions feature for Divi. The new feature allows you to hide an element — be it section, column, or module — by certain criteria. Previously, you could only achieve such a thing using a plugin. One of the Divi plugins that offer display conditions feature is Divi Plus.
The new Display Conditions feature is available for both Divi Builder as a built-in page builder of the Divi theme and Divi Builder as a standalone plugin. After updating Divi to the latest version, you will see a new settings block called Conditions. You can find it under the Advanced tab on the settings panel.
How to Use the Display Conditions Feature of Divi
As you have just read above, you will see a new block called Conditions on the Divi settings panel. You will see the block on the settings panel of all Divi Builder elements. Be it section, column, or module. You can simply click the plus button to add a display condition. The Display Conditions feature of Divi itself supports the following parameters:
- Login Status (Logged in or logged out)
- User Role
- Web Browser: Chrome, Edge, Firefox, Safari, Internet Explorer, Opera, Maxthon, UC Browser
- Operating System: Windows, macOS, Linux, Android, iOS, iPadOS, tvOS, Web OS, Nintendo, Xbox, PlayStation
- Cookie
- Date and Time: You can hide or display an element on a specific date and time. This parameter is useful to create things like a scheduled promotion material (e.g., banner).
- Page Visit: You can hide or show an element to visitors who have or haven’t visited a specific page on your website.
- Post Visit Product Purchase: You can display or hide an element to visitors who have or haven’t bought a specific product from your WooCommerce-powered store.
- Cart Contents: You can hide or display an element to visitors who have items on their WooCommerce cart.
- Number of Views: You can hide or show an element based on the number of times the associated has been viewed.
- Post Information: You can this parameter to hide or display an element based on the meta info of blog posts such as category, tag, author, and post type. You can incorporate this parameter with Divi Theme Builder to create more dynamic templates.
- Website Location: You can hide or display an element based on the location (page) on your website. For instance, you can hide or display an element on tag page, category page, date archive page, and search results page.
In this example, we will demonstrate how to use the Display Conditions feature of Divi for the following condition:
A section will be hidden from users who are not logged in
First, edit the page you want to apply the display condition to with Divi Builder. Then specify the section you want to hide and click the gear icon to open the settings panel.
On the appearing settings panel, go to the Advanced tab and open the Conditions block. Click the plus button to add a condition.
Select a parameter/condition you want to use. Since we want to hide the section from unlogged in user, we select the Logged In Status option.
On the next dialog, select User is Logged Out option. You can add admin label if you want it. Adding an admin label will be helpful if you want to add multiple conditions to an element. Make sure the Enable Condition option is enabled. Click the green checklist icon to apply the condition.
If you want to apply more than one conditions to the section, you can simply click the plus button to add a new condition.
Please note that some conditions depend on your caching plugin setting to work. If you use a caching plugin, you need to exclude the page you applied the condition to from your caching setting.
The Bottom Line
If you ever wondered when would Divi has a built-in feature to hide an element, the wait is over. You can update your Divi to the latest version (version 4.11.0 at the time of writing). The version introduces Display Conditions feature which you can use to show/hide elements by certain parameters.
One of the example usages of the feature to create a membership website whereby you can show the full content of a page only for logged in users only. This new feature allows you to go beyond with Divi without installing too many plugins on your WordPress website.