Title Banner

Description

Title Banners include:

  • Heading (red, all caps) in a white text box in the shape of a parallelogram
    • Positioning and width of textbox on top of the background image can be customized
  • Optional smaller subheading for the "parent" section on top of the heading (black, all caps)
  • Background image
  • Color overlay (optional)
  • Two colored triangles on the top left and bottom right corners (color can be customized)

Title Banners must be used with a Landing Page or Homepage page layout, and must be created in consultation with the MarCom Web Team so that correct code can be implemented.

Please submit a project request form to Marketing Communications if you would like MarCom to create a Title Banner for your Seattle U website. 

Available in zones:

  • Top Zone

Permissions:

  • Users must be added to the "Graphic Designers" permissions group in order to use this content type
  • We restrict access to this content type because it is amongst the most difficult content types to configure correctly if you do not have experience in web design. Banners must adhere to brand guidelines, and must be designed and coded so that it looks good at all screen widths.

How to use it

Navigate to the section where you wish to add the Title Banner.

Make sure that this section is using a Landing Page or Homepage page layout. Click here to find out how to change your page layout

Then click "create content" and select "Title Banner."

Note: If "title banner" does not appear in your list of content, you may not be part of the "Graphic Designers" permissions group. Request permission by contacting web@seattleu.edu.

Screen shot of how to use the Title Banner content type in v9

Required fields

  • Name
    • The text in this field is for internal, informational purposes only, and appears in the list of 'content in this section.'
  • Section Name
    • The text in this field becomes the large red title or heading in the banner.
    • This is typically the name of the section (or page) that the banner is appearing on.
  • Image for Medium-Large screens
    • This image will be shown on screens over 992 pixels wide (such as large laptops and desktop computers).
    • The recommended size for title banner images is at least 1920x700 pixels in size.
  • Overlay Color
    • Radio button field to select the brand color for the color overlay on top of the background image.
  • Triangle Color
    • Radio button field to select the color of the triangles which appear on the top left and bottom right corners of the banner.
    • You'll want to select a color that contrasts well with the overlay color.

Optional fields

  • Top Level Section
    • The text in this field will become a smaller subtitle, in black all-caps, on top of the main title.
    • This typically should be the name of the top-level or parent section.
  • Image for Extra Small Screens
    • When present, this image will be shown on extra small (767 pixels or smaller), i.e. mobile sized screens.
  • Image for Small Screens
    • When present, this image will be shown on small (768-991 pixels) screens, like tablets.
  • Image height for Medium-Large image
    • Usually 300px–450px. If you do not specify a height, then your banner will default to being 350px.
  • Background horizontal positioning
    • This should either be left, center, or right. The default value is left. You can also specify vertical positioning in this field, such as top or bottom.
  • Text Positioning and Width
    • The text in this field needs to be Boostrap grid classes, which will tell the browser the width and positioning of the textbox on top of the background image.
    • If you leave this field blank, then your text box will be positioned in the center of the banner, and the width will be determined by the length of the title.
  • Custom Banner CSS
    • If you are familiar with CSS, you can use this field to add custom styling to your banner.

Examples