skip navigation

Add banners, backgrounds for specific pages

04/06/2016, 2:30am CDT
By Loren Nelson

The background image looks like a mashup between a Lego and a Mars rover, a sure sign you’ve landed somewhere special.

The Canyon Athletic Association, based out of the Phoenix area, deploys custom backgrounds and banners on its website for each of the organization’s 15 sports. The aforementioned Robotics page is perhaps the most unexpected among the sports-themed designs, but every section has a stunning, professional look that works off the canyon-themed homepage design.

Blue Star Lacrosse also has loaded multiple banner designs for various sections by using Sitebuilder’s ability to manage theme settings. While we didn’t find any robots, a mix of graphics and photos are used throughout the site to reinforce what section on which viewers have landed.

Guiding visitors around a site should be a top priority for every webmaster. Both the Canyon Athletic Association and Blue Star Lacrosse have accomplished that goal with high-grade design elements, setting them apart from their competition.

How it works

Changing website background or banner graphics, and setting them for specific sections of site, is a feature that requires just a few simple steps:

  1. Navigate to Theme Settings
  2. Add the new background graphic
  3. How to use the Sport Ngin library of background graphics
  4. Repeat the steps to change or add a banner

Navigate to Theme Settings

Make sure you are logged in and in edit mode. Click on the Admin Control Panel Link, then select Website Settings from the main menu. In the sub-menu below, select the Theme Settings option. On the Theme Settings page, click the Background tab. Click the Add Background Graphic at the bottom of the page. Note: The location and look of the Admin Control Panel link varies depending on the Sitebuilder template.

Add the new background graphic

You can choose to add a new banner graphic as the site default or add the background to a specific page or section. Check the Active and Site Default buttons to make the background graphic the site default. To place your new background graphic on a specific section, Check the Active button, then click on the section in the site map below. Click the Create This Background Graphic at the bottom of the window.

How to use the Sport Ngin library of background graphics

For do-it-yourselfers, there's a library of themed backgrounds created by Sport Ngin designers available for use. Click the Sport Ngin Background tab on the Theme Settings page, then scroll through the list of graphics. Click the gear icon in the upper right corner of the page, then click the Copy option. The image you copied will now appear as an option under the Background tab. Make the background active, decide if you want to make it the site default or set it for a specific section, then click the Save Background Graphic link.

Repeat the steps to change or add a banner

The series of steps are, in essence, the same when adding changing a Banner Graphic. In this example, we copied a banner from the Sport Ngin Banner library, then activated it as the site default. Note: For a Sitebuilder responsive theme, the banner image should be sized at 1,000 pixels wide by any height.

The finished product

With a few easy steps, and within a matter of minutes, the site now has a background and banner to match. 

Learn More

Want to talk about how you can get your new Sport Ngin site up and running in manner of minutes? Let's talk: sportngin.com/get-started

Tag(s): Pro Tips