How to Setup the Header Area in a Headway Themes Grid Layout

Posted OnMar 23, 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 Header Block.

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 Header Block

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

A black pop-up box also displays to show the dimensions of the Header area.
Hover over this area and drag the mouse to expand/reduce the Header width/height.

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

km-headway-blocks-01aC

General Tab

Step 5) Complete the fields of the General Tab as shown below:

A. Banner/Logo Click the Choose Image button to upload your Banner or Logo.

For this example, we increased the height of the Banner by hovering over the bottom border and dragging the Header area down to increase the size.

A Banner with the dimensions 825px Wide x 135 px High was uploaded.

B. Automatically Resize Header Image Place a checkmark in this field if you want the Header image to automatically resize to fit the Header area.

For this example, this field does not contain a checkmark.

C. Hide Tagline To hide the Tagline place a checkmark in this field.

For this example, this field contains a checkmark.

km-headway-blocks-03aDDD

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

Config Tab

Step 7) Click the Config Tab.

Step 8) Complete the fields on the Config Tab as shown below:

D. Mirror Block By using this option, you can tell a block to mirror another block and its content. This option is useful if you are wanting to share a block – such as a header, across layouts on your site. Select the block you wish to mirror the content from the dropdown box.
E. Block Alias Enter a Block Alias which will be easily recognizable for the Block Alias and it will be used throughout your site admin. For example, if you add an alias to a widget area block, that alias will be used in the Widgets panel.

You can also set the Block Alias by hovering over the Header area and selecting Set Block Alias from the pop-up menu.

km-headway-hdr-20a

For this example, Home Page Banner was entered.

F. Custom CSS Class(es) If you find you need more control? Add your CSS Class selectors here and they will be added to the Block’s Class Attribute. Do not put regular CSS here. Use the Live CSS Editor instead.

For this example, no change was made.

G. Advanced: Add Custom CSS Class(es) to Row/Column Copy any custom CSS Class(es) to this block and add them to the parent row and column.

For this example, no change was made.

km-headway-blocks-05aa

If the fields were completed as outlined below, they will display as follows:

km-headway-blocks-06ba

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

Import/Export Tab

Step 10) Click the Import/Export Tab.

Step 11) Complete the fields of the Import/Export Tab as shown below:

H. Select File to Import Click this button only after you have decided on options I-J.
I. Import Block Settings – Include Block Options Leave the checkmark in this checkbox to import the Block Options when importing a file.
J. Import Block Settings – Include Block Design Leave the checkmark in this checkbox to import the Block Settings when importing a file.
K. Import Block Settings Click this button only after an import file has been selected and options I-J have been configured.
L. Download Exoprt File Click this button if you want to save the work you have done so far for safe-keeping.

km-headway-blocks-07a

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

Delete the Header Block

Step 13) To Delete the Header block, right mouse click over the Header area to display a pop-menu.

Step 14) Select Delete Block to remove the selected block.

km-headway-blocks-08XXa

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

Switch Block Type

Step 16) To change the Block Type, hover over the Header area to display a pop-up menu.

Step 17) Select Switch Block Type from the pop-up menu to display the Select Block Type area at the bottom.

km-headway-hdr90a

Step 18) From the Select Block Type area, drag the appropriate Block Type to the appropriate section. For example, the Header area.

km-headway-hdr-22a

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

The next step of the guide will focus on How to Setup the Menu Area in Headway Grid Layout.

 


Leave a Reply

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

Send this to friend