How to Configure Media Types?
Questions:
- How do I add a video?
- Can I use 3D models?
- How do I embed an iframe in my layout?
- Where do I add alt text for screen readers?
- How do I add a image?
Description:
This guide explains how to populate your banner components with rich media to engage your visitors. Each slide can feature a unique media format tailored to your specific campaign or product.
We'll show you, step by step, how to:
-
Style Images: Apply filters and overlays to standard graphics.
-
Control Videos: Set playback behaviors for self-hosted footage.
-
Adjust 3D Assets: Enable rotation and fine-tune lighting for interactive models.
-
Embed Iframes: Paste and validate custom HTML snippets.
Solution:
-
Choose Your Media Type - Select the appropriate format for your slide using the icons at the top of the media settings panel. The system supports standard images, videos, 3D models, and custom HTML iframes.
-
Add and Style Images
Open the media library to upload or select your graphic. Apply stylistic touches like brightness adjustments, sepia tones, grayscale filters, or gradient overlays to fit your branding.
-
Configure Video Settings
Upload a self-hosted video file and adjust the focal point using the provided alignment grid. Use the toggles to activate autoplay, hide player controls, loop the footage, or mute the audio. You can also assign a fallback video poster image.
-
Adjust 3D Model Parameters
Upload your 3D asset and turn on auto-rotation or Augmented Reality (AR) capabilities. Drag the sliders to set the precise shadow intensity, shadow softness, and overall exposure. Ensure you assign a 3D poster image to display before the model fully renders.
-
Embed External Iframes
Click the code icon to access the iframe input field. Paste your HTML snippet into the text box, making sure the iframe is fully defined for your default language to pass the system validation.
-
Define Alternative Text - Navigate to the bottom of the media settings panel for any selected format and enter a clear description in the Alternative Text field. This supports screen readers and leverages the multi-language translation capabilities.
Tips and Tricks:
Pro-Tips:
-
Always use a video or 3D poster image to ensure your slide looks polished while heavier files load in the background.
-
Test your media on different device views using the responsive icons to guarantee your focal points remain visible on mobile screens.
Warnings:
-
Be careful not to leave the iframe HTML field blank for your default language, as this will trigger a validation error.
-
Mute your videos if you plan to activate autoplay, as sudden background audio can create a negative experience for site visitors.