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
Table of Contents
Difficulty
Easy
Time
15 Minutes
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 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
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
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…
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!
Figured some people might have a very good use out of my snippet. The main problem as of writing this comment is the lack of “Close” X element for which I for myself have found a very good solution. The code goes as following and can be changed depending on the user needs. This code requires row element to have the class and then anything inside it with the class .popup-close will remove the row.
– Change this for section if you use section.
$(‘.popup-close’).on(‘click’, function(){
$(this).closest(“.et_pb_row”).remove();
$(window).resize();
$(‘#page-container’).resize();
});