hey guys welcome back to another video now in today's lesson what we're going to be talking about is elemental breakpoints or how you can actually go about making your website responsive now i was directly asked the other day whether i could put this video together so very recently elementor for wordpress has released the opportunity for you to create additional breakpoints on your website okay previously they just have three different breakpoints for mobile desktop and tablet now you have around seven okay so what we're going to be discussing on screen is one how you go about activating these how you go about editing them and how you can go about adding additional breakpoints for your site i'll also talk to you a little bit about how breakpoints work within elementor and more importantly how your styles cascade either upwards or downwards depending on the media query or the breakpoint that you're working within [Music] so before we get into this please do hit subscribe please do hit the bell notification too and you'll be notified of all future releases also i'd really like it if you could let me know down in the comments whether you are making use of the new element or breakpoints feature as of yet cool now without further ado let's jump on the screen okay cool so we are here we've logged into wordpress we're currently at the dashboard now i've just logged into my own personal website here so this is the agency website now in order to use breakpoints or the variety of breakpoints that are now available in elementor originally we just had three breakpoints which was mobile desktop and tablet now we have the opportunity to to create some additional scales and additional points in which our content collapses so to make sure that you've got this available on your site what we need to do is just double check we're going to go to elementor and then hit settings and then from here if you go to experiments so it might be that with your version of elementor that you're running the break points might still be considered an experiment and it not be turned on by default so if we just scroll down there we go we've got additional custom break points so this is currently on so by default ours is on which is great what you want to do is make sure that if it's not on so if it's looking like this one inline font icons then that means it's off you want to make sure that it's green so you would then want to switch that to active okay if it's not green and once that's done what you want to do is scroll down and hit save okay now we all have the opportunity to create extra break points within our website now so to do this we need to go visit an individual page so let's just visit the home page in this instance we're going to edit it with elementor all right cool so from here let me just pop that away so in elementor we have the opportunity to see what our content looks like on a variety of devices i've already said mobile tablet and desktop now it takes a desktop first approach i believe everything that you design in the browser is done so via the desktop and then the styles tend to just cascade down depending on the device so let's hit this responsive mode icon down in the bottom corner and you'll see here we've got those three different devices we've got desktop tablet and mobile that's great so we can click each of these and you can see how the content collapses in in this instance okay so it's inheriting all of our styles from my desktop and it is bringing them down so if we are on desktop and we wanted to make changes to this piece for example we would click inside there we'll have our styling options over on the left hand side if we hit typography you can see that any changes that we make here is being changed to the desktop size we could then switch that to tablet and any changes that we make is going to apply to the tablet right and then if we switch out to mobile you can see that it's inherited the size from the tablet and it's cascaded down so that's essentially what cascading means it will take your styles from your desktop and it will cascade it down to either your tablet or your mobile so that hopefully clarifies that now i'm just going to replace this like so cool so how do we get some additional break points what we want to do is head over to our manage breakpoints cog over on the top right now actually i didn't see this initially i had to ask ask a friend to help me here um but what you want to do is click that toggle and then over on the left hand side you're going to see some additional breakpoint settings now this is really cool because this now allows us to create some additional responsive points depending on what device you're working with so in order to add some breakpoints you can see under the active breakpoints section that we've got mobile and tablet already activated and they are these two here desktop will always stay we can't we can't remove that or essentially we don't need to add it and because we are using a desktop first approach and the styles are cascading down to smaller devices so what we want to do is click the plus and you'll see all of the extra options that we've got here so we've got mobile extra we've got tablet extra laptop and widescreen now the two mobile and tablet are a slightly darker shade because they're already active so we could hit mobile extra we could hit tablet extra so just adding those two for example you can see that we've got our break point settings being applied down below all right and one question that i got asked the other day was how do we know what width of pixels do we assign to each breakpoint well luckily this just takes care of it for us so we'll automatically assign the best practice of width for each of those devices okay so let's add a few more cool and you can see that from on mobile from 767 down that's going to be considered the mobile device anything above that is going to be extra mobile tablet is 1024 so 120 1024 pixels wide then now we've got laptop let me just move that and then we've got a wide screen okay so that's a new one that's 2400 pixels wide which is really really wide guys all right so to see what these look like and how this transitions over to the canvas what we're going to do is just hit update all right and it's going to ask for elementor to reload that is absolutely fine so let's just hit reload now cool so here we are back at our main editor we're going to do his hit responsive down on the left hand side again cool and you can now see how many additional devices that we've got so originally we just had the three we've now got seven one two three four five six seven so we've now got seven and by default we're still relying on the desktop all right so what's going to happen now is the styles that are applied to desktop they are going to cascade down to these smaller devices but this device that we've got here widescreen is going to cascade upwards okay so any styles that you apply to the desktop will be applied also to the wide screen but this has just given us an opportunity here so after clicking white screen you can see how wide this is like this is super wide but it does give us an opportunity to make things bigger if we want to so we can we could potentially you know increase the size of our main container so we could you know there we go that's a 2 000 width so that's increase the size there that will only apply to the the super wide screen it's not going to apply to our desktop okay so you can see how the styles had cascaded up we've changed them specifically for this width and we can do so the same for our laptop our extra tablet size that we have now see you can see that there is a break here which i'm going to have to go and fix and then we've got tablet mobile extra and mobile okay so tons of different styles available for multiple devices that we now have available okay so we've got seven seven devices seven responsive whips that we can code for so that's awesome so that's how you go about creating breakpoints in elemental so there you go guys hopefully you found that valuable you now understand how you could activate breakpoints within your elemental website if they're not already there and also how you can actually add and remove additional breakpoints for your website and make changes depending on the breakpoint or the device that you want to be styling for as i said earlier please do let me know down in the comments whether you are making use of this feature yet i know some people are aware of it other people are not quite aware of it so yeah i'd love to hear more about that if you have found this valuable please do give it a thumbs up i'd really really appreciate that also hit subscribe and the bell notification too and you're going to be notified of all future releases on this channel now there is an end screen coming up with more valuable content for you so please do stick around and check that out that's it for me today guys and i will see you in the next video bye [Music]