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
    • Current Position: Position Left (text box is left indented), Position Center (text box is located in the center of the media), Position Right (text box is right indented), None (text box is fixed 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.
  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:

  • 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.

Sample Text on Media Page Element

Keywords

Background Wrapper, Full Width