New Divi Feature - Divi Condition Options

imagine if you had a website that is able to display content on your website based on rules that's amazing now this is the feature that divi released called the divi condition options this feature is so powerful let me show you how it works okay so over here i've switched on to my website the very first thing you need to do is to make sure you don't have any updates so you want to be running the latest uh 4.1 update from divi okay so you want to come over here to appearance click on themes just to check what version you're running on so if you click here on divi you'll notice that i'm running the latest one 4.1 now 4.11.1 okay so once you have this installed pretty much you're good to go now for our first example in fact let me show you where all these features are i'm going to create a brand new page by coming over here and clicking on add new so i'm going to close this and give this page a name so i'm just going to call this login now okay let's use the dv builder all right so for this page we're going to build from scratch okay so i have my page created so what i'm going to do now is just to add a module in here so i'm going to go in and add a blurb and show you now where these features are so i'm going to select my blurb and i'm going to save this so let's first now see where we can find the new dv condition options so to find these what you need to do is to go into the settings of either your sections rows or even modules next you want to come over here to advanced and then this is the option conditions so you select that so the conditions are for this section because i'm in the section settings so if you click on this plus button here are all our conditions so let's say for example uh i want to set a condition based on log in status so i could say okay this will display if user is logged in if they're not logged in they will not see this okay so that's one condition there's quite a few we can choose from so for this condition here we could say posts and then we can say display only if the post is lorem ipsum or hello world let's go for another one we can even go as far as displaying this if your product is whatever product it is so as you can see this is super super powerful you can do a lot of uh display conditions using this feature okay so now that we know that we can do this on sections let me just show you quickly that you can also do this on rows so on the rows i can click here on this gear icon go to advanced click on conditions and again we'll have our same conditions for the rows all right now it's time to show you how we can use these conditions in real life situations so in the first example what i'm going to do is i'm going to create a login page and on that page i want to show a specific message for those who are logged in and another message for those who are not logged in so basically if you're not logged in i need to display a form to say hey log in right if you're already logged in then i can show the contents let's do that so over here this is where my message is going to go in fact you know what let's add a login form okay so i'm gonna click here on this plus button and search for my login form and here it is so i'm gonna type my message here okay so here's my message uh the title here just says sorry and you need to be logged in to view the contents okay great so let's just stylize this quickly i'm going to come over here to the background give this a background color and i'm also going to give this some rounded corners and also customize the text so with the text i'm going to go in set this to pop-ins because my site has pop-ins as my main font so let's increase the size a little bit here and i'm also going to do the same to the paragraph by clicking here on this little blue icon so let's change this as well there we go let's increase the size maybe to about 16 or 17. okay that's looking great let's give it some rounded corners just to make this look much better okay so i'm gonna go to border let's give this five there we go okay so i'm not gonna worry too much about this side here so let's just leave this as it is and then finally let's adjust this the width of this form i'm going to come over here to sizing and i'm just going to reduce this to about let's go 76 we're going to center it and now before i exit this is where we need to go and decide how we're going to show this information so i'm going to save this and i'm going to i want to duplicate this so now i have two of these so in the top one here what we're going to do is to go into the section settings because i want to do this based on sections so i'm going to come to advanced conditions and then i'm going to click on this plus button here and say okay logged in status so display only if user is logged out okay that's what we need right now for this one bang i want to save that and here it says if you are using a caching plugin this should be excluded from your um basically you need to uh remove this page from the caching because this won't work well okay so i'm gonna save that now let's go on to our next section here and this one here i'm gonna delete this add a video because that's the content i want people to see when they are logged in to this page so i'm going to say video now we can do a few things with this video we can come over here to overlay and we can add an overlay image so let's say this video is about maybe travel i'm select that upload image so now you can see here that it says updated okay so i have i have this video set i'm going to save that and i also need to add maybe some text to explain what this video is about so i'm going to click here and add text module okay so i've got a bunch of text here i'm going to center it in fact i'm going to center everything like that and then i'm just going to make this bold and then i'm going to come over here to design text and set this to pop-ins because this is the font that i'm using throughout this tutorial okay great so i'm just going to increase the size a little bit here and save all right so let's bring this to the top of the video like that now this video is a bit too wide i may need to go in here and reduce the width by coming over here to design sizing and let's bring this down a little bit maybe to even about 66. great i'm going to save that now here's the thing i want this to be visible to those who are logged in so i'm going to come over here to section settings advanced conditions click on this plus button so i'm going to say log in status user is logged in so that's when this is going to be displayed i'm going to save that save one more time so now what we're going to do is to test and see if this is working so i'm going to exit the visual builder now save and exit okay so straight away i am logged in so i can see the video great but what if i am logged out or a user is logged out well let me show you what we can do here i'm going to open my website in an incognito window okay i'm going to paste my url like that and we should see the login form if this works okay and bang you see it's working now so the same page is the login now page i'm showing this message here because the users are not logged in or the visitor is not logged in but when they are logged in the same page they can see this content so as you can see this is super powerful it is amazing you can use a lot of these conditions so in so many so many ways your creativity is going to be the limit of how you can use this feature let me do another example okay so this time the idea is let's say you're an affiliate marketer or you write blog posts right so you want that when someone lands in a specific blog category they get different messages based on the category now why would you do this well let's say your blog is about travel and you have a category of posts that specifically focus on the clothing that you wear i mean it could be hiking stuff or whatever it is and another one could be maybe the photography gear that you use so you would like perhaps maybe give discounts or offers to those that go to the category of the gear or have another offer for the category of the clothing stuff let's do that okay so let's dive in so back over here i'm gonna go to dashboard and then i'm going to come to my where are we let's go to posts click on so i'm going to start by adding my category here in fact i can just start typing here so my first category is going to be called filming gear and i'm just going to edit this uncategorized change this to hiking clothing or something along those lines great so let's change this from uncategorized to that okay update so here we are we have two categories and if you want to see these categories you can just go to all posts and you can see here we have these two one in hiking and in fact both in hiking let's change hello world i'm going to go in and click on edit we're going to change this to a different category so we want this to be under let's come over here where is it gone oh there we go categories filming here okay update so now we have these two posts in different categories fantastic and just to make this look great okay in fact we have an image here it's not related but that's fine right so what we're going to do now is i'm going to demonstrate that you can use this new divi condition options also in the theme builder that's how powerful it is let's dive in okay so over here now i'm gonna go to my site go to the theme builder here okay so what we need to do is to go into the blog posts okay the blog post template so we're gonna go in here so now i need to set two messages so let me just delete this and i'm gonna add a new row single column and in this row just to make this um different i'm gonna go in and give this a background color so that we can see what we're doing or what we're working with okay so that's our background color i'm going to go in and further just give this a bit of color here and on the design i'm going to go in and in fact i'll leave this as it is next i'm just going to drag this to the top because it's easier if we have this at the top because that's where we're going to have our message so the idea here is to display information based on the post category okay so my first one here is going to be a call to action so i'm not going to go in and really stylize this i'm just going to add a link here so i'm going to go to background let's change the color okay and let's also add a button url to show the button okay great so we have a button url here and in the design here let's just give this a bit of padding left and right let's make it 20. okay that's great and also in here let's give this a bit of padding as well go to design spacing and left and right okay so just want to give this a bit of a design okay so that's the message that we need to show for anyone that goes into the hiking gear category okay so this is the message and to make it also clear as well i might as well go in and uh just rename this yeah to hiking gear so let's call this hiking clothing i think that's what i called it okay great so we got hiking clothing so we're going to save that and now what we're going to do is we're going to duplicate this and add another one so i'm going to duplicate it so this one here is going to be let's add a different background color there we go so this one here is going to be different because we want this to be the filming gear okay we are going to save that so we have two here the hiking gear and the filming gear so now let's add our condition so i'm going to go in here go to advanced conditions add condition so now i am going to say post category so display only if the post category is so over here if you scroll down all the way down i have filming gear so this one here is for filming gear so i'm going to go ahead and select that and save save one more time now this one here is for hiking gear so i'm going to go in go to advanced and we need to go to conditions and let's add our condition and it's going to be post category so this one here is going to be hiking so i'm going to scroll down hiking clothing bang okay so now hiking clothing is clothing is selected i'm going to save that save one more time and let's save this template so in the template here it i mean it shows both because it's just a template but when we go to the actual uh post it's going to show this information differently okay so i'm going to save this and close out of here save all changes so now let's take a look at our blog post so i'm going to come all the way down here to posts in fact it's up here all posts okay so let's view our first post and this one here is the lorem ipsum and if all works well it should show the hiking clothing message that we have because that's the category over here so that's lorem ipsum and this is hello world hello world should show the filming gear so again i'm going to view this in a new tab so let's start here with lorem ipsum which is this one right here so when i go to this one you can see the message is now showing and this could be a call to action for the hiking clothing so this could be maybe perhaps you promoting a specific uh product that you are talking about in this video or it could be you know asking them to join their mailing list so that way this will be a hiking mailing list and the other one will be a filming gear mailing list okay so let's go to hello world and again we're here and this one here is showing a different message so even if i refresh this you can see that we are now able to show different messages on post based on the post category so as you can see the options are endless now i've got one more example that i need to show you and this one here is one of my favorite so what we're going to do with this is we're going to have a message on our website on the bottom of the website so this message is only going to show three times and it's going to disappear because sometimes it may be that your visitors come to your website they see that message over and over again it gets annoying so we want to show them three times and then make it come back after 14 days let's dive in again for this one to work we're going to go into our website here and we're going to set it up in you know what let's do it in the actual website body so we're going to come over here build global body we're going to build from scratch uh single column so we want a post content because we want that all our content here shows on our website or on our web pages so i'm just going to make this 100 percent we're going to also do the same here 100 and save so now we're going to use the part where we're going to use our condition sections okay so for this we're going to add a brand new section so i'm going to click on this plus button here regular section and in that section we're going to add a text message okay so in here we're going to um say click here to get your this or click here to become a vip member right in fact i changed my mind uh we're going to call this click here to get 50 discount okay so we're going to center this and let's just change the font here to pop-ins as well so it looks quite uniform with the rest of my site so here we go i'm going to select that and my text is going to be white here because i'm going to have a dark background because i really want this to stand out so let's increase the size a little bit here and set my text to a very light color and then let's save this okay next i'm going to come over here to my section settings click on background and give this a background color excellent so there's a few things i need to do here and that is we've got too much space on the top and the bottom here so let's fix that so we're going to come over here to spacing and set this to let's say 20. okay so now that's the that's looking much better now while we're here what is important as well is to add your link to the 50 discount so this is where you would add your link so i'm just going to add a blank one and while we're here as well let's go to advanced because we are going to need to add our position so for our position we want this fixed and we want it fixed at the bottom okay we want it fixed at the bottom here next we're going to now go into our condition options and here we go conditions click on this plus button and we are going to come over here number of views okay let's select this one and we're gonna say number of views three and reset after we're gonna say 14 days but you can also choose hours minutes and so on but i'm going to leave mine at 14 days okay so it's gonna display for three times for per user and then show again after 14 days i'm going to save that save one more time so this is now our message i'm going to save this now i can see here i have padding on this main section background let me just remove that but this has nothing to do in fact you know what let's just make this transparent and on the spacing here just add zero to the top in the bottom of this content area okay but our main focus here is going to be this message that we have here at the bottom all right so now that we have this let's go to our homepage and see if this is gonna work so i am going to save all changes and now let's go to our home page okay so now when we go to our home page here and refresh we should be able to see our message and here it is click here to get your 50 discount right so this will always be at the top until we get to the footer okay so now what i'm going to do is i'm going to refresh this three times so you can see or test to see if this message disappears okay so we viewed it once okay let's refresh that's two that's three now this should disappear let's have a look okay so the message is gone it should be back after 14 days so as you can see there's so many ways that you can implement the divi condition options into your design process now i'm going to be doing more tutorials and more scenarios on how we can use this feature to enhance our websites if you haven't subscribed please do subscribe by smashing the like button and also clicking on the bell notification by doing so you'll be notified when i release new tutorials until next time thanks for watching and i'll see you in the next video take care

Channel: MAK

Views: 2,643

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: 4ugAL9Fxfsg

Length: 20min 46sec (1246 seconds)

Published: Wed Oct 06 2021