More Examples
This page demonstrates what the full-width sections on the documentation page look like on pages with no sidebars. This technique is often used on home pages.
Background Color Examples:
Full Width Section with Background Color
This is the default Background Color option with a light gray background of #f5f5f5.
Full Width Section with Background Color
This is the Background Color option with navy (#13294B) set as the background color. The overlaid text has been centered and colored white.
Full-Width Section with Background Color
This is the Background Color option with a light blue (#edf3f7) set as the background color. The columns shortcode was nested inside the full-width shortcode to obtain the 2-column layout for the overlaid content.
Parallax Background Image Examples:
In the example below, I used a larger version of the image shown to the right. Notice how the background image is cropped and how it changes as you scroll up and down the page (this is the parallax affect) as well as resize the browser window. Due to this cropping effect, we do not recommend using images with people. This background image was muted down and darkened in Photoshop to ensure the overlaid text was legible.
Leading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Teaching
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Caring
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The example below uses a subtle, abstract background image.
Leading, Teaching, Caring
This is a full-width section with background image. The columns shortcode was nested inside the full-width shortcode to obtain the 2-column layout for the overlaid content.
DON’T DO THIS. The example below demonstrates what you don’t want to do. The overlaid text is simply too hard to read.
Can You Read This Header?
This is an example of what you don’t want to do.
Background Video Section:
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%.
Oliver Smithies, the School of Medicine’s Weatherspoon Eminent Distinguished Professor of Pathology and Laboratory Medicine, received the Nobel Prize in physiology or medicine in 2007.