How to Setup the Header Area in a Headway Themes Grid Layout
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.
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.
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.
Step 6) Click the Save button on the top toolbar to save any changes.
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.
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.
If the fields were completed as outlined below, they will display as follows:
Step 9) Click the Save button on the top toolbar to save any changes.
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.|
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.
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.
Step 18) From the Select Block Type area, drag the appropriate Block Type to the appropriate section. For example, the Header area.
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.