Enabling and Inserting Banner Images

Banner images are great for adding life to your pages and are easy to turn on or off.

Please review the documentation about banner images in the Web Style Guide and our blog post about resizing a header image in Photoshop.

photo_library

Banner Image Gallery

Visit the Banner Image Gallery to choose from a selection of pre-made banner images. Simply copy and paste the dependency tag for the image rather than browsing for a photo.

 

Enabling and Disabling a Banner Image

Depending on which template you chose, a placeholder banner image may already appear on your page.

To enable or disable the banner image:

  1. Check-out the page that you would like to edit.
  2. Navigate to Properties in the page actions toolbar and select Parameters if not already selected.
  3. Under Custom Settings, find the details for a Site Banner and turn on or off the Image Region and click Save.

    Screenshot of OmniUpdate Parameters

Changing a Banner Image

If you have never changed the banner image on a page before, a place holder image will be used. You must delete this placeholder image and add your new image.

  1. With the page checked out, navigate to Edit in the page actions toolbar.
  2. Select the green JustEdit button for the Banner Content region.

    Screenshot of banner region with placeholder image

  3. Select and delete the sample image only.

    Screenshot of no image in the banner region

  4. Insert a new image that is appropriately sized.

    Screenshot of new banner image in JustEdit region

  5. Save and Exit and Publish the page. 

    Screenshot with final banner image

Using Multiple Banner Images

Pages can have multiple banner images that rotate automatically, but because additional images increase the load time for your page, we only recommend one banner image. Limit banner images to a maximum of 3.

  1. In the JustEdit view for the banner image region, right-click the first row and choose Insert Row Before or Insert Row After depending on the order you want the images to display.

    Screenshow of a new row being inserted in the banner image content region

  2. In the new row, insert an image that is appropriately sized.

    Screenshot of 2nd image

  3. Save and Exit.

    Final screenshot of multiple banner images