Layout Editor

The layout editor is active when you first enter the Visual Editor.  You can add wrappers, blocks and adjust the options for each.

Wrappers

Adding Wrappers

On the left side of the Visual Editor, click on the Plus sign (+) [Note: this button is disabled in the Design Editor].

 

Once you click, the Add Wrapper Panel slides out where you have access to Wrapper Presets and Blank Wrappers. Click and drag a wrapper (either a preset or blank) onto the Viewport (the area in the center of the Visual Editor).

Video of adding a Wrapper via Blank Wrappers

Wrapper Presets

These are pre-built Wrappers that already contain blocks inside of them.  You can choose to add a fluid or a fixed wrapper before you click and drag it onto the viewport.

Video of adding a Wrapper via Wrapper Presets

 

Types of Wrappers

• Fixed wrapper with fixed grid – Wrapper and grid will be width of either global grid width or independent grid settings in Wrapper options.  It will not adjust as screen width changes.
• Fluid wrapper with fixed grid – The wrapper will adjust as the screen changes but the blocks inside the grid will not.  They will remain fixed to either global grid width or independent grid settings in Wrapper options.
• Fluid wrapper with fluid grid – Both the wrapper and the blocks inside the grid will adjust as the screen width changes.

Choosing a type of wrapper

When adding a blank wrapper, you choose the fluidity of the wrapper and grid.

 

 

When adding a wrapper via Wrapper presets, you can choose the fluidity of the wrapper but not the grid.

 

 

 

 

 

You can always change the fluidity settings by right clicking on the wrapper and choosing the options there:

Move/re-order wrappers

Hover over a wrapper until the wrapper border appears.  There are two arrows ▼▲ Hover over them, click and drag the wrapper to move it where you would like.

Wrapper Settings/Options

You can adjust the settings for a wrapper by hovering over a wrapper and clicking the gear icon

Once you click the gear icon, a floating Wrapper panel should appear where you can adjust wrapper options.

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.  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:

A fluid wrapper with just the header block
A fixed wrapper with the content block and other blocks as desired
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.

Another reason you might use multiple wrappers is if you want different styling, for example, a different background color on different groups of blocks.

 

Blocks

A layout is made up of sections called blocks. Blocks have a solid black outline in the Visual Editor.

Basic Block editing functions

 

• Create a block by clicking and dragging on the grid.
• Select a block by hovering over it and clicking on it. After a block is selected, its outline turns blue.
• Move a block by hovering over it, clicking and dragging it to the desired location.
• Switch a block’s type by right-clicking the block, clicking Switch Block Type, and clicking the new type in the options panel.

• Duplicate a block by right clicking on the block and choosing “Duplicate Block”.  This will duplicate block settings in both layout editor and design editor (style).
• Give a block an alias by right clicking on the block and clicking “Set Block Alias”.

• Delete a block by right-clicking the block and then clicking Delete Block or hovering over the block, clicking to select it and then clicking the delete button (trash can) that appears.

 

 

 

 

Core Block Types

Headway 4 comes with the following block types.

Breadcrumbs

A row of links showing the visitor’s location in the site and the path back to the home page. This block recognizes page hierarchies you have created in WordPress.

Content

The main section of your site’s pages. By default, what appears in the content block is driven by WordPress. For example, for the Blog Index layout, the content block displays a predefined number of recent blog posts (the loop).

Custom Code

Supports custom HTML, JavaScript, PHP, WordPress shortcodes, and plain text (though you may as well use the text block for that). Add your code in the options panel.

Embed

Contains a video or image from a URL. For more details on what’s possible with the embed block

Footer

Sits at the bottom of the site and usually contains basic information like a copyright statement and a credit line for the theme. Customize the default Headway footer text in the options panel.

Header

Contains your site name and tagline. As the name suggests, it’s located at or near the top of your page. (Of course, with the Visual Editor, you can put the header block wherever you want.) You have the options of including a background image and of hiding the tagline (but hiding it is not recommended if you want your tagline to impact your search engine rankings).

Image

To display an image hosted on your WordPress site—select an image already in your media library or upload a new one.

Listing

For displaying simple, hyperlinked lists of your site’s content.

Map

For displaying google maps of locations.

Navigation

Contains a WordPress menu and can be either horizontal (the default) or vertical. Dropdown menus are supported. Once you have saved your layout with a navigation block, it becomes available in your WordPress admin panel to have a menu assigned to it. Multiple navigation blocks can be used. For further detail about what you can do with navigation blocks.

Pinboard

Provides a visual way for visitors to get an idea of the content your site offers rather than a list or synopsis of blog posts or articles.

Search

Provides a simple search field for your website to save you the time of adding and configuring a widget area block for a search function.

Social

Displays a row or column of icons that link to your social media profiles.

Text

For small amounts of static text, such as a bio or short “about us” blurb. Type your text or import from a file using the options panel for this block. If you want to use HTML, click the </> (source) button.

Widget Area

A container for widgets that can be oriented vertically (the default) or horizontally for an arrangement like a widgetized footer. Having a layout with at least one widget area block turns Headway into a widget-ready theme. You can more than one widget area on any layout.

Adding/Drawing a Block

Once you create a wrapper, you can then add blocks to a wrapper (even if you use a wrapper preset) by clicking on the grid inside the wrapper and dragging.

Adjusting block settings

First, hover over a block and select it by clicking on it.  Then, the block settings and options will appear in the right panel.

 

In addition to being able to adjust the minimum height for the block in this panel, there is also a purple line visible in the grid that you can move up or down to adjust this as well.