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!