Documentation › Reusing Blocks, Layouts, and Designs

Reusing Blocks, Layouts, and Designs

For simple websites, layout inheritance
probably meets your needs—you customize the Blog Index layout and let all other layouts inherit that layout. However, if you’re planning on a variety of layouts and customizations on your site, or using similar designs across sites, take advantage of Headway’s methods of copying blocks and designs.

Headway has several ways to reuse customizations within a single site and across sites. We recommend you understand them all so you can use the right one for the right situation.

Within the Same Website


With mirroring, you reuse the settings of a block or wrapper from one layout in a corresponding block or wrapper in a second layout. Changes to the settings of the source block or wrapper apply to the second block or wrapper. Only the settings and content of the original wrapper or block are reflected—the second one doesn’t have to be the same size or in the same place as the original.

Mirroring Blocks

Mirroring a block is a way to copy the source block’s settings (except those for the Config subtab) to another layout but still allow the block to be moved and resized. Changes to the mirrored block’s options are reflected in the second block. Mirroring a block works well when you want two blocks on different layouts to have the same settings but be in different places in the layout. Think of a text block with testimonials that you want in a central place in one layout but in a sidebar in a different layout. Mirroring blocks also makes configuring a static front page easier, since layout inheritance doesn’t apply to that layout.

To set up a mirrored pair of blocks:

  1. Create the first block in one layout, and configure its settings in the options panel.
  2. In a second layout, draw a block and select its block type.
  3. Right-click the block, and click Open Block Options.
  4. Click Config in the options panel.
  5. Click the Mirror Block box, and select the block to mirror.

Disconnect two blocks by selecting Do Not Mirror in the Mirror Block box.

Mirroring Wrappers

Mirroring a wrapper copies all included blocks within the first wrapper, plus its column, gutter, and margin settings. The second wrapper can be reordered, and the wrapper type (fluid or fixed) can also be changed. However, the contents of the second wrapper can’t be changed.

  1. In a layout where you want to mirror a wrapper, add the wrapper.
  2. Mouse over the wrapper, and then click the cog button to the right.
  3. Click the Mirroring & Config subtab in the options panel.
  4. Click the Mirror Wrapper From Another Layout box, and select the wrapper to mirror.

If you enable mirroring for a wrapper that already has blocks and other settings, Headway remembers those settings in case you later switch mirroring off for that wrapper.

Disconnect two wrappers by selecting Do Not Mirror in the Mirror Wrapper From Another Layout box. The wrapper’s previous blocks and settings are restored.


Cloning a layout is a way to copy all wrappers and mirror all of the blocks they contain (the wrappers themselves are not
mirrored). You get a layout that will have all of the wrapper and block settings of the mirrored layout, but the wrappers and blocks can be rearranged. Even templates can be cloned.

Because the mirroring can be removed from individual blocks, cloning is the best way to get started customizing a layout when you need it to be mostly the same as a layout you have already customized. It’s much quicker to clone a layout and then unmirror and customize one or two blocks than it is to try to create a new layout and hope you can redraw the blocks the same and get their settings right.

Cloning a layout that is mirroring blocks will mirror the blocks from the original layout.

Clone a layout using the Grid Wizard.

If you have already begun customizing a layout, opening the Grid Wizard and cloning a layout will remove your customizations from the current layout. The only way to undo the cloning action is to switch to another layout (or to Design Mode) without saving.

Shared Layouts

A shared layout is a layout outside the layout hierarchy that you can assign to individual layouts. Use a shared layout when you want to lock particular layouts down to the same setup and not allow customizations to those layouts. Changes to the shared layout apply to all layouts using that shared layout, as well as to their children.

Note: A shared layout can mirror blocks from regular layouts and from other shared layouts.

For more information, see Using Shared Layouts.

Across Websites

See the box to the right for a summary of the methods explained in this section.

Block Settings Import and Export

Some blocks have quite a few options. Mirroring blocks is great for working within a website, but you can also reuse a block’s settings across websites by exporting and then importing a block settings file. For example, imagine you have a custom code block with a complex PHP query that you want to use on multiple sites. Or you may be a third-party block developer, and you want to provide complete demo blocks to potential customers.

A block settings file contains both the block options, including images, and design settings that are then converted to CSS on your live site.

  1. In Grid Mode of the site where you have the block set up, right-click the block, and click Open Block Options.
  2. In the options panel, click Import/Export.
  3. Click the Download Export File button.
  4. Save the .json file to your computer.
  5. In Grid Mode of the second site, repeat steps 1–2.
  6. Click the Select File & Import button.
  7. Locate and select the .json file.

Layout Export and Import

If you have an entire layout you want to reuse in another website, export and import a layout file. A layout file contains no design settings.

  1. In the Grid Mode layout selector, click Edit next to the layout you want to copy.
  2. In the Tools menu, click Grid Wizard.
  3. Click Import/Export.
  4. Click the Download Export File button.
  5. Save the .json file to your computer.
  6. In Grid Mode of the second site, repeat steps 1–3 with the layout you want to copy the first layout to.
  7. Click the Select File & Import button.
  8. Locate and select the .json file.

Headway Templates

A Headway template is a .json file containing your website’s CSS code. Headway templates are helpful when you are building a family of websites that will have similarities in their design, and it would be faster to start from a previous site’s CSS and customize from there than it would to start from scratch. You can also share Headway templates with other Headway users.

For more information, see Using Headway Templates.

This article was last updated for Headway version 3.8.3.

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