JP Borders

This full-width Rich Text section uses the two waves border added above it and another two waves border added below it. The margins on the Rich Text section are set to 0 to create the solid gold background shape. The right and left margins of the two waves borders are set to match the margin of the rich text section so the background color lines up vertically between all three sections.

This full-width Rich Text section uses the cybertruck border added above it and another cybertruck border added below it. The bottom border is flipped horizontal to provide a visual diagonal with the top border. The margins on the Rich Text section are set to 0 to create the solid gold background shape. The right and left margins of the cybertruck borders are set to match the margin of the rich text section so the background color lines up vertically between all three sections.

This full-width Rich Text section uses the off center arc border added above it and another off center arc border added below it. The margins on the Rich Text section are set to 0 to create the solid gold background shape. The right and left margins of the off center arc borders are set to match the margin of the rich text section so the background color lines up vertically between all three sections.

Okay. In this video we're going to talk about the borders section in the Flex Theme Sections app. And on this page here, which is in the demo store, we have all sorts of borders. You can see there's one up here by the header. And then this rich text section has one on the top and the bottom as this one and this one.

And this one is just two borders top and a bottom one added together. And you can see another rich text, rich text and rich text. And then the, the footer also has a border on it. So right now these are the most popular borders that we have. This is the waves one single curved. this is two waves.

It's got a double bump in it. Scalloped is as you can see, scalloped Cybertruck is just this little angled effect, which when you're doing the top and bottom is kind of a little diagonal box effect, which is kind of cool. This is a centered arc. And then this is an off center arc, as you can see. You know, the borders can be full width or they can be, standard width in the theme.

So let's go into this page in theme customization and see how these elements are built. So here we are on the page. And let's start off with the top section up here. And you'll see we added a JP borders section and the nice thing about this is we keep all the settings for things like size and color at the section level.

As you can see, all the settings are over here. so that if you want to try out a different shape, right, the block is a shape and there's no settings for that. So I have to do is delete that block, add in a new shape. Let's just put in Cybertruck. And you don't have to adjust any of the settings because all the settings were stored at the section level.

And you can see let's go to, you know, the wave one here and this wave section here. We specify that this wave section is a top element. And that's why the you know, the bottom side of it is the flat line. And you can also flip it horizontally if you want to. And then the section down here we specified this one to be a bottom section so that the horizontal line is at the top of it.

And you can specify the fill color. Now on none of these do I have a background color, but you could specify a background color.

And we also can do, different heights for desktop and mobile. And sometimes on the top element, I'll do a different height than on the bottom element. So you can see what all the different shapes look like. And then this one here you can see I just put two shapes together. Just give a little squiggly line to it.

and then you can start, you know, playing with this and seeing how the different effects can, you know, give you different, results. So what if we went really large with that element? What would that look like? so you just, you know, it's kind of fun to get in and just play with them, adjust the different settings and see what different effects that you can come up with.

And what I like to do when I do these right is I'll set this one here, for example, as a bottom. So I'll give it top spacing a zero so that the blue color goes up against the rich text blue color. and then have some bottom spacing. Give some white space below it. Now on an element like this one here, which is a standard width rich text element, a standard with rich text element actually has a little bit of margin on the right and left sides.

So you'll see in the border section I actually added a left spacing of ten and a right spacing of ten, so that the Cybertruck border match the rich text. So if I didn't add that spacing, it would look like this. So would overlap a little bit here and here, because the rich text section has a margin of ten built into it.

So I just adjust that to the ten and then everything lines up much better. There. And it looks like I just add a margin on this one. Oh I adjusted that one instead of that one.

So you can see how you get all sorts of different effects with any of these elements. Now, I happen to use a rich text, element on all of these. And a rich text. It's really easy to add a background color, but any of the flex theme sections where you can add a background color, you can use this effect on.

Or you could also do it on like an image with text overlay, where you might have a gradient effect inside the image that goes through a solid color or close to a solid color. And then you could extend that by adding a border to the bottom or to the top of that. So that's how we can add borders to our sections and what the different border shapes look like.

Thanks for watching.