Headway Themes — The Drag & Drop WordPress Theme

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

  1. 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.
  2. Drag the footer block below to allow some space for the new block.
  3. At the new space, point and hold your mouse down and drag a new block.
  4. Upon finishing dragging the new block, an option box will appear to ask you to select a block type.
  5. Select “Widget Area” and the name “widget area” will appear in the new block.
  6. Next, hover over the new block and click on its option panel at the top right hand corner.
  7. It will open up more option at the below panel, click on “Widget Layout” and click on “Horizontal Widgets”.
  8. Go to the top right hand corner and click on “Save” to save the setting.
  9. 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 6is 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.

9 Responses to How To Create 3 Columns Widgetized Footer In Headway 3?

  1. Anonymous says:

    How do I apply this to all of my pages? currently it only applies it to my blog index.

  2. Anonymous says:

    Brilliant thank you – never realised it was actially quite simple… admit I wasted ages in the Visual Editor trying to do it till I found your article!!

  3. SAHIL SINGLA says:

    A question we get asked often is whether Headway is compatible with all of the WordPress plugins and widgets. We have built Headway to be compatible with as many plugins and widgets as possible. But due to the sheer numbers of plugins and widgets available, it is virtually impossible to support every single one. Firstly, we highly recommend only using plugins compatible with your version of WordPress.

    While we do everything we can to make Headway follow coding standards, some plugins may not contain compatible coding, which then creates a conflict. Therefore we cannot guarantee Headway will work with every plugin.

    That said, it is rare a plugin will cause your Headway-based site to not display correctly. Rather, if a plugin conflicts, it will cause the Visual Editor not to load. Often simply deactivating the plugin while using the Visual Editor is sufficient.

    If you do run into an issue with a plugin or widget, the first and best place to start seeking assistance is the forums. We will do everything we can to help you make your plugin or widget work with Headway.

  4. This is great and makes perfect sense. I am trying to do something similar by adding a widget area at the top of my two sidebars, spanning the width of both. I can create it in the VE, but when look in the Widgets page in WP, the widget area doesn’t appear. Any idea why that may be?

  5. This all works fine on the initial page but Headway3 doesn’t seem to allow mirroring of this particular widget to other pages it just gives the ‘No Widgets’ alert. Any ideas please? Thanks!

    • OdeBlogger says:

      Did you click on the option icon on the new widget block? When you click on it, you see the “Config” panel at the end of the screen. At the “Mirror Block”, select the 3 column widget ID and you should see it mirror properly.

  6. Arion says:

    Hi,

    Thanks for making the point so simple. Now, if I have a fluid footer, how can I make this new widget block also fluid..?

    • OdeBlogger says:

      From my understanding for Headway 3, there is no easy way to do it. I heard it can be done by writing some customized php code. You may like to double check with the Headway Support.

Leave a reply