4 Common Elementor Mistakes To Avoid | Tips and Tricks [ADVANCED]

what's up guys i'm uriel now in this video we're going to be going over the four common mistakes people make when building a website on elementor now this is going to be a really insightful video i put in a lot of effort so if you guys could squash the like button for the youtube algorithm that would definitely help me out a lot and the channel now if you guys haven't subscribed to the channel please consider subscribing so you don't miss any of my videos because i come out with a lot of stuff that you're probably not seeing anywhere else so you definitely don't want to miss out now i hope you guys really enjoy this video the first common mistake that i always see is people don't set up their site settings whenever they're starting an elementor website i feel like that's super important because it just makes your process of building the website a lot faster so what we need to do is go over to just go into any elementor on page and go into the editor and then over here on the top left corner go into site settings and then here we have our site settings and these are the ones that i'm talking about that need to be adjusted before we even start building our website on elementor so first one is our global colors so we definitely always need to set that up that's always super important so i'm not going to get too into this i don't want to make this video really long so i'm just going to give you a little overview so primary is just your primary heading um secondary is your subheading on your website um just to give you an example so my primary heading is this here and my secondary heading is this one here okay and then my text are basically going to be your paragraph um area and then your accent is going to be your buttons and that sort of stuff okay so let me go ahead and go back here and then we have our global fonts so you always want to set this up now for me i am using the the default font for this website so it probably doesn't even look that way but it's always great to have your font that you want to be using for your entire website like i said primary is going to be your primary heading and the secondary is your subheading text is just your paragraph text and accent are you you know your buttons and that sort of stuff so um i will have a video on this more in depth on what each one is about um so i'll have that out soon so that's pretty much just a brief overview of that um i'm gonna go ahead and go back here so that's always good to set up and then our our theme style so you can set this up but i wouldn't recommend it because you do have to go to your settings and you basically have to um turn off your your default colors and fonts um in the in the settings page here so i wouldn't i wouldn't do this just because like i said it's going to turn off the elementor um default colors and elementor default fonts which are pretty much these here and you wouldn't you won't be able to save colors or fonts and um it's just not necessary and it's the same for basically all of this so i don't really i honestly always skip this and then we have our site identity which just is pretty important but usually this is set up i mean this is the home page so um i definitely always recommend that you do have um your site name in your site description um for me i mean this is just a test website so that's just how that is and if you do want to set a background you can set up a background for your entire website um and you can also set up mobile browser background that's usually like the the search area on your mobile phone um you probably i don't know if you know what part i'm talking about but it tells you right here anyway now we have our layout settings now these are really important they're always overlooked i mean i used to not even really do this but now i do and it saves me a bunch of time i don't got to set the the width for each section i can just do it from here um it's always usually it's going to be the same i mean my header does have a different width but that's always just my header sometimes um but so if we were to just move this around you notice that it would start adjusting now just note that for my website it is 1280 but i usually like to leave it at 11 40 which is the default anyway but for this particular website i did do 1280 that's why we have it at that so that's always super important to set that up first the width of your section and then we have our widget space i usually don't touch this i always leave it at 20 but this part is pretty important as well in case you want to adjust the spacing between your text and your buns and pretty much any element so as you can tell if i move this to 50 you notice that my text here my text my buns and all of my widgets start to space out um that's always super important so you always want to make sure that you adjust that appropriate to your design all right and then and then um usually i leave the my uh default page layout and i mean it just depends i always always leave it at elementor full width or if i'm barely starting a new website i don't have my header built out yet um then i just leave it at canvas for now um and then these other settings i don't really go over too much i don't really use those as much okay so then we have our break points here now these are super important this um this can definitely be overlooked sometimes as well so um this just you want to go over your break points and this is pretty important um when you're having issues with your website let's just say at a cern at a certain um at a certain size and what i mean by size i mean if we go into here let me just actually i think i already had another page open up yeah i can just remove this one so when i'm talking about size i'm talking about the size of your screen the size of your device um the width in particular so as you can tell whenever i'm moving this down there's a certain break point where it's going to switch to my tablet and you'll notice it's usually about 10 20 10 something i believe um there we go so it's about 10 and something um and i think i have it at it's at 10 24 actually so let's say for some odd reason um i want it to i want the tablet to start maybe at 12 at 1200 just because i'm having an issue where as when it gets to 1200 um my header is moving around not in the right direction and something you know something not so good is is happening right um so what i would suggest doing is and i just noticed on my menu on here so i got to fix that later on um so basically you would go in here and move that to 1200 just change that to 1200 and then over here you if you're having issues with your mobile break point and let's say you want your mobile to begin a lot sooner maybe at 800 you can switch that to 800. i'm just giving you guys a brief overview of this um i do i think i do have a video on this or i will have a video on this actually i'm coming out with the course um that's pretty much gonna be all about responsive design on elementor so i will have that out soon um so it will definitely um be a lot more in-depth and hopefully you guys um get some value out of that so i'm gonna go ahead and just actually uh discard this now let me just go back to my settings here in case i missed something which i think i did i believe okay so we went to layout and then light box here now you can usually adjust this this is just your standard light box um whenever someone clicks on an image if you have that set up um you can go ahead and adjust this i usually don't adjust this too much um and then we have custom css which not really necessary and all this other stuff isn't really that necessary either so the second mistake that i see people doing is they use a necessary amount of columns and let me go ahead and show you what i mean by that so elementor has a great example of not using that many columns so i went ahead and just used one of their templates here and the sections that i did want to highlight was mainly this one here you see how um within this column they didn't add another inner column probably because they can't either but you see how they they ended up just using um their element and they just extended the width of this and they added a border and that is a great example of not using that many columns i know that they are using um their column and then an inner column so let me go ahead and show you guys the mistake that i see people doing and let me show you how you should go about um building it the right way so i'm actually gonna go down here and i'm gonna create a new section so i'm gonna have about four columns just to show you guys an example of something not to do so let's say you're gonna have um some services box which is what i usually see a lot people have the service box you know so i'm gonna go ahead and just type in um box icon it's usually just comes up or image box icon box one of the two is fine so this is what i see a lot of people do they do this and they add their boxes here and they set up their services and everything now this is generally i mean it's an easy way to do it but it's not the right way that elementor actually recommends the right way to do it is actually do it within one column and let me go ahead and show you guys how we go about doing that so i'm going to move all of these into one column and then i'm going to go ahead and remove all of the other columns that we're not using but then you're telling me well this doesn't look right how do i adjust this well it's very simple we need to start using inline positioning so head over to advanced and then go into positioning and this is where we have our width and this is what we need to set up so we can either set this to inline or custom now i do tend to use inline and then also custom as well so it just depends on um just depends on what i'm doing really so i'm going to go ahead and set that to in line but as you can tell now that it's set to inline um it's not really at the right spot where i want it i want it kind of more i want to i want it kind of the width to be a little bit shorter so then everything can fit so we actually need to use custom so this is where custom comes into play and we can kind of move this wherever we want now what we need to do instead of just you know going and trying to figure it out where all these were are going to fit and you know and going over here and pasting it all over and see if they fit properly now i know that it's usually about 250 around there but we just we can just do some simple math so we go in here and we see that it's set to the to the default which is usually 1140 that's the default um width for your section that's that is what we set it um to earlier if you guys do remember that's why that does come in handy knowing the default um width of your section now we need to do is just do a little math and then we can determine um basically what we need to uh what we need to set the size for every box so we have four elements we just needed we just need to divide four by 1140 and then um we need to add some little space in between each um each box because we are going to need a space so i would say maybe about 20 pixels in between that's 20 40 60 80. um so we got about 80 so about 80 pixels of space you know that's a lot of these settings can be a headache but trust me you you really want to master elementor and once you get your head wrapped around it it's just gonna building websites is gonna be so much easier guys so i'm definitely gonna have a course coming out on this i know that i've been mentioning it probably throughout this video um and i definitely recommend you watch that course because i am gonna dive deeper into these topics so we're going to set this to 265. so go go into the your your icon box go into positioning and custom we're going to set this to 265. 265. and then what we're going to do is instead of going into every single one and adding that that width we're just going to go ahead and copy it because that's is so much easier we're just going to copy it and then we're just gonna paste the style there we go there we go and there we go now this is pretty good i mean you can you can go ahead and adjust it maybe make it um 275 you know if you don't want that much spacing but once you have your size set up for your boxes now we just need to go ahead and align everything so go ahead and click on your column here click on your main column and that's where the vertical alignment and the horizontal alignment come into play mainly the horizontal alignment so what we want to do as i'm sure you've probably tinkered with this you've gone you've clicked on this and you probably go either start or center most of the time everyone just goes straight to center right but we have these other options here and these are super useful space between face around and space evenly space between is going to add space between these here you see and it's going to make everything um going to make everything more even but like throughout the spacing in between so anyway so if we have space around it's going to go ahead and add the space on on each side it's going to add it on each side and in between as well and then we have space evenly and it's just going to space everything out evenly on each side and in between but i usually like to do space between that's always perfect so like i said i'm not going to go into this too much because i don't want to make this video too long i mean i feel like the video is already going to be pretty long um i will have more videos on this in the future i'm sure you've probably seen this before because i've definitely covered this on my channel on between videos so the third elementor mistake that i see people do is the spacing so notice on a lot of websites um there tends to be either a lot of spacing or barely any spacing at all and everything is just really clunched together or super spaced out so you always want to have a consistent spacing all around your websites obviously for some you know sections you may have different spacing depending on the graphic or what that may be right and i'll show you guys a few examples um so on my website here you'll notice that let me go ahead and click on let me go ahead and click on this section here notice that i have it set to 100 but at the top i have it set to zero but just because there's already spacing um above here as you can tell that we already have the spacing which is about 100 pixels here and if i were to click on this top section you notice like i said from the top it is 100 but then i have 30 but like i said we have the spacing from this image um so that is kind of the reason why but i usually like to have a hundred for the top and a hundred for the bottom now if we go down here we'll also notice that we have a hundred from the top and a hundred from the bottom and this section as well 100 from the top and 100 from the bottom pretty consistent all around now my footer like i said it just kind of depends um on on on the section the footer you can adjust those a little bit differently but you can also set them up to 100 on the top and 100 at the bottom on pixels so and for mobile it's i've seen this a lot for mobile people tend to have a lot of space or barely any space at all between their sections um and obviously you want to have the consistent same spacing between your elements um that is usually set for you by default so i wouldn't even really touch the spacing too much when it comes to um your elements sometimes obviously you want to have um your your sub heading a little closer to your heading which that is pretty common so that's fine but everything else we want to leave a consistent spacing now let me go into mobile here and i usually like to do just so then you guys know i like to do 50 um from the top and 50 from the bottom when i say 50 i mean 50 pixels um just so then you guys don't get confused on that part there so i'm going to click on this section here just to give you an example as you can tell i'm doing 50 there 50 pixels um and then i'm also doing 50 pixels here as well and then another thing that i did notice as well that people do and you will kind of notice the the difference here um you know what and i also did 50 pixels above and 50 pixels at the bottom for this section here but another thing that i did notice um and as you can tell there there tends to be a little bit of a difference here right and i did this on purpose you notice that this section at least on mobile each side is set to 20 as you can tell from the left and the right is set to 20 and that's pretty consistent sometimes i see people um they they don't have any spacing on each side and they have they have um their elements their elements or their their um their columns super close to the edges here and that is definitely does not look great so i always like to have 20 from the from each side sometimes even 10 but let me go in here and set this to 20 and you can pretty much see the difference on this as well right i know for this part i think there's just a little issue going on here by just a little bug there um but it's all pretty consistent now let me go ahead and go into the website and it's gonna load up on mobile here i know that i have the spacing above here but that's just because i had a header there um but as you can tell everything else on mobile the spacing seems to be pretty consistent um i know on this one for some reason it looks a little bit less here but that's just how it is for right now for some reason but as you can tell everything is usually pretty consistent when it comes to the spacing um it's all pretty consistent except for my footer there but that's what i'm talking about you want to have a pretty consistent spacing um i don't know why something's going on with this but my spacing isn't right for some reason here maybe i have this set to no gap i don't know but i have to check that out later but usually just you just want a consistent spacing on that and then just for a good example i wanted to show you apple apple's website is always a great example for for design um it's very simple very clean and as you can tell most of their spacing is pretty consistent um i don't know the spacing here it's probably about 40 or 50 pixels looks more like 40 pixels or 30 um but it's usually pretty consistent i know right here they they they did um they did make something a little bit different but you will notice like i said some sections it just depends on what they're using um so as you can tell here since since these images i can tell affect the spacing that's why they did it this way it's just these two sections but if we were to move for instance this section is basically the same as this one you notice the same amount of spacing and this section is equivalent to this one has the same amount of spacing there except for this part and then here it's the same spacing from this one here it's just that this image is probably propping a little bit down and then we have the same spacing here things consistent spacing from there and it's usually pretty consistent when it comes to the spacing i know like i said it just depends on the section but you want to have consistent spacing all around some sections can be a little bit different depending on the section if you have an image or whatever that may be so i just wanted to go over that um just to kind of show you guys an example there and yeah like i said i'm even looking at it on desktop and basically the spacing is pretty consistent all around obviously those you do have to factor in the images sometimes they're different sizes and you have different spacings but we want every box to be obviously the same size so that's kind of why they did it that way the spacing is always pretty consistent there as you can tell so the last and definitely not least because this one is pretty important and i see a lot of people make this mistake i see it on tons of websites and most likely they're wordpress websites i mean that's what i assume because i tend to see that issue out a lot so the issue is here as you can tell for your copyright um text we have the wrong year um and this is an easy fix and for some reason it's overlooked a lot i don't know if people just don't look into it or they don't know how to do it but it's a simple fix and elementor pro makes it super easy for you to do it but if you don't have elementor pro i'll show you guys how to do it without elementor pro as well so let me go ahead and cover elementor pro first just because that is the easiest and the fastest so head over to your um wherever you have your footer and wherever you want to go ahead and add the year so what we're going to do here is we're first of all we're going to copy this because we're still going to use this and then we're just going to use our dynamic tags and we're going to click on this and it's pretty cool here we're just going to click on current date and then let's go ahead and click on this and we're going to go into custom and then as you can tell we have the the date but we're only going to do year so we're just going to remove everything else and we're just going to set it to y which is a year and then we're going to go into advance and this is where we can do the before and after right so we're going to go ahead and add hiking club 2020 and then remove 2020 anything after this 2020 we're going to have um just remove this here really quick there we go and then all rights reserved we're going to leave this towards the end oops go ahead and click on that there i can and then we're going to remove this and after we're going to go ahead and add this there we go so and then we can even add a period here i believe can we do that or no let's see if we can um no we can't okay so we don't need to do that part that's fine we don't gotta add a period there we can just leave it at that for now and then we can try to add let's see we need to actually add a spacing here be perfect um to remove the spacing oh no that one just added space in there okay all right so now we have that all set up and that's something that i see a lot of people do um and i definitely would recommend that you go ahead and fix that issue definitely see it quite a bit um just to be able to do it it's really simple so i'm going to go ahead and remove this here um i'm going to go back to my dashboard here we're going to go into um so you can you have two ways of doing this you can do it within your theme editor make please make sure that you have a a child theme because whenever you update your website that code is probably going to be erased um i have a child theme i'm currently using the the hello elementor child theme there's tons of videos on this just search it up on youtube if you don't know how to set this up okay so first we can go into the theme editor and just make sure you have a child theme just like i mentioned you can go into your theme functions and then just paste this code which i will have down in the description um if i have it here open this up here i saved it on here somewhere all right and i'm just gonna copy this i'm actually gonna there we go so i'm gonna grab this code here and i'm gonna go back in here and you're just gonna paste it let me go to remove this actually let me open this up all right and then go ahead and paste this down here and then click update and that will work for us as well now if you don't have a child theme for some odd reason and you just want to get that fixed right away i would suggest installing this plug-in it's called code snippets i'll show you guys how it looks like let me just pop it up here um view details there we go this is how it looks like code snippets and then you can go into snippets go into add new go ahead and name it whatever you want year copyright or whatever i'm not going to name it entirely paste your code um run snip it everywhere you want to run it everywhere because you know you also actually you only want to run it in the front end so only run it in the front end click on this only run the front end and then click save changes and you're all set okay and then from there all we have to do is go back in here and then i already added it to my theme so i'm fine and then we just need to do some brackets here and then in between this we write year now it's not going to show up right here obviously but it will show up and at the front so let me go ahead and scroll down and there we have it 2021 and we can we even have that period in case i know that we weren't able to do that with that but i honestly didn't look too into it um with just doing it with the pro version i'm sure you can do it as well adding the period there now that's pretty much it for this video it was a pretty long video and it did take me a lot of time and a lot of effort so if you guys did find this video helpful make sure to squash the like button for the youtube algorithm and if you guys haven't subscribed to the channel please consider subscribing but like i mentioned i will have an elemental responsive course out soon so look out for that now as always thanks for watching and i'll catch you guys in the next video

Channel: Uriel Soto

Views: 5,254

Keywords: elementor, elementor pro, elementor tips, elementor tips and tricks, uriel soto, common elementor mistakes, elementor advanced tutorial

Id: _tHRDE_3tHw

Length: 27min 14sec (1634 seconds)

Published: Sun Jul 11 2021