Hero - Background Video

A hero with a video for a background and full width content options for text, image, form, and popup video.

Note: The section this module is added to should have its Content Alignment set to Full width.


View a live demo of this module.

Content

  • Include eyebrow, heading, sub-heading, text, and/or buttons
  • Include an image, form, or popup video
  • Add video URL to use for background

Styles

  • Set Dark Mode
  • Change max width of content
  • Change background overlay color and opacity
  • Change module padding
  • Change text alignment
  • Change styling of lists
    • Change space between list items
    • Change bullet type
    • Change bullet color (not applicable to image bullets)
    • Enclose bullet (if using icon or image can enclose it in a colored box)
  • Have media overlap the section below this module
  • Add load in animation to the media (fade in, up, right, down, or left)
  • Form styling:
    • Set Dark Mode
    • Change heading alignment
    • Box in the form (edit background, border, box-shadow, and padding)
    • Change labels position (left, top, inset)
    • Change button position (left, center, right, full width, single field) and color
  • Video styling:
    • Change color of play button
    • Change color and opacity of image overlay

hero-background-video