How to Avoid a Huge Issue With Shape Dividers in Bricks Builder

More about this video

Shape dividers are a great way to break up section content and add some flare to a web design.

Thankfully, Bricks makes it super easy to add shape dividers to your sites.

There are three MAJOR ISSUES, though:

  1. The shape divider styles can’t be assigned to classes, so there’s no way to maintain global control of the styling.
  2. The shape dividers aren’t responsive, so it’s hard to get shape dividers to look good across all devices unless you know some savvy techniques.
  3. The spacing in your sections should ideally be relative to the shape divider being used, which isn’t how section spacing works by default.

Here’s an example of a shit show you might find yourself in: Let’s say you add 50 dividers across your website build and then you realize you need to adjust the height or width of those dividers so they look better on mobile.

Well … you’re screwed. Not only do you have to go edit every single divider individually, you can’t make the edits at the breakpoints. In this tutorial I’m going to show you some tricks for supercharging your shape dividers and making them [mostly] scalable and maintainable.

Video Transcript

0:00:00
What’s up everybody welcome back to the channel. So as you may know, I recently redesigned my agency website digital gravy dot c o it’s phase one of the redesign. This is a multi phase redesign project, but phase one is now done and live. And part of this redesign was the use of shape dividers. And what I want to do in this video is I want to cover. It’s just the basics of shape dividers, but what I really want to highlight are two major issues with shape dividers in page builders. And I want to show you how I approach fixing some of those issues because well let’s just go ahead and dive in. I want to dive into the tutorial. I will show you what’s wrong and what you want to absolutely avoid when it comes to shape dividers in page builders like bricks and just how to fix it. Okay. So I’m going to go ahead and make three sections.

0:00:54
So let’s go ahead and duplicate and duplicate. Now I am using automatic CSS, which is going to make this a little bit easier, but you don’t need automatic CSS to follow along with what I’m about to show you or to do the fixes that I’m going to teach you. You can absolutely do this with vanilla bricks. Okay. So I’m just going to make these background sections have some different background colors. So I’m going to use background color classes from automatic CSS. We’re going to make this one base dark. We’re going to make this one base ultra dark. If I can type, we’ll do that. And then I’m going to make this one base dark as well. Well, I actually just see I’m already mistyping things. So BG base dark. Okay.

0:01:38
So now I’ve got dark dark ultra dark. Okay. All my base color. Now what I’m going to do just so that this one has some content in it is I’m going to toss in an image. We’ll just make this image like full width here. We’ll use this one and we’ll just pop a width full class on there. So it takes up the full width. And I’ll go ahead and hit save. We can view this on the front end. What I would like is a shape divider that divides this top section and this bottom section. Just so it looks a little nicer. You know, we have the straight line is the standard across the web. Shape dividers allow you to break things up a little bit more, make things a little bit more unique feeling, but they have this huge downside.

0:02:20
Now I will say this that shape dividers in bricks. I’m going to grab this section right here. This is where I’m going to put both of my shape dividers. Bricks does make shape dividers better than oxygen. However, there’s still some major downsides to shape dividers just by nature of how they have to be constructed. What I’m going to do is go to the style tab and I’m going to go to shape dividers and I’m going to hit add a shape. This is where you go to add your shape dividers. I’m going to do this as somebody normally would do it if they were building a website in bricks. This is how you’re going to see most people do shape dividers in bricks. I’m going to select a shape. I’m going to choose the wave brush. This is the divider that I use on the digital gravy redesign.

0:03:03
You’re going to see it puts one in there. It’s kind of hard to see because it’s black and my section is already dark blue. I’m just going to go ahead and make this a really light color. You can see it for right now. Ideally when you’re doing a shape divider, you want the divider to match the section that’s below it so it looks like it blends seamlessly. Typically, not every time, but typically you want it to seem like it blends seamlessly. In a minute, I will change the color to match down here. What I’m going to do first is just get this divider to act the way that I want it to act. For one, it’s way too tall. I want it to be a lot shorter. I’m going to go the height field and I’m going to put in 10 rim. Notice that it’s actually up here. It’s aligned to the top. I need to align it to the bottom.

0:03:45
I’ve got it in the position that I want it to be in. I am going to flatten it out a little bit so it’s not so curvy. What you do that is with your width. If you go over 100%, it’s going to start to stretch that divider horizontally, which is naturally going to flatten it and just make it a little bit more tame. When I do that, because it’s officially starting at the left hand side of the screen, it’s going 25% of the way beyond the other edge of the screen. I actually want to center it so that it goes off the left and, oops, I hit the wrong thing, it’s this center right here, horizontal center. You can see what that does. If I’m over here on the left, it does that center and then right. I’m going to choose the center just so it goes off over here, 12.5%, and over here, 12.5%. That’s the divider that I want. What I’m going to do is dial in my color by going to my base palette and choosing my base dark, which matches the color down here.

0:04:47
I’ve got my first divider. Let’s go ahead and take a look. There you go. That’s a little close to my content, isn’t it? What I want to do is I want to give this section a little bit extra padding. I’m going to do pad section L. That’s going to give me large padding in this section. We’ll go ahead and see what that looks like on the front end. Now I’ve got my normal gap back. You can actually, I’m going to show you this in a second. This is going to get a little bit more advanced. I want you to stick with me because it’s amazing how you can make all this stuff a lot more dynamic and future-proof and scalable and maintainable. That’s what I talk about all the time in my trainings. Scalability and maintainability are insanely important when you’re building a website. It’s what separates amateurs from professionals.

0:05:34
It’s one of the things, I should say, that separates amateurs from professionals. Certainly not the only thing, but it is a big thing. Amateurs do not think about scalability and maintainability. Professionals absolutely care about scalability and maintainability. Stick with me. This is going to get better and better and better. We haven’t even scratched the surface yet. Right now I’m showing you the dummy way to do shake dividers in bricks. One thing I want to do is add another divider to the top. I’m going to add shape and choose the exact same divider. One thing I will say is if you get crazy with like 10 different divider styles and all these, it’s going to look whacked out. It’s not going to be a good design. The only time you can break that rule is if you are a pro designer and you know exactly what you’re doing with this stuff.

0:06:20
If you’re an amateur designer, just stick with like, let’s just keep things simple. Let’s keep it standard. Let’s not go crazy. All right, just keep it subtle. All right, so what we’re going to do is we are going to use the same wave brush and I’m going to do the same height, 10 rim. And this time I’m going to flip it horizontal so it actually flips and matches the top side now. You can make sure that this is vertical aligned to the top if you want but that’s the default. And again, I’m going to go with 125% width and I’m going to center that alignment and then I’m going to choose my color. And bricks is kind of bugged out on me there. It doesn’t let me choose the color. So I’m going to refresh the builder. I’ll go back into this section, shape dividers.

0:07:05
I will grab this one. I can actually put that on top. Let’s drag it up to the top there since I’m dealing with the top one here. And I click this and I’m going to go to my base palette and choose base dark. And now you see I have the exact same divider up top. Okay, so now we’re looking pretty good. You’re probably thinking to yourself though, I don’t want to manually style these. I notice Kevin, you’re at the ID level here. You’re at the ID level. I know it’s not good to style things at the ID level. So I’m wondering why you’re doing this at the ID level. And here’s the reason. Because in bricks, we shape dividers. Classes don’t matter. They’re taken out of the picture.

0:07:43
They don’t even work. They don’t work. So if I did like a shape divider class, right? So I’m just going to put shape dividers nonsense class just to demonstrate something. So I put a class called shape divider and I come down here. The same values are there as was before, right? And if I change this value, eight rim, which I have the class selected. So it should be assigning this value to this class. But now I delete the class. I remove the class and check this out. It’s still a rim. None of this stuff works in bricks with classes. So when you’re doing shape dividers, classes are out of the picture. So now you’re like, oh, that really bothers me. That’s red flags, alarm bells, should be going off in your brain.

0:08:26
Yes, look, shape dividers, guys, they’re not using one section. You don’t like added is one section and move on with your life. Shape dividers are typically used all throughout a website. So you get in up with 30, 40, 50 different iterations of this shape divider. It can be all over on all different pages, right? And if you ever need to change the height, if you ever need to change that width that we set, look, we set two values here, okay? Not to mention we violated a basic principle of coding, which is dry, DRY. Don’t repeat yourself. We repeated ourselves here, right? I repeated myself with the width. I repeated myself with the height. Don’t repeat yourself. Good principle, okay? Professionals know this principle.

0:09:11
Amateurs don’t realize this principle exists. So another yet another reason why alarm bells, flags, red flags should be going off. You’ve got to have global control over these things. We don’t want 50 different shape dividers floating out in our wild of our website that we have to go individually edit values for if those values should ever need to change. And I’ll show you right now because you’re probably like, Kevin, why would my values ever need to change? I don’t understand why would I ever need to do that. Well here’s one. Really, let’s get to the second bad part of shape dividers in bricks. And this is just bricks, by the way, guys. This is oxygen, too. This is a downside in oxygen. So check this out. 10 rim.

0:09:57
I said it’s my height. Remember, looks fantastic here on desktop. But I’m going to go down to mobile. Oh, God, that is very fugly. I’m not liking how that looks. And I want you to imagine now that you were doing this on desktop. And so you were like, oh, that looks fantastic. And you kept building out your whole page with these dividers. Then you went on the next page, all your dividers. You went on the next page, all your dividers. You went on the next page, all your dividers. And then you start doing your mobile optimizations. And you’re like, oh, shit. This is just a nightmare scenario has just entered the picture. You are going to hate your life, my friend.

0:10:38
Why? Because you have no global control over that divider height. You cannot change the divider height at this breakpoint and have it change all the places you use this divider. You are now tasked with going divider by divider by divider across every page on this website, fixing the height on mobile. And here’s another thing. Here’s another big problem with this. They don’t even respond to the breakpoints. OK, look at this. Eight rim right here. I’m going to go to this mobile breakpoint and say, I want it to be four rim. Looks much better, doesn’t it? Now I go back to desktop. Four rim.

0:11:16
It’s changed, every. You can’t change it on a per breakpoint basis, which introduces another massive problem with these shape dividers. And so what I want to do here in this tutorial, as I always am focused on doing, I want to save you from ending up in an absolute shit show of a website build. I am going to save you a tremendous amount of time right now. So pay attention. So here’s what we’re going to do. We’re going to use something called CSS variables. We’re going to tokenize as much as we can about these shape dividers. Now, thankfully, for the most part, the color of the divider is already tokenized because you’re using Bricks’ color system. So if the colors ever need to change like your base dark shade ever changes, it’s going to change in the divider and the section all the same time. That’s not a problem because these are already using tokens inside of bricks.

0:12:12
They’re using automatic CSS or not because that’s how the Bricks’ color system works. Now we need to tokenize some other aspects, though. Okay, we’re going to start with the repeating information like the height and the width. This is really the critical information, by the way, because the alignments actually probably don’t need to change all that much. I would say probably never. Like if you set the alignments properly, they probably never need to change. However, the height absolutely needs to change and the width absolutely could change in the future as well. So what we’re going to do is you CSS variables. If you don’t know what a CSS variable is, I’m going to walk you through it very slow. But it’s basically like a token. You give that token a value. You use the token all over the place, 50 different times. But because the token value is set in one place, it’s like a superpower.

0:13:08
So you can change that value in that one place, the value of the token, and everywhere that token was used, now that value changes. Let’s just show you. Let’s put it into practice. So divider height. Now, you want to create a variable. This is done at the root level. If you want access to this variable all across your website. I’m using WP codebox here. Highly recommend WP codebox for any CSS work. I actually write in SAS instead of CSS, and you can do that in WP codebox. So this is really going to give you superpowers over putting your CSS in the normal brick CSS area. So what we’re going to do is at the root level put a double dash. This is how you define variables in CSS.

0:13:52
Then you give it a name like divider height. If I get tight, divider height. Now let’s give it a value of 10 rim. So it’s just like you were setting margin. Now like margin 10 rim instead of margin, you’re putting the token name. And then it’s still 10 rim. And then wherever you use the token, whether it’s in a margin box, a height box, a padding box, you can use that token anywhere. Of course, we’re making these tokens for our dividers. But you can use the token really anywhere. You could even write custom CSS and use the token in custom CSS. And I’ll show you how to use them in just a second. But this is how you create them. Now one thing here before we move on. We actually do not want to create a token called divider height because you may have more than one type of divider.

0:14:38
So I’m using a wave right now, wavebrush. I could have a slant on other pages very easily, right? Like I said before, you don’t want to go overboard. You don’t want to have 10 different divider styles across your website. It’s going to look like trash. So you could though have two. That’s that’s reasonable. So if you put divider height, I don’t know which divider I’m talking about. So we need to give it more of a name. So I’m going to say wave divider height. Make sense? So this is the token I’m going to use with wave dividers. While I’m here, I want to make a wave divider width. And we’re going to set that to 125%. So now I have my two tokens right here.

0:15:16
I’m going to go ahead and hit save. I’m going to go ahead and refresh my builder. And then I’m going to start using my tokens. I’m going to go find my dividers. Here’s my bottom divider right here. And I’m going to go down to the height. And instead of 10 rim, I actually wanted to say bar. And this is how you reference your variable with bar. It’s bar and then parentheses. Then you put the variable in the parentheses. And variables always start with double dashes. So it’s bar double dash wave divider height. And now you see it is adapted to the correct height. Now what I’m going to do is paste that here in the width box. And I’m going to just going to change the word height to width.

0:15:56
And now it’s got my divider width. I’m going to go up to my other divider. I’m going to paste the height in. I’m going to paste the width in. And I’m going to change that to width. And I’m going to hit save. And we’re going to view on the front end. And I have the exact same outcome. But the difference is I now have global control. So watch, if I decide I want this to, instead of 10 rim, I want it to be 20 rim. I change the value of the token. And everywhere the token was used gets the new value. So I now have global control over the height, global control over the width, and basically global control over the color as well.

0:16:37
Even though this is still a pseudo token. So if you want real full control over the color of your dividers, I can go wave divider. And then really what you’re going to want to do here is create different versions. Because it’s going to depend on the color of the sections above and below. So you’re actually going to need multiple of these. So I’m going to do a base dark. And that’s going to be var based dark. And then I’ll show you how I would use this. This is kind of an optional step for more, just like extra future proofing. But this one is not, I wouldn’t say it’s required. But here’s how I would do this.

0:17:16
I would handle this by going and creating a brand new color palette. And this color palette is going to be called dividers. I’m going to create cool. And then in my, I got to select it now. So I’m going to select the dividers palette. I’m going to go to the raw. And then I’m going to do var. Actually, I can just paste var parentheses, paste the token, which is wave divider based dark in there. And now watch this. If I ever need to change the actual color of that specific divider, like to base light, for example, let’s see, there it is. It’s not going to show on the front end, because I haven’t saved this yet.

0:17:58
Now I’ll refresh. See, now I have actual tokenized control over the color of that specific divider, those specific dividers. So I’m going to grab that one as well. And we’ll come down here. So to my other divider, right here. And now I actually just have it in my palette. So I can go to dividers. Oh, did I not add it? OK, I didn’t actually add it. So let’s go var, put it in. I forgot to hit save. You have to save it. So now it’s actually saved in the palette. OK, so now I hit save.

0:18:31
I refresh. Now both of them are like that. And look, I can actually just change this back to base dark. And now they match seamlessly. It looks really, really, really good. Now I’m noticing that the content here is actually needs a little bit more breathing room. So I’m going to do a pad section of L to give it a little bit more breathing room. Yeah, that did it. I didn’t see it change. I was like, why didn’t it change? OK, pad section L. And then I want to go tame my divider height again back to 10 RIMP. Now let’s talk about, let’s look in good.

0:19:05
Now let’s talk about some more advanced stuff. As we saw before, these dividers are not responsive. So this 10 RIMP does not look good on mobile devices, even though it looks great on desktop. So what I’m going to do is I am actually going to make this 10 RIMP responsive. Now there’s a bunch of ways to do this, but what I feel for a situation like this, I mean, you could use a clamp. You could use a VH unit, which is viewport height of VW unit, which is viewport width. And I’ll just show you real quick what these are. So let’s do 10 VW. So this is what 10 VW looks like. VW is viewport width.

0:19:47
So as the width of the viewport changes, that divider is going to get shorter. And as you see, it actually looks really good on mobile. The problem is, as the screen gets bigger, it does not look good at all, right? So that looks good on mobile, terrible on desktop. And it’s just changing based on the width of the viewport. Now there’s another unit called VH, which is the height of the viewport. So now as the width of the viewport changes, it’s actually not going to change other than it’s squishing in, but watch this. As the height of the viewport changes, look at it change its height based on the height of the viewport, OK?

0:20:33
And I want my, there we go, I want my little bar to come back here. Now neither of these, in my opinion, because obviously this one does not help you on mobile. The divider is still absolutely look terrible. So check this out. We want to try even a different unit. There’s something called Vmin. So what Vmin does, I’m going to refresh this on the front end, what Vmin does is it says, is the width of the viewport smaller or is the height of the viewport smaller? And right now, because my screen’s really wide, the height is smaller. So it’s going to make the 10% of the height, because the height’s the smaller side.

0:21:12
If I made the width smaller, like it was going down to mobile, it would actually start to take 10% of the width. Whenever the width becomes the smallest side, which the width is the smallest side now, obviously. And at some point, it breaks and the height becomes the smallest size. But it’s going to calculate it based on the width when the width is smaller. And it’s going to do it based on the height when the height is smaller. OK, these things are hard to explain. Then there’s Vmax, which will make it 10% of whichever viewport side is bigger. All right? I wouldn’t mess with any of these because they don’t really have a clamp built into them.

0:21:49
A clamp function actually has a clamp built into it. But a clamp function is like overkill for this situation. So we’re actually going to use another function called Min. And I want to teach you this function, because this function is very, very, very powerful. So we’re going to write a min and just a parentheses. This is the min function. And what we’re going to do is give it two different values. We’re going to give it first our 10-Rim value. That’s the value that we liked when it was on desktop. And I’m going to just do a comma. And then we have to give it a second value. So the second value is a value that needs to be smaller than 10-Rim. But needs to be dynamic.

0:22:31
Like one of those VWs might work really good here. Like the 5VW or the 10VW. So let’s do 10VW. So we have 10-Rim and 10VW. Remember that 10VW actually looked good at mobile. But it didn’t look good on desktop. 10-Rim was like the opposite. It looked good on desktop, but it didn’t look good on mobile. So I’m going to save this, and I’m going to refresh. And look what we have. We have a shape divider that looks good on desktop. Why? Because it’s using the 10-Rim value, which happens to be the smaller value, the min value. And then as I come down, it actually switches to using VW, because VW is now the smaller.

0:23:17
So 10VW is now smaller than 10-Rim. So it’s switched to using the 10VW value. Min uses the smaller of the two values, depending on the context of the situation. That’s very, very, very powerful. So this is the hardest part to understand about min. If you want to set a maximum size, you use a min function. If you want to set a minimum size, you use a max function. I know. And trust me, I’m dyslexic, so that shit breaks my brain sometimes. But what I’m doing here is I’m basically saying, I want to set a maximum. I never want you to go over 10-Rim, because 10VW could easily go over 10-Rim.

0:24:02
We saw that, right? So it’s like, I never want you to go over 10-Rim. If you’re not 10-Rim, I want you to be 10-VW. Because remember, 10VW look great on mobile. But if 10VW ever gets bigger than 10-Rim, not. Don’t let that happen, because we saw what happens on desktop. When it gets larger than 10-Rim, it does not look good whatsoever. So this min function is really setting a maximum value of 10-Rim. It’s going to be 10VW until 10VW equals 10-Rim. And then it’s never going to let it go higher than that. So it is effectively clamping this divider height at 10-Rim. And anything under 10-Rim, it’s going to be 10VW, which is going to scale nicely as the viewport scales.

0:24:46
So this is really, really, really powerful. You can use a min function. But we’re not done yet. We are not done yet. So remember my section padding right here, where I was like, hmm, I want more padding. Well, I just chose a random larger padding value. But this padding value is completely separated from the height of the divider. And what would really be powerful is if we calculated our section padding based on the height of the divider, because that height of the divider really determines how much spacing I actually need in the section. If this divider got taller, I would actually need more padding in this section so that my content is protected from ever running into the divider.

0:25:30
So watch what we can do. I’m going to take this pad section off, and I’m going to do divider padding or pad divider. Pad section, double dash divider. How about we do that? Pad section divider. So it’s letting me know that there is a divider in this section. I’m going to apply this whenever there are the dividers in this section. And then I’m going to go to layout, and I’m going to go to padding. And this is where the magic of those variables really comes in of those tokens. So I’m going to put a Couch function. Now, because I’m using automatic CSS, I actually am going to be able to add a token to a token.

0:26:08
If you don’t use tokens for your section padding, which I would highly recommend you use these variables for your section padding, which we do in automatic CSS. It looks like this. The VAR section space L gives me that large section padding. Now, normal section padding is M. But as you can see, M doesn’t give me a lot here, right? M looks great when there’s no dividers in here. But when there’s dividers taking up that space, M doesn’t look so great. But I still want to be able to use M, because I don’t want to just give it willy nilly like extra padding. So what I’m going to do is copy this, VAR section space M.

0:26:45
Remember, that’s my token for normal section padding. And if I add the height of the divider to my normal section padding, I’ll have what appears to be normal section padding in a section that also has dividers. And that’s the best of both worlds. So the way we’re going to do that is with a Couch. So we’re going to do Couch. And then we’re going to do VAR section space M plus VAR wave divider height. And now look at that, from that bottom of that divider to that content is the same as this gap in a section that doesn’t have any dividers. It’s perfect spacing. And it’s all relative to the height of my divider. Now I’m going to grab this.

0:27:30
And I’m going to put it down here as well. And look at my content is always not just protected from running into a divider perfectly protected from running into a divider. So I’m going to go ahead and hit save. I’m going to refresh. Look at that. Absolutely beautiful. And you know what? As my divider height changes based on the device size, so too is my padding because they both reference each other. Isn’t that absolutely fantastic? This is scalability and maintainability at its finest. This is so powerful.

0:28:08
So that’s one example of how these tokens really, really help you. I’m going to give you one more kind of advanced example. Guys, this is, like I said, Amateurs vs. Professionals. This is what professionals focus on. Amateurs are throwing around values. 10 rims, dial it, the ID level. I’m just trying to move quick, right? And you end up with an absolute disaster on your hands. I am saving you from an absolute scalability and maintainability disaster right here. So it’s worth it to you to pay attention and take the time. And you should be learning some really good stuff. It’s going to help you in many other areas as well. All right, one more thing.

0:28:46
We’re not done. I want to show you one more pretty awesome thing. What I’m going to do is play with an overlapping divider. And we’re going to show you how calcs can come into the picture again with this kind of situation. So what I’m going to do here is I’m going to add another divider, shape three. And I actually want, so this is the divider that’s on the bottom currently. This new divider is going to go behind it, and it’s going to be a little bit taller, and it’s going to be transparent so that it creates like a nice layered effect, all right? So I’m going to first drag this between the two. So here’s my top divider.

0:29:22
Here’s my bottom, bottom divider, and here’s my bottom on top divider. If that makes sense. And then what I’m going to do is grab the way brush again. And for my fill color, I’m actually going to create a new token. So this is going to be wave divider, base transparent. And I’m going to do an ACSS variable. I want a 10% version of my base light color. So I’m going to do base light trans 10. And that’s going to give me that 10% transparency of my base light. And I think this is going to work out really well to create this layered effect. So I’m going to grab this new variable.

0:30:06
And remember, we built a divider’s palette. So I’m going to go to my dividers, and I’m going to go to raw, and I’m going to put a var in. And I’m going to put that divider, wave divider, base transparent, and look what it’s done. That’s the perfect color for what I’m trying to do. So I’m going to save that. And then I’m going to give it a height. And I’m going to use my token, var, wave, divider, height. But you know, as well as I do, unless you wave divider with, if I use these tokens, it’s going to make that new divider exactly the same height as the others. And so you cannot see it at all. But what I can do, again, we’re going to reference the normal height of our divider and just add a little bit to it.

0:30:49
So watch how this works. So I am going to do a, I’m going to grab this height, delete it out of there, and I’m going to replace it with a calc. And now I’m going to put in that divider height again, plus 2m, something like that. Am I doing this on the right one? OK, oh, I need to align it. So let’s align this to the bottom and look at that overlap that we’re creating. Now, so it’s basically taken, and I can actually center this. So you can see that it’s 2m taller than the other divider that’s already there. That looks really good, I think. Now, I don’t want it to exactly match.

0:31:26
I mean, you could stop there. That to me looks pretty dope. Like, it’s better than what was there before, which is a normal shape divider. But you can also create a weaving type effect if we change the width a little bit. And really, that’s all we need to do. So what we’re going to do is take the width of our divider, remove that, put a calc in, reference the width of our divider by pasting that variable back in, and then add like 20%. So now let’s save and check that out. So now it’s like stretched it a little bit. So the hump of the back one’s happening over here, and then more over here off to the side. And it’s created like a little bit of a weave effect.

0:32:09
I mean, you could also play with the start, like that puts the hump in the middle here, which it now looks like rolling waves almost. I kind of liked it both centered, where it’s just off like a little bit. So there’s a little bit of variance. You could even do like a 10% variance. And then we’re going to save in the width. I think that looks pretty, pretty dope. And again, it’s referencing. So if I ever need to change my width for like 150%, both of those dividers are going to recalculate themselves. And I’m still going to get a great effect, whereas that effect could have been ruined if one divider changed and the other divider did not change.

0:32:50
So that’s what makes these tokens so powerful is not only do they give you a placeholder value that you can use everywhere, but have global control over, they also allow you to cowke and reference other tokens so that things like section padding, widths, heights of other dividers can change based on the value changing of something else, which is, again, this is pro versus amateur stuff, right? And it’s more than that, it’s just a lifesaver. Because again, I don’t want you to end up in a shit show of a website build, where you’ve added 50 shape dividers to a website, and you have no control over the values of those dividers. All right, let me go back to camera. I think we are, we’re good with this tutorial.

0:33:38
I’m going to cut it there. I hope you guys found value. Drop a comment, drop a like. Make sure you’re subscribed. Hit the notification bell. You don’t want to miss the value that I’m putting out on this channel. If you’re a freelancer, if you’re an agency owner, if you use WordPress, especially if you use page builders, you don’t want to miss the content on this channel. So drop the comment, drop the like. That’s how you pay. OK, that’s how you pay for the content. Drop a like, drop a comment, and then make sure you’re subscribed so you don’t miss anything else.

0:34:07
I’m out. Join me Wednesday’s live at 11 AM Eastern time for digital agency table talk, the best show for agencies and freelancers right now. Guaranteed. Show up and you’re going to realize it. I’m out. Peace.

 

My Cart
0
Add Coupon Code
Subtotal