When you’re first starting your design in Headway—or perhaps you’re vamping up your existing design—the best thing to do is to start with a solid plan. It can be helpful to sketch out some basic layouts represented by boxes on a scrap piece of paper. This way, you’ll get a better sense of how many different layouts you’ll need, and you’ll naturally start thinking about how each layout will be used.
Make the Most of Layout Inheritance
For example, at the start of a new blog project, you may determine that you will have a static front page with a unique layout, the blog index with your latest blog posts, and a slightly different layout by default for your pages. In addition, you may determine that you have one additional layout you’ll use less frequently (for example, a Full Width layout, or a Landing Page layout you create with special sidebar or media content). Reviewing the rules of layout inheritance will help us out. Our front page is naturally separated by Headway as unique, and no other layouts will inherit its components. You can mirror individual blocks there, but the layout itself is independent. Next, you’ll look at the Blog Index, which serves as the “parent” here. The Blog Index is the top of the food chain in layout inheritance, and all other layouts will be similar to the Blog Index (with different content block content when the content block is in default mode) unless otherwise modified. Blog Index layout, which is used for all non-customized layouts, with content block set to “Default”
When to Customize a Layout
In our test case, we need to modify the Single > Pages layout because we’d like a different arrangement of blocks here. On single pages, we plan to have a widget area with specific widgets that will be most useful to our visitors on our pages, and we’d also like to use an embed block to feature a welcome video. Single > Page layout gets customized, which allows us to set unique blocks such as a special “Pages” widget area
We can open the Single > Pages layout, which will bring up the Grid Wizard. We’re faced with a choice: Do we clone an existing layout, start fresh, or apply a shared layout?
How to Customize a Layout: Clone Existing Layout or Apply Shared layout?
When deciding whether to clone an existing layout or whether to design and use a layout template, keep these pros and cons in mind:
- Yea! Each cloned layout maintains its independence; cloning just copies the blocks from another layout. Further changes to the current layout won’t affect other layouts on your site.
- Yea! Cloning a layout provides you with all the same blocks as the layout you clone from, as well as those block options, because the blocks are mirrored.
- Nay! Cloning means that you can’t apply your new, unique layout to a different page or layout with a single click. For example, if you’ve customized your “About” page by cloning the Single > Pages layout, then changed it around and want to use that same layout on your “Contact Us” page, you’ll need to customize “Contact Us” and clone “About.”
- Nay! Cloned layouts don’t retain any relationship to each other aside from blocks that are mirrored, so layout changes to a layout you cloned when customizing that original “About” page won’t trickle down to “About”—even when you want it to. This gets particularly hairy when you have 10–15 customized layouts, all similar but cloned from a common “parent”—and you’ve decided to add a new block. That new block will need to be added to each customized layout.
Using a shared layout (AKA a reusable layout):
- Yea! Shared layouts let you swap between layouts on specific WordPress pages, archives, and so on. It’s as easy as trying on hats. (See Using Shared Layouts for more.)
- Yea! It’s easy to “turn off” a shared layout for a layout and revert back to the customizations you had prior to applying it.
- Yea! With a shared layout, changes to the template are reflected on all the layouts that have the shared layout applied, so you need to edit only once.
- Nay! With a shared layout, changes to the layout are reflected on all the layouts that have the template applied. If you wanted something unique to a specific page, you’re out of luck.
To sum it up, cloning makes good sense when you’re planning on customizing further, and you want those customizations to be unique to the layout you’re working on. Shared Layouts make sense when you have a set of blocks with a particular order or configuration that will be reused in various places throughout the site as-is. In our test case, we’ll customize the Single > Pages layout because it’s the only one we need to customize aside from the Blog Index. (We could use a layout template here if we were really set on it). We’ll also create a layout template for our landing page because we know we’ll be using it on individual WordPress pages throughout the life of our site, with the same set of blocks in the same order, and with the same settings. When we create our landing pages in the future, we don’t even have to open the Visual Editor; we can select the appropriate layout template from the page options Headway makes available right on the Edit Page screen in WordPress. Landing page template:
Additional Reading: Reusing Blocks, Layouts and Designs