Adding a Container Wrapper

By default, there’s no element that wraps your entire container.

A container wrapper might be useful if you’re wanting to place a border or shadow around your entire website, and don’t want to apply it to individual elements (header, widgets, content area etc..).

To achieve this, you’ll need to use the Elements module.

First, create a new Hook Element.

In your hook content, add the following HTML as your content:

<div class="site-wrapper grid-container grid-parent">

Set the hook to before_header, and set your Display Rules to the entire site.

Now create a second Hook Element, and add this as your content:

</div><!-- .site-wrapper -->

Set the hook to after_footer, and set your Display Rules to the entire site.

Now you can target this class, and do whatever you want to it, like add a shadow:

.site-wrapper {
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);

Learn how to add CSS here.

Note: This kind of layout is typically for contained websites, so the following options should be set:

  1. Customize > Layout > Container > Content Layout: One container
  2. Customize > Layout > Header > Header Width: Contained
  3. Customize > Layout > Primary Navigation > Navigation Width: Contained
  4. Customize > Layout > Footer > Footer Width: Contained