This guide explains how to use a Header Slideshow to make a powerful visual impact on your website's landing pages. You’ll learn how to manage dynamic banners that engage visitors immediately upon arrival, using the modular tools provided by the uSkinned Site Builder. In Umbraco 17+, these visual elements are managed through a refined, modern backoffice architecture built on .NET 10 LTS for maximum stability and performance.
The Slideshow as a Component
In uSkinned for Umbraco 17+, a slideshow is a modular "component" rather than a fixed part of the page template. This means you can add, remove, or reorder slides using the Visual Editor, which provides a real-time preview of your changes across different screen sizes while you work in the backoffice. Each slide typically consists of a background image or video, heading text, and a call-to-action button to guide users to specific sections of your site
When to Use a Header Slideshow
You should consider adding a slideshow whenever you have multiple key messages that deserve "above the fold" attention:
- Promotional Campaigns: Highlight seasonal sales, limited-time offers, or new product launches.
- Portfolio Showcases: Cycle through high-quality images of your best projects or case studies.
- Brand Storytelling: Use a sequence of slides to introduce your organization's mission and team.
- Service Overviews: Briefly present different service categories with direct links to deeper content
Watch: Building Visual Headers in Umbraco 17+
This video demonstrates how to access the Visual Editor, add a slideshow component, and customize individual slides to create a professional, responsive look for any device.
Other Related Tutorials
- [Tutorial] How to add or edit a component to a page
- [Tutorial] How to create content with the Visual Editor
- [Tutorial] How to edit your Theme Design using the Visual Designer
- [Tutorial] How to edit the Layout of your Theme Design
Action Steps to Create a Header Slideshow
- Navigate to the Page: In the Umbraco content tree, right-click the page where you want the slideshow to appear.
- Open the Visual Editor: Launch the Visual Editor to see a live, interactive preview of your page.
- Add the Slideshow Component: Click to add a new component and select the "Slideshow" or "Hero" option from your library.
- Configure Your Slides: Upload high-resolution images, set your focus points for better cropping, and add your headline text for each slide.
- Save and Publish: Once satisfied with the real-time preview, save and publish the page to make the slideshow live.
Pro-Tip: Use the Visual Designer to fine-tune the global appearance of your slideshow, such as adjusting the font styles, button colors, and spacing to ensure the header perfectly matches your brand identity.
Where Next?
Now that your header is grabbing attention, why not enhance the rest of your page? Your next step is to explore "Social Media Buttons".