3 Use Cases for the New Divi Conditional Display Logic Update

[Music] hey guys hello and welcome to another tutorial by the team here at divi engine my name is roby and today we're going to do something fun we're going to take a look at the new divi update which is introducing the conditional display options now the divi team did a fantastic job of laying out some real-world examples of how to utilize the condition options they've got a nice version of a pizza restaurant where you can do a buy one get one free banner that only displays on certain days of the week then they've got another one where they display certain content depending whether the user is logged in or not and of course then also just showing that login prompt form for the user to log in on so that they can see the content if they are not yet logged in and then the last example they did was to capture an abandoned cart so they use that logic there to go in and check whether you visited the cart but did not check out so we're going to expand on that a little see how we can utilize these options to do a couple other cool things so stick with me we're gonna get right into it right now okay so to kick it off we're gonna expand on that first example that the divi team gave us which is that pizza restaurant that on fridays gives you two for one what we're gonna do is kind of look forward to maybe black friday or an event like that that happens annually and we're gonna set a upcoming sale bar so we're gonna have a countdown timer in there and we're gonna make it be visible only between certain dates so the first first thing that we're going to do is we're going to be in the back end of a divi website that's completely updated so that we've got that new update with the conditional logic in there now the way we're going to set this up we're just going to go ahead and go to a page and we're just going to say add new now we can give it a name and i'll just call this conditional and activate the divi builder and we are gonna let's use one of the pre-made templates just so that we have some content on the page there and let's select the pizza restaurant or the quality food one right here we'll say use this layout now you can use any of the layouts that's not really important you can use your existing site because what i'll be doing is i'll be adding a section here that will be displayed given the conditions that we set for this example which is just going to be to show upcoming sale bar on the landing page for our site okay so here we go this is loading up it is good and if i go to the visual boulder we should be able to see everything right there there we go and we are in business okay so i'm going to inject this layout right here so what i want to do is i'm going to add a new section i'm going to say it's a regular section and we just want it to be one column now what i'll put in here is i'll just say a countdown timer so go for that and then we'll say upcoming upcoming exam now this is not going to be the most beautiful piece of art you're going to see in your life it is just to give you an idea of how to use these options so don't judge me on my design skills please but uh here we will go ahead and we'll just maybe change this background color to be red so it pops off the page maybe a little bit of a darker shade of red there we go and maybe we'll give it just a little bit of border like 15 pixels and give it a nice little bit of rounding and there we go we've got a countdown timer i'm not going to play with the time too much but what would you want to look at now you can go on any of these options so where do these new conditional options live this may be the question let's go to the settings on this section when you go to advanced now you see this new tab called conditions and when you click on it it expands and you can add a bunch of conditions here when you click the button there's all these different options they really did a good job about giving you some versatility here and you know just so you can see here you can even go on just the module and if you go to advanced here it also has the condition so you can add the same condition so maybe you want different iterations of the same item on the page maybe based on the device that they're on or maybe the operating system and we'll actually get into that last point in a second but we're gonna not do it on the actual module we're to do it on the section so let's go back and to the conditions now what we want to say is we're going to go by interaction so we want to look at what's the date that we our users are visiting from so we're going to go to date and time and now we can go ahead and select that it's after a certain date so let's say we want this to start tomorrow on the sixth we're just going to keep the time the same you can even put a label in here so we'll say um a promo marketing start as an example in here and it will make sure that it's after and then we'll say okay cool promo marketing start and we can add another condition because we wanted the bar to go away at a certain point because of course our problem will run and then you know the timer would not be as relevant so let's just say it's gonna do the promotion until the 10th of october and i will just say promo marketing end loving those caps and there you go and then we'll just make sure that this says is before now you can put specific dates and times in here you can do it on certain days of the week then most certainly in the example in the announcement of the new um divi update used on specific days of the week option but we're just going to say before so that the marketing ends at that point in time we'll say yes and now we've got the start and the end of our marketing campaign so i'm going to save that and then what i'll do is i'll publish this page and we'll go check and see what's happening on the front end of our site now since this is before the marketing promo start time or date it should not show us that countdown timer that i put in there so let's see if that part of the equation worked there for us so site's loaded up we scroll down and there it is and now you might be looking at this and saying hey what gives you said that it's not going to show up i'm going to show you why it's doing that so when we jump back to the back end here we're going to go ahead back on that section open up the settings go to advanced and then the conditions now when you hover over your conditions here you see that that top one is crossed out because that condition is actually not met but the second one is now we set this to display if any of the conditions are true so because it's still before the marketing end date it's going to show it because one of the conditions is true but we're going to change this to say all conditions so that both of these need to be true for that to be displayed so let's go ahead and save that we'll update our page and once that has been saved we're going to check out and see what that does on the front end okay so let's refresh this and it should be gone now okay so now we can see no longer do we see this countdown timer that was right there on the page because now we set it to make sure that both conditions are true to display that now let's go back here and just to double check our work we're going to open the section settings again go back to conditions we're going to change the start date to be today and click save save and update and now we should see it back on that page once this is all saved up okay let's refresh the page here and if all went well we see our countdown timer again so now again this will only be displayed between those two days um for the start and the end and you can change that and you can think about different ways you can utilize something like this whether it be an annual sale every year or whether you just want to make sure that you've got some marketing um activities on your landing pages and stuff like that to cater to certain things so that is our first example for setting up a upcoming sale bar now you can do all sorts of cool things with stickies and other things we're not going to cover that in this but we certainly have on some of our other tutorials so definitely check those out on the divi engine blog page so that is that for this one okay so for our second example we're gonna build on something we've mentioned in the first example which is looking at device specific um content to be displayed so what we're gonna do is we're gonna go back here on the back end of our divi site and right underneath these uh upcoming sale counter that we put in in the previous step we're going to go and add a new section now we need to do a new section because remember remember we put those conditions on the section area in the previous step so we're going to just add a regular section single column and we are going to add first a text blurb and then we're just going to say download our app here and you'll see why i'm doing that in a moment there we go we're going to leave that left aligned well maybe we'll increase the size of the text a bit we'll just make that a h2 tag or something h2 there we are and now what we'll do is right underneath that we will add an image module and for this one i have conveniently uploaded a download windows option and then right underneath that i'll save that first i will add another one another image we are going to select our download on the mac app store option and then maybe what i want to do is i'm going to align this in the middle and then i'll use another great divi feature which is extend the image alignment to all the images in this column and say extend and now all the images are in the middle fantastic okay so now we've set the stage for utilizing the conditional logic now what we want to do is we only want the windows button to show if our visitor is using a windows machine we only want the mac application option to show if they're browsing on a mac so for that we're going to do some conditional options here but what i want to do first is why don't we just first save this and go take a look on the front end again just to see and make sure what this looks like we want to make sure that all the steps that we're doing here are working correctly so refreshing this we should see both those buttons right underneath the sail so we do have them both right here so let's go back and we will let's do this visually okay scrolling down so let's go to windows so we're going to select the settings for that we're going to go to advanced and now we should be kind of comfortable with finding the conditions we're going to add a condition that says on the bottom here what type of operating system is a user using here you see you've got a ton of different options and up here you can say it is or is not so we're going to go with is and since this is for windows we're going to select the windows box now you can add multiple ones here you can go as far as you know selecting apple tv playstation xbox linux a ton of different options and um but we're just going to leave it as this for right now we're only going to have one condition so i'm not going to worry about putting a crazy label on there so i'm going to say check the box i'm going to save that and let's go and save the page and see what happens on the front end now if all went well when i refresh that windows button should disappear because i'm working on a mac right now and there you go the windows option is gone but we want to add the condition to the apple one as well so let's just go back really quick just so that we don't have anything strange happening we just open the settings for that button or the image actually and then we go to the conditions we'll add the condition we'll go down to where it says operating system again we're going to say mac os and make sure that is is selected here we're only adding one condition so no fancy name save save save and update the page and just to make sure that that button works fine we'll refresh the page again and there you go our button is still there because i am in fact on a mac now this is a great one for like software developers that i have app on the app store or something like that to just target the devices that the users are browsing on but you know it goes further than that you can do a lot of different things by identifying the browser or the operating system because you know maybe you've got you know browser-specific extensions or something like that so really great way and another great feature of this divi conditional logic so let's go on to the last example that we'll cover here to expand your knowledge and how to use these conditional options okay so for our last example we want to take a look at other ways and other places we can use the conditional logic and this time we're going to integrate with woocommerce to just show a special message that goes along with a specific product and we're going to be doing this in the theme builder this time instead of just on the page so on the back end of our divi website here let's go to tv oh i went too fast the theme builder and i've already added a custom body for my um products so if you don't know how to do that definitely check out the documentation for the divi theme or our other tutorials on the divi engine website what i'm going to do now just to get this going is i'm going to edit this custom body and this is just a layout it's not the most gorgeous thing you'll see but we've got the product image right here we've got a product name the title the metadata short description and then just the add to cart if i went back over to this side and just went to my products let me do that really quick and what i'm going to do is i'm going to play with this cap option here so let's see what the cap page looks like right now okay so we've got our cap it's using that layout that we built right here on the page and of course i'm sure you can make something way more beautiful than i have right here we're gonna add just a little box in this area where i'm circling right now this is going to say you know what a cap goes great with and try to cross sell some sunglasses now this works kind of like the related products uh model that you can put in there but you know you can do so many other things with this like maybe you want to put a coupon code that relates to a specific product maybe there's some other type of cross cell maybe auto bump that you want to incorporate this is where you're going to do that and let me show you how so back on the back end here where i have my um product uh theme template i'm gonna add a module now i can add a module section i've already showed you that you can do it on various levels but we're just gonna put in a text box in here and then like i promise we're just going to say what goes good with a cap sunglasses there you go we're gonna just put a background we'll go with our red color again we'll give it that deeper red there we go and then we'll just go change our text color to be white so we can actually see what's going on we'll center that and then we'll just add some spacing some top and bottom padding maybe just to give that text a little breathing room and lastly we'll round that border with five pixels and that looks pretty good now the last step of course and you guessed it we go to the advanced tab conditions and we'll just add a condition in here now through all these many condition options that we have here we'll just go to the location so that where is the user on the page we're going to select products and now in here you're going to say only display if the product is and then we'll put cap in there it'll filter that first nicely select cap and make sure the conditions enabled to save save and lastly we will save this page now what do you guess is going to happen when we go back here we refresh the page we should see our message and there it is now well what what if it didn't actually work um and maybe i am just putting some smoker mirrors here no let's go to the shop and open up another product and see what that works on one of the other products in my store here i'm going to click on the beanie as an example and there you go the beanie doesn't have the message here so that message only pertains to the cap product that i specified in our conditions that we put for this module right here oops i doubled that one let's just open this go back to all conditions and here we've got our products and we said it has to be capped so again this is just another tool that you can use now to make your website so much more dynamic and speak to the certain users and nudge them towards what you want them to do yeah so with that folks that's it from me this is just a quick dive into the expanded features offered with the conditional logic for displaying content on your divi websites it works with the e-commerce it works with just general content logged in logged out to so many conditions and so many possibilities for you to increase how dynamic your sites are that you create in the divi theme now guys if you like this tutorial and the other content that we have definitely subscribe to the channel check out the blog to see some of the other great tutorials that we've created and definitely drop your suggestions down in the comments below and i will definitely look forward to seeing guys again again this is roby with the divi engine team thank you for your time and i'll catch you guys in the next video

Channel: Divi Engine

Views: 778

Keywords: divi, tutorial, how to, divi engine, wordpress, divi conditional logic, new divi feature, conditional logic

Id: QC-AL0DisDE

Length: 21min 22sec (1282 seconds)

Published: Tue Oct 05 2021