Full-Width Sections let you place content over customizable background colors, images, or videos. They span either the full width of the browser window or the main content area, depending on page structure. These sections require knowledge of HTML, CSS, and digital accessibility best practices.

For an easier alternative, use Notification Boxes, which provide a similar look without requiring coding knowledge.

Understanding Full-Width Sections

• On pages without sidebars (such as homepages), full-width sections span the entire width of the browser window.
• On pages with sidebars (such as internal pages with navigation), full-width sections span only the main content area.
• This documentation page contains left-hand navigation (a sidebar), so the examples below demonstrate full-width sections in this type of layout.
• View the alternative example page that demonstrates what full-width sections look like on pages without sidebars.

How to Add Full-Width Sections

1. Place your cursor where you want the full width section to start.
2. Click on the Shortcodes button in the editor then Full Width Sections.
3. Choose from the three available options:
   • Background Color
   • Parallax Background Image
   • Background Video Section

Background Color

The Background Color option generates a full-width section with a colored background.

[heels_full_width color="#f5f5f5" class=""]Content[/heels_full_width]

Add Your Content

Simply replace the “Content” place-holder text in the above code with your own content. Whatever content you add (text, images, links, headers, etc.), will display inside the color box.

Customize the Background Color

To customize the color of the full-width section, simply change the hexadecimal color code that says color=”#f5f5f5″. The #f5f5f5 is the hexadecimal color for the default light gray. Simply replace it with the color of your choice. View our Color and Contrast page for hex codes for School of Medicine brand colors.

Important: for legibility purposes, you must ensure there is enough contrast between the background color and any overlaying text or content. The default text color is dark gray (#2E2E2E). If this color does not have a minimum contrast ratio of 4.5:1 to the background color, then either the text or background color need to be modified until it does. Refer to the Color and Contrast documentation for guidelines.

If you have trouble implementing a Full-Width section, reach out to the Web Team for assistance or use a Notification Box. The Notification Boxes don’t have these issues because they are pre-styled.

Light Gray Background (Default)

SOM Dark Blue Background with Centered White Text

Parallax Background Image

The Parallax Background Image creates a scrolling effect where the background image moves at a different speed than the content as you scroll up and down the page. The background image will get cropped both horizontally and vertically.  The vertical display will change as you scrolls up/down the page. The horizontal display will vary based on browser width. Look at the examples below and scroll up/down the page as well as resize the width of your browser window to see these effects in action.

The initial shortcode will look like this:

[heels_full_parallax color="#f5f5f5" class="" background="your image url"]Content[/heels_full_parallax]

Define the Background Image

1. Upload the image to the site’s Media folder.
2. Copy the image URL from the Media Attachment Details.
   1. In the Media library, click on the image to bring up the Attachment Details panel.
   2. Find the Copy Link field and copy the url. This is the image url which you will paste into the shortcode in the next step.
3. Go back to the web page, event, post, etc. where you are adding the full-width parallax image. In the shortcode, look for background=”your image url”. Replace your image url with the url you copied in step 2 above. Don’t delete the quotes, just replace the content within the quotes.

Image Recommendations

• Try to choose a wide, landscape image (at least 2,000px wide).
• Simple abstract images tend to work best.
• Avoid images with faces or important details, as cropping will occur.
• You may wish to use Photoshop or some other graphics program to lighten or darken the image.

Add Your Content

Replace the “Content” place-holder text with your own content. Any elements you add—such as text, images, links, or headers—will be displayed over the background image. To ensure readability, all content must meet color contrast guidelines. If the background image is busy or makes the text difficult to read, consider nesting a Notification Box inside the Full-Width Section and placing the content within it. This will help the content stand out from the background image.

Customize the Background Color

Defining a background color is still important, as it will be displayed if the background image fails to load.

• If your background image is light, choose a light background color.
• If your background image is dark, use a dark background color.

To maintain readability, ensure sufficient color contrast between the background and overlaying content. If needed, adjust either the background color or text color to meet accessibility guidelines.

For details on how to modify the background color, refer to the Customize the Background Color section above.

Examples

The example below uses a subtle, abstract background image.

Background Video Section

The Background Video Section displays a full-width video background behind overlaid content.

The initial shortcode will look like this:

[heels_full_video poster="your image placeholder url" mp4="your mp4 url" class="" height="520px" align="center" bottom="0%"]Content[/heels_full_video]

Define the Background Video

The video has to be uploaded to your sites Media folder (Max file size: 64MB). It cannot reside on YouTube or another video hosting service.

In the shortcode where it says mp4=”your mp4 url”, replace your mp4 url with the url of the video. Don’t delete the quotes, just replace the url within the quotes.

Define the Poster Image

The poster image is a background image that will display in the event the video doesn’t load.

In the shortcode where it says poster=”your image placeholder url”, replace your image placeholder url with the url of the image. Don’t delete the quotes, just replace the url within the quotes.

Add Your Content

Replace the Content place-holder text with your own content. Whatever content you add (text, images, links, headers, etc.), will display on top of the background video. If the content is hard to read, you may wish to place it in a notification box. This will help the content stand out from the background video.

Custom Video Settings

• Height (height=”520px”) – Adjusts the section height.
• Alignment (align=”center”) – Aligns overlaid text (left, center, or right).
• Bottom Padding (bottom=”40%”) – Pushes the overlaying content up from the bottom edge of the video.

Example

In the example below, the overlaid text was placed inside a notification box to ensure it was legible. The height setting for this video was changed to 550px and the bottom setting changed to 0%.