5 Tips To Set Up Elementor Websites in 2023 | Things Have Changed

the way that we set up the elemental 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 turned 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 two are 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 break points if you're not using them turn it off uh 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 it's 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 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 unblock Google fonts all right Elementor did add an option recently for us to block Google fonts this is going to make sure that our websites are gdpr compliant also that we aren't loading fonts 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 fonts 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 fonts 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 client 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 uh 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 I 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 now 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 an element right here you're going to see there are 10 pixels that are space 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 unevenness 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 and I 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 uh 10 pixels this way you could see the difference all right let's update that right there you can see now how these overlap and I'm 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 workaround 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 an 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 it 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 gotta 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 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 that 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 alright 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 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 could 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

Channel: Jeffrey @ Lytbox

Views: 8,689

Keywords: elementor, elementor tutorial, elementor 2023 tutorial, elementor pro tutorial, elementor tutorial 2023, wordpress elementor tutorial, wordpress elementor, how to use elementor, elementor pro 2023, wordpress tutorial for beginners, elementor website, wordpress 2023, elementor pro tutorial 2023, elementor wordpress tutorial, elementor 2023, wordpress tutorial 2023, wordpress elementor 2023, elementor tips and tricks, elementor free tips, elementor design tips

Id: t7wBbIaPbJQ

Length: 10min 23sec (623 seconds)

Published: Thu Apr 06 2023