A Slider hero teaser enables you to display your news stories one at a time, with options to set it to slide automatically or allow users to navigate manually and view different topics. Users can pause an autoplay slider to stay on a specific slide and use arrows and slide controls to move between slides. Once all slides have been shown, the slider restarts from the first slide.

A hero teaser can be added to a homepage or the mobile app Dashboard. You need the "Manage hero teasers" permission to create and manage hero teasers.

Enabling moderator mode doesn't override the slider targeting. When you activate moderator mode, you'll still only see the sliders assigned to you.

1. Set up a slider hero teaser

1. Select Manage hero teaser from your user profile drop-down.
2. Select Create new hero teaser > Slider.

2. Configure a slide

When designing a slider hero teaser, each slide needs to be set up individually. Creating a new hero teaser begins with a single slide, which is labeled as Slide 1 by default. 

You also have the option to hide slides from a hero teaser. Hidden slides will not be visible to any users in the hero teaser.

Audience

Optionally, your slide can be targeted to specific user groups. Only users in those selected groups will see the slide in the hero teaser. By default, it is visible to Everyone.

1. Select Customize in the audience section.
2. Select the user groups for which you want to slide to be shown in the hero teaser.
3. Choose Select to save your choices.

Once a slide is targeted, you can see the user groups it reaches in the Audience section and in the Slides selector on the left. This helps you keep track of which slides are visible to which users.

We suggest keeping it to no more than 5 slides per user group to ensure each slide receives optimal visibility.

Image

Upload the image shown on the slide in PNG or JPG format.

1. In the Image column, upload one image for the Desktop view (3:1 ratio) and another for the Mobile view (4:3 ratio). 
   • Suggested dimensions include: 1920x640px and 2400x800px for the 3:1 ratio, and 1024x768px and 1200x900px for the 4:3 ratio.
2. Enter descriptive text in the Alt text field (Optional). Screen readers can read the alt text, making the image's content accessible to people with visual or cognitive impairments.

Once you start adding images to your slider, a preview will appear at the top. You can switch the preview to view it on both Desktop and Mobile. The slide controls on a slider are in the primary color of your platform theme.

Content

Optionally, you can specify text to appear over the hero teaser image. The text will align according to your selected Content alignment.

1. Input a title in the Heading field to provide the main information on your slider. The field supports inserting line breaks.
2. Input a secondary title in the Subheading field to accompany your heading. This text will be displayed below the heading in a smaller font size. The field supports inserting line breaks.
3. Check Show background gradient if you want a gradient to appear over the image. If your slider image is light, you might want to add a darker shadow to ensure the text is visible. The gradient will align according to your selected Content alignment.
4. Configure the appearance of the text by setting the Gradient color and the Text color (e.g., #FFFFFF). The text color is also used for the slider navigation buttons.

Button

Optionally, you can add a call-to-action on the hero teaser image. The button will align according to your selected Content alignment and will be positioned below your text. The button always includes the icon.

1. Enter the button text in the Button text field. Common CTAs include "Learn more", "Show more," "Join now," and similar phrases.
2. In the Link field, add the destination URL to which the user will be directed when clicking the button.
3. Check the box to Open in a new browser tab if you want the link to open in a new window.
4. Define the button's appearance by setting its Background color and Text color.

3. Add and configure more slides

There is no limit to the number of slides you can have in a slider.

1. To add more slides in the Slides section, select + Add or duplicate an existing slide.
2. Configure the new slide as described above.

You can sort your slides after creation by dragging and dropping them in the list. Additionally, slides can be deleted or hidden.

4. Finalize and save the hero teaser

1. In the General Settings section, give your hero teaser a title. This helps you identify it when adding it to a homepage.
2. Choose the Content Alignment for the text on all your slides: Left, Center, or Right.
3. Choose the slide-change effect from the Transition drop-down: Fade or None. By default, Fade is selected.
4. Enter a Duration per slide in seconds that specifies how long each slide should be displayed before moving on to the next. By default, 5 seconds is set.
5. Check the Enable Autoplay box to advance slides automatically. If this is not selected, users will need to manually choose to move to the next slide.
6. When you've finished adding and configuring your slides. select Save changes at the top right to create your hero teaser.

Your hero teaser is created and can now be added to a homepage or the mobile app Dashboard. Learn more in Adding a hero teaser to a homepage and Hero teaser on mobile.