How To Create 3 Columns Widgetized Footer In Headway 3?

In Headway version 2 and above, you might need to go through a number of steps before you could achieve a 3-column widgetized footer for your website but in Headway version 3.1.2, it is much simpler now. Basically, you just need to add a widgetzed block and set it horizontally and you got it! See below steps for details.

1. Log into your WordPress dashboard and go to Headway’s Visual Editor.
2. Click on the “Grid” tab at the top left hand panel.
3. Scroll to the bottom of the page where the footer appears.
4. The default footer should contain an admin login, copyright statement, headway attribution and “Go To Top” link.
5. If you just want the copyright statement and not the rest of the items, you can disable them by hovering the footer block, click on the “Option” when it appears.
6. The lower panel at the bottom of the page will open up more option on the “Content” for the block.
7. Click on those boxes that you do not require and they will be disabled.
8. Go to the top right hand corner and click on the green button “Save” to save.

Create the New Widgetized Footer Block

9. In this example, we are not going to interfere the current footer but rather add in another block above the footer to create the 3 columns layout that we wanted.
10. Drag the footer block below to allow some space for the new block.
11. At the new space, point and hold your mouse down and drag a new block.
12. Upon finishing dragging the new block, an option box will appear to ask you to select a block type.
13. Select “Widget Area” and the name “widget area” will appear in the new block.
14. Next, hover over the new block and click on its option panel at the top right hand corner.
15. It will open up more option at the below panel, click on “Widget Layout” and click on “Horizontal Widgets”.
16. Go to the top right hand corner and click on “Save” to save the setting.
17. Once it is saved, you will now get a horizontal layout but you can’t see it until you drag in some widgets into it.

To Add in Content for the Widgetized Footer

1. Go back to WordPress dashboard and go to “Widgets” under “Appearance “.
2. You should see there is a “Widget Area” at the right hand side. Look at the ID#, it should match the same number with the new block you have created previously in Visual Editor.
3. You can now drag in the widgets you want into the “Widget Area”.
4. For example, in the first column to display the blog categories, second column to display RSS and the third column to display “Contact Us” information.
5. You can simply just drag the “Categories” & “RSS” from the “Available Widgets” box into the widget area.
6. For the last column, drag the “Text” widget into the widget area and enter “Contact Us” at the “Title:” box.
7. Type in your contact information in the second box and style it with CSS if you know.
8. Click on “Save” to save the changes.
9. View it in the browser and you can see your 3 columns layout with copyright statement below it.

Space out the 3 Columns Evenly in the Footer

You may realize the 3 columns are not spacing evenly in the footer. You can simply space them out by adding some CSS code in the “Live CSS” in the Visual Editor.

1. At the dashboard, go to “Visual Editor” again.
2. Click on “Design” tab at the top left hand panel.
3. Once you are in the design mode, go to the bottom of the page and click on the icon “Option” and click on “Live CSS”.
4. Enter the following CSS code into the “Live CSS” box.

#block-5 li.widget { width:28%; }

5. Remember to change the block number to your block number.
   (The block number is shown at the top left corner of the block when you hover over it).
6. Once you are done, click on “Save” button to save and you can see the 3 columns are now spacing out evenly within the width of the footer.

How To Make The Two Block Look Like One Block?

Now, the last step is to make the two blocks look like one block as a footer. You can easily achieve it by making the blocks in the same color. If for example block 5 is the 3 columns widgetized block and block 6 is the copyright statement block. Use the following CSS code to make them in the same color.

            /*ADD A BACKGROND COLOR TO 3-COL BLOCK*/

#block-5 { background-color:#591b05; }

/*ADD A BACKGROUND COLOR TO COPYRIGHT STATEMENT BLOCK*/

#block-5 { background-color:#591b05; }

Change the block number to your own block number. If there is a gap in between the block, move the top block down by adding “margin-bottom:0px;” to close the gap. Once done, save and you should have achieved a footer with 3-column widgets in it and a copyright statement below it.