How to wrap main element in custom divs in Bricks

Looking to wrap the main element that is between header and footer with some custom div(s)?

Bricks provides ample hooks throughout its codebase.

Add this sample code in your child theme‘s functions.php or a code snippets plugin and tweak as needed:

add_action( 'bricks_after_header', function () { ?>
	<div id="smooth-wrapper"><div id="smooth-content">
<?php });

add_action( 'bricks_before_footer', function () { ?>
	</div></div>
<?php });

Before:

After:

Reference: wp-content/themes/bricks/header.php and wp-content/themes/bricks/footer.php.