 The way that we set up the Elementor website today is much different than how we did it a few years ago. I mean a lot has changed. Elementor has grown, evolved, and added a whole lot of new things to it. And inside this video, I want to share with you five tips that have helped me to improve the way that I set up Elementor in today's latest versions. Tip number one, setting up your features and experiments. Now, whenever setting up a brand new Elementor website, it's important to go through the features and go through each one of these and either turn them off or on. Turn off everything that is not needed. Now, if we go here to your stable features, you're going to see everything is on by default. And the problem with this is we're going to have things like notes, which are going to be very rarely used in special cases that don't need to be turned on when we are building the website. Only it needs to be on when we are using them. And the thing is, if you leave this one on, it's going to be loading extra code in the front end. And we want to reduce all of the amount of code being loaded in order to optimize the website better. So quickly, we're going to go from the top to the bottom, and we're going to turn off and on everything that we either need or don't need. Now, for these, I am going to change this to inactive. I don't like to leave it on default. Just in case if the update pushes one of those to stable, I want to make sure it doesn't turn on on its own because sometimes I won't look for a little while after a few updates and we'll have some things turn on that don't need to be turned on. For Flexbox container, definitely turn this one on. If you're starting a brand new Elementor website, you need to start using containers. I have been using it on a daily basis for quite a while now. This is ready. So forget sections, turn this one on most definitely the rest. I am just going to put on inactive unless if I need to use them. Now, if I am going to use nested elements, then I will go back in and turn it on for now. Let's click on everything inactive now to our stable features. I always leave this one on this one on this one on and this one on because these are really helpful for performance issues. Now additional breakpoints. If you're not using them, turn it off upgrade swiper. If you're not using the slider, turn it off. If you are going to use it, go ahead and turn it on. Now for the new theme builder is totally up to you. Personally, I like the old school one. I just find it a lot more easier to use. Now I'm going to be building my own templates for my header and footer using the theme builder. So I don't need the theme, the hello theme for my header and footer. So I'm going to turn this one off landing pages. I'm going to turn off unless if I need it, I don't use page transitions. They aren't that good for performance notes. Definitely turn that off. It loads extra code loop. I love the loop builder, but I'm only going to turn it on when it is time. Now form submissions. This one never turned off. All right, make sure this one is set to active because this is super important, especially if you're building websites for clients. You want to make sure that all of the leads are being captured. Scroll snap. I'm going to turn off as well. I just don't use it and I've had problems with it after I do that. I'll go through it and just make sure I have everything set up. Okay, I did miss this one right here. I'm going to select active. I don't want anything just set to default and now we are good to go. Tip number two on block Google funds. All right. Elementor did add an option recently for us to block Google funds. This is going to make sure that our websites are GDPR compliant. Also that we aren't loading funds that we don't need to be loaded. That are also going to cause a slowdown of the website. They're not good for performance. So right here underneath Google funds, just go down and select on disable. Now everything is blocked. If you go over to your editor and you select on your typography, you're going to see no Google funds pop up could also prevent mistakes like your client going in and changing fonts around, which they shouldn't do. But if they do, it'll be a mistake that we could help our clients to avoid. The only way we should be adding fonts to our website is going to be right here in the custom fonts. We need to install fonts. This is the only way to do it now. If we are using Google fonts that are linked coming in Adobe type kit, those type of things, they're bad for performance. Also, they aren't GDPR compliant, which has its own set of issues. Now I do got a video coming out about adding fonts, but not only adding fonts, but optimizing them. I do got a trick where I'm able to reduce my font sizes by up to 90%. So I got that coming up next week. Make sure to subscribe. That way can get notified when it comes out. All right. Tip number three to remove the default padding around the container. All right, by default, your containers have this 10 pixel padding. If you look closely, you can see between this dotted line and this pink line, there are 10 pixels. So if I were to drop in an element right here, you're going to see there are 10 pixels that are spaced out from the top, bottom, right and left. Now the problem with this right here is let's say we need to use inner containers. All right, we got to use our inner containers. I'm going to turn this into a column right here. Let me select my flex so that way they're side by side. And now we have 20 pixels all around this element. What ends up happening is this breaks the design. Now 10 pixels might seem small, but if you keep breaking the design in this way, you're going to have a little bit of an evenness around elements. Things aren't going to be consistent. So by going over to our site settings and then going over to your layout, right here in your container padding, you can see they have the default set at 10. We want to turn this to zero. This way we could have everything flushed. You could have clean, perfect alignment, especially along the left side of your containers. Tip number four, get used to using the navigator. Going back to tip number three, removing the padding from the containers by default, it does create a bit of a problem. Let's say I go over here. I don't want to add a container inside here, making it an inner container. Well, it kind of looks like it just disappeared, but it didn't. It's actually here. But the thing is the inner container is completely on top of the outer container. So that way I can't click on it. Like let's go over here to show you what happens if I change it back to the default 10 pixels. This way you could see the difference. All right, let's update that right there. You can see now how these overlap on them able to access both. I kind of I'm just guessing here, but I kind of think the reason why the default 10 pixels is to prevent this challenge right here. But the work around for this is to get used to this navigator. Since using containers, I found myself needing to use this a lot more and made being able to move items from one container to another a lot easier. Maybe I wanted to add the item on top of a container which could be a nightmare trying to drag and drop it just going in here and getting used to it and made the whole process simpler. And let me go back really quick and I want to change this back to zero just like what we did originally. Let me update that. And now if I want to access this outer container, I got to do something to it. I could just go in here and click on it another tip though with this navigator which I stumbled upon just by playing around with it. If you drag it over here to the right, you're going to have a panel which makes it a lot easier and if you got a bigger screen like I do right here, I could go ahead and slide it over. I found having this open right here gave a far better experience and also this is one of the things I liked about when I was building sites on bricks. I really liked how having this panel here works. So if you could get used to using your navigator here on the right and your editor here on the left and you use them both for your process, once you get used to it, it's going to make everything a whole lot more smoother which brings us on to our last tip. That's tip number five and that is going to be setting up your global fonts and colors. All right. I would never build a website without global fonts or colors. First thing you want to do is go back over to your Elementor settings and make sure to disable the default colors and fonts. This is going to prevent Elementor loading their globals onto your site and then go back over here to your site settings and take time to go through your global colors in your global fonts. Do this always first before building your website. Really quick though, I do got a bonus tip because I did see something new come to Elementor. I'm going to go over here to advance. I'm going to go over here to Generator Tag and I am going to disable this. This is just a little, little something right here but it's cool that it's here. It just kind of popped up one day. I just saw it on here. All right. So what this does is if we go back to our source code inside our source code, it'll say we are running WordPress version so and so. Sometimes you might want to hide it. You might not want the public to see what version of WordPress you are using. So by disabling this, it'll hide that and that's it for this round of tips. I got some more coming out. If you want to see some more, let me know. But what I really want to hear, what are your tips? What tips do you feel are going to help other Elementor users and other web creators like us out? Drop them in the comments. That way we can share and learn together. That's it for this video. Don't forget that YouTube stuff like and subscribe. It does help to support the channel and I'll be back again soon. Thank you for watching.