Documentation › Wrappers and Wrapper Options

Wrappers and Wrapper Options

When you begin designing with Headway, the Blog Index layout contains one wrapper div that will in turn contain all of your blocks. The wrapper determines the size of the grid and the available space you have for placing blocks. Each wrapper is represented by a large white square. Adding wrappers creates sections for grouping blocks on your webpages. Each wrapper contains a grid and can have its own settings, including whether it has a fluid or fixed width. Wrappers are arranged in a stack, so they can’t be embedded within each other. However, wrappers can overlap each other if their nudging settings in Design Mode are set to do so (see Using Margins, Padding, and Nudging). But in Grid Mode, they always appear separately so it’s clear where you’re putting your blocks.

When to Use Multiple Wrappers

Much of the time, one wrapper will get you what you need in terms of the width of your website’s presentation, grouping blocks, and adding any background images you want to appear. (Remember, the body element and whitewrap div can each have a background image, too—see “Body Classes”
in Headway CSS Map for more information.) Because each wrapper can be fluid or fixed, you would use multiple wrappers if part of your page needs to have a fluid width and another needs a fixed width. For example, say you want your header and footer to appear to span the width of the entire page, but you want the content in between to be fixed in the center. In this case, you would add three wrappers:

  1. A fluid wrapper with just the header block
  2. A fixed wrapper with the content block and other blocks as desired
  3. A fluid wrapper with just the footer block

Using multiple wrappers also enables you to set differing visual styles for major sections of your webpages. For example, if you wanted the upper section of your page below the header to have a white background, but the lower section should have a tan background, using a wrapper for each section is the quickest way to accomplish this.

Working with Wrappers on the Grid

Several basic functions for wrappers are available in the grid.

Adding a Wrapper

Click the plus icon at the left side of Grid Mode near the top or the bottom of the layout.
When you add a wrapper, it appears at the top of the grid if you use the button at the top. The new wrapper appears at the bottom if you use the button at the bottom.

Changing a Wrapper’s Fluidity

  1. Right-click the cog button to the right of the wrapper you want to change.
  2. Click one of the Change options (see the image below for an example).
  3. If needed, change column and gutter settings (see “Wrapper Options” in this article).
  4. Click the Save button.

This image shows the change options that appear for a fluid wrapper with a fixed-width grid.

What Are the Differences between the Types of Wrappers?

  • Fluid wrapper with fixed-width grid: The wrapper’s width is 100%. Columns and gutters have static widths and have an auto left and right margin to keep elements centered inside the wrapper. This allows you to have a background image or color that runs the width of the webpage but to keep the content centered in the page as the browser’s width changes.
  • Fluid wrapper with fluid-width grid: The wrapper’s width is 100%. Columns and gutters run across the entire wrapper and change width as the wrapper’s width changes. Because blocks occupy a set number of columns and the columns are fluid, blocks maintain a corresponding percentage of the available space as the browser’s width changes. Use this type of wrapper if you want the sizes of the blocks in the wrapper to change as the browser’s width changes.
  • Fixed wrapper: The wrapper’s width is the total of the column and gutter widths, and it is centered in the webpage due to auto left and right margins. This is the wrapper used in versions of Headway prior to 3.5. Most WordPress themes use a fixed width. Use this type of wrapper if you don’t want your site’s appearance to change based on the width of the viewer’s browser.

Resizing a Wrapper

To resize a wrapper, click and drag its bottom edge up or down. A wrapper’s height on the grid isn’t its actual height—on your live site, the wrapper will resize automatically to fit the content inside it. The main reason to resize a wrapper is to make it large enough in Grid Mode to accommodate the blocks you want to put in it.

Changing the Order of Wrappers

  1. Click the handle button to the right of the wrapper you want to move.
  2. While pressing the left mouse button, drag the wrapper up or down until it appears where you want it in relation to other wrappers.
  3. Release the mouse button.
  4. Click the Save button.

Deleting a Wrapper

  1. If you want to keep any blocks that are in the wrapper, click and drag them into a different wrapper.
  2. Right-click the cog button to the right of the wrapper you want to delete.
  3. Click Delete Wrapper.
  4. Click OK to confirm.
  5. Click the Save button.

Note: You can also open the menu for wrappers by right-clicking in any empty space in the wrapper.

Wrapper Options

To open a wrapper’s options, click the cog button
to the right of the wrapper, or right-click the cog button and click Open Wrapper Options. The options appear in the options panel. The options include whether to use the defaults or to use an “independent grid,” meaning to set your own column and gutter widths. Toggling the independent grid on displays the sliders for column and gutter widths.

Grid and Margins

Each wrapper can have a configurable number of columns. Recommended values are 9, 12, 16, and 24 (the default). These values can help you divide your design vertically into thirds or fourths, but use what you find works best for you. Click and drag the slider button to set each value. The wrapper must be empty before you can change column and gutter settings.
For convenience, wrapper options include the top and bottom margins so you can set the spacing between margins and preview them without switching to Design Mode.

Mirroring and Config

Wrapper Mirroring.
Wrappers can be mirrored from one layout to another. Mirroring a wrapper copies its grid and margin settings, style settings, and any blocks it contains, to the second layout. Any changes to the wrapper or its blocks in the first layout are reflected in the second layout. A mirrored wrapper can be reordered, but nothing within the wrapper can be changed. The wrapper type (fluid or fixed) of the second wrapper can also be changed (see “Changing a Wrapper’s Fluidity” earlier in this article). Wrapper Alias. Each wrapper can have an alias, a short and descriptive name. The alias appears in places such as the Mirror Blocks From Another Wrapper dropdown instead of just the ID Headway assigned when you created the wrapper. The number probably won’t mean much to you, so it’s recommended you give each wrapper an alias. Custom CSS Class(es). If you’re somewhat advanced at using CSS and want to assign your own classes to the wrapper, type them here with no punctuation and separated with a space. Use the Live CSS Editor in Design Mode to define the styles for your custom classes.

This article was updated for Headway version 3.7.2.

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