The Hero Slider is a dynamic hero layout option in Composer 2, ideal for showcasing multiple images or videos with messaging. This panel provides an engaging first impression for your event website and allows for rich, interactive content.
Key Features
Slider Styles (6 options):
Full screen
Framed
Overlay
Image right
Vertical split screen
Horizontal split screen
Slide Options:
Supports up to five individual slides
Each slide can include:
Header text
Body content
Image or video
Optional widget
Toggle slides on/off individually
Background & Design Options:
Solid colours, gradients (linear/custom), images, or repeatable patterns
Custom height: 100% of screen height or fixed pixel value
Slider Behavior & Pagination:
Autoplay with adjustable transition speed
Transition type: fade or slide
Pagination options:
Pagers (multiple styles)
Arrows (fully customizable)
How to Set Up
Navigate to Back Office → Panels → Hero → Slider.
Choose your slider type and style.
Populate your content via the Content tab:
Add images/videos with alt text
Enter headline, body copy, and optional widgets
Use the Settings tab to adjust design and functionality:
Slider height
Background styles
Transitions and autoplay
Pagination options
Configure a mobile version:
Optionally replace the slider with a static image
Mobile settings mirror the desktop setup for consistency
Save your changes and preview the slider on both desktop and mobile
The Hero Slider provides a visually engaging, interactive hero section, perfect for highlighting multiple messages, promotions, or media elements while maintaining full control over design and behavior.
Watch the Video Demo:
Video Transcript:
One of the hero options you have in the Composer 2 template is the slider option.
This is very useful if you have multiple images that you want to tray.
Each slide has its own image and wording.
There are 6 styles available in the platform.
Full screen, framed overlay image to the right, vertical split screen and horizontal split screen.
All of these styles can be seen in the Composer 2 Showcase website.
As this is a panel, please open the panel section, followed by Hero and then the slider option.
To set this up, please go back to your back office, go to the panel section and then locate the hero that you wish to edit.
As you can see here, we can set up multiple Hero panels.
These can all be restricted to certain pages and can be used for testing purposes.
To edit the panel, please click on the name.
Please ensure that the type chosen is slider followed by whichever style slider you prefer.
When you Scroll down, you will see the first tab.
This is for your content.
You can set up to five different slides.
Each slide has a toggle on off.
Please add the content needed.
You can add a header, body and a widget.
You can also add an image or video that appears in the slider.
Please browse to your image video in the following box.
Don't forget to add some alternative text for your images.
Once you have set this up for each slide, you can then move on to your settings.
This is where you can customise the look and feel of your slider.
For example, you can change the height of the slider that appears.
The value of 100 would represent 100% the height of your screen, so this is vertical height here.
Or you can change this to a fixed pixel height.
If you have a background on your slider.
This can be chosen on the following tab.
You can have colours, gradients, images or patterns.
If you choose colour this will present you the colour palette or you can add a custom colour.
If you choose gradient you will have the options of linear which is a straight line or a custom one.
If you do choose custom you will need to add some CSS to this.
If you choose linear, you'll have the options of top to bottom or left to right.
The colours you can choose can either come from your palette or can be custom colours.
You can also choose an image or a pattern.
An image will fill the full screen of your slider, whereas the pattern will repeat.
You can also set up some options for your slider such as making it autoplay and adjusting the speed at which it transitions.
You can also choose between fade and slide.
We have two types of pagination available.
One is your pager and the second is arrows.
The pager will appear at the bottom of your screen and you can choose different styles.
The arrows appear at the sides of the slider and once again you can customise this.
To customise each one, simply open the accordion and choose the items you wish.
Once you are happy with the way that your desktop view looks, don't forget to set up a version for mobile.
You may decide that you don't want to have a slider on your mobile and you'd prefer to have an image instead.
This is completely up to you, of course.
The settings here are the same as they are on the default version.
Comments
0 comments
Please sign in to leave a comment.