Changing/Formatting Your Footer

To change and format your footer:


1.  Go to Dashboard / Website / Structure / Region “Footer”.  (Note:  your region may be called something else if you are using a template other than the Dallas template.)

2.   In this Footer region, you can use the following Structure Blocks:

  • Menu – This block pulls menu items from the Website / Navigation.  The advantage to using a Menu block is that you can add/edit/delete your links through the Navigation screen, rather than having to manually change them in this Footer region of the Structure.  (It’s a little easier to manage.)
  • HTML Block – This block is just like a web content page, you can insert HTML source code or use the HTML editor toolbar to create your content.

3.   Formatting the Footer Region:

  • In the footer region, each structure acts like a column in a single row table.
  • The formatting of the Footer region uses something called Bootstrap and CSS to help the Footer be mobile friendly.

  1. In each footer structure you will see a CSS class that begins with something like “col-lg-4”.  The 4 can be considered the width of the column. 
  2. The total column “width” needs to equal 12.  So if you have three footer structures, each one could use “col-lg-4” because 4 x 3 = 12.  Or, if you had four footer structures, each one could use “col-lg-3”.
  3. The footer structures can use different “col-lg-x” (where x is the width number).  They just need to total 12.

  • For Menu Blocks use the Design Configuration tab.

  1. Add the Class Name “footer-space” at the end of the class.  This ensures that the links appear properly formatted.  (Note: This is different from “space-foot” that you use in HTML blocks.)
  2. The Title is optional (whether or not you want the Title of the Navigation Menu links to appear)

  • For HTML Blocks use the Block Settings tab.

    1. Add the Class Name “space-foot” at the end of the class.  This ensures that the block will appear properly formatted. (Note: This is different from “footer-space” that you use in Menu blocks).

2. Addresses in an HTML Footer BlockThe easiest way to format addresses properly is to use bullets.  You will need to access the source code so you can add the class “address-footer” in an HTML div tag.
  • In the HTML editor, click on the "<>" button.
  • Make sure your code has a similar <div class=”address-footer”> line of code at the top, and a matching closing </div> tag at the bottom.
  • You can align the address to the right, left or center.  It may look odd in the HTML Block, but it should appear properly when you look at the web page.