Part 12 - Presentation - Editing Header Image Modules

The Header Image Module controls the graphic at the top of a Web page immediately below the UAB logo. There is no limit to the number of header images you may have on your site. With large sites, each section will often have an identifying graphic at the top of the page that will remain throughout the section.

TIP: You may change the image yourself and you may make it any height. The width is required to be 972 pixels.

  1. Header Image. This area can be used to showcase your offerings to students, faculty, donors, or other potential audiences. Promotional elements are typically relegated to the front door header image of a site and/or on major landing pages (like a department landing page).

  2. Site Navigation. The green horizontal navigation bar is specific to each Web site and will be located on all pages just below the header image.

  3. Picture of a header image

The header image is in a module, so it can be found by accessing Extensions > Module Manager > Header Image. If you are making a new header image, click New and select Custom HTML module.
Photo of custom HTML module location

Click Next and fill in the fields like you did for the other modules. Give a Title to your module, hide the title,  and select the Position (banner). 

New module selection photo

The banner is inserted in the editor area page.  Upload your image using the Insert/Edit Image icon. Your banner will then appear in the editor when complete.

Photo of insert pic icon

Under Menu Assignments tab , you will choose which pages you want your header to display. 
Picture of menu assignment tab



TIP: Always title your header images with the position, section, and the size of the image so that you can easily identify it later. Here is an example: Header Image - Frontdoor (972 x 250) or Header Image - Inside Pages (972 x 174)

Tip: Feel free to have any of the banners any height you need. For instance, 250 pixels high may be too tall for your taste. Remember that the width must be 972 pixels.

Facts about the header image

  1. The header image is always 972 pixels wide so that it fits properly in the template. The header image can be as tall or as short as needed.

  2. The average size for front door header images is usually no larger than 972 pixels wide by 250 pixels tall. As mentioned above, these larger promotional images are usually kept on the front door or major landing pages.

  3. Smaller header images can be used to add visual interest to a page for a user or to help raise awareness of where a user currently is within the site.