A cleaner Boxed Container System for the new Elementor
12.5K views · 2026-06-01
UI Design
In this video I show how I set up boxed containers in Elementor V4.
The default boxed width in Elementor is not always the best system to work with. I walk through why I use multiple container widths, how the 12-column math works, and why I like 760, 1120, and 1240 as practical starting points.
First, I show the simple version with 2 containers, then I show the cleaner 1-container solution using a padding formula. That second solution also works with V3 containers, which makes it useful.
Widths used in the video:
Small: 760px (class: section-s)
Medium: 1120px (class: section-m)
Large: 1240px or 1284px (class: section-l)
The formula for the single container solution: max(5%, calc((100% - 1120px) / 2))
Don't forget to add it to right and left padding!
Explore the Atomic Editor yourself via: http://livingwithpixels.com/elementor
→ Software I recommend
Hostinger for webhosting: http://livingwithpixels.com/hostinger
Elementor for no-code web-development: http://livingwithpixels.com/elementor
Elementor Add-on for dynamic content: http://livingwithpixels.com/crocoblock
Figma for Web Design: https://livingwithpixels.com/figma
All recommended software & discounts: https://livingwithpixels.com/links/
→ Full A-Z Courses
Elementor Pro Mastery Course: https://livingwithpixels.com/elementor-course
Figma Design Mastery Course: https://livingwithpixels.com/design-course
Business Course: https://livingwithpixels.com/business-course
→ Social media
Tiktok: https://www.tiktok.com/@rinodeboer
Instagram: https://www.instagram.com/rinodeboer/
Twitter / X: https://www.twitter.com/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.
The default boxed width in Elementor is not always the best system to work with. I walk through why I use multiple container widths, how the 12-column math works, and why I like 760, 1120, and 1240 as practical starting points.
First, I show the simple version with 2 containers, then I show the cleaner 1-container solution using a padding formula. That second solution also works with V3 containers, which makes it useful.
Widths used in the video:
Small: 760px (class: section-s)
Medium: 1120px (class: section-m)
Large: 1240px or 1284px (class: section-l)
The formula for the single container solution: max(5%, calc((100% - 1120px) / 2))
Don't forget to add it to right and left padding!
Explore the Atomic Editor yourself via: http://livingwithpixels.com/elementor
→ Software I recommend
Hostinger for webhosting: http://livingwithpixels.com/hostinger
Elementor for no-code web-development: http://livingwithpixels.com/elementor
Elementor Add-on for dynamic content: http://livingwithpixels.com/crocoblock
Figma for Web Design: https://livingwithpixels.com/figma
All recommended software & discounts: https://livingwithpixels.com/links/
→ Full A-Z Courses
Elementor Pro Mastery Course: https://livingwithpixels.com/elementor-course
Figma Design Mastery Course: https://livingwithpixels.com/design-course
Business Course: https://livingwithpixels.com/business-course
→ Social media
Tiktok: https://www.tiktok.com/@rinodeboer
Instagram: https://www.instagram.com/rinodeboer/
Twitter / X: https://www.twitter.com/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.