Text with Background

Text with Background page elements contain content that can either span the entire width of the page, or up to the size of content within the page. You can customize the background color as well as select from a handful of selected patterns, if desired.


How to Create Text with Background 

The text with background page element has two display options: full-width and content-width.

  1. Create a page or edit an existing one.
  2. Scroll to the bottom of the page and select Add Text with Background. This will create a strip of a solid color that extends across your page.
  3. Check the box labeled Full Width for a Text with Background that extends to the length of the page.
  4. The Background Color drop down menu allows you to customize the color of the Text with Background page element. Sample colors are shown in the samples below.
    • Note: When customizing the Background Color of the page element, ensure that the text has suitable contrast with the background color to ensure clarity and accessibility to all visitors. 
  5. 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.
  6. Select the amount of padding you want above and below the text using the Space Around Content dropdown.
  7. Add text in the Text Area.
    • 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 Editor Toolbar above
  8. Select Additional Options for any further customization.
    • Bottom Spacing: Select the desired amount of space at the bottom of the Text on Media page element before the next element displays
  9. Save.

  1. Create a page or edit an existing one.
  2. Scroll to the bottom of the page and select Text with Background. This will create a strip of a solid color that extends to the length of the menu panel. 
  3. Leave the box labeled Full Width unchecked for a Text with Background that extends to the length of the menu panel.
  4. The Background Color drop down menu allows you to customize the color of the Text with Background page element. Sample colors are shown in the samples below.
    • Note: When customizing the Background Color of the page element, ensure that the text has suitable contrast with the Background Color to ensure clarity and accessibility to all visitors. 
  5. 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.
  6. Select the amount of padding you want above and below the text using the Space Around Content dropdown.
  7. Add text in the Text Area.
    • 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 Editor Toolbar above.
  8. Select Additional Options for any further customization.
    • Bottom Spacing: Select the desired amount of space at the bottom of the Text on Media page element before the next element displays
  9. Save.

Additional Tip: Text with Background page elements used in succession can be useful for creating content that appears layered, and can be more visually appealing than text areas. 

Keywords

 Background Wrapper, Full Width

Possible Color and Pattern Combinations

Background Color: Arizona Red

Background Color: None

Background Color: Arizona Blue

Background Color: Sky

Background Color: Oasis

Background Color: Azurite

Background Color: Midnight

Background Color: Bloom

Background Color: Chili

Background Color: Cool Gray

Background Color: Warm Gray

Background Color: Gray 100

Background Color: Gray 200

Background Color: Gray 300

Background Color: Leaf

Background Color: River

Background Color: Silver

Background Color: Ash

Background Color: Mesa

Background Color: None

Background Pattern: Triangles Left

Background Color: Arizona Red

Background Pattern: Triangles Left

Background Color: Arizona Blue

Background Pattern: Triangles Left

Background Color: Sky

Background Pattern: Triangles Left

Background Color: Oasis

Background Pattern: Triangles Left

Background Color: Azurite

Background Pattern: Triangles Left

Background Color: Midnight

Background Pattern: Triangles Left

Background Color: Bloom

Background Pattern: Triangles Left

Background Color: Chili

Background Pattern: Triangles Left

Background Color: Cool Gray

Background Pattern: Triangles Left

Background Color: Warm Gray

Background Pattern: Triangles Left

Background Color: Leaf

Background Pattern: Triangles Left

Background Color: River

Background Pattern: Triangles Left

Background Color: Silver

Background Pattern: Triangles Left

Background Color: Ash

Background Pattern: Triangles Left

Background Color: None

Background Pattern: Triangles Centered

Background Color: Arizona Red

Background Pattern: Triangles Centered

Background Color: Arizona Blue

Background Pattern: Triangles Centered

Background Color: Sky

Background Pattern: Triangles Centered

Background Color: Oasis

Background Pattern: Triangles Centered

Background Color: Azurite

Background Pattern: Triangles Centered

Background Color: Midnight

Background Pattern: Triangles Centered

Background Color: Bloom

Background Pattern: Triangles Centered

Background Color: Chili

Background Pattern: Triangles Centered

Background Color: Cool Gray

Background Pattern: Triangles Centered

Background Color: Warm Gray

Background Pattern: Triangles Centered

Background Color: Leaf

Background Pattern: Triangles Centered

Background Color: River

Background Pattern: Triangles Centered

Background Color: Silver

Background Pattern: Triangles Centered

Background Color: Ash

Background Pattern: Triangles Centered

Background Color: None

Background Pattern: Triangles Right

Background Color: Arizona Red

Background Pattern: Triangles Right

Background Color: Arizona Blue

Background Pattern: Triangles Right

Background Color: Sky

Background Pattern: Triangles Right

Background Color: Oasis

Background Pattern: Triangles Right

Background Color: Azurite

Background Pattern: Triangles Right

Background Color: Midnight

Background Pattern: Triangles Right

Background Color: Bloom

Background Pattern: Triangles Right

Background Color: Chili

Background Pattern: Triangles Right

Background Color: Cool Gray

Background Pattern: Triangles Right

Background Color: Warm Gray

Background Pattern: Triangles Right

Background Color: Leaf

Background Pattern: Triangles Right

Background Color: River

Background Pattern: Triangles Right

Background Color: Silver

Background Pattern: Triangles Right

Background Color: Ash

Background Pattern: Triangles Right

Background Color: None

Background Pattern: Trilines

Background Color: Arizona Red

Background Pattern: Trilines

Background Color: Arizona Blue

Background Pattern: Trilines

Background Color: Sky

Background Pattern: Trilines

Background Color: Oasis

Background Pattern: Trilines

Background Color: Azurite

Background Pattern: Trilines

Background Color: Midnight

Background Pattern: Trilines

Background Color: Bloom

Background Pattern: Trilines

Background Color: Chili

Background Pattern: Trilines

Background Color: Cool Gray

Background Pattern: Trilines

Background Color: Warm Gray

Background Pattern: Trilines

Background Color: Leaf

Background Pattern: Trilines

Background Color: River

Background Pattern: Trilines

Background Color: Silver

Background Pattern: Trilines

Background Color: Ash

Background Pattern: Trilines

Tips:

  • Text with Background page elements used in succession can be useful for creating content that appears layered, and can be more visually appealing than text areas. 
  • Any full width element will push down sidebar menus to below the content. If you would like to use the full width option on a page that uses sidebar menus or blocks, it is best to use this on the top of the page.