Overview
Spotlights are photo slideshows that contain images overlaid with optional titles and descriptions. You can link them to pages on your site, or to external webpages.
Spotlight images are fully-responsive; the spotlight will rescale itself to fit the space available to it depending on your page layout and the viewer's device size. For best results, you may want to crop and resize your images to one of the available layout styles/ratios (see below) before you upload them.
When you choose one of the available spotlight options (see below) and drag them into different available regions (see Use and Change Layouts), the aspect ratios will remain the same.
Spotlight Best Practices
- Use spotlights sparingly. Rotating images can distract visitors from other important content on your pages. Clickthrough rates on spotlights, especially on images other than the first, are low.
- Do not use more than one spotlight on a page.
- Large (high resolution) images may cause performance issues and could possibly cause other site errors. Try to only upload photos that have a file size of 1MB or smaller when using this widget.
- Do not use smaller images in a spotlight - they will be upsized if used in a larger region, which will cause reduced image quality.
- Keep Spotlight titles succinct. If the titles are too long, they might get cut off at smaller mobile resolutions (see Advanced Site Maintenance for how test how your site looks on mobile/tablet devices).
- Make sure to add alt text to your spotlight images for accessibility.
Available Spotlight Styles
Full Height (1140x560): This style will fill the width of standard "Header" and "Content" regions (1140px wide), and will have a height of 560px.
Half Height (1140x280): This style will fill the width of standard "Header" and "Content" regions (1140px wide), and will have a height of 280px.
Quarter Height (1140x140): This style will fill the width of standard "Header" and "Content" regions (1140px wide), and will have a height of 140px.
Legacy Default (960x560): This is the original Spotlight style, where the maximum width is 960px. It will not fit the entire width of any widget that is wider than 960px. This means that unlike the above styles (Full Height, Half Height, Quarter Height), the Legacy Default will NOT fit the width of standard "Header" and "Content" regions (which are 1140px, wider than 960px), and will be better suited for any region besides "Header" and "Content" (such as "Slider").
How to Configure Spotlights
When adding a new Spotlight, the title of the widget is optional. Using the "Browse" option, either choose an existing photo from your library (such as a Stock Photo), or upload a new photo. Be sure to add alt text for accessibility (see Add Images from the Editors Guide). To link the image to either an internal or external link, use the "Find Link" option.
You can set the "Slide Duration," and select a "Pager Style". The "Slide Duration" should always be 5 seconds or more. Shorter durations create accessibility barriers, and can be distracting overall for visitors to your site.
We recommend the "Full pager" style. For best usability and accessibility, do not use the "Hidden" pager style. Choose one of the available spotlight styles (see above). Choose "Add another item" to add more spotlight items, then click "Save" when you're finished.