Elementor’s default 1140px doesn’t work. Here’s why

Рет қаралды 119,587

2 жыл бұрын

I've discovered something quite huge about Elementor's default 1140px grid. It's not what you think it is and I've been doing it wrong for many many years. This information is really important for the upcoming container update that's coming to Elementor.
The measurements page
tools.livingwithpixels.com/11...
My Google Sheet calculations
docs.google.com/spreadsheets/...
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above 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.

Пікірлер: 543

@RyanMeffert Жыл бұрын

You are awesome Rino! My partner and I have a design agency and you just hands down changed our entire design system using elementor pro. You got two more loyal subscribers and you should be proud of the impact you're having on the community. THANK YOU ◡̈

@rinodeboer Жыл бұрын

Wow, that is super awesome to hear. Thank you so much for sharing 🙏🏻

@colibricontent7006 Жыл бұрын

I LOVE your geeky enthusiasm over this :D You are so unique and good at explaining, that I return to your channel over and over again. :)

@Eastie_ 2 жыл бұрын

Fantastic. Thanks Rino. Manually setting the 3 layouts across desktop/tablet/mobile is one of Elemtors biggest drawbacks. Whilst it's great to have the ability to change those values manually, having a logical default setting that produces an elegant visual design (as you have suggested) would be a huge time saver.

@MrSgrafix 6 ай бұрын

Thank you so much Rino! You have just saved my life! I've spent the whole day to figure out how to divide columns evenly...

@FullyMichellethecreative 2 жыл бұрын

This video is insanely helpful! I’m new to web design/development and this was some information I’ve been needing! I appreciate you for using your time to share this with us! 🙌🏾 Thank you so much!

@MaryJoeyIntas 2 жыл бұрын

Been looking for these measurements and just as I need it, I get the answers from you! Thank you! Big help!

@johannawerb-pieterman2857 2 жыл бұрын

Ontzettend bedankt Rino! Ik ga de gids die je hebt gemaakt gebruiken voor al mijn projecten vanaf nu want ik ben altijd onzeker over de juiste breedte op desktop etc. Nogmaals heel veel dank voor al het werk wat je hierin hebt gestoken :-)

@Hudge 3 ай бұрын

My goodness. I'm just shaking my head. This. Is. In… CREDIBLE! Thank you SO much for not just taking so much of the challenging head-energy out of this challenge, but for breaking it down like you did. I'm on your site… I'm just blown away. I'm trying to take a Photoshop mock from our designer, right now, and adhere to his gutter spaces (which looks about 60ish pixels apart). Gonna study your math. Incredible work!

@Jim.Hummel 2 жыл бұрын

Thank you for shedding light on something hidden right under our noses. It all makes sense now and this will help me transition from the "old" Elementor to the new container methodology. You're a breath of fresh air, Rino!! Thanks for the amazing insight!

@rinodeboer 2 жыл бұрын

You're so welcome!

@thevividfish Жыл бұрын

Awesome video Rino! Thanks for taking the time to explain the widths and create the resource page. I also wondered why Elementor created that default spacing in the columns, but all makes sense now. I like to work with a baseline grid of 3, so I'm glad you did one for 1260px 👍🏼

@christinaarnold8209 2 жыл бұрын

As a newish designer, I’m always excited to learn new things. As a nerd, this video makes me so happy. FINALLY, I understand the default 1140. I’ve been learning the 8pt grid system bc my brain must have consistency and structure. I have no idea yet how these will work together, but I thank you so much for explaining this so well (and for figuring it out lol!)

@genesiswebdesigns 2 ай бұрын

OMG! This is alot of great information. Thank you, Rino, for taking time to put all this information together and share to the world. You're an inspiration! I look forward to watching and learning from your content. Definitely will recommend everyone to your channel and your website! 👍Take care!

@jarrodgordon 7 ай бұрын

Ive probably watched this video ten times in the past year... You create great content. I'm an old school designer at this point. I'm 44 and have been a designer for over 20 years. Thank you for your content.

@rinodeboer 7 ай бұрын

Great to hear! Thank you

@volkerschuster8079 2 жыл бұрын

Hi Rino, great video, I also love the 8 px System, and it works well for me. I am glad you are talking about because it is one of the key starting point people don't tend to think about. Great Work thank you

@VeganLinked Жыл бұрын

Fantastic! I love how thorough you are! And, as a videographer myself, great setup you have over there, the sound, staging, and lighting is perfect. Now if I could just hire you to help me take my site to the next level lol :)

@LordJHouse Жыл бұрын

This video arrived at a good time because I was wondering what size to use for overall width, gutters, etc for desktop, tablet and mobile. I was actually using 1100px until I became educated on the subject, but now I'll be using 1120px moving forward. Thanks for the clarity, as well as the incredible time you invested into this video.

@plantsrealm 2 жыл бұрын

Thanks, Rino! And thanks a ton for adding those calculations to your website! Elementor should add Flex and Grid to their new update and that would fix such headache :)

@brunoguerchon 2 жыл бұрын

hey, Rino! that was indeed a lot of work! nice job with the sheets and the measurements page! looks like a good reference and good starting point! thanks for sharing! it would be cool to also see a version of these numbers using the 8px grid as basis (where all sizes and spaces are divisible by 8).

@mycustompaintedlife502 2 жыл бұрын

Yes! He is so very generous with his time and knowledge!

@thejugovic 2 жыл бұрын

Man, thanks so much for this video, literally no one on KZfaq has explained and showcased this better. I personally usually use the 1260 grid, i find it a little more esthetic, and man im glad you included this. Thanks again Rino!

@wforweb Жыл бұрын

Better to use 1240 then you will get column size without decimals 610 if using 2 columns layout 400 if using 3 columns layout 295 if using 4 columns layout 232 if using 5 columns layout 190 if using 6 columns layout

@isntlifebetter Жыл бұрын

FIRST OF ALLLLLL....YOU TELLING ME I HAD A MAC FOR ALL THESE YEARS AND I NEVER KNEW SPOTLIGHT COULD BE USED AS A CALCULATOR lmboooo I subscribed!!! Your videos are the best. I literally never knew that OMG

@sergio_grez 2 жыл бұрын

Man, this has changed my life right now while I watch the video. Why isn't this video featured in the Elementor website!! lol this is amazing and everything now makes sense!! This is so perfect. thanks so much!!!

@elevateyourcreativeness 2 жыл бұрын

Great tut Rino! I’m looking forward to the new rollout of the container element! That being said, I’m not holding my breath as it’s been taking forever! This is why Bricks is gaining ground so quickly! The container element was almost from ground zero! Elementor really should have had this ready to rock by now!

@angkanpaul7204 Жыл бұрын

You are the best man. No one explains deeply like you. No one.

@ezsmith397 Жыл бұрын

Really great tutorial to break it down. I've been using percentages instead of fixed pixel widths since the flexbox containers came out with great success too

@adnanal-beda9734 2 жыл бұрын

That's an awesome video. I was doing web development for a year, but this is the first time I hear about these standards. Thanks a lot for the great content.

@kugi518 2 жыл бұрын

More of that man! This in depth video format is so good 😍 I’ll share that with my colleagues. I can relate so much since we’re also struggling heavily with pixel perfect design with elementor, as well as with angular. Keep up the great work 👌

@rinodeboer 2 жыл бұрын

Awesome!

@webic-art 2 жыл бұрын

Thank you so much for all your help and fantastic tutorials. You are so pleasant to watch! Please continue the great work! :D

@opeyemiayomide3213 2 жыл бұрын

😉 Hey Reno how are you doing you've been doing very great and I never for once regret subscribing to your channel and i would even recommend you to others without hesitation thanks so much Man. What I love most about you is the fact that you don't create video just to gain views you give us the content we need a heart for you ❤️💕

@scriberepaperstore4298 Жыл бұрын

Thank you so much for taking the time to do this and all that amazing content you created. It helped me a lot. You got a new loyal subscriber. Thank you for your hard work!

@rinodeboer Жыл бұрын

That’s awesome to hear! Thanks 😎

@learnwhispering Жыл бұрын

LOVE IT. Your vids are BRILLIANT. I'm new to elementor, used another theme since 2015 - your logic and videos are helping learn Elementor so well. Thanks you ❤❤

@clintonlucock4568 2 жыл бұрын

OH My Goodness this is one of the best responsive tutorials i have ever seen things finally makes sense thanks so much

@BigKurcaci 2 жыл бұрын

Thanks for sharing these grids guide. I respect the acknowledgment of missing this matter 😁. Once again, thank you 🙏🏽💌

@twistedspire5339 2 жыл бұрын

Thanks for the email Rino with the link to this video. It makes so much sense now!!! Cheers. Joss

@avimoyal9331 Жыл бұрын

I love all your videos. You are a fantastic guy. Elementor needs to put you on their payroll.

@VintageVigilante Жыл бұрын

Just about to do a website redesign. I think you've saved me so much frustration - THANK YOU!

@gotta-date-with-hate Жыл бұрын

I love how you always provide a reference cheat sheets or easy to cut and paste codes!!!

@levindeheer2056 2 жыл бұрын

Echt respect dat je niet alleen een korte video hebt gemaakt, waarin je laat zien dat 1140px niet goed is, maar dat je zelfs het probleem helemaal hebt opgelost met een geweldige instructie voor designers. Top gozer ben je toch

@rinodeboer 2 жыл бұрын

Dankjewel man!

@Gvanverseveld Жыл бұрын

@@rinodeboer ik dacht al dat je Nederlands was, ik ben laatst van Joomla na Wp gegaan en elementair pro gekocht. Moest dus veel weer opnieuw leren. Wat heb ik veel aan je gehad. Bedankt.

@ShahatabUddinKhan 2 жыл бұрын

Truely speaking, you work really really hard. You deserve LIKE. Actually, from the beginning of my learning, I search for a perfect guideline for container but I didn't. Little bit I learned from your one old clip and Now I am clear about this. Thank you.

@rinodeboer 2 жыл бұрын

Thank you for the compliment 👌🏼🙏🏻

@robertpeneau8123 2 жыл бұрын

Un très grand merci pour ta pédagogie et ton travail de très grande qualité.

@smartslix4238 2 жыл бұрын

Sir, it's complex to explain but you make it very easy for us to understand, Thanks.!

@GabrielFermy 2 жыл бұрын

This was really a great insghts. How i've underestimate these calculations all these years. Thanks

@marcoolinho 2 жыл бұрын

Living with pixels to one day become pixel perfect. Thank you for this lesson. Awesome!

@dominikcampus 3 ай бұрын

Absolutely awesome! Exactly what I needed to create my website using proper spaces! Thank you very much, Rino!!

@nif_9 Жыл бұрын

Big Respect Rino! I'm learning more and more from you. Thank you for everything. 😊💙

@1manairband 7 ай бұрын

Nice job, I appreciate the work that you put into this to help us out. Thank you!

@vanessailie1505 2 жыл бұрын

Thank you for the video! Always a pleasure to learn from you, best channel for web design and development on YT! 🙏

@DiBBs277 2 жыл бұрын

Great vid, Rino, a lot of really well thought out design theory here!

@Loenbrad18 2 ай бұрын

Cool video. Great humility to be able to say you learned something new!

@4Mulator 2 жыл бұрын

Incredible value for your subscribers! Thank you so much!

@walter6574 Жыл бұрын

Excellent thought process. Although I have seen a few vids from this channel I never subscribed to the channel. This vid has now made me a subscriber. Good on you guy.

@dewolf.digital 2 жыл бұрын

Brilliant insight into using containers in elementor. Making mistakes teaches valuable lessons learning any technology. Thank you for sharing your best practices approach and all your hard work. Can't wait to put it in to practice :)

@funfactorykapilsharma3271 2 жыл бұрын

It can't get anymore simple than this. Thank you soo much howtobasic!

@doumlegare 2 жыл бұрын

Nice video! Thanks for sharing. I was doing it wrong too for last few years. Time to adjust!!

@ciitrusdigital 2 жыл бұрын

I also struggled with this for a while. To deal with the extra pixel spacing issue on the side of the columns, I set the column gap to “no gap”. Then you eliminate the extra px gap on each side. My design team has built a few designs on the 1140px grid but most often I find we set the width at 1380px. You get so much more space to explore the design.

@marekgabik2898 2 жыл бұрын

Wow, you did a lot of work. I was thinking many times how to calculate it in Figma and after that use it in Elementor. This is wonderful, so thank you and I'll be waiting for container video. I use it already but I belive you give us again some amazing tips. :)

@gillyc7353 2 жыл бұрын

WOW !!! one of the most useful tutorials I have seen - EVER! thank you so much!!👏🙏💙

@omarfernando7947 2 жыл бұрын

I'm really happy your channel exist, you always teach me and help me a lot, i'm from Latin america, native spanish speaker, but your english pronunciation is SOO understable, the best! i love that, with you i feel i'm listening and undertanding you like in spanish hahah thanks for existing

@rinodeboer 2 жыл бұрын

That’s so cool to hear! Thank you very much 🙏🏻

@omarfernando7947 2 жыл бұрын

@@rinodeboer

@stevemarrs3149 2 жыл бұрын

Thanks so much for another great video. I’m off to set up standard column layouts in Figma for desktop, tablet and mobile now!!

@wetiot 2 жыл бұрын

Smart man. Thanks for figuring it out. It always bothered me. Now I understand why Elementor was doing the spacing.

@nnwebdigital 2 жыл бұрын

Thank you Rino very much for this clarification. It will be so useful in the design/development flow. :)

@SogehtWordPressmitElementor 9 ай бұрын

Mind blowing! Been working with Elementor (and deleting the padding) for 5 years. You deserve the fame 🚀

@rinodeboer 9 ай бұрын

Wow haha awesome

@beatrisprinz3421 2 жыл бұрын

Thank you making my designs as well much easier ... and saving heaps of time.

@brocoli80 7 ай бұрын

wow bro I like to go into detail and you answered my questions you are the best thanks alot

@diggie72 2 жыл бұрын

Thanks a lot - that made so much sense. I was constantly fighting against my own margins & padding using Flex containers. Now everything flows very nicely.

@diggie72 2 жыл бұрын

One thing I noticed when setting elements gap to percentages: this doesn't work on the horizontal spaces between elements. I had to manually set vertical padding on containers, creating more work.

@rinodeboer 2 жыл бұрын

I have the exact same problem with the bottom spacing and I told elementor about it when I met them at Wordcamp. So they are aware of it 👌🏼

@diggie72 2 жыл бұрын

@@rinodeboer Do you also manually add padding to each container, or do you have some black magic workaround? ;)

@rinodeboer 2 жыл бұрын

For top and bottom padding I don’t have a simple workaround. For padding left and right its easier to use the Boxed Container width and put it at 90% for example.

@prodixie 2 жыл бұрын

Thank you Rino! Great video, never stop teaching and learning 👍

@mikecarpenter537 2 жыл бұрын

This is incredibly useful! Thank you! I’ll use this for all my designs now.

@rinodeboer 2 жыл бұрын

Awesome!

@Blackpowder-Ben 2 жыл бұрын

Mind is blown!! I always have troubles understanding margin and padding becouse i don't make sites often, but this is genius. The quarter has fallen, thanks!!

@pabloprato. 2 жыл бұрын

THANK. YOU. I think I love you right now. We've been struggling with the box size/columns size and whats best for elementor. This video helps a looooot!!!!

@rinodeboer 2 жыл бұрын

Great to hear!

@darshandprakash Жыл бұрын

This video is very helpful in. Keep it up; I loved it, buddy. Even though I had a big issue with this; you solved it because responsive is always a challenge at present due to a lot of devices with different sizes

@fionaly7832 2 жыл бұрын

Wow! this makes so much more sense! Thank you! My mind was blown, I have immediately implemented this

@rinodeboer 2 жыл бұрын

That’s so cool to hear! 👌🏼

@dabigisland1 Жыл бұрын

Thanks RINO - Great Video - I used your links to order Siteground Hosting and Elementor Pro to show some appreciation.

@rinodeboer Жыл бұрын

Thank you very much! That means a lot 🙏🏻😁

@ChristoBoshoff 2 жыл бұрын

This drove me crazy and I looked everywhere for answer or recommendations of best practice, but I couldn't find any proper explanations. Thank you for this video! PS. I also remove the 10px padding every single time 🤦🏼‍♂.

@rinodeboer 2 жыл бұрын

Haha it drove me crazy as well. Thank you 🙏🏻

@niravdiev4477 2 жыл бұрын

Thank you so much Rino. That was so valuable to me as always :) Keep it up!

@cbserey Жыл бұрын

Great value here. Thanks a lot Rino!

@davidson7838 2 жыл бұрын

Hey, Rino... this is so awesome work. I really liked it and it's so informative and it make lot of sense with your explanation. ❤‍🔥❤‍🔥❤‍🔥

@robocop4753 5 ай бұрын

Brilliant. So grateful for your insight.

@Nobel74 2 жыл бұрын

Thanks, thanks, thanks Rino! Nice master class. Greetings from Spain!

@JK-pr3lu Жыл бұрын

OMG you are a genius. I just watched 2 of your videos (and subscribed as they are both great!) and I'm going to rework all my pages right now!

@pavel0900 Жыл бұрын

Super important to know. Thank you for sharing!!! ❤

@gugafumero 2 жыл бұрын

That's why i'm always in trouble splitting columns. Thanks, very helpful.

@ojordine5116 Жыл бұрын

Thank you! it does make much more sense.. and you explain it very clearly.. Thank you for the hard work... keep it up...

@ingaplinga74 Жыл бұрын

Mind. Blown. Im gonna try that now with Flexbox, thank you!

@Stolica83 5 ай бұрын

Omg great video !!! Thank you so much for explaining so well !!

@user-ku6id5wx8i 4 ай бұрын

Thank you so much for your videos! 🙏🏻

@liviumatei5681 Жыл бұрын

You can set the gap in px and then let the boxes stretch and fill out the available space using flexbox. You have that available as size in Elementor.

@linavanaquer4552 2 жыл бұрын

Well done Sir, an excellent example well executed. Thank you.

@bestodesigns8008 2 жыл бұрын

Elementor needs to wake up, literally no major update this year, not even the Container released 😠. Bricks released last year ago and they are way faster, might switch if they continue like this

@stillready6405 2 жыл бұрын

Yes... it's frustrating. I want the full release of the Flex Container...

@vlogdude4866 2 жыл бұрын

You won't switch, now shut up

@joaopedrofrech 2 жыл бұрын

Agreed!!!

@boxoffisa 2 жыл бұрын

Go and check breakdance.

@benravetta 2 жыл бұрын

Wtf is Bricks

@dontrez8412 Жыл бұрын

Wow! Thanks for the insight. I appreciate this. Anything to make all this stuff make more sense.

@dots560 Жыл бұрын

Very valuable content. Thank you for always sharing.

@mohsinshahzad8969 Жыл бұрын

I really appreciate it. I was suffering for so long, but finally I found you. Umuahhhhhhh Buddy, thumbs up.

@Error40499s 2 жыл бұрын

It's awesome 👍👍👍 I solved my 90% of confusions.... Please also make a video on how to optimize speed of website while using Elementor... Elementor makes Website too slow

@studiopijlman 2 жыл бұрын

Great video. It couldn't be at a better time, I just had problems with the alignment of a page.

@CheckTesting1 Жыл бұрын

Rino! 😃 Hope that you and the family are all very well sir🙏🏾 Love the vid 👍🏾 Keep up the good work, try not to work too hard ☺️ Have a great day/afternoon/evening 🤭

@zukamusic412 2 жыл бұрын

Really informative. Thanks for your work!

@BryanPhilips 2 жыл бұрын

Thank you so much for putting this together!

@michaelgovers8036 Жыл бұрын

Rino, this is nothing short of pure genius, thank you for sharing :)

@rinodeboer Жыл бұрын

Thank you very much sir!

@teerasadekhemprasit6133 10 ай бұрын

Awesomes video. It solves my question about Elementor layout. TY Very much.

@thebeginner6424 2 жыл бұрын

Thank you for sharing this valuble information

@ronrichardson175 Жыл бұрын

Oh my... working with containers creates a new problem. Each container adds another 10px of padding. Can't wait for your Container Video and an update of your grid methodology.

@rinodeboer Жыл бұрын

You can turn this off in the settings now. But I have already seen some new problems. So yea, I will make those 2 videos you mentioned. 🙏🏻