 Alright, if you've seen any of my videos then you already know I'm a huge fan of Elementor. In fact, it powers about 90% of all WordPress sites my design studio builds. But there is one caveat to using such a powerful and robust solution that has so many different options and that is it has a bit of bloated code. I mean it's no secret that Elementor is dope. You can do so much with it. You can build websites so much faster with it. But there is that trade-off that it does add some bloat inside the code. But there is a way to minimize that. In fact, to even follow some best practices that I'm going to show in this video that way you could reduce any kind of bloat making your websites faster and leaner. What's up everyone? I'm Jeffrey at Lightbox and I love talking about web design and the business behind it. If you want to stay updated with more web design related content, hit that subscribe button. That way you can get notified when I drop more gems. Alright, let's go ahead and get into this tutorial. And what we're going to do inside this video is I'm going to show you some best practices on how to use Flex with Elementor. That's going to reduce a lot of the bloat that's inside your HTML. Now I know I'm going to use some terms that are a bit techy. But I'll go ahead and make this very simple and hopefully do my best to make it easy to understand. So let's talk about Flex and let's start off by what is Flex? Flex is a display property in CSS that makes it easier to design flexible responsive layout structures and arrange elements within a container. Alright, that was a bit of a mouthful. Basically, Flex gives you flexibility on positioning and where to put your elements within a container. So think of a section in your webpage like this. That's a container. Basically it'd be like your column inside Elementor. And when you put in your elements in there, they stack one on top of the other. What Flex does is you got that container and you can put the elements in different areas on there and you have more flexibility and control inside the layout without having to add multiple containers or for Elementor without having to add multiple columns. Let me just show you it's going to be a lot easier to understand this way. So we're going to use this site as an example. This is something I've been building. This is actually for a course I have coming out. So it's my own personal site right here. But I wanted to use this row as an example. So you see here that I have four columns up here on the top and I have the same exact four columns on the bottom. Even when I resize them, they're all the same. So they look identical, but they're actually built differently. Because this top one right here, this is all just inside one column. It's all wrapped together using Flex right here and laid out using Flex where this bottom one right here, this is being used with the traditional four column structure. Let me show you in the back. So we have this top column here and you can see in my section I have just one column here and everything in here is being laid out horizontally. These are actually just icon boxes in Elementor and they're all aligned horizontally inside one container. Then we look at this one right here and each one of these are columns and it has one same exact icon widget inside each column to lay it out as well. The problem is using this method right here. This is where we start to add a lot of bloat and this is an opportunity that we have to reduce that bloat and to make your site leaner because each time you use a column, there's extra HTML and div wraps that go around that. So if we are using four columns inside one row, we have three times more div wraps on those columns where if we're just using one column. Now first off, let me explain. I'm going to be using the word flex a lot and that's because that's the correct technical term. That's the correct term of the property that we're going to be using but you're not going to see the word flex at all in your Elementor settings or control panel but I will show you where it's at. It's actually in your positioning but before we get into that, let me go ahead and explain how this all works and how the default settings work. This is a bit more of an in-depth tutorial but that's because I'm really hoping by the end of this that you're able to wrap your head around it because that's what's really going to help out by really understanding how this works. You're going to be able to apply this in all your future projects. You're going to be able to look at the way you're adding your elements inside Elementor differently. If I just go through too quickly though, you might not really get the whole idea and concept of it so please bear with me. Okay let's go ahead and show you the default so I'll add a section here and we'll just go ahead and add one section. Let me put some padding here just so we got some wiggle room. If we add an element say we add the text right here you can see it covers the full width. When I hover over it you know this little blue box right here that shows it's covering the full width and that goes with any add element I add. I could add a button right here and this little button that's only about 60 pixels actually is taking the full width and so on and basically this is the display block or inline block property and that is default. It's default with Elementor and it's default with all the browsers that use for their display property and what it does is it stacks things on top of each other and it stacks them at 100% width. That doesn't really give that much room to build layouts. It doesn't really give that much room. The only option you have is to create multiple containers or multiple columns in order to control the layout and that's where we get a lot of the bloat by having all those different containers. So Flex what that does is this turns something that's 100% width and you're going to find it okay so this is where you find Flex and how you find where to change going from block to flex. Navigate over to advance scroll down to positioning and right here underneath width this is it right here. This is where you find your settings to go from block to flex. You're going to have four different options here. Default and full width 100% are exactly the same. By default it's full width 100%. That's why it shows it's taken up the whole space in the container. Inline Auto this changes it to flex. This changes it right here to flex and you will see now it does not take up 100% it only takes up the space of the element and if we do this to multiple elements let's go back here to our button which changed this to inline auto it puts them side by side because we have all this space in the container that's open so as long as the let's duplicate this as long as the element could fit inside here is going to stay horizontally but if we get an element that can't fit in there then it's going to go right to underneath and so on and we could keep duplicate and it'll keep going on that way so it's structures like this flex structures like this where block and the default structures like this I hope that makes sense I'll show you more and it should make more sense later on so the next setting that we have let's go down here to positioning then the next one is going to be custom and this is where we can start controlling the width of our element and how much space do we want to take and we have three options in here we have pixel percentage and vw which is vertical width pixel I find that I use pixel seldomly I use it inside special circumstances say like I have a paragraph that I want small with the title big I'll probably use that on the paragraph just to control the exact size of that paragraph I seldom use pixel I hardly ever use vertical width the one that I use most often is going to be percentage and if you want to build a layout like this where it can basically mimic having four columns percentage is a way to go and it's probably the easiest way to start to get used to using flex because with percentage will we have 100% of the container of your column so right here there's 100% width so if I want this right here for example to be two columns I would make it 50% and 50% if I wanted to be three columns I'd do 33.333 33.333 and so on if I wanted to be four columns I would do 25 25 25 25 as long as it equals 100% and it has to equal 100% if it's 101 the last one is going to break and go right down to the bottom so we could see right here let's give a percentage was put in 50 now it's taken 50% of the width right here same thing here let's give it a position put on custom go to percentage 50% now it's taking 50% now we have two equal columns right here instead of adding two columns and let's add a third element we're going to play around a little bit right here and we're going to play around with a few things too so we'll add a third element I'll put it right underneath this button let me make this image like 200 pixels right here and I'm going to also make this one right here in line but I'm going to make custom on here and I want this one to be 33.333 and I'm going to do the same here I want to make a three column grid right here see 33.333 and the same thing here 33.333 now we got our even three columns here and they fill out the whole space of it and you can see even if we move it they're all responsive along with it so this is the first part of learning and understanding how flex works is seeing how you could actually create multiple columns but without having to add columns instead creating multiple columns within a single column so when you have something like this with three columns you can go ahead and add in a new element let's add in a text block you could go ahead and give this text block a positioning a custom and let's create four columns right here so it's 25 and let's turn all these to 25 and create four columns five and 25 and now we're just using random elements right here but I want to give you an idea of just how powerful this is and how much it could be used so here is a webpage I created this is for a course that I have coming out on creating maintenance plans and selling them this one right here I have a lot of sections of multiple columns I got this one with three this is all wrapped inside one column I got this section right here with four spaces with four blocks this is all wrapped in one column as well what I did here was I made this 50 percent I made this 50 percent this 50 and this 50 because 50 and 50 that is 100 inside there then another 50 50 that's again 100 so that's how I was able to make the square like that down here I got another one with four that's all wrapped inside just one column and right here I have eight of them I got an eight section grid and this is all wrapped inside one column 25 percent each and they just stack a line in line and then when you do 25 25 25 and 25 and then you put the next 25 it stacks up down here so let's try that here I'll duplicate this and you can see how they start to stack up just like that and then we could duplicate this one and you see each one's 25 that makes you can keep making grids like that so this is flex and flex layout next step now next step is having more control over the positioning more control how they lay out and now that's what I'm going to show you all right to do this let me go ahead and add a couple things right here this one let's actually do a menu let's make a menu right here I'm going to show you how you could use this inside of a menu so I'm going to style this up really quick and I'm just going to add some padding let me make this full width let me add my logo right here I'm going to line my logo to the left make it full and I'm going to make this 250 all right big logo and let me add a menu I don't have a menu right here set up I'm just going to put a list that could be like it so let me add my icon list underneath here you item I'll duplicate this just make a fake menu for right now I'm going to line this in the center let me make the text so we can see it and give it a typography all right and let me add a call to action button and I'm just going to copy and paste this element to make the styling go a lot faster paste out okay so you see each one of these are full 100% let me align this to the left and we're going to turn this right here into a menu all within one column so we don't use multiple columns so starting off here let's go to advance and to positioning and I'm just going to make this in line I'm going to make them all in line we're not going to give any custom sizes to them right now because I want to show you the controls and how to control them all right so they're all in line but you notice that you know they're like they're not really they're they're all side by side but they're all kind of like on top it looks really messy right here so where we're going to find the controls is inside your column settings so go over here click to your column and you're going to see the vertical line and horizontal line these two right here are your controls per flex this is how we control everything that's going to go on with your flex let's start by the vertical line you can make it go at the top which is default you could go in the middle so everything lines up horizontally perfectly you can make them go on the bottom or you could add space between space around space evenly and those don't do anything all we're going to look at is the bottom middle and top and most of the time we'll probably end up putting it in the middle now the horizontal line this is special right here just for flex so we got start center and space between space around space evenly start is the default and that means is where starts is all the way to the left in the center it aligns everything inside the center and this is controlling all elements right here you see that we're controlling all the elements within our flex box and then the end is going to push it all the way to the left what we could do here though is we could put space evenly and space evenly is going to wrap it from the first element's going to be all the way to the left the last element's going to be all the way to the right and whatever's in the middle you're going to have even spacing there we go we got our menu right there that would be enough to create a good menu layout but let me show you the other options we got we got space around which just makes the spacing even around everything it doesn't spread it out though it's the space between spreads everything out and then space evenly which creates even padding in between each section with this one I would just put a space in between and there we got our menu right there and as you make it responsive you see it's fully responsive right there so that is how we work our controls now I'm going to do one more example right here I'm going to do something a little bit more complicated here I'm going to do two columns I'm going to build something similar to this right here and I'm going to show you how I build something like this so I'm actually going to copy and paste some of the elements to make it go a lot faster copy this first let me add some padding what I usually do is I always put 12 I like 12 on my right and left but on my top and bottom I either put 80 or 100 always here I'm going to put 100 I like to keep consistent top and bottom paddings and I never use margins on my sections as a rule of thumb so let's go ahead and just paste in these elements here all right so here we're going to put in we're going to put in icon boxes right here and I'll put the image box here and let me go ahead and style this one up right here line it to the left so I want to make this one 50 percent of the width so I'll put this here go to percentage make it 50 and then I'll just duplicate it then duplicate it again and then duplicate it again and that's how we stack it up and you can keep doing it that way and then when I style these up I would go here and I would add margin to it I give it some padding right here so you can give some margin that'll give us some space you can do things like give it a border and that's how we would give it space around it then I would add in some padding to give some space in the padding 20 and then if we just copy and paste this style right here you will see now how we get the four elements all within one column and you can style it up any way that you like so the goal for this is to look for the opportunities there are going to be times when you do need to use multiple columns for example here I had to use two columns here because I can't stack up multiple texts and have multiple texts and multiple elements all this way these texts I need these to stack up on top of each other uh another thing was let me see down here on my call to action boxes I had to use multiple columns and I had to use these because I have multiple elements that I need to style up separately inside that column so in these cases having multiple columns would help out but inside of a case like this where each one of these are just one widget this is when we should use flex and the power of flex and keep that code lean and clean all right I want to show just one more example before we move on from this because this is something else that'll be really helpful we looked at the percentages there are cases where we would like to use pixels and I'm going to show one right here one thing that I use a lot are share button social share so I'm going to add an element here and I'm going to add text here I'm going to put share all right and then next up I will put let me first style this up so it doesn't look like a big title I'll put my subheader next one I'm gonna put my social share buttons and we got my share icons right here so let's put this over to the left so here they stack up but this is where we could also use inline with pixels so let's go over here and edit this one and make this inline and we're just going to make this inline we're not going to use percentages on this one and we're going to do the same one on this we're not even going to change the spacing on it do the positioning here make it inline inside here let's make sure that they are aligned inside the middle and then the horizontal align you can leave on default or move to start which start is a default here on the share we could go ahead and give some padding right here let's give some right padding about 20 pixels and there we go now we're able to add a social share but you can add a title behind by that right there now we cover desktop using flex how about mobile how about what do we do for mobile and it's quite easy really flex isn't needed too much on mobile very rarely so if we were to go to mobile let's go ahead and style this top section up right here on mobile we'll click over to the mobile view on it and oh we could actually just do this one let's do this one in mobile view so this is still at 50 so it's still taking 50 percent of the width all you got to do is go back to your positioning and put it down to full width and you would just do that on each one of them i'll just copy and paste that style and that's what you do when you go down to mobile for you could do that on all of them so each one of them this is still taken up 25 percent just go down and make it full width and then make all them full width and they'll stack on top of each other again mobile and setting up for mobile is actually pretty easy then you just got to play around with your paddings and margins and always always i suggest whenever you're styling up for mobile make sure you have your phone and adjust your paddings and your margins and everything according to what you see on your phone there's so many different ways you could build a layout and i've been experimenting i've been practicing and i've been finding best practices i could tell you my very first sites on elements were uh we're all just learning experiences but after building it for so long and trying out so many different ways i found out these best practices so something like this social share icon i could probably build this four different ways but not all those ways are really the best way to do it using the flex though whenever you're able to use a flex you're going to be able to improve how you are building your sites you're going to be able to make it cleaner leaner and i hope you just have fun with it elementors fun it's fun uh it's kind of like playing video games while i'm building a website that makes sense all right i hope this video helped out uh yeah if you like it subscribe you know do all that good youtube stuff it's much appreciated i appreciate the support i'll be back again soon with more elementor web design and web design business related topics all right thank you