How to Setup the New Wrapper Area in a Headway Themes Grid Layout

Posted OnMar 28, 2015     CategoryThemes     CommentsNo comment

In this section of the guide to Headway Themes, we will focus on how to add, modify, delete and switch blocks in the grid layout for the new Wrapper.

Step 1) Login to the WordPress Dashboard.

Step 2) From the top toolbar, navigate to Headway -> Visual Editor -> Grid.

km-headway-design-01ab

Add & Modify the Wrapper Block

Step 3) Right mouse click over the Wrapper area to display a pop-up menu.

km-headway-wrapper-01a

Hover over the Wrapper area until the mouse pointer turns in to up and down arrows and drag up/down to reduce/expand the Wrapper.

Step 4) Select Open Wrapper Options to display the Wrapper Block section at the bottom of the page.

Grid & Margins Tab

Step 5) Complete the fields as shown below:

A. Columns This displays the number of columns in the grid. Suggested values are 9, 12, 16, and 24.

The Wrapper area must be empty of all blocks prior to changing the column count. Either move the blocks to another wrapper or delete them if they are not needed.

To change the number of Columns drag the blue circle left/right to the desired number, click the up/down arrows or enter the value directly in to the textbox.

For this example, no change was made.

B. Use Independent Grid Place a checkmark in this checkbox if you would like this Wrapper to have different grid settings than the Global Grid settings.

For this example, no change was made.

C. Top Margin The Top Margin is the space between the top of this wrapper and the top of the page or the wrapper above it.

To change the Top Margin drag the blue circle left/right to the desired number, click the up/down arrows or enter the value directly in to the textbox.

For this example, no change was made.

D. Bottom Margin The Bottom Margin is the space between this wrapper and the bottom of the page.

To change the Top Margin drag the blue circle left/right to the desired number, click the up/down arrows or enter the value directly in to the textbox.

For this example, no change was made.

km-headway-wrapper-03a

Step 6) Click the Save button on the top toolbar to save any changes.

Responsive Tab

The Headway Responsive Grid allows the powerful grid in Headway Base to be custom-tailored depending on the device that the visitor is viewing the site from. Some sites may benefit from having the responsive grid enabled while other will not. As the designer of the website, it is up to you to decide. The responsive grid can be enabled or disabled at any time.

Switch Block

For this example, we are going to duplicate the Header block, drag to the new Wrapper location at the bottom and customize it.

Step 7) Right mouse click over the Header area to display a pop-up menu.

Step 8) Select Duplicate Block.

km-headway-wrapper-100a

Step 9) A Duplicate Block now displays in the Header area as shown below:

km-headway-wrapper-101a

Step 10) Click to select the Duplicate Header Block and drag to the new Wrapper location at the bottom.

km-headway-wrapper-102a

Step 11) Right mouse click over the new Wrapper location to display a pop-up menu.

Step 12) Click Open Block Options to display the Header Banner Copy area at the bottom.

km-headway-wrapper-103a

General Tab

For this example, a new image for will be selected for the new <b?Wrapper area.

km-headway-wrapper-104a

Step 13) Click the Choose Image button and upload a new image.

km-headway-wrapper-105a

Step 14) Click the Config tab and give the Wrapper a new Block Alias.

km-headway-wrapper-106a

Step 15) Click the Save button on the top toolbar to save any changes.

Delete Block

This area is covered in How to Setup the Header Area in Headway Grid Layout.

Import/Export Tab

This area is covered in How to Setup the Header Area in Headway Grid Layout.

The next step of the guide will focus on How to Setup a Single Page in Headway Grid Layout.

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Send this to friend