Full Width Background Wrapper

Give your page visual interest and break up page content with a full width background wrapper. Full Width Background Wrappers are also useful for separating content.

Samples

Note: These samples are not shown in full width as they naturally are. Full width background wrappers are best used on pages without side navigation or side blocks.

Background color: Arizona blue

Background pattern: None

Background color: Arizona red

Background pattern: Triangles top left

Background color: Cool gray

Background pattern: Triangles top right

Background color: Chili

Background pattern: Triangles centered

Background color: None

Background pattern: Trilines

How to Create a Full Width Background Wrapper:

  1. Create a Flexible Page
  2. Select the "Edit" tab on the blue menu bar under the Title.
  3. Scroll to the bottom of the page and select “Full Width Background Wrapper.” This will create a strip of a solid color that extends across your page. 
  4. Add text in the "Wrapper Text" Area.
  5. The "Background Color" drop down menu in the "Display Settings" section allows you to customize the color of the Full Width Background Wrapper. Sample colors are Shown on the Samples Above.
    • Note: When customizing the Background Color of the Wrapper, ensure that the text has suitable contrast with the Background Color to ensure clarity and accessibility to all visitors. 
    • To change the color of the text:
      1.  Highlight the text you would like to change in the "Wrapper Text" Area.
      2. On the WYSIWYG toolbar click on the drop down menu "Styles."   
      3. Scroll down through the drop down menu until the gray "Inline Styles" break, below there are different font color selections you can use to contrast the Background Color.
    • Tip: White text will appear as white and does not contrast in your "Wrapper Text" Area. It can be useful to edit your text using the "Source" element shown on the WYSIWYG toolbar above.
  6. Background Patterns are useful to add aesthetics to your site. They can be customized through the "Background Pattern" drop down menu. Ensure that the Background Pattern you select does not interfere with the color and clarity of the text on your Wrapper. Examples of accessibility patterns are shown here.
    • Tip: Background Patterns are useful for adding aesthetics and University of Arizona branding to your site.
  7. Save

Additional Tip: Full Width Background Wrappers used in succession can be useful for creating content that appears layered, and can be more visually appealing than text areas. Here is one example of this feature.

Fields

  1. Wrapper Text: Text displayed in the full width background wrapper
  2. Background Color: Color behind the pattern
  3. Background Pattern: Pattern behind the text