Footer Navigation

Footer Navigation

Footer Navigation is used as secondary navigation. What you might want to include in your footer navigation:
  • Links to web pages that didn't fit in your main navigation
  • Links to other sites your visitors may find helpful
  • Repeat common links that your visitors will most likely be looking for on your site.
  • Privacy Policy
  • Terms of Use Policy

To Add a Menu in the Footer:


Step 1 - Create the Footer Menu
  • Go to Website / Navigation.
  • Select "add new menu."
  • Give the Menu a Name and Title such as "PTA Links," "District Links," etc.
  • Save.

Step 2 - Create the Menu Entries for the New Footer Menu
  • For detailed direction on how to do this, see the article on Creating a New Menu Entry.
  • Don't forget to Enable and Save the Menu Entries.

Step 3 - Add the Menu to the Footer Block
  • Go to the Website / Structure.
  • Find the Block for the Footer Region.
  • Select "add block."
  • Choose "Menu" as the Block Type, then click "add block."
  • Block Settings - Add the Block Name, select the Menu, and select if you want the title displayed.
  • Design Configuration - Leave this blank unless you know what you're doing.  Contact the Help Desk if you need assistance.
  • Visibility - Select who can see this block and the website pages where you want the block presented.


Changing/Formatting Your Footer

To change and format your footer:
 
1. Go to 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:
  1. 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.)
  2. 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:
  1. In the footer region, each structure acts like a column in a single row table.
  2. 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.
  1. 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)

  1. 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 Block - The 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.
  1. In the HTML editor, click on the "<>" button.
  2. 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.
  3. 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.


    • Related Articles

    • Navigation Menus

      What is Navigation? Navigation is a menu that links to your website pages, a PDF document, or other web pages. Depending on your website template, your site can have menus in various places. To access your site's navigation: Go to Website / ...
    • Customizing the Navigation

      What is Navigation? Navigation is a menu that links to your website pages, a PDF document, or other web pages. To access your site's navigation: Go to Website / Navigation. Drag menu entries up or down to organize the placement in the list. Use the ...
    • Menu Entry Options for "Who Can See This Item?"

      When creating a new navigation menu entry or editing an existing one, there is a field called "Who can see this item?" Go to Website / Navigation / select a menu entry to Edit. The Options include the following: Anyone can see it (Always shown) Only ...
    • Customizing Your Website Design

      Customize Your Favicon The favicon is the graphic symbol that shows up in the internet browser tab. Step 1 - Create your Favicon File must be either PNG, GIF or ICO (no JPG) and must be 16x16 or 32x32 at either 8- or 16-bit color depth. Other file ...
    • Customizing the Mobile App

      Basic Configuration This is where you add your own logo image and color scheme. Go to Communications / Mobile App / Basic Configuration. The optimal size for your logo image is 200 x 200 pixels. Welcome Screen You can customize the Mobile App Landing ...