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.

header2

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.

newcustommodule

Click Next and fill in the fields like you did for the other modules. Under Details, you need to give a title to your module and select the Position (banner). 

custommoddetails

Since this is called a Custom HTML module, the banner is inserted in the editor area page.  Under Custom Output, upload your image using the Insert/Edit Image icon.

customoutput

Under Menu Assignments, you will choose which pages you want your header to display. 

menuassignment

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. m_header

  4. 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.pheader