Page History

Also known as: stat callout, background photo, full-width photo, animated stat, full-width pattern, background video, full-width video

Description

Displays

Description

This block displays a high-quality, full-width image asset (photo, video, or background pattern) that captures to capture the user’s attention while setting the visual tone of the page. A small amount of overlaid text provides essential context, a quote, or a key message. The text could be a quote or a short sentence. Avoid using multiple heading and text styles in the text content.

Examples

Companies & Recruiters page

- background photos

-stat layouts

Update Magazine article

- background photo with parallax

Home page - Madison section

...

Design

Video background - desktop Image Modified	Mobile video with

option to keep

copy on top of video

Image Removed

Image Added Mobile video with copy below video Image Added

Use When

Use to capture user attention with a bold claim or a high quality image or video

...

Image Removed

. Works well on high level Pages, Newsroom Posts, and Update Magazine posts.

• Background photo option: used with a high quality photo to make an impact and add interest to a page; often used with an environmental portrait photo and a quote.
• Background pattern option: used to highlight important information.
• Full-width stat option: used to call attention to a quick stat.
• Background video option: use sparingly as too much motion on a page can be an unpleasant user experience. B-roll style video only.

Examples:

• Companies & Recruiters page
  • background photos
  • stat layouts
• Update Magazine article
  • background photo with parallax
• Home page - Madison section
  • background photo
• Sample block page - Private page, must be logged into WordPress
  • many examples

Editorial Guidelines

...

For background image and background pattern layouts

• Follow MSC's Writing Web Copy best practices Web Copy General Guidelines.
• Avoid using multiple heading and text styles in the text content. Stick to 1-2 types of content (e.g. heading and supporting copy, quote and author)

For stat layout

• Statement text: 80 characters or fewer (shorter is better)
• Stat: 52 characters or fewer if stat source is just one line; 22 characters or fewer if stat source is two lines

For video layout

• Stat number: Only a few characters, such as a number "449", a percentage "98%", or a ranking "#9".
• Stat text (the larger, bolder text that provides context to the stat number): 52 characters or fewer. Keep it as short as possible. Example: "of students agree their next steps align with their career goals" provides context to the stat "98%".
• Source text:
  • Generally 20 characters or fewer, e.g. "Class of 2025".
  • Long source text option: Can provide more context and go up to ~80 characters for a long source. Example: "— Carnegie, 2024 R1 universities are top-tier research institutions."
    • Do not use stat text (or use max of 10 character stat text) if have long source text.
• Statement text: 80 characters or fewer. Shorter is better.
  • Note for dev: The field for the statement text is "Title".

For video layout

• As No copy or as little copy as possible since a video will be playing under it

Needs from Designer

For background image layout

• Need background image

For video layout

• . It is difficult to read text on top of motion. If copy, follow MSC's Web Copy General Guidelines.

Design Assets Needed

For background photo option

Not all photos will work. The photo shouldn't be too busy and avoid using a photo of multiple people as they could get covered by the copy or cropped out. If not using a card to hold copy, make sure the photo will allow proper contrast with the text on top of it. May have to put a dark gradient over photo so that copy is properly contrasted (Example: Bob Batt photo on OIM page has dark gradient on left so white text is properly contrasted.)

Required photo asset

1 high quality photo (taken by WSB photographer or other professional).

Specs

• At least 2400px wide.
• The subject should be vertically centered in the image to avoid important features getting cropped out.
• If using an environmental portrait, the subject should be horizontally on the right or the left to accommodate copy on the other side.

For background video option

The content in the video should be subtle, background style or "B-roll" footage.

Required video assets

• 1 mobile video
• 1 desktop video
• 1 poster image (a still of the first frame of the video or a photo very close to
• Need video
Need poster image (a still of
• the first frame of the video)

Use Cases

Use to showcase a high quality image on a Page or Post.

Use in a featured/high profile News post.

Use in Update magazine posts.

...

Specs

• The ideal video file size is 5MB or less for both desktop and mobile. Optimize the video as much as possible to help keep the file size down as much as possible.
  • Mobile video must be 5MB or less.
• Remove the audio from the video (removing the audio from the video file will also help keep the file size low).
• Ideal resolution is 1920x1080 (Full HD) for desktop and 1280x720 (HD) for mobile video.
• Ideal format - mp4
• Aspect ratio is 16:9
• Ideal video length is around 6-7 seconds. It will play in a loop. Note that the higher the quality of the video, the shorter the video length will need to be. 

Styles

Font-styes for quote on photo background:

Implementation

ACF Fields:

Background Content

Background Type (required)

...

Add the full width quote class to a paragraph if you want the styling of a large quote. <p class="full-width-quote"></p>

Resources

Full-width Block examples/test page - https://business.wisc.edu/sample-blocks/full-width-background/