skip to Main Content

Elementor Site Width Setup

Because of how Elementor is coded the plugin will not automatically match the Total theme’s default layout which could create some inconsistencies. For this reason, when you first install Elementor it’s recommended to modify the theme’s layout widths and adjust your Elementor settings to match.

Total Site Layout vs Elementor

Elementor is coded so their content has a “max-width” to prevent it from getting to large, the default max width for Elementor content is 1140px whereas the default Total site width is 960px.

Additionally, the Total theme applies a width instead of max-width to it’s containers with an additional 90% max-width to make the containers responsive so that their content doesn’t touch the edge of the screen (unlike Elementor where the content will touch the edge by default).

So, in order to make things more consistent it’s best to modify the theme’s layout to match Elementor and vice-versa. This will ensure that when you are working with the Elementor “Theme Builder” (if you are using that functionality) or when working with the theme’s “Full-Screen” layouts that your Elementor content lines up with theme’ elements such as the theme’s header, footer, top bar, callout, etc.

Modify the Total Site Width and Max-Width

To modify the Total theme’s site width you’ll want to go to Appearance > Customize > Layout > Desktop and change the default value for the Main Container width which is 960px. In the screenshot below you can see I’ve modified the value to 1200px.

Because the Total theme uses a max-width for the responsiveness (to create a gutter between your site and the edge of the browser) you don’t have to worry about changing the values for the other breakpoints (medium, table, mobile).

Next, to match Elementor you’ll want to go back to the Layout tab and click on General so you can change the site Max Width which we’ll set to 100%.

Now, with these two settings changed the theme will function more similar to Elementor.

Modify the Elementor Content Width

The next step is to modify the Elementor Content width to match your site width. To do this you will first need to edit any page on the site using Elementor. Once you are in the Elementor edit window click on the hamburger icon at the top of the Elementor panel then click on “Site Settings” and then click on “Layout” where you will be able to modify your container width to match your site width.

Working with a “Full-Screen” Site & Elementor Theme Builder

In the guide I showed how you can set your site width to match the Elementor containers width, however, technically the way Elementor “wants” to work is via a full-screen website where everything is created with Elementor (header/footer/posts/archives…etc).

This is why in newer versions of Elementor they’ve introduced Containers without the popular “stretch” option for making the section take up the full browser width, since it’s expected for them to already be stretched. In my opinion this isn’t ideal because most themes don’t function in this way, but perhaps in the future they will add the stretch option to Containers as well.

So, if you are planning on building your whole site with Elementor using the “Theme Builder” which means you will be designing your header, post/page layouts, footer, etc rather then using the default theme elements then you may want to consider changing your theme’s “Main Container Width” under Appearance > Customize > Layout > Desktop to “100% (make sure your Max-Width is also 100% as described above).

By making this change your site will function in a full-screen manner to match what’s expected from Elementor and as you create your pages and templates using Elementor your content will be boxed in via the Elementor’s “Content Width” setting rather then limited by the theme’s layout.

Back To Top