I don’t remember the last time that the Elegant Themes team spoiled us with two massive feature updates to the Divi Theme in one month. Divi now features Conditional Display Logic right out of the box and today we will show you 3 Use Cases for the New Divi Conditional Display Logic. Now don’t get me wrong, the examples given in the official announcement is fantastic, but we wanted to expand upon that a little further.

Does all this conditional logic stuff sound like gibberish? Well, let me help you out. Conditional logic means that a certain action will happen (or not happen) when a certain condition is met. A popular way to think of this is as “If this thing happens, then do that thing” If this, then that in code speak.

Don’t worry if that still sounds a little confusing, we are going to quickly look at how the New Divi Conditional Display Logic Update might be used to make you website more dynamic along with a few extra use cases for the Conditional Logic.

Let’s dive right in!

Video Tutorial

What does the Divi Conditional Display Update do?

So I eluded to what all this means in the introduction and it really is as simple as that. The Divi Conditional Display Logic will allow you to display certain blocks of content based on a condition set by you. It works with any post type, so is a perfect companion for WooCommerce sites all the way through highly customized sites that use Divi Machine and ACF.

Let’s say that you only want registered users to be able to see a discount coupon code on your landing page, you can set a condition that this code only is displayed once your visitor is logged into your site.

The conditional settings are conveniently located in the Advanced Tab of most Sections, Rows, and Modules. Where you set your Conditional Logic, depends on what your goals are. If you wanted to simply use the example above, it is probably better to set your conditions on a row or section. Now let’s say instead, you want to display different download links for your killer app based on the browser being used to visit your site, you might rather add the condition on the actual modules that contain the download links.

Let’s take a look at some use cases for the Divi Conditional Display Logic to help better explain how you might use them.

Divi Conditional Display Logic Options
Divi Conditional Display Logic Options

Divi Conditional Logic Use Case 1 – Upcoming Promo Countdown Timer

Divi Conditional Logic Use Case 1 – Upcoming Promo Countdown Timer

One of the many cool features of the Divi Conditional Logic is that you can schedule content to be visible not only on certain days as detailed in the official announcement, but you can also have it only show between certain dates.

This is useful for something like Black Friday where you would probably do some marketing on your website in the days leading up to the event.

Follow the steps below to see how you would do that with the new update.

Open one of your pages or create a new one and activate the Divi Builder

Add a new Section or Row that will contain the conditional content

Drop a Countdown Timer in there

Click on the settings for the Section/Row > Advanced Tab > Conditions > +

Scroll to Interaction > Select Date & Time > Select the Date & Time that you want your promotional marketing to Start

Make sure that Display Only If Current Date is set to Is After

Save

Click on + > Scroll to Interaction > Select Date & Time > Select the Date & Time that you want your promotional marketing to End

Make sure that Display Only If Current Date is set to Is Before

Save

With 2 conditions in there, you will see that at the very top of your conditions a new drop-down has appeared. It has two options, display if one of the conditions are met, or display if all the conditions are met. You need to make sure that All Conditions are selected.

Select Display if all conditions are true from the dropdown

Save

Awesome, now when this page is visited between the specified Before and After dates, they will see the countdown.

Divi Conditional Logic Use Case 2 – Device Specific Content

Divi Conditional Logic Use Case 2 – Device Specific Content

Have you ever visited a site to download some tool and it magically knew that you were visiting the site on a Mac or Windows PC, and served you a link for your device? Well, this is what you can now do with the Divi Conditional Display Logic.

This works great for app developers that want to get the user to a download in the quickest way possible.

Let me show you how easy it is.

Open one of your pages or create a new one and activate the Divi Builder

Add a new Section or Row that will contain the conditional content

Now add an Image ModuleΒ 

Click on the settings for the Image Module > Set the Image for the Device download link (We used Windows)

Advanced Tab > Conditions > +

Scroll to Device > Select Operating System > Check Windows

Make sure that Display Only If Operating System to Is

Save

Ok, our one device is set, now we just need to add an option for Mac.

Add another Image Module below the one we just added

Click on the settings for the Image Module > Set the Image for the Device download link (We used Mac)

Advanced Tab > Conditions > +

Scroll to Device > Select Operating System > Check Mac OS

Make sure that Display Only If Operating System to Is

Save

Congrats, now when someone visits this page, they will see the content corresponding to the type of device they are using.

Divi Conditional Logic Use Case 3 – Product Specific Content

Divi Conditional Logic Use Case 3 – Product Specific Content

Next up, I want to show you folks how seamlessly these new Divi Conditional Display Logic options integrate with Custom Post types, WooCommerce Products specifically for this example.

With the new settings, you can create conditions that allow you to show things like special coupons that pertain to specific products, or maybe you want to add a unique message when viewing a particular product category.Β 

This won’t only make your site more dynamic but will help you boost that bottom line.

Let’s take a look at how we can use the Theme Builder to create a Product Page Template that displays a message when a specific product is being viewed.

Head over to Divi > Theme Builder > Add New Template > All Products > Create Template

All Products > Custom Body > Build Custom Body > Build From Scratch > Start Building

Take a quick moment to build out a Product Page template for your site. If you already had one, it is fine to just edit that one.

Somewhere on the template, Add a Text Module

Click on the settings for the Text Module > Set your special text that will only be shown when a specific product is viewed (We set it to “What goes good with a cap? Sunglasses!”)

Advanced Tab > Conditions > +

Scroll to LocationΒ > Select Products > Check a Product (We checked Cap)

Make sure that Display Only If ProductΒ to Is

Save

Well done! Now when someone visits the product page for the Cap product, they will see our special conditional text on the page.

Now let’s examine the quality of those conditions…

Changing your Divi site URL - The End

Conclusion

There you have it, folks! 3 Additional Use Cases for the New Divi Conditional Display Logic Update. It’s still pretty fresh, so we are sure we will be looking at some other unique applications to help you guys build more dynamic websites for yourself and your clients in the near future.

If you’ve found some awesome uses for this new feature, definitely drop us a line in the comments or even send us a message, we’d love to hear from you folks!