Elegant Themes just released new Condition Options for the Divi Theme. They have opened up an entirely new world of possibilities and today I'll show you some of those possibilities.
The condition options available can help simplify your plugins and allow you to utilize the power of the Divi visual builder.
I'm going to be building an alert bar across the bottom of the homepage that is really going to be call to action. And it's cool because we're going to play around with conditional logic. And we're going to walk you through how to accomplish that with the Divi Builder pretty easily. So as I start off every video, let's go into the WordPress. And we're going to look down here at the bottom right hand corner, we're using WordPress 5.8. point one and Divi is four, point 11.1. So Elegant Themes had a little bit of time to work through that first round of bugs with four point 11 that introduced conditional logic. And now we can kind of play with it a little bit and see what's what.
So what we're going to do here is we want an overlay that could work on any page. But specifically, it's going to show up on the homepage here. And that's what we're going to build. We're going to build this so that it shows up on the homepage only. So let's go into theme builder. And we're going to add a new template. And we're going to check us on homepage only. And we're going to create this template.
So what we're going to do here is we want to use the homepage that we've already designed, right, so we've designed that and pages, the layout is there. And I'll show you kind of what that looks like. So we'll click up here. We'll just leave this right here for now. And we'll go to the homepage. So we've got this social media consultant layout that comes with Divi, we loaded it up, it's got the page here, and we're good to go. So it's the homepage, right, we want to put a bar across the bottom of it.
So let's go back into the backend, we're going to go to Divi and the theme builder. And we're going to add that new template like we just did only use it on the homepage, and we're going to create that template. And because we have that page built on the homepage, there's one thing we're going to have to do that's a little bit different whenever you're in the theme builder. So we're going to add the custom body. And we're going to build custom body. And here we're going to actually build from scratch.
So build from scratch, we're going to insert a row. And I'm going to start this with text. That way, we have just a section here that's got some text in it. And I'm going to go ahead and add a second section, regular insert a single row or a row with a single column. And I'm going to add this module post content. And what that does, is that it takes whatever design you have on whichever page, this theme builder layout is going to be on. And it makes sure that whatever you've built inside the visual builder for that page shows up right here. So there's a few things that we've got to do.
The first thing you really want to do, and I'll show you the difference real quick, I'm just going to leave it like this with the spacing and everything here. And I'm going to style the bar. But I'm going to leave this content, kind of as it is and show you one thing that's critical to make sure that the layout looks good, so stick around for that. So what we're going to do is style this top bar, right, so we're going to go to the background, I'm going to add this color. And then I want to jump into the text and actually change this text join to save 50% I want to make this text stand out. So we're going to go white, I'm going to select Poppins, it's always a great font looks good, we're going to go ultra bold, and I'm going to increase the size.
So that really stands out. And now we've got to shrink this thing down, it just looks kind of ridiculous being that big. So we're going to go back into the settings in the section, go under design, spacing, and then we need to change the top and bottom padding to zero. That way, the only padding that's here is on this row and in the columns of material or of content. So that doesn't really do a whole lot right join and save 50% what we could do is add a button that has a call to action. And it could look something like this, we could add a second column, hit the button. And I'm going to go through this really quickly but we can style the button. Make the text size a little bit bigger, make the font blue make the button white, make the border transparent. Change the font of Poppins goes super ultra bold and maybe uppercase and change the content to join now or save now could be something along these lines right and then the buttons the left oriented we can make the text over to the right and then things look.
Okay, not good. But okay. What will make it look better as if everything is vertically centered. And I'll show you a quick tip on how to do that if you go into the column itself that you want to center vertically, the content go into advanced Custom CSS, and we're just going to put in margin, auto zero pixels. Now the left and right aren't, and that will do it. But you see things still don't look right. And that's because by default, the column height on divy is not equal. So if we go back to the column settings are from the column settings into the row settings, hit design, go under sizing, and this option here, equalized column height, it will push everything to the middle.
So this looks pretty good, I think that we could probably shrink things down a little bit more. So we'll go to row spacing. Let's do 10. I think that looks pretty good. So this is one option, right? It is definitely one option, you can do it like this. And this would be really cool. It would look good. What I think I'm going to do though, is I'm actually going to delete this second column, I am going to get over this text, I'm going to center the text rather than right align. And then I'm going to change some of this spacing again, because 10 was good when we had the button. But I think we need to go up a little bit here. And I think 20 is probably the number so let's do 20. And we're going to change a few of these things, right.
So I would say we link up the section, we're just going to create a link out of this one, and this is just the placeholder. And what we're going to do is change this background color on hover. And so we're going to go from Blue, to black. And then we're going to come over here for the transition. And by default, Divi already has a transition in place. So I think we're going to be okay to leave it just like that. So let's save this. And then we're going to exit the theme builder. And I'm going to show you what this looks like on the front end because we're not quite where we want to be. But we're making progress.
So we've created this for the homepage, I'm going to save this theme builder layout. And we're going to go out to the front end of the website. And you'll see that the this is in line. And as we hover over it, we've got this all the way across full width, basically a button. But you see how the layout has shrunk. And this is absolutely not what we want. So we need to go do some more work in the backend of the site. So we're going to jump back into the theme builder. Go back into the homepage, we're going to edit this custom body. And a few things we need to do. Because this was scrunched, you see, it really just took up the space of this row, we need to change the spacing on the section. So we're going to go under section, and both left, right and top and bottom padding, we're going to get rid of.
So that's one piece. But the other piece is that we need this row to be full width. So to do that, you go into row design, and then sizing and this max width, it's currently at 1080 pixels, we need it to be 100%. We're going to center align. And then we're also going to kick this normal width out to 100%. So when we do that, I'm going to save it. And we'll jump back into the front end so you can see the difference that it's made. So we're getting closer, we're getting closer, right, we've got the layout back full width, things look like they're supposed to, we're getting there, but we're not quite there.
So we're going to what we want to do is take this bar, put it fixed across the bottom. That way it doesn't impede the view of the site, it's just there. And it's something that's going to add to the site not really get in the way. So we're going to do is go back into our layout. And we're going to work inside of this section here. So the first thing you want to do is pull this up go into settings, under Advanced, we're going to go to position. And we're going to make this fixed, and it's going to be fixed to the bottom, and the Z index has to be over the top. And so when we do that, we can hit save, we're going to save our layout. And we're going to go back to the front end. And you'll see now that things are at least partially the way we want them.
So as I scroll, we've got this bar across the bottom. That's really cool. Join us to save, you know, we click here, it's really just gonna jump back to the top of the page because it's got an anchor link in there, but the layout is pretty close to what we want. The problem is though, is that this is going to show to every single person every single time they come to our site and that's where the release This conditional logic is really powerful. So we're going to go back one more time into the theme builder, open up our layout that we've been working in. And we're going to add that conditional logic to this section down here. So to do that, on the section, we're going to go to advanced. And we're going to look at conditions. And this is where it gets pretty fun.
So when we add a condition, there's so much that we can add, right location could be a tag page, a category page, a post, pages, media, any of that stuff, the user can be logged in user can be logged out, you can do it by specific roles. So if you just want someone who's not signed up, you have them logged out perfect, it'll show up, you can have someone who's an admin get an alert, you can do date and time, page visit, number of visits. All these things, someone on a specific browser can do that as well. You do it as a cookie.
So what we're going to do here is I want to do number of views. So that's going to be the first one, How many times will I display this, so I only want to show it to someone one time they interact with it, that's on them. And this could be different depending on what your situation is. And I want to reset that after 14 days. Right. So I've got the number of views only want to show it once. And I only want to show it to them once every 14 days. The other part is I can do date and time. So is only after a certain date. It's only before a certain date is on a specific date, or a specific day of the week. Perfect example is for restaurants, right? Let's say I have specials on Monday, or Wednesday, let's say it's wine down Wednesday, and only want to show this thing on Wednesday, I can check Wednesday, it's going to show all day, or I can split the times. And I can have it to where it repeats every single week, it could never end or you can set a date where it ends.
So if you're running a promotion in your restaurant from January to March, and you only do it on Wednesdays, you've got the power to do that here. And so this right here is a combination of the two, right, so it's only going to show once in a 14 day period. And it's only going to show on Wednesdays. So you can make combinations of all of these things. And let's kind of walk through some of the other ones. So display only a post type is you can pick. So this is another cool one, you can you can have a banner that shows up only if you're on a certain post type. So if it's if it's blog post, sure if it's pages yet, if it's a post type, which would be what we just did. So you could do also a category.
So if you have multiple categories in your blog, you can show it for only certain categories. If you tag, if you have a complex tag system for your blog, you can do that. I don't have any tags set up on this one yet. If it's only for a certain author, you know, if you want to link off to another off author's website, there's so many different things. user role was another one. If you've got custom user roles, you know, something you want to show students, if you're doing an LMS, you can do that. Also, login status, if the user is logged in, or the user is logged out, that's really useful.
You can have a custom menu at the top with device builder based on whether or not someone's logged in or logged out. That's pretty freakin cool. And whether they're a certain role. So you can have a student menu for someone who's logged in, and you could have an admin menu on the front end. So if you're testing things you can do that it's it's really powerful. There's so many things that you can do with this. But again, number of views is all I'm concerned with in this one. And again, just so we can go back to what I showed you a second ago, I only want this to show once and it would refresh after 14 days. But for the for the purposes of this video, let's say we want to only display this twice. So I'm going to save it. I'm going to save the layout, I'm going to exit and we're going to jump back into the front end of the site. And we're going to show you that this thing is live right so it's down there, it's active. And then I'm going to refresh the page.
So refresh the page. So this is the second time I've seen this banner. Right. I'm going to refresh the page one more time. And now the banner is gone. So third time I've seen this page, the banner is not showing to me anymore. So if I waited 14 days after what we set up in the conditional logic, I'll wait another 14 days that banner would come back. So this is some of the power of what you can do with Divi especially with Divi 4.11. So this is Freaking incredible. There's so much more that you can do with Divi, specifically the sticky options, like the combination of the of the conditional logic and sticky options really bring a lot of power. So you can go ahead and check out the video I've done on sticky options and just keep this party going.