Documentation › Designing a Multi-Wrapper Layout

Designing a Multi-Wrapper Layout

Headway offers you the option to have multiple wrappers, which you may not realize is one of the absolute best things about Headway. This feature gives you tons of flexibility!

What Is a Wrapper?

A wrapper is most easily thought of as a container for your blocks. You can have a bunch of containers that stack on top of each other (but not next to each other). In the container, drop as many (or as few) blocks as you’d like.

Fluid vs. Fixed

Wrappers can be fluid wrappers or fixed wrappers. A fluid wrapper takes up 100% of the available screen space. A fixed wrapper takes up a specific number of pixels (based on the way you configure the grid). Blocks spread out across the grid based on grid columns, so blocks in a fluid wrapper are typically a lot wider than in fixed, because the columns (which are fixed in number regardless of wrapper type) widen to stretch out evenly across the available width of the screen. This also means that in a fluid wrapper, the blocks may stretch 500 pixels across three grid columns on your laptop, but stretch 1000 pixels across three grid columns on your mom’s magnificent Thunderbolt display (it could happen!).

Independent Grids

Remember how I said earlier that the number of columns in a grid is fixed? That’s mostly true. You also have the option of giving a wrapper an “independent grid,” which means you can set completely different grid settings for a specific wrapper without affecting all the others. So, for example, you could have two fixed wrappers, one of which has an independent grid—and the independent wrapper could be wider than the other wrapper based on changes you make to the grid settings. Remember, with a grid you can choose the number of columns, the column width, and the gutter (space between the columns) width.

Designing the Layout

Now that you understand your wrapper options, you can start to make decisions about how to design your multi-wrapper layout. Below is a common configuration that you may draw inspiration from. Wrappers are outlined in red, while blocks are represented in gray.

Using Wrappers for Design (Not Just Organization)

Wrappers can be great just to keep certain blocks grouped together, sure. The biggest benefit of multiple wrappers, though, is the styling options! In Design Mode, define your wrappers using background colors or images to give your design more interest and to delineate different content areas. In the example above, you could use a background color in the two fluid wrappers to highlight their fluidity while also helping to define different areas of the site more clearly. The wrapper containing the content could hold a solid background color to help ensure text is readable when using a busy or patterned background graphic for the entire website.

Mirror Wrappers

Finally, remember that you can mirror entire wrappers—that means the wrapper, the settings, and the blocks within the wrapper. This is especially handy if you have a “header wrapper” with all your header content that you’ll be using throughout the website, or a “content wrapper” that remains the same—a “default mode” content block and a sidebar—regardless of how your header graphics or footer content might change (maybe you’re changing the header area based on which archive or page is being viewed!).

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress