Views:

Adding a Hero Slider to a Page

Hero sliders are a great way to add visual interest to your Storbie pages and make them more engaging for your visitors. Here's how to add one:

Step 1: Go to the edit view

From the options available, navigate to the edit view for the page you want to add the hero image to.

Step 2: Select the page

Choose the specific page where you want to place the hero image.

Step 3: Add a content item

Hover over the plus icon, usually located near the top of the page, to add a new content item.

Step 4: Choose the hero Slider content item

From the list of available content items, select "Hero Slider."

Step 5: Upload your images

A prompt will appear, allowing you to upload your desired image. This prompt also contains several important fields to configure your hero image:

  • Image: Upload your main hero image. You can also optionally upload a secondary image optimized for mobile devices.

  • Title: Add a title for your hero image. This may or may not be visible depending on your settings.

  • Description: Add a description for your hero image. This may or may not be visible depending on your settings.

  • Button Text: If you want a button on your hero image, enter the text you want it to display.

  • Navigate Link URL: Enter the web address the button should link to. Use a full URL (e.g., https://www.example.com) for external links or a relative URL (e.g., /my-page) for links within your Storbie site.

  • Same Window/New Window: Choose whether the link should open in the same window or a new window.

  • Discernible Link Text: (This may be related to accessibility and how screen readers interpret the link.) Enter text that clearly describes the destination of the link.

  • Overlay Background: Choose the background style for any overlay text. Options include transparent themes (grey, white, or themed), solid themes, or fully transparent.

  • Text Colour: Select the appropriate text color (light or dark) to ensure good contrast and readability against the chosen background.
     

Step 6: Configure the slider display settings

Configure the display settings for your hero slider. This includes the transition speed, height and position of the slider.

Step 7: Finish and publish

Click "Finish" to save your changes. Then, publish the page to make the hero slider live on your website.