Contact Us

Hero banners on a web page are an essential tool for interaction. The most common preference is to have an image banner grabbing the user’s attention.

With elements ranging from videos, and static images to moving carousels, hero banners have gone versatile over time.

By using customized content and different formats you can enhance the experience of your users by displaying them what they want to see.

Sitecore lets you deploy a custom hero banner carousel. If you are using Sitecore, and are unaware of the feature, then the below steps should make it effortless for you to implement it.

Step 1: Navigate to system -> Settings -> Feature.

Image 1

Step 2: Insert the carousel module under the feature, by choosing the module option.

Image 2

Step 3: Navigate to Layout -> Renderings -> Feature.

Image 3

Step 4: Create Carousel rendering under feature -> Carousel folder.

Image 4

Step 5: Navigate to Template -> Feature and create a carousel folder.

Image 5

Step 6: Create a template for the hero carousel and provide it with the desired fields.

Image 6

Step 7: Create a template for Hero carousel slides which we can have in Hero Carousel.

Image 7

Step 8: Under the Home node create a tenant, and under the tenant create the site.

Image 8

Step 9: Under the home create the Page for demonstrating the hero carousel.

Image 9

Step 10: Under the Page create the data source with the help of the hero carousel component. Click on assign to provide slides template and create slides afterward.

Image 10

Step 11: Provide the media in the media library for the carousel component.

Image 11

Step 12: Provide all the necessary data to the fields.

Image 12

Step 13: Navigate to the rendering variant in the presentation and provide a rendering variant for the carousel.

Image 13

Step 14: Add Scriban to the variant and write Scriban to map components.

Image 14

Step 15: Provide Rendering in the Presentation -> Details tab on our Page.

Image 15

Step 16: Provide data source and rendering variant.

Image 16

Image 17

The final output you get

Image 18

Image 19

Image 20

Conclusion

Having a meaningful user interface along with fitting content is paramount to grabbing user attention and providing an exceptional user experience. a carousel hero banner also helps in improving user engagement.

Sitecore allows you to have your custom hero carousel in a few steps guided in the article above. If you have more sitecore-related queries then our team is happy to assist. Contact us today.

Need Help?