The Marquee Widget enables you to create a dynamic carousel with customizable slides, featuring single images, videos, or multiple rotating slides. It's a popular choice for enhancing the top section of homepages.
Check out our guide "Adding Widgets to Your Page" to learn how to add this widget to any row, panel or section on your website.
What's New
We’ve added some exciting new features to enhance the Marquee Widget:
- Background Videos:
- You can now use Vimeo or YouTube videos as background elements for your slides, creating a more dynamic and engaging experience.
- Advanced Branding & Styling Options:
-
- Styling your slides is now easier than ever. University Brand compliant fonts and colors are now built into the widget, allowing you to stay on brand and meet accessibility standards.
- The Marquee Widget now supports the ability to add your department logo to any slide.
- Customize your marquee further by adjusting the sizing, autoplay timing, and navigation elements to meet your needs.
-
These updates give you greater creative flexibility, control, and compliance. Please feel free to reach out to us if you have any issues using the latest version.
Default Marquee
Video Background
Hero with Image Background
Mixed Backgrounds
Accessibility
Enhanced User Experience for Improved Accessibility and Customization
- User-Controlled Pausing:
- To enhance user interaction and ensure that individuals have ample time to engage with carousel content, a prominent "Pause" button has been incorporated. This button allows users to halt the automatic rotation of slides, providing them with greater control over their browsing experience. The button has been designed with a large size, clear visibility, and appropriate contrast to ensure ease of use for all users.
- Focus and Progress Indicators:
- Clear and readily visible focus indicators have been integrated to assist keyboard users in identifying the carousel as an interactive element. These indicators provide essential visual cues, informing users of their current position within the carousel and facilitating seamless navigation.
- Enhanced Slide Styling Options:
- Font Colors: A selection of brand-compliant font colors has been provided to optimize readability against various background images, ensuring clear and accessible content presentation.
- Color Overlay Opacity: A setting has been added to allow for adjustments to image transparency. This feature enables content creators to fine-tune the visual presentation of slides, particularly in cases where image brightness may impact readability.
- Navigation Type: Users can now choose between arrows, dots, or lines to navigate through the carousel slides, enabling a more tailored experience.
Settings
| Name | Type | Description |
|---|---|---|
| Slide Background | Multiple | Upload or add a background image from your media library or use a video background by entering a Vimeo or YouTube URL. |
| Logo Image | Multiple | Upload a logo image and adjust its width using a slider. |
| Hero Image | Multiple | Upload an image of a person to breakout of the slide and adjust its width using a slider. |
| Slide Content | Multiple | Add a Title, Description and Button to your slide using text fields and a destination url. |
| Mobile Customizations | Multiple | Add a separate background image and hide or show content for mobile visitors. |
| Slide Styling | Multiple | Align the background image and customize fonts and colors. |
| Global Slider Settings | Multiple | Control the size, slide autoplay timing, behavior, and navigation of your marquee carousel. |