Marquees and Full Width Media Rows

header-image.png

Example of a header image
Default marquee

 

Marquees and Full Width Media Rows are used to display a large image or video often accompanied by a headline, body copy and a button link. Both options allow for full width display. These are also sometimes called header images, but they can be displayed anywhere on a page. Headline, body copy and a link are optional and not required

Both elements are most commonly used as the main starting point on the front page, but with some creativity and good images they can be mixed together with the rest of your content to tell stories. 

Jump to:

Examples

Click an image below to enlarge it and open the image gallery.

How to use the marquee

  1. Click the Add Marquee button in a new or existing flexible page.
  2. If you want to display a headline on your marquee, enter it in the Title field.
  3. Click Browse and upload a new image to use or click Library to select an image that's already been uploaded. You can also add an image from the web if you have its URL.
  4. Follow the prompts to upload/add the image. Be sure to specific Alt text!
    • Crop the full-width large and full-width extra small images. Just click them to open the crop screen.
    • Best practices for display on multiple devices: crop the large image landscape, and crop the extra small image portrait or square.
  5. If you want to display text on your marquee, enter it in the Body field. You may style the body copy just as you would in any other text field. You can also add links, buttons if desired (also see next step).
  6. To add a pre-designed link to your marquee, enter the link text in the Title field under Read More. Then enter the URL for the link.
    • A recent update made this link visible. If you now see a URL in the body field and wish to change the text, please add text in the Title field under Read More.
  7. To use the default styled marquee, save the page and do not make any further changes. Otherwise, go to the next step.
  8. Display Settings
    • Background attachment: Choose from Scroll (moves with the page) or Fixed (stays in place as the page scrolls up and down).
    • Background size: Choose from Scale to 100% width (full width) or Scale to cover viewport (full height).
    • Text box background color: Choose from Transparent (no overlay), Translucent white (Light), Translucent sky, Translucent blue, or Translucent black (Dark).
  9. Additional options
    • View mode: Choose from Default (default marquee style), Full-width background (content aligned left)Full-width background (content aligned center), and Full-width background (content aligned right)
    • Bottom spacing: These settings control the bottom margin on your marquee. If you want no margin (you want it to sit right on top of the next item on the page), select Zero. Otherwise, choose from the available margins displayed in the dropdown.

Marquee editor screenshot

How to use the full width media row

  1. Click the Add Full width media row button in a new or existing flexible page.
  2. If you want to display a headline on your full width media row, enter it in the Title field.
  3. Click Browse and upload a new image to use or click Library to select an image that's already been uploaded. You can also add an image from the web if you have its URL.
  4. Follow the prompts to upload/add the image. Be sure to specific Alt text!
    • Crop the full-width large and full-width extra small images. Just click them to open the crop screen.
    • Best practices for display on multiple devices: crop the large image landscape, and crop the extra small image portrait or square.
  5. If you want to display text on your full width media row, enter it in the Body field. You may style the body copy just as you would in any other text field. You can also add links, buttons if desired (also see next step).
  6. To add a pre-designed button link to your full width media row, enter the link text in the Title field under Read More. Then enter the URL for the button link.
  7. To use the default styled full width media row, save the page and do not make any further changes. Otherwise, go to the next step.
  8. Display Settings
    • Background attachment: Choose from Scroll (moves with the page) or Fixed (stays in place as the page scrolls up and down).
    • Background size: Choose from Scale to 100% width (full width) or Scale to cover viewport (full height).
    • Text box background color: Choose from Transparent (no overlay), (Light) Translucent white  or (Dark) Translucent black.
  9. Additional options
    • View mode: Choose from Default (essentially default is the same as centered content), Full-width background (content aligned left)Full-width background (content aligned center), and Full-width background (content aligned right)
    • Bottom spacing: These settings control the bottom margin on your full width media row. If you want no margin (you want it to sit right on top of the next item on the page), select Zero. Otherwise, choose from the available margins displayed in the dropdown.

Full width media row editor screenshot