Full-Width Media Component

The Full-Width Media Component lets you create bold, edge-to-edge visual sections using images or videos. It's ideal for introducing a page, showcasing photography, highlighting products, or creating immersive moments that capture attention.

With support for images, video, customizable heights, and optional parallax effects, it's one of the most impactful components in MyStyleGuide.io.

Common Uses

The Full-Width Media Component works well for:

• Hero banners
• Brand photography
• Product showcases
• Lifestyle imagery
• Video backgrounds
• Section dividers
• Campaign announcements

Use it whenever you want visuals to become the focal point of a page.

Media Type

Choose whether the component displays an image or a video.

Images

Images are ideal for static photography, illustrations, and branded graphics.

You can:

• Select an uploaded image
• Enable parallax scrolling
• Customize the section height
• Apply an optional background color

Videos

Videos add motion and energy to your brand guide.

You can:

• Select an uploaded video
• Enable autoplay
• Loop playback
• Mute audio
• Customize the section height

Autoplaying videos are typically muted to ensure compatibility across modern web browsers.

Layout Options

Adjust how the section appears on the page.

Height

Specify the height using any valid CSS unit.

Common examples include:

• 60vh for a large banner
• 100vh for a full-screen experience
• 500px for a fixed-height section

Choosing the right height helps establish the visual emphasis of your content.

Background Color

Apply an optional background color behind the media.

This is useful for:

• Matching your brand palette
• Providing contrast
• Creating a fallback color behind transparent assets

Parallax

When using an image, you can enable a subtle parallax scrolling effect.

Parallax creates the illusion of depth by allowing the background image to move more slowly than the page content during scrolling.

Theme Integration

Color selections work seamlessly with your brand theme.

You can:

• Choose from predefined theme colors
• Enter a custom HEX value
• Leave the field empty to inherit your default styling

This keeps every media section visually consistent with the rest of your guide.

Saving Your Changes

Click Save Component to apply your updates.

Your changes are reflected in the live preview, allowing you to review the finished section before returning to the Page Editor.

Tips

• Use high-quality, optimized images for the best visual results.
• Keep videos short and optimized for fast loading.
• Reserve full-width sections for important content to maximize their impact.
• Choose section heights that complement the surrounding page content rather than overwhelming it.

Summary

The Full-Width Media Component helps you create immersive visual experiences throughout your brand guide.

Whether you're showcasing photography, introducing a new section, or adding motion through video, it provides a flexible, visually engaging way to present your brand while maintaining consistency with your overall theme.