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.
- Create a page or edit an existing one.
- 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.
- Check the box labeled Full Width for a Text with Background that extends to the length of the page.
- 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.
- 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.
- Select the amount of padding you want above and below the text using the Space Around Content dropdown.
- 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
- 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
- Save.
- Create a page or edit an existing one.
- 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.
- Leave the box labeled Full Width unchecked for a Text with Background that extends to the length of the menu panel.
- 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.
- 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.
- Select the amount of padding you want above and below the text using the Space Around Content dropdown.
- 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.
- 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
- 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.
Useful Links
Keywords
Background Wrapper, Full Width
Possible Color and Pattern Combinations
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.