0:00:00
In this training, we’re going to take a look at how to properly build an overlapping call to action block inside of your website’s footer. Now this is going to be different from a typical overlapping element, which is very easy, and I’ve done tutorials on YouTube on how to do a myriad of ways to do overlapping elements. But when you take something like this and you try to put it into the website’s footer, where it’s going to automatically show up on all different pages, and there’s a lot of different scenarios, obviously, for how those pages are designed and laid out, it creates a lot of challenges and a lot of complications. It’s actually taken me quite a while in a pretty solid process of trial and error and running into different challenges with doing something like this. Then I felt like, hey, I finally found a really good working solution that is scalable and doesn’t require a lot of manual tweaks and adjustments. You basically build it the right way once, and then it’s going to be good to go from that point on. It’s enough, and it’s such an important concept and use case that it deserves its own dedicated tutorial.
0:01:11
That’s what we’re going to do here from scratch. I’m going to show you how I’ve approached through in the past, how other people approach it, and the problems with those approaches, and then I’m going to show you the way that I approach it now that solves all of the headaches. Let’s go ahead and dive in. I’m going to pull up first, and we’ll make sure our recording is all good. Actually, I want to shrink this down a little bit so that we’ve got it in the proper window. Great. This is the Figma file that we’re going to be using as our inspiration. You can see here that, let’s talk first about why do we want an overlapping call to action in our footer. Number one, it does bring a lot of focus to the call to action. Instead of the call to action just being a normal section, it’s got this overlap effect which calls attention to it. Since it’s a call to action, you want the attention called to it.
0:02:08
That helps conversion rates. Number two, it breaks up the general flow of the page. A lot of people and clients especially, they’ll complain about pages being blocky or boxy. What they mean is it’s just like, well, we follow the box layout model in building websites. It makes sense. There’s a lot of boxes and boxes and boxes. When you overlap things, just like when you offset things, it takes away the sharp lines a lot of times. It just helps break up the flow of the page and it makes the page more interesting. Clients like it a lot. Again, it’s a good thing to do with calls to action because that’s yet another reason why it brings more attention and focus from the visitor to the actual call to action. It’s a good practice. The problem is doing something like this, executing it properly in the real world, is not so easy. If you’re going to do it on just any generic page, very easy.
0:03:11
If you’re going to do it in a template where it’s going to show up automatically on all of your pages and you don’t actually control the content that’s above it, that is where it becomes much more difficult. That’s the problem we’re going to try to solve in this tutorial. I’m going to hop over to our training site where I actually have the footer built out. It’s just missing the call to action. That’s what we’re going to build together. What I also want to do in this tutorial is add additional complication by showing you how to conditionally show or hide this CTA. The reason I’m doing that is because I’ve already done a tutorial on how to show and hide things in templates. This is different because when you hide this, other things have to adapt when it’s not there. It adds additional complication. You can see right here that the spacing of this footer seems like if I got rid of that CTA, in fact, let me do that, look at all this extra spacing that’s up there.
0:04:16
We can’t have that happening. I want to show you how there’s a special technique that we’re going to use so that when the footer CTA disappears, so does the styling changes that we’ve made because to make that CTA work in the first place. This is hard to explain. Why don’t we just go start building it? Just trust me. There’s a lot of complication and a lot of hurdles and a lot of headaches and I’m going to show you how to solve all of them. How about that? Let’s build, I’m not even in the template, I’m on the homepage. I’m going to go ahead and hop over to our, not our main template, we want our primary template. I’m going to go ahead and open that and we’re going to start by just building the yellow CTA.
0:05:01
I say yellow sometimes, I mean gold. Gold is a much more refined name for that color. Let’s take a look at it while oxygen is doing its thing loading. It’s basically, we’re going to have a div. We have a background image pattern in this div. We’re going to have three elements, a heading, text and a button. We may end up using this CTA somewhere else on the site, I doubt it, but maybe we will. Instead of using pure utility classes for this, we’ll actually create custom classes and style it so it’s a global component. It’s global by default in the sense that it’s in our footer template. If there is every use case where we wanted to use it again, not in a template, it would be nice if it was built with custom classes instead of utility classes, so that’s what we’ll do. I’m going to grab our footer here and we’re just going to add a div. I’m going to call this div.
0:05:59
We’ll do footer and then double underscore. Let’s do CTA. Footer, double underscore CTA. That’ll be nice and easy. Actually, let’s not do that. Let’s do footer call to action. I already had one in there, I just saw it and I was like, I used that in a training before and I don’t want any pre-styling in there. Well, this is to footer CTA too. How about that? CTA too. I don’t want it to be so long either. Footer CTA too. That’s what we’re going to rock and roll with. I’ve already changed the colors in ACSS, so we’re pretty good to go there.
0:06:35
I’m going to make this 100% width and I am going to make the background color, var primary. That’s our gold color. I want to add some padding to this. I am going to go var. Let’s do like Excel. Then I’ll just apply that to all sides. We’ll see how that works. I also want to go to our layout and I’m going to go to Flex, Column, Center, Center. I’m just going to center everything in here. Then we’re free to just kind of add some of our content in. I’m going to go with Text there and I’m going to go with Button. On the button we can use our Utility Classes. We’ll do Button, White and we’ll do Button, Outline. That’s going to give us our Outline button.
0:07:20
I want to see what that actually says. It just has Contact Us and then we have some Lorm Ipsum and then the headline says Ready to Talk and that needs to be an H2, not an H1. Also in here I can do Gap now. I’m just going to do Var Space S M. Let’s do M and I’m just going to grab some Lorm real quick. We’ll use about that much right there. I’m going to go ahead and paste that in. I also want to control the width of this. Let’s give this some, we’ll do Footer, CTA2, Double Under Score and this is going to be the Text. Sometimes I call that the Lead as well. Footer, CTA2, Double Under Score, Heading and on that Text one I’m going to use a Max width of 68 characters and then I want to center that Text. I also want to use Border Radius on here.
0:08:24
I’m going to use our Var Radius of M and all I need now is our Background Image in there, which I believe I’ve already put in here from Figma. I just need to cover that, no repeat it and then left 50% and top 50% as our Position and I’m going to drag it so it’s the very first thing in our Footer. I basically whipped up, what does this say? Contact us. I basically whipped up our Call to Action. Now we’ve got to do the task of positioning it and what I want to do is I don’t want to just go right to the solution because I really want to walk you through the thought process and the why should you not do it these ways and then follow the way that I’m going to show you how to do it. This is like I said a process of me going through different motions of like, okay, here’s how we can try to accomplish this. Oh, no, brick wall. Here’s how we can try to accomplish this.
0:09:27
No, brick wall. And then just it’s like thing after thing after thing. I want to show you why those methods fail and then I want to show you the real method that I recommend. So the first thing is when you’re trying to overlap content, one of the ways I taught on YouTube is that you can fake the overlap by using either an inner box shadow or you can use a background gradient and I’m going to show you that technique right there. The way that people would go about this technique is they would create a section like this. They would drag this CTA into that section. They would do something like, well, I’ll just do this on the ID so you guys can see quickly. We’re just going to set the padding top and bottom to zero and you see effectively, we’re almost to an overlap effect and all I would have to do at this point is come in with a background gradient and I match this color on the bottom gradient. So I would have that’s based ultra dark, I believe. Yeah, so that’s a perfect match.
0:10:28
And then up top they would do transparent and then they would do 50% and 50% and you’ll get a nice sharp line through right through the middle of the box. And there you go. You effectively, why am I losing this? Oh, okay. Because footer CTA 2 needs color white for their typography. Okay. So I’m going to go ahead and hit save on that. And we’re going to look at this on the front end so that you guys can see what I’m talking about. But immediately you’re going to see the problem with this method. So I’ve got the overlap looking great, but look at this. This is the final section of that page and I have a giant white gap because that transparency is contained inside the section that my CTA is in. It’s not, this is not a true overlap.
0:11:16
So this solution is completely off the table. You can’t do a fake gradient for this technique because every page on your website will have a gap, right? And the only time it will not have a gap is if this section above was white, right? If it had a white background, then it would match this white gap and then it would look like there’s no gap. It would look like there’s an actual overlap. But we don’t want to be limited to that capacity. We don’t want to say, oh, well, sorry, client, sorry designer, every page on this website, the last section has to have a white background, sorry, like that’s not a viable solution. So we can’t do this. So we’re not going to do the fake overlap. So we actually need this div to be a part of the footer and we need to create a real physical overlap. So the next problem that people run into is they would take away the, or the next solution that people would try to attempt is they would take away the top padding in the footer to get the CTA closer to where it needs to be and then use a little negative margin to create a real overlap.
0:12:22
And this is actually part of the solution, the real solution, but you have to go about this a very specific way. First of all, I want a gap between the CTA and my footer stuff. So I’m going to add that in first because that is a real thing that we definitely need. So on margin bottom, I’m going to go ahead and now with automatic CSS, this is very easy. With you’re going to have to be very careful of your measurements when you’re doing this, when you’re just making up like padding numbers and things like that. But I know with automatic CSS that my section spacing is var section M, right? Section space M. So if I put var section space M right here, var section space M, I get the exact same amount of spacing as I have down here and that as I had before the CTA even existed, right? So this amount of white space right here that this, all this data is floating in is exactly the same as if the CTA was not here. So and that’s very easy to do with automatic CSS because everything is so consistent in automatic CSS.
0:13:33
So this is good right now. We’ll look at this on the front end and see what we’ve got so far. I want to take this nice and slow because some of these things are complicated and I want to make sure we don’t lose anybody along the way and you’re like, what the hell is going on, right? So we’re just taking it nice and slow. So you see we fixed one problem. We have nice spacing down here. The problem is that we do not have an overlap, right? So now we’re going to create the overlap. So what I want to do here is have some sort of consistent overlap where I use another variable would be good. Like maybe I can do another section space M into the section above. Now there is one challenge here when you’re using variables is there is no negative variable. So how do you make this a negative margin if you don’t have a negative variable?
0:14:22
Well, there is a trick. You can use a calc and we’re going to do it like this. So we’re going to do calc var section space M. So that’s my amount of section spacing that I want to move this CTA by and I’m going to do it times negative one. And it’s effectively going to make that a negative value. And so now I’m using negative margin with a variable, very, very, very powerful stuff. Okay, so now I’ve effectively moved the CTA section space M amount into the next container above using that negative margin. Now you can probably see what’s going to happen here that’s going to create an issue. So we’re going to go look at this on the front end. I do want to show you that one big thing is fixed though. So this is the final section. It’s got a light gray background and you notice there is no gap. So what happens if I put something and I know this is annoying, I’ve got to load the builder for the home page and then go back to the builder for the template.
0:15:28
It’s at nightmare in oxygen going back and forth between templates, especially because of the loading time. But alas, we have to do it. But what I want to show you is what we effectively did is we got a true overlap, but we’re going to create a new problem which is our content in the last section of a page is going to be way too close to this CTA. So if I add a heading in here, for example, all right, and I’m going to say content, and I’ll just make this an H2. And then we’ll put in another thing like an image so that we can see something else in there. And we’ll just browse really quick and grab like this. So we will shrink that down as well. I’m just going to do like a width of L on here. All right. I didn’t want to choose a square.
0:16:20
Why did that have to be a square image? I wanted a nice wide image. Okay, is this wide? This is wide. All right, select this image. And let’s do a width of L. Good. All right, so that’s not too bad. All right, we’re going to do an owl spacing on this to space it out. My dog is going crazy because someone rang the doorbell. All right, you see right here, like this is all touching. So we’re going to go view this on the front end. And man, it’s taken a long time to save these days. All right, so we’re going to go the front end. This is obviously not acceptable, okay?
0:16:55
So what will happen is people will say, oh, that’s no problem. I can simply manipulate the padding that’s on this last section, right? So let’s try that. But that would require is going to the ID level. And this is one way that you could do it. And well, we could add the padding back, right? So we can say, all right, well, that’s going to be, and we’re going to have to use another cowk, right? So I know that this had section space M as its default, but it needs another section space M in order to gain back the padding that it lost because of this overlap. So we would need a cowk of var section space M plus var section space M. And we can end our cowk. And now we actually have this section back to the way that it’s supposed to be. The problem is if you have 35 pages on this website and you have to do this for every last section of a page, you have a massive problem on your hands.
0:18:01
Number one, doing this at the ID level. If that’s CTA ever goes away, you’re screwed. You’ve got 35 pages that have this instruction in it for extra spacing that aren’t going to need it anymore. And there’s no global control over those. So we know we cannot do this with an ID. So the next thing you’ll think of is, well, we’ll just create a class, right? Like, I don’t know, final section or something like that. And then you throw that in there and you’re like, oh, done. I’ll just put that class on every last section of every page on this website. And if the CTA ever needs to go away, I can just clear that out or delete that class. And it’s no longer going to exist. And we’re all good and we’re back to normal kind of. This is like a half-ass fix. This is what I call a half-ass fix.
0:18:44
It half-ass fix is it, right? But there’s still some other things that are not being addressed here. Let me show you. So we’ve got, we sell the scalability problem. Let’s open the structure panel. And let me just check on our recording real quick. I just want to make sure, okay, nothing’s going wrong with it. That’s always good. All right, if I were to, which happens often, decide that a section needs to move. Like this section here actually needs to go up and another section needs to be the last section. Let’s see what happens when I do that. So I’m going to drag that up. And now look at this. We have a section with too much padding and we have a section with no corrective padding.
0:19:20
And so what happens now is I have to remove the class from here and I have to go to, oh, night, and you miss click things in oxygen and I have to add the class here, final section. And now we’re back to normal. That required two extra steps and it required me, having to remember that that has to happen. Right? Go back to the three month rule that I talk about all the time. If it doesn’t pass the three month rule, don’t freaking do it. If you come back in three months, you’re not going to remember, oh, yeah, we needed a final section class and okay, you’re building a new page. Are you going to remember that there’s a final section class? No, you’re not. So this does not pass the three month rule. That is a half-ass solution. So we’re not going to do a half-ass solution. We’re going to get rid of that.
0:20:05
All right, I’m going to put this section back to where we had it. The other problem with this is if this CTA, remember, we’re going to make this conditional. We’re going to give the power because we really need this to show or hide the CTA on any given page. And if we do that, what we can do actually assimilate that right now. So I’m going to go ahead and save this and I will get out of here. Man, I don’t know why I’ve taken so long. All right, we’re going to refresh this. You’re going to reload this builder. And I want to simulate because I want to show you that we still have not really solved our problem. Okay? We’ve created a new problem by kind of solving our problem. All right. So I’m going to come down here and simulate what happens if we get rid of this.
0:20:57
So I’m going to go to Layout None. And you can see right away we have a huge problem. Okay? Number one, we’ve lost our top padding in our actual footer down here. That’s a no-go. So if we use conditional logic to get rid of the CTA, it’s going to create new problems. The second thing is on the front end, you’re going to notice that that last section now still has its own padding in it, all the corrective padding. And actually, sorry, it would. And I can’t simulate that. Sorry, I removed the class. But if we were doing this, that last section would not know that the CTA was gone and it was still have corrective padding, which at that point would just look like it has a lot of extra padding, which is very awkward, right? So you don’t want that to happen.
0:21:48
So we have to come up with different ways to account for these new challenges. The first thing is let’s tackle this challenge down here with our footer. So I’m going to grab this div and I’m going to make, I’m going to bring it back interview so we can see it. Okay, there it is. And what I need to do is remove this negative top margin. And I need to go into my footer and I need to make sure that I restore my default padding. What I’ve effectively done is ensure now that once the saves, I can show you that when I simulate this disappearing, my footer will look normal. It will look exactly the way that it’s supposed to look. So this is kind of a rule of thumb where if you’re adding something to a section that’s going to force a different behavior of elements around it, you should make sure that all of those rules, all of those styling instructions are contained within that element because if they’re not, if you create a rule, like basically I took this footer and I changed its padding because there was going to be a CTA, right?
0:23:01
But if there isn’t a CTA, it leaves this broken. So I need all of the styling manipulation to happen within my CTA so that if my CTA is there, the styling manipulation happens, if the CTA is not there, no styling manipulation happens, right? So that’s a much more scalable way to build something like that. So I take my footer CTA and watch what I’m going to do. Instead of, how do I bring it back? Lay out, flex. Okay, we’re bringing it back. So instead of me changing what’s happening in this section to make it easier for me to get that CTA up there, I’m going to do everything with the CTA. So what I effectively need is a negative margin that covers the distance of section space M, which is my default padding in that section, and then adds another section space M of top padding, or top margin, top negative margin, to get it into this section, right? So we’re going to do this in pieces.
0:24:01
I’m going to go into the top margin here and we’re going to use a cowlc and I’m going to open and close my cowlc because these parentheses can get a little confusing of where parentheses, especially when you’re using variables, okay? So now I’m going to open a var and I’m going to open and close it, right? So I can put my var instruction in there and then I’m going to do my times negative one, all right? And then in this var, I’m going to put section space M, section space M. And what this will do is it will jump that to the very top. Because if that footer has no padding whatsoever, because I just covered that exact amount of space with my negative margin. But now I need to go even further, right? And because of order of operations in math, it would attempt to do that times negative one first and I don’t actually want to do that. I wanted to take the section space M plus section space M, add those together and then multiply those things by negative one, right?
0:25:06
So in order to do that, I actually have to wrap this var in its own parentheses. And within that, I can now do another equation, which is plus. And I’m going to open and close my var and add another section space M. And now what I’ve effectively done is I’ve covered the gap of the padding that’s in the footer. And then I’ve gone further another section space M amount of length into the section above. So I effectively have the same overlap that I had before. But the difference is, and this is a big difference. If this CTA goes away, so does all the styling manipulation. So now the footer exists as it did before, as if no CTA was ever there. But when I add the CTA back, it all looks good. Actually since this gap is also controlled by the footer CTA, it’s controlled by the bottom margin of the footer CTA. I didn’t put margin top on this element, right? I didn’t put extra padding in the section or anything like that.
0:26:12
I just added a styling rule to the footer CTA of margin bottom equal to the default section spacing, very easy when you’re using something like automatic CSS because everything is so consistent. And so now what I effectively have is a component that when it’s there, everything looks good. Well, kind of we got to fix this problem up here. And then when it’s not there, everything still looks good, right? So scalability. This is scalability. This is not half-assing things. This is doing things the right way. And you can make the argument, Kevin, but you’re spending so much time on this. Am I really? I spend a lot of time coming to the conclusion, like the finding the solution. But now that I know the solution, and if you were just following this solution and skipping all of this banter and all of this, here’s how not to do it.
0:27:01
Here’s why to do this and why to do that. You would be able to implement this in 15 minutes. And you would have a completely scalable break-proof solution for this footer overlap that you probably didn’t have before, right? So this is very valuable. All right, so I’m going to put it back. So now what we have to do is we have to do the hard part, which is how do we go about getting this last section to not touch this CTA? And I’ll show you another potential solution that people might do. So let’s look at the structure of this page. You’re going to see that we have, if you follow my tutorial on building a primary template and a main template, you’re going to see that we have all of these sections wrapped in this main wrapper right here, this main. And so what some people might think is, well, we’ll just add a bottom margin to that main wrapper and that’ll move automatically the end of our page content away from that CTA.
0:28:02
So you might think that that would work. Unfortunately, as you’re going to see, we’re going to run into another problem. But I will try it for you. In fact, we don’t even need to open, man, I shouldn’t have done that. We don’t even need to open the template in order to try that. I’ll go back into the primary template. We can do this from the main just with CSS. And you’re going to see instantly what the new problem is. All right, yes, we are designing a master. Yes, we are flexing on the competition. Yes, okay, good. All right, so I’m going to open style sheets. We’re going to scroll down so you can see what’s going on here. And I am going to add a style sheet called training. I don’t know.
0:28:38
It doesn’t really matter. So I’m going to target our main and I’m going to do a margin bottom of what do you guys want to do? A var section space M, right? That’s the amount equal to the spacing that we lost. Var section space M. And I put it in and margin bottom var section space M. I don’t know. Why isn’t that doing anything in the builder? It should be. It seems like it. Yeah, it did it on the front end. We have exactly the same problem that we had before. We have a gap. Because now this is the margin that comes after section space M. It’s effectively just moving everything down the page.
0:29:18
It’s not respecting our overlap anymore. So that is a no go. We’re going to take that off. And now we’re going to talk about an actual solution here. And here’s the thought process behind our solution. And this is a little complicated. And I am going to take my time because I have to think of it in my, I don’t have this memorized. I have to think of it in my brain as I do it, just as I did it the first time I did it. I will, no, I’m not. I’m not going to give you the code. I’m not going to give you the code. I’m going to make you write it on your own because that’s how you get better at this stuff. So you’ve got to watch.
0:29:50
You’ve got to listen to the thought process. You got to write this on your own. Okay. All right. If I got to sweat under the lights, you got to sweat under your own lights. All right. Here we go. So effectively our strategy is we have to use CSS to target the last section or the last div, because there’s two types of containers that could be there. So the last section or the last div on any given page and add extra bottom padding to that section automatically. No classes, nothing that we have to do manually. Once this is set up and done, it’s going to work for us automatically. And it’s going to work even if we shuffle sections or divs around a page. It’s going to be fantastic.
0:30:37
But it’s a little bit hard to, it’s a little, it’s not hard. It’s just a little tricky on the mind. It’s like a tone twister. Okay. All right. So we’re going to come in here. We already know that this is wrapped in all these sections, all this contents wrapped in a main wrapper. So we can target our main wrapper. But I want you to look at something very important here. Oh my gosh. There is a, let me make this bigger. There is a inner wrapper inside of main that is added by default by oxygen for that inner content element that they have. So this adds a little complication.
0:31:11
So what we need to do is we need to target the CT inner content, or really we can target just the direct child of main because there’s only ever going to be one direct child of main. There’s never going to be more. So we need to start out by targeting main first of all. Okay. Now, I’m putting the code here. You’re going to see another problem with this in just a minute, but I’ll put the code here for now. So here’s how you target a direct child. And this is good because this is the type of tutorial where you’re going to learn concepts. You’re going to learn best practices. You’re going to learn about points of failure. You’re also going to learn about CSS. So targeting a direct child uses this right character, right? And then you can tell it doesn’t matter what the child is, right?
0:31:56
It doesn’t, if it’s an image, if it’s a div, if it’s a whatever, it doesn’t matter. If you use star, you’re basically saying any direct child. The star stands for anything, right? Or everything, really, it stands for everything. So every direct child, now not every child, this would be every child, but that would select like everything on the page that’s inside of main. You want only direct children, okay? So there’s only one direct child. And what I’m going to do is we’re going to do this in pieces so that my brain has time to think and you can see each step of the process working. So I’m going to do a border of five pixel solid red, just so you can see exactly what we are targeting here. So what I’m going to do is we may need to refresh this on the front end a lot. I am targeting the inner wrapper. You can see that it looks like I’m doing the main, but it’s really the wrapper inside the main, which is the same size as the main.
0:32:50
Okay, so you see the red line around what is being targeted by this CSS. I really don’t know why this is not working in the builder. It should be working in the builder, but whatever. So there’s main, I’m targeting the direct child of that. So now what I need to do, we go back and inspect, is I effectively need to target the next direct child, but the last direct child. Okay, so let’s try to do that. So I’m going to do a carrot again, we’re just going in order. I’m targeting the direct child of main and then the direct child of that child, right? So any direct child of that child, and let’s just pause there and just see what happens. If I’m correct, we should have all of our sections read. So I’m going to refresh and you see that every section has a red border because I’m targeting all of them. Now I want to only target the last child, right? So all we have to do to that selector is add last child.
0:33:53
Now I hit save and we’re going to go to the front end once this saves and hopefully only the last one is selected. There you go. So now our last one is selected. And what’s cool about this is, and I really want to, is it because I’m in, no, it’s because I’m in this template. Okay, let me undo what the heck I just did. I don’t even know what I just did. We’re going to exit to front end and I’m going to actually do this in the homepage. I think if we’re doing it in the homepage, you’ll actually see the changes in the builder. Something about that template that’s causing issues. All right, so let’s open up the homepage. Let me make sure we’re still good and yes, we’re still good with our recording. All right, come on, oxygen. All right, now we can see it.
0:34:46
All right, perfect. So open up our style sheets, training. Okay, cool. So I’m targeting the last child, but it can be anything, right? So there’s a problem here though. Here’s, and this is the problem I ran into initially when I was trying to figure this out because if you want to add padding to this instead of a ugly, useless border, what if we wanted to add our corrective padding? So we go padding bottom and then effectively we need the default padding plus the padding of the, that’s being taken up by the overlap. So that’s another calc. We do our var section space M. That gets us padding bottom var section. Oh yeah, yeah, no, that should be fine. Is it? Oh no, this is what confused me and it’s confusing me again.
0:35:40
Okay. The reason it looks like it fixed it when it shouldn’t is because I’m actually getting duplicate padding, okay? And here’s why. So I’m just going to just leave it like that for now. And let’s go to the front end and look in the inspector because there’s something you have to know about sections versus dids. So a section in oxygen has an inner wrapper and that inner wrapper is where the padding is placed. But what I’ve effectively done is I’ve added bottom padding to its parent, right? So if it’s a section, this is happening. Now this is a problem only when you’re using other types of padding in that section. What we really want is to add padding to the inner div in a section. But this creates the problem of what if it’s not a section? What if the last container on the page is a div, right?
0:36:40
So we have to have two separate rules here. So if it is this but not a CT section and it’s the last child, okay? Then we want to just do padding bottom bar section M and we’re good to go, right? And I’ll show you what this looks like in just a second. So this would apply to a div, right? And unfortunately, oh no, I’m in the home page. So I can actually do this. All right, so we’re going to go to here, inner content and I’m going to add a div. Perfect. And I’m going to add a heading to the div. Perfect. And I want to give that div a BG based dark, something like that. And what in the world happened? Where did our heading, oh, the heading is same color. Okay.
0:37:29
Text white. There. Now you can see our heading. All right. Perfect. Save. Awesome. And we’re going to exit the front end. Okay. I want you to notice that this div does have extra padding, right? There it is right there. So that instruction is adding. This is what it would look like if that corrective padding was not being applied. But this is what it’s looking like with the corrective padding applied. What I want to show you is if it’s a section.
0:38:01
And now with that rule, let me show you the rule again, style, seats, training. Okay. So with this rule, our section is not going to get fixed. All right. What we need is to put a comma and come down here. And I can basically use most of this. Okay. So I’m just going to copy and paste it again. But I don’t want it to say not CT section. Right. I wanted to say if it is CT section, last child, I want to do something different. I want to target the CT inner content, whatever the hell it’s called. So inspect this right here. CT section, inner wrap, I want to target that. And that’s effectively where I’m going to put my padding.
0:38:46
But my padding has to be special, right? It has to be calc of var section space M plus, let me start over. I want to put my openings and closings all together because these parentheses really, especially because I’m dyslexic. Like once there’s like 800 parentheses, my brain short circuits. Okay. So there’s going to be a calc. There’s going to be a calculation inside of that calc. That total is going to be times negative one. So here’s what’s going to happen. Now we have a var open and close plus a var open and close. This is basically our formula, right? Now I’m free to put my things in. So section space M and then section space M. Oh, that’s right.
0:39:35
Okay. Sorry, I had a brain fart and I’m like, we don’t need to do negative one here because we do want actual, and I don’t know, why is my brain doing negative on padding anyway? Like see, this is the level of confusion that these kinds of calculations introduce. And in fact, we don’t need, we can just do var section space M plus var section space M. Okay. So that is good to go there. We’ve effectively got our fix. Now let’s see what happens when we add a new section, right? Or I duplicate that section. Remember, this section does not have any classes on it or anything like that. So this is the last section. So it has this extra padding to make up for what’s going on there. And then let’s say I was just to duplicate this. Notice that the one that got left behind now has normal padding, but the new last one has extra padding.
0:40:30
So the fix happens automatically for you, right? Now the only question is what’s going to happen if we drop a div down there. So I’m going to go in and we’re going to drag this div. Oh man, this is drag and drop. And look at that, we still have no problem whatsoever because what we’re doing is we’re effectively adding, it’s the same thing. It’s just we’re not having to target the inner content of a section. We’re just applying the padding to the div in general and we should be good to go. So I’m going to go ahead and hit save changes there. Notice that it’s happening for you automatically, but we’re not done yet. We’re not done yet. What happens if, and we’re going to go back to the primary template to simulate this, what happens, or maybe I can simulate it in the browser, what happens if this disappears? Does this follow the rule of all the styling goes with it? So I’m going to grab this and we’re going to hit display none.
0:41:31
Uh oh. Uh oh. Uh oh. Look, we still have a padding fix in a div that no longer needs it because the rule that we created with CSS doesn’t know that that CTA no longer exists and that the last section on a page no longer needs corrective padding. So we need another workaround, don’t we? So in order to figure out what the next workaround is going to be, we need to actually create the conditional logic of making this CTA disappear or be able to turn it on and off in the first place. So I am going to go out of here and we’re going to go into MetaBox. Now you can do this in ACF as well or with advanced custom fields, but I’m just going to do this in MetaBox super easy in MetaBox. We can get actually back to the admin. That would be nice.
0:42:18
Alright, so we’re going to do MetaBox custom fields. I’m going to create a new field group. This is going to target the primary template. So I’m going to go to settings and under this post type, I’m going to do page because the controls need to be on a per page basis, right? Even though I’m targeting the primary template, like an element that’s in the primary template, the controls for showing and hiding need to be on a page, right? So I’m targeting the page. I’m going to put a simple field here. It’s going to be a radio field. I’m going to call it this, show CTA footer question mark. So basically you’re asking the user a question. Do you want to show the CTA footer? The choices are going to be yes and no. The default value is going to be yes because we want it shown by default.
0:43:05
I’m going to make these choices in line and then I’m going to go ahead and publish this. And we’re effectively done with our controls. So now when I go to a page like the homepage, we’ll see what’s waiting there for us. So I’m going to go down to home and just hit edit. And while I’m doing this, I’m going to refresh the builder because we’re going to need that to pull in that new MetaBox data in just a second. But check out down here, primary, show CTA footer, yes or no. I’m going to switch this to yes, which I think, I don’t know, this is probably some sort of functionality on here before. And look, and you’ll run into this new problem. Let’s not a new problem. It’s been around for a while because I have this open over here. I can’t update this page. So if you don’t know the trick for this, you simply inspect this button and you find its class right here, oxy disable admin button.
0:43:58
And you just mess with the class like this, make it like a non-existent class. And the button will appear again. OK, so I’m basically saying show CTA footer is yes. All right, so now what I’m going to do is come down here and I’m going to grab my CTA not in the main template. I’m in the homepage. OK, let’s open the main template. Not the main template, the primary template. Thank you, oxygen, for just making everything as complicated as possible. All right, so we’re going to open the primary template. This is where we need to add our conditional logic. So now we’re going to wait while that loads. Effectively, I’ll just tell you ahead of time what we’re going to do is we’re going to use a condition to say if this does not equal no, then show the CTA footer. If it equals no, then you’re going to hide the footer.
0:44:44
But it equals yes, so you’re going to show the footer. All right, so we are going to go to home. All right, here we are in the primary template, scroll down, grab our CTA footer, and you click this little button right here for condition settings. Set conditions. Add your first condition. You’re going to come all the way down and choose dynamic data, metabox field, show CTA footer. Return the label is the easiest thing to do. This is the label, yes, no, OK? So return label, and then you’re going to use this to choose is not equal to. That’s what this exclamation mark equal sign does. So is not equal to no, because the condition is you’re showing what are the conditions to show this element. Show this if that field is not equal to no. Now you could say show it if it’s equal to yes.
0:45:35
The thing is is with metabox and ACF, sometimes when you add an option after the fact, even if you set the default to yes, the default won’t actually, the value won’t actually be yes until you open that page and saved that page. Then it commits that to the database for that page. So what you’ll end up happening is if you say it has to equal yes, then it’s going to sit there and wait for that to actually equal yes in the database, and that’s not going to happen to you open every page and save every page. So it’s safer to say is not equal to no, because the only option is if the default is yes, someone has to literally go say no and save the page if they want it to go away, and that’s really the behavior that you want. Hopefully that makes sense. Hard to explain these things, man. OK, so just take my advice. You don’t need to know this. This is one of those situations where just listen to me.
0:46:34
Not equal to no. And then we’re going to go ahead and hit save. And then if I reload the home page, we should still see the CTA flutter because it’s set to yes. But now, because I’m editing the page, I can hit no and hit update. And I can come in here and I can refresh our home page. And I should no longer have a footer CTA. Amazing, right? So I’m able to turn this thing off on a page by page basis. However, look at the problem that we’re having to deal with now. Like I mentioned before, this section has no idea that that CTA disappeared. And therefore, it still has its corrective padding. So what I’m going to do is go in here and we’re going to go into style sheets. And then, thankfully, there’s an easy fix, guys. It’s an easy fix.
0:47:23
I’m going to open up my CSS. I’m going to grab this. And by the way, I’ll show you in a minute what we’re going to do with this. But let’s just delete it. All right, I’ve copied it to the clipboard. We don’t have to write it again. Have no fear. All right, we’re going to go into style sheets. No, we’re not. We’re going to go into the structure panel. Sorry. And then in the footer, I’m going to add a code block. And the reason I’m adding a code block is because we can use conditional logic on our code block the same way we used it on the CTA footer. I’m going to drag this up above our CTA footer.
0:47:56
This, I’m going to rename to CTA footer. And this is CTA footer correction. Bam, just like that. So now people who come behind me actually know what the hell this code is for and what it’s doing. So the first thing I’m going to do is take out our PHP. We can comment in just like this. And then we can go into the style tab. So into the CSS and paste our CSS. And I can add a little comment here that says ads, corrective padding to make up for CTA overlap. Bam, add corrective padding to last container. There you go. All right, so that explains the people what this code is doing. And now you can see that it’s still working.
0:48:47
So we’ve moved it into a code block, but we need to test and make sure it’s still working. So I’m going to refresh. And I need a, I need my CTA back. So let’s switch that to yes. All right, let’s go to home page refresh. CTA is back. Corrective padding is still there. Now what I need to do is same thing I did on the footer CTA. Open the conditions. Add the condition. Same exact condition as before. So that if Metabox field shows CTA footer label does not equal no, we’re not going to show the styling either save. Perfect. Refresh the home page.
0:49:35
Everything is good. Let’s flip, well, I’ll flip up the sections in a minute so you can see that everything’s working. Let’s turn off the CTA footer. Let’s check the page. Normal padding, no CTA footer. Normal padding, no CTA footer. That’s exactly what we’ve been looking for the entire time. Now I’m going to get rid of the template. I’m going to open this page and I’m going to move some sections around so you can see how this automatically fixes our problem now. All right. Come on, oxygen. Nice and slow. It’s just there.
0:50:17
Eliminating bloat, are you? Are you really? Okay. Soft. All right. Watch this. I want this section to be last. Let’s drag this above it. Bam. Look at that. Automatically fixed. Drag it back. Boom. This one’s automatically fixed. Now this one’s normal again.
0:50:38
Drag this one. You can do this all day. Right? You’ll never have the problem ever again. It’s fantastic. Now let’s test it on a different page. So let’s go to, wow, that save. It’s taken a long time. Wow. What’s going on? All right. Let’s get out of here. Let’s get out of here. Oh, is this the part where like my whole training site crashes or something? That would happen at the end of its tutorial.
0:51:14
What is going on, dude? What are you doing? Leave the page. No one will be here anymore. All right. So we need to open up a different page. And we just need to test and see how things are going here. So I’m going to view this page. We’ll look at that. This one doesn’t have a CTA footer. It’s because we were doing this on this template before to map all this out. And I’m pretty sure it’s taken its, I named the Metabox thing exactly the same thing. And I’m pretty sure it’s storing those settings. So I’m going to go to watch. We’re going to go here and it’s going to be set to no CLS.
0:51:52
It was this one. Yeah. It needs to be set to yes. Okay. So I’m going to go check another page just to make sure our default is actually working. A page that I had never looked at before. Like legal. I don’t like whoever looks at the legal page. This should be set to yes by default. See it is. Okay. I’m going to go to the store and the database from previous mappings of this. And that’s what we’re looking at now. But if I refresh this, we see our footer. Nice.
0:52:23
We see extra. Look, the text is not running into our footer. Like it would be without this fix. Now let’s turn it off. No. So our footer should now look fine. And this section should still look fine when I refresh. Perfect. Okay. So I hope you guys, let’s go back to camera. Hope you guys learned a lot in this tutorial. I mean, we did some somewhat advanced CSS. We talked about future proofing. We talked about all the problems that you can run into trying to do something like this. You probably learned a lot of new techniques that aren’t just going to apply to this specific use case, but could very well apply to a lot of different things.
0:53:06
For example, conditional CSS. How many times, well, I don’t know how often you need it, but there’s going to come times where you need conditional CSS. Now in SAS, you have conditions built into SAS, but with normal CSS and oxygen, you don’t have that ability. But if you need conditional CSS, I just kind of showed you a way where you can have some conditional CSS depending on the use case. So there’s a lot of little golden nuggets, I think, in this tutorial. Comment below. Let me know what you think. This is, I think, very, very powerful stuff. It’s a very common situation that you’ll run into. If you want an overlapping element that’s in a template, and it has to be able to map to different use cases on various pages that you might be creating, and you don’t want to fix those things manually every single time.
0:53:53
You just want to bake in an automatic fix, especially because you want to be friendly to your other developers who may come along after you. They don’t know what you had to do to resolve those issues. You don’t want to come up with a half-ass solution, you want to come up with a full-ass solution. Okay? Alright, that’s it for me. Hope you guys liked this tutorial. I’ll be back again very soon. Bye.
