I want to talk to you guys a bit about Full Width and Boxed Width on Elementor
As I’m sure you know, on Elementor you can set your sections to Full or Boxed Width
Full Width stretches the container to the edges of the screen while Boxed Width keeps all the content in between a certain length, no matter how wide the screen.
I want to talk to you about why you should choose Boxed Width more often than not when creating your sections
If you look at the image on this post, you can see that every element next to the purple line is consistently aligned to the left on the same axis
Great design is clean and simple, and one of the most important things to consider when wanting to create a good looking design is aligntment
By aligning all your elements to certain axis’, you can create a design that looks beautiful no matter how simple it is
In this design you can see that in reality, I didn’t put in a lot of design work creating that site
It’s mostly text, some colors, and a couple graphics
The reason it looks so good is simple – because of alignment.
So what does this have to do with Full Width and Box Width?
Sometimes you’ll feel tempted to make a 2 column section full width because you want an image to go all the way to the edge of the screen
While this is in fact a great way to make a design look great, because you set it to “full width, you no longer have any axis of alignment for the opposing column
Now, on different screen sizes, your image will reach the edge of the screen but whatever you put in the other column (Usually text and a button) will not be aligned on the same axis as the column above it
That’s because elementor’s columns are controlled by % and (as far as I know) there’s no way to set a pixel size to the columns – meaning the size of the column is dependent on how wide the screen is
If you can, always try to use boxed width for your sections – unless you have a section that you REALLY need to use Full Width
Hope this all made sense, I know it was a super long post lol
Sharing is caring ❤️