The “Text Panel Over Video Background” component allows you to integrate engaging visual content with informative text. This component features a video playing in the background with a customizable text panel overlay. Authors can adjust various settings, such as changing the height of the component, altering the panel background color, and moving the panel’s location to best fit their design needs.
This is a Pre Heading
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
Content Options
This is a Pre Heading
This component has a pre heading
This component has some text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Nam at lectus urna duis. Ut sem viverra aliquet eget sit amet tellus cras adipiscing. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit.
This component has a CTA
Layout and Styling Options
Section Size Options
Section Size
Extra Small
Section Size
Small
Section Size
Default
Section Size
Large
Section Size
Extra Large
Section Size
Remove Padding
Background Color
Background Color
White
Background Color
Muted
Background Color
Primary
Background Color
Primary Light
Background Color
Secondary
Background Color
Secondary Light
Background Color
Tertiary
Panel Alignment
Panel Alignment
Left
Panel Alignment
Center
Panel Alignment
Right
Margin bottom
Margin bottom
None
Margin bottom
X-Small
Margin bottom
Small
Margin bottom
Medium
Margin bottom
Large
Margin bottom
X-Large
the end
Margin top
Margin top
None
Margin top
X-Small
Margin top
Small
Margin top
Medium
Margin top
Large
Margin top
X-Large
the end
Usage
Do
- Ensure the video background complements the text content to avoid visual distraction.
- Select a panel background color that contrasts well with the video for easy readability.
- Adjust the height of the component to fit well within the page layout without overwhelming other content.
- Position the text panel strategically to avoid covering important parts of the video.
- Use concise and impactful text to maximize engagement and clarity.
- Test the component on different devices to ensure it looks good on all screen sizes.
- Keep the text panel size proportional to the video background for a balanced appearance.
- Choose high-quality videos that load quickly to enhance user experience.
- Use the component to highlight key information or calls to action effectively.
Don't
- Avoid using overly busy or distracting videos that can make the text hard to read.
- Refrain from placing the text panel in a location that obstructs crucial visual elements of the video.
- Do not use text colors that blend into the video, making the text difficult to see.
- Avoid filling the text panel with too much content; keep it concise to maintain reader interest.
- Don’t use low-resolution videos as they can appear pixelated and unprofessional.
- Avoid setting the component height too tall, which can disrupt the overall page flow.
- Do not rely solely on the video background to convey important information; ensure the text is clear and informative.
- Refrain from using videos with rapid scene changes that may cause viewer distraction or discomfort.
Accessibility
- Ensure sufficient color contrast between the text panel and video background to make text readable for users with visual impairments.
- Avoid using flashing or fast-moving videos that could trigger seizures in users with photosensitive epilepsy.