How to Make a Boxed Layout in Elementor Pro

It seems most websites these days have full-width layouts. These designs are great but what if you want that boxed layout look for your design?

Maybe a theme could help accomplish this for you but you may run into trouble if you decide to build a custom header and footer in Elementor Pro. This is because there doesn’t appear to be a container div wrapped around the HTML of your site. So, let’s add one.

I was able to make a boxed layout in Elementor Pro and here’s what I’m using to do this: Elementor Hello Theme, Elementor & Elementor Pro, and the Code Snippets plugin although your child theme’s functions.php should work as well.

Step 1

Create your header and footer templates in Elementor and apply them to the entire site.

Step 2

With the Code Snippets plugin activated, go to Snippets > Add New.

In the title field you can put “Site Container” or whatever makes sense to you.

In the code area, add the following:

function js_before_do_header() {
	echo '<div class="site-container">';
}
add_action( 'elementor/theme/before_do_header', 'js_before_do_header' );

function js_after_do_footer() {
	echo '</div><!-- .site-container -->';
}
add_action( 'elementor/theme/after_do_footer', 'js_after_do_footer' );

It will look something like this.

Step 3

Go to Appearance > Customize and then add the following CSS to the Additional CSS section.

.site-container {
background-color: #fff;
border: 2px solid #eee;
margin: 100px auto;
max-width: 1000px;
padding: 100px;
}

That’s it!