Easily Manage your Container Width from here in Elementor Pro
Easily Manage your Container Width from here in Elementor Pro
I hope you appreciate this short, but very useful video on how to use the global container width.
Here’s the link to the code I mentioned: https://livingwithpixels.com/resource…
The video where I explained why 1140 is actually 1120: • Elementor’s default 1140px doesn’t wo…
The video where I explained my tricks for responsive design in Elementor: • I found a way to never use Pixels aga…
→ Software that I recommend
Elementor \u0026 Elementor Pro: http://livingwithpixels.com/elementor
Hostinger (Affordable Hosting provider): http://livingwithpixels.com/hostinger
Siteground (Premium Hosting provider): http://livingwithpixels.com/siteground
Figma (Design Software): https://livingwithpixels.com/figma
All software I recommend: https://livingwithpixels.com/links/
→ Gear that I use to create videos
My Laptop: http://livingwithpixels.com/gear/laptop
My Camera: http://livingwithpixels.com/gear/camera
My Microphone: http://livingwithpixels.com/gear/micr…
My Mouse: http://livingwithpixels.com/gear/mouse
→ Helpful for beginner
Elementor Basics in 10 minutes. Watch: • Elementor Wordpress Tutorial - The Ba…
Elementor Pro Basics in 20 minutes. Watch: • Elementor Pro Wordpress Tutorial - Th…
How to Install Elementor and WordPress. Watch: • How to add a domain in Wordpress - Do…
→ My social media
Instagram Livingwithpixels: https://www.instagram.com/livingwithpix/
Personal Instagram: https://www.instagram.com/rinodeboer/
Some of the above links are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn’t make all these videos without it.
Content
0 -> Hey guys how are you doing? So I have something
quite cool today I found a way to set up the width
6.18 -> for all of your containers on a global level
let me show you what I mean with a few lines
11.34 -> of CSS you can change your whole website to a
different width if you want to and this is so
17.76 -> much better than without it because without it
you have to set up the width for every single
22.92 -> container manually and then also go to the
different breakpoints and also set up your
27.96 -> width over here so let's say that your client or
you wants to have a different width on the website
33.48 -> you have to go into every single container and
change the with settings and you cannot use copy
39.84 -> and paste because this container has completely
different settings than this container as you can
45.3 -> see so without global settings it's a pain in the
ass so I'm really happy that this is now possible
50.7 -> on a global level and the second benefit of
using this little code is that you can have
54.9 -> more breakpoints than what Elementor provides
because by default Elementor only gives us tree
60.42 -> brake points a desktop tablet and mobile and yes
I know you can go into manage breakpoints and add
66.36 -> a few more breakpoints over here but still you
are limited to these six breakpoints and from
71.94 -> what I've been testing that wasn't enough because
if you for example would use percentages for a
77.16 -> section like this then the website will become
too wide so I wanted more breakpoints and with
82.44 -> this method you can add even more breakpoints
if you want to so let me show you how this works
91.56 -> and I don't know if you remember but six months
ago I discovered that the 1140 grid is actually
96.72 -> 11 20. this is still true because if you work
in a tool like figma you want to start with some
102.6 -> kind of whiff right something that looks realistic
because the last thing that you want is that you
107.46 -> design something in a tool like figma and then
you build it and it looks completely different
111.42 -> so using the 1140 grid which then becomes 1120
is still a great idea when you're designing in
117.96 -> figma or XD or even whatever you use and with an
Elementor I did the same because otherwise on big
123.42 -> screens it will become too wide but that now is
solved because you can add multiple breakpoints so
128.34 -> this means that I'm now switching to percentages
all the ways for for desktop tablet and mobile
134.52 -> before this in my last video I said for desktop
I'm gonna stick to pixels and then for tablet and
140.76 -> mobile I'm gonna go to percentages but now it's
just percentages all the way you can change them
146.28 -> however you want on a global level okay let me
show you how this works so the code code that you
152.64 -> need to use is on the website the new website by
the way have you seen it it's really cool so you
157.38 -> need to copy this code so let's do that copy
and then you can paste it in three different
162.66 -> places first of all you can go to the settings
icon over here then to Advanced and then you
167.46 -> can paste it over here I'm not sure if that is
the best method because it's on the page level
171.84 -> because we're now in page settings so what you
can also do is you can go to the site settings
176.7 -> over here and then go to custom CSS and paste it
over here and the last place where you can add
181.68 -> it is in Elementor and then custom codes create
a new custom codes name it box container put it
188.58 -> in the head and then paste it over here and that
also works but there is a little difference if
193.08 -> you paste it in the custom code then you need
to keep the starting style tag and the closing
197.82 -> style tag but if you paste it inside of your site
settings then you should delete that because this
202.98 -> is already a style sheet that's how it works so
make sure to paste it in here for this tutorial
209.22 -> I'm not going to paste it in the site settings you
should do that but I'm gonna paste it in the page
213.54 -> settings because then you can see live what's
happening which is nice for if you're testing
218.4 -> it right but if you're done put it in the site
settings custom CSS okay so now if you've pasted
223.8 -> it over here you're the leader to style tags
you see what's happening here so it's called C
229.44 -> box that is the class but how do you activate it
right because right now for example this section
235.02 -> is based on pixels so it doesn't do anything it
stays pixels so what you need to do is you need to
240.96 -> go to the advanced Tab and then type in over here
C Dash box and if you type that then it will use
247.26 -> the class it still doesn't work because over here
we have put a value in so we should delete that
252.6 -> and then it will take on the class that you've
created over here so now it should work oh by the
258.48 -> way I forgot to say that you need to turn off the
standard padding that they add to each container
263.82 -> otherwise you can get issues with alignment so
make sure that in your site settings under the
269.58 -> layout tab t container padding is on Zero by
default or install padding and then it's not
274.62 -> aligned so if you put this on zero or just unlink
it and update it then everything should work fine
280.68 -> I'm gonna update it I'm gonna go to the page and
now this one shoots skill beautifully there you go
286.62 -> skills again skills again skills again beautiful
as you can see all percentages it's not too wide
293.64 -> even on a full HD screen and if the screen becomes
even bigger than 9020 then it becomes even smaller
299.88 -> and if you want you can add more breakpoints in
here so let's say that you think this is this jump
304.8 -> is too big you just copy this you paste it you
add I don't know 3000 pixels over here it doesn't
311.34 -> really matter and then put this for example on
60 right so it's a jump from 65 60 55. I think
318.42 -> this is fine so I'm gonna leave it like that so
what you can simply do is just copy this C box
323.22 -> and then go over here Advanced and put it in this
one as well make sure that there's no value over
329.4 -> here and put the C box in same with are heading
so now we can easily change the width right now
334.2 -> we are on laptop big because with the panel on
the left you can see that it's 1560 pixels so
341.1 -> that means that we're in this skill because we're
above this one and we're not touching that one so
345.66 -> that means that if we change this value now it
will change beautifully here you can see a video
350.58 -> on how it looks on a MacBook on a tablet and on
a mobile but if you don't like the value you can
355.86 -> of course change it here so let's say that you
have a section like this which is a lot smaller
360.48 -> well then you just simply don't put the C box here
and then you can just use the values over here but
366.24 -> these are just a few sections on each website
so if you use a little bit of CSS and you use
371.34 -> this feature over here you can unlock a lot more
with it which is really cool I've also created
376.44 -> classes to set up the padding for each section
on a global level because on each website you
381.66 -> maybe have a big padding over here which is the
same over here you have a smaller padding over
386.88 -> here so why change it on every single page if
you can do it on a global level I got inspired
391.26 -> Higher by using bricks actually because they have
a brilliant glass system which I think Elementor
397.44 -> should have as well so we don't have to mess
with code which we have to do right now but until
403.26 -> Elementor has classes you can use these values and
of course feel free to add breakpoints and change
410.58 -> the percentages normally I don't do these Quick
videos but I'm trying to be less perfectionistic
415.08 -> with my channel because I want to upload a little
bit more so I hope that you can also appreciate
419.52 -> these kind of short uploads if you do let me know
leave a like and a comment and also the developers
425.7 -> that are watching if you think I'm doing something
wrong here let me know right because the beautiful
430.8 -> thing about the new website is that I can
change it so I will put a link to this page
435.48 -> in the description and if I find something better
then I'm just gonna change this page and you will
440.22 -> have the most updated code so the more Global
we can do the more happier I become and I hope
445.26 -> you as well so thank you and hopefully I will
see you in the next video on living with pixels
452.46 -> foreign
453.18 -> [Music]
Source: https://www.youtube.com/watch?v=DfL9H_nJuFw