How to Use Flex Containers in ClickFunnels | Training Tuesdays #006

Hey, everyone. In the next 20 minutes, we'll show you exactly how to use Flex Containers and clickfunnels to create professional layouts that automatically adapt to any screen size. So you can finally stop fighting with broken mobile layouts and build pages that look perfect everywhere. So we're going to talk about direction justification, alignment, spacing, mobile optimization, and of course show you a few real application, real world techniques. So let's go ahead and get started. For those of you that don't know me, I'm Jesse. I am the senior Director of Marketing here at Click Funnels. And today on training Tuesdays, I'm going to talk to you about Flex Containers. Every week we come to you 2:30pm Eastern to talk something tech and train you here on Click Funnels. So, housekeeping, if you have any thoughts on what our future subjects should be here on training Tuesdays, drop them in the comments below. Shoot me some messages, let me know you're here. I'm going to try to take a look at all the comments and where we're at. Hey. Hey, Nikos. I see you're here. Welcome. All right. Making sure we're looking good on Facebook and YouTube and in our community, all the places we stream each week. So excited. So let me see here. Flex Containers, first of all, what does that mean? Especially for those of you that are not very techie or have just maybe heard about Flex Containers, but don't actually understand quite what they mean, or thought that you could only build Flex Containers if you knew CSS coding. I'm here to tell you that we have built it directly into clickfunnels and so you can use these Flex Containers, no code knowledge necessary, which is super amazing and it makes my life a thousand percent easier than it has in the past. So consider Flex Containers like these Lego building blocks, right? So if you played Lego as a kid, maybe, you know, you snap the pieces together and you can arrange them vertically or horizontally, or just arrange them however you want, right? Total control, side by side, stacked, centered, spaced out, wherever you wanted, right? The best part about Flex Containers is it's like these Lego building pieces in your funnel pages and they just automatically reorganize themselves based on. Based on your rules, right? So it's like having these smart little Legos that know how to build upon each other based on what you want them to do, and they can look different based on different screen sizes, again based on the rules you set. So it's really cool and very flexible. And it's this layout element that gives us complete control about how our elements are aligned and arranged on different screen sizes without breaking our design looking great no matter what size the the device is. And it just really gives us that full control that a lot of us are looking for these days. And the best part about these Flex containers in click funnels is that you don't have to know code to make them work. So that is the absolute best part. I mean, I don't know about those of us that have played in CSS coding in the past, but I used to look up everything or I could only remember pieces of it and, you know, write everything out in the custom code section. Not, you know, worried that maybe it's going to break something if I add custom code in there or not. Just in clickfunnels. I'm talking about anywhere online. Maybe I would break the page or maybe it wouldn't work right because I would forget, inevitably, one little bracket and then it would break everything. I don't need to worry about that anymore because these Flex containers are built directly into clickfunnels. Excuse me. So responsive by default. No coding, multiple layouts of texts and images and all the things prevents these broken layouts. Saves time. And our manual positioning of just making sure all of our spacing is just so takes away all of that and gives us this professional level design control. Right. So those are Flex containers and those are the basics. So let's talk about what a Flex container can do just as an overview. So I'm going to start sharing my screen here. Let me pull. I'm going to pull you guys out of the way so I can still see your comments. Hey, Jonathan. All right. Hello. Where am I looking here? Share my screen. Cool. Give me just a second here. Had to cough really quick. Didn't want to do that in your ear. Here we go. Flex containers. So I'm going to enter into. Actually, I have a page set right down here and I set some things up earlier so this could go nice, nice and quickly. I have six dice here. And you can see that they're just icons, right? So I could change the icons. I decided to make the icons these little dice, one through six. All right. In clickfunnels we have our green sections, blue rows, and orange elements. But you see here this kind of aqua tealy color. These are Flex containers and it gets a special color because it's. It is an element. If I go to add element, it's here in our elements. I'm just gonna type Flex. It is an element, but it's kind of like its own Section, Right. Because it contains other things. And in this case, I have it containing these six icons. But you can put anything in there, from videos to text, to graphics, to buttons, to forms. All the things. Doesn't matter what elements go inside your. Your flexbox. And the other thing about flexboxes, which I'll show you an example of here in a minute, is you can put a Flex container within a Flex container, and you can even have a Flex container within a Flex container within a Flex container, which I think might be one of the examples I made for you guys earlier, gives us complete control. And I'll show you why that's important here in a minute. So our basics about Flex containers, if I go into the settings, I can see they have some special settings just for these Flex containers. First is direction. So direction is just what you would think. Which way do the elements that I put inside my Flex container, which direction are they going? If I put a second element in, where does it go in relation to the first? So currently I have things as a row, so let me see if I can zoom in even more here. Oh, don't go too tiny. And I'm going to open this up here. So right now, this is the direction that we're calling a row. So everything's going in a row. Great. Now I could swap it up here. And now everything is in a column. Am I? There we go. It's like, now everything goes up and down in a column. Alrighty, let me. I'm gonna have to zoom out so we can see this move in action. So we had our row, and now we have a column. Now this next one is called a row reverse, or like a reverse row. So what that means is it's still going to be in a row, but instead of going one through six, we're going to go six through one. You see how that can flip in an instant? And then the same thing happens with the column, Right. We have a column reverse or a reverse column. So it could go 6 to 1 or 1 to 6, depending on the direction. All right, next we have our justification. So how do I want things to line up inside the Flex container? On this page, I still have some space on the left and right of my Flex container, so I'm at liberty to move my justification. Right now, everything's centered right in the middle. I could say it's called Flex start, meaning it's at the start of the Flex container. Or I could do flex end aligning things on the end of the flex container. Another one here is space around, meaning that I'm putting each item evenly spaced, but I'm still leaving a little bit of space even on the end of my flex container here. So I have the same amount of space on the left and the right of each item. I also have this one which still evenly spaces, but it takes them further to the edge of my flex container. Sometimes I do want a little bit of space, and sometimes I want it to go as far as it can. And then the last one here is called space evenly, just making sure that everything is evenly spaced, including the space at the end. So this space equals in between two items in my flex container. All right, that is justification. So I'm going to put everything back in the center here. Next we have align items. And so for you to see how this works, I'm actually going to make the height here. I'm going to change it to a pixel, and I'm going to make it bigger here so we can see. All right, we have alighting items up here at the top. So again, just like with the justification flex start on the like, horizontally aligning is going to be flex start, but now we're talking in the column in the vertical. So I can click. And everything's aligned at the top. The next one is aligning everything inside of my flex container in the center. There we go. So now it's. You can see it's in the center. And then I have flex end. So the. The end of of my flex container, which would in this case be the bottom. Now there are two more here. This one's called baseline and this one's called stretch. And so that really works when I have items that I'm okay kind of adjusting their. Like, am I going to stretch them to fill the space or if it's like text, having it at a baseline meaning. Actually, that's not quite what it means. Baseline meaning if I have items of different heights, I have them aligned together on a baseline, so I don't have to have them aligned down at the bottom in order for the bottoms to all line up. And what I mean by that is if I have several items, I wonder if I can just do this real quick. I'm going to make a couple. A couple of these different sizes. Okay. So I'm going to pull them back to the center here so you see that they're centered or even at the top. Now they're aligned at the top, but I want them to be at the top. It's fine. But I wanted them all to be aligned on the bottom. That baseline. So that's what that baseline does in stretch, it looks like is. Again, it's hard to see if. Unless I have different elements in there, but that would potentially fill the space. But I have each icon set at a specific size, so it can't be stretched because I don't want them distorted anyway. So that's kind of the difference between the baseline having it still up kind of at the top, versus making sure it's at the bottom of the Flex container. Alrighty. Hopefully all of that part made sense so far. I don't know if I'm losing my voice or what, but it is having a little trouble today. I apologize. Okay, where were we at? We were at 55 pixels for each of these. Alrighty. Oh, that is too tiny. All right, I'm going to move everything. I'm gonna move this back to auto. There we go. All right, next on our list, we have the gap. And all that means is the space in between, by default, each element. So I could go zero and know that by default, each of my little icon elements here, they may have a little bit of padding or space around them already, but this can create a little bit of space or a gap, as it's so aptly called. It just really speeds up being able to space things evenly while still having them aligned as I want them. Again, full control, but it looks good. So a lot of times it kind of depends on. On what. What's going on, whether you have, like this default gap. Basically, just leave it at 0.5. And then the last thing here in the size and spacing when it comes to Flex containers, we have wrap. So this is no wrap. And wrap just means that as the screen gets smaller, the items start to wrap around and then wrap reverse is as they start to wrap, they wrap in the opposite way that you would think. I'm going to show you what all of these are. So I'm going to make sure that both my desktop and my mobile is set to no wrap. As you can see there, it didn't wrap. If I change it to. To wrap here, I'm going to save and we're going to preview this. Okay. I've got my responsive design on. So as my page gets smaller, you can start to see they begin to wrap. So I've still got one here at the top. See if I can zoom in here. Oh, that wasn't good. Let's zoom in this way. There we go. We can see that better. Okay, so that's just wrapping, but I want to show you Guys, what the reverse wrap will do. I'm gonna refresh the page here. Okay. So now instead of wrapping with the one on top, now we wrapped in the reverse way and had six wrap up first. So it's almost like instead of wrapping down, it's wrapping up. Okay. Alrighty. I'm gonna do a quick check in here. How you guys doing? Alrighty. Alrighty. Got a people, a couple people joined late. Little confused. We are talking all about Flex containers, right? So these are ways that we can basically set some rules or settings on how our containers and how our elements act in different screen sizes. It's more than just setting, hey, from this size to this size, behave this way. From this size to this size, behave this way. It's more of. It's more dynamic. Right? So it looks good on a lot of different screen sizes automatically instead of you having to set each individual screen size in custom code. Alrighty. Awesome. All right, cool. All right. When it comes to Flex containers, one more thing I wanted to talk about here is if you click on an element that's within a Flex container, you're going to notice these special. Why I'm looking at. All right, I'm looking at my screen here. Does it look backwards to you guys? Has this been looking backwards this whole time? Somebody let me know if, if all of this looks backwards to you. I was glancing at my stream streamyard here and. Or maybe it's just me. I think hopefully I'm okay. Move my face out of the way a little bit. There we go. Okay, good. Doesn't look backwards. Whew. I was scared there for a minute. Alrighty, moving on. Then we have these extra little settings here. If you are asking what do I mean by backwards, then it probably doesn't look backwards to you. I think it might be one of those things where you're on alive and then it, it shows you a mirror of what you're seeing, but you guys see it's fine. All right, cool. Flex grow. Flex shrink. All that means is that I can, when I have things lined up, I can decide if something can, can grow bigger than the others. Like, I want this one dice to take up or this one die to take up more space than the others. And that's. That's all that is. This comes in handy with things like pictures, which I'm going to show you in a minute, so you'll understand when you see a more practical application. All right, let's move down and take a look at those are the basics of Flex containers. So now let's talk about some. Some actual applications. So I'm gonna scroll down here. For those of you that joined us last week, this will look familiar to you. I. We were talking about mobile optimization, right. And how on a desktop, it's kind of cool to have these switchbacks where I might have a graphic and then text, and then text, then graphic, graphic, then text. But that's not the order that I want things on mobile. And also when I'm taking a look here, you can see I have a Flex container, and then I have another Flex container. So I have the text in a Flex container within a Flex container. It can be very versatile and get really finite onto what it is that you want complete control over. And the reason we put these in Flex containers is so that when I went to mobile, I could say, you know what? In the mobile view, in this Flex container, I want everything to go in the column, but on the second one, I need it to go reverse. And you can see that here I went reverse. If I just went the up and down column for all of them, it would go graphic, text, text, graphic, graphic. And it looks terrible. But by using these Flex containers, I can say, okay, on the second one, let's go in reverse. Because I want to make sure that it's the same on all of them. So that helps my mobile view. And then when it came to the text, it's nice because then I have complete control over making sure that if one text is, let's say this, it was really the purpose on the desktop, if one text is much longer than another, then I have control over how it looks. So maybe I want to make sure that everything is spaced out in relation to. To the graphic. Right? So the space between the headline and the text here is more than here because there's less text. Or maybe on this one, if I put a lot more text and then still do the same justification here, you can see it, they're butted up against each other because it's a lot more text, so it helps us. Or. Or I could take everything and, and have it kind of centered. So now no matter how much text there is, it's going to be centered on the graphic, which is something I see a lot of people want. Right? So the Flex containers had multiple purposes. They had the purpose of helping me see how I want it all spaced evenly on desktop and then making sure that it's in the order I want it in on mobile. Right? All right. And then I have another thing to show you, because some people are like, okay, well, I'm thinking about these Flex containers now and I'll leave that space. Why would I want to put, say, these three columns in Flex containers instead of just using the three columns and click funnels? So I wanted to show you guys the difference between the two. Let's save my page here in preview. So here we have the three that are in the Flex containers and then the three that are just in three columns. And now as I zoom out here so we can see a little bit more. There we go. So now you can see as my screen gets smaller, you see how it's automatically adjusting everything till I get to a certain point where in a Flex container I have the flexibility to decide. I under no circumstance want these to automatically go into a column and stack. I want to make sure the graphic stays on the left and I can do that using a Flex container. Whereas in a for a lot of people just using the columns, we're great. Right? But using these Flex containers allows me more control. Imagine if these were testimonials and I wanted to make sure the person's photo stayed on the left. Flex containers help me have that full, complete control over how everything is viewed in stacks and adjusts as the my screen size adjusts. Right. Alrighty. So that is really Flex containers in a nutshell. Hope you play with them. They're a lot of fun and super useful. But in this one, for example, I have a Flex container, and then I have these three Flex containers within. And then even within that, the text itself here is within yet another Flex container. So I have a Flex container. In a Flex container. In a Flex container. So you can get super custom. Excuse me there. All right, those are Flex containers. Hop back over here. Okay. Awesome. Just taking a look here. All right. Yep, yep. And yes, Dan, we are continually adding more things, more settings into the rows, but also into these Flex containers just so that we don't have to code and change as as we do different screen sizes. So lots of custom things you can do in clickfunnels and while using things like templates are really cool to get going and give us inspiration and give us something so we're not starting from scratch having that flexibility to add in these additional elements where we can make the adjustments we want for it to look exactly as we need is super powerful, especially for those that may be a little more advanced. So yes, the Flex containers is definitely a little bit more of an advanced topic today versus some of you that are just getting started or maybe not as techie pre check out some of our previous training Tuesdays, we definitely went through some of the basics of getting your account set up, getting products, all those things. So. So if you have a topic that you would love for us to talk about here on training Tuesdays, drop it in the comments. Let us know even if you're watching a replay and you aren't here live. I appreciate you guys so much. Thank you for hanging out with me today. It has been a lot of fun. Next week we are bringing you Aaron is going to be back, so that'll be a lot of fun. And Dante and so I'm going to not ruin the surprise of what they're going to talk about next week, but I do want you to toss your ideas into the chat so that we can take those into account for future episodes as we start planning these out. And tomorrow, don't forget, there is Coaching Corner Tomorrow at 4:00pm Eastern. Oh, I should probably most definitely check that time. Let me check here. Rob and the team is coming on to talk more about strategy. Yes, 4pm Eastern right here in the same place you're watching this. They will be streaming that, so be sure to come and check out Coaching Corner tomorrow. And I hope you all have a lovely day and we'll see you next week. Bye.