Text on Media

Text on Media page element is a combination of a full-width image or video, a headline, and some text on a background that expands the full height of the image.

How to Create Text on Media

  1. Create a page or edit an existing one.
  2. Scroll to the bottom of the page and select Add Text on Media.
  3. Customize the appearance and text box color of the Text with Media page element.
    • Full Width: Makes the page element the width of the page if checked.
    • Content Style: Column Style (text box displays in the full length of the media), Box Style (text box displays in a box within the media), Bottom Style (text box displays hanging at the bottom of the media)
    • Content Background Color: Transparent, (Light) Translucent white, (Dark) Translucent black
    • Content Alignment: Content Left (text box is left aligned), Content Center (text box is located in the center of the media), Content Right (text box is right aligned), Full-width (text box is full content width over media)
    • Media Attachment: Scroll (scroll with page) or Fixed (page scrolls over image)
    • Space Around Content: Sets the padding above and below the text. Increasing the padding will allow more of the background media to show. Note: You can select the Media Aspect Ratio option to position the background media absolutely, independent of the text box (see tips below).
    • Title Heading Level: Sets the heading level of the title. Defaults to a Section Heading (H2), but can be changed to a different level heading depending on the content. Read more about the proper use of headings.
    • Title Alignment: Sets the justification of the title. Defaults to left justified text, but can be updated to center or right.
  4. Insert media by selecting the gray Add Media button. Media is necessary to create this element.
  5. The Title text area allows you to create a larger, bolded title. The Body text area allows you to add additional text to the media. Note: These are both optional to creating this element.
  6. 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.
  7. Save.

Tips:

  • Vimeo links are not supported as a background for Text on Media. Use Youtube instead.
  • If you select the Media Aspect Ratio for Space Around Content, you will need to test your page at different view sizes (e.g. mobile, tablet, desktop screen sizes) to make sure the text is not cut off. This option will position the background media based on the crops you set for each full-width breakpoint (extra small, small, medium, large). See cropping images.
  • 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.
  • If you plan to use Text on Media to add a full width image to your page with no text, select Bottom Style under the Content Style dropdown and select Transparent from the Content Background Color dropdown. This will embed the entire image on your page and show the full image on mobile as well.

Text on media image/video size recommendations

  • 1920px is the recommended width
  • Largest screens are scaled up/down to 1920px
  • Can upload larger images that will automatically get scaled down
old main

Sample Text on Media Page Element

This is using the Bottom Style option for Content Style.

Examples

Design Garden: Text on Media Text on Media Samples

Useful Links

Editor Toolbar Text with Background

Keywords

Background Wrapper, Full Width