The Hero Image panel is a versatile option for adding a visually striking banner to your event website. It features a static background image with text and optional interactive elements layered on top—perfect for showcasing show details, announcements, or calls to action.
Key Features
Six hero image styles available (view examples on the Composer 2 Showcase site)
Simple image background with overlaid content
Panels can be restricted to specific pages (ideal for testing or varied designs)
Customizable Content:
Header text
Body content
Optional widgets (e.g., buttons, countdown clocks)
Background image with alt text for accessibility
Background Customization Options:
Solid colours (from palette or custom)
Gradients (linear or custom via CSS)
Images
Repeatable patterns
Flexible Height Settings:
100% of screen height (viewport height)
Fixed pixel value
Design Control:
Full control over font sizes, styles, and positioning
Style-specific options (e.g., shapes like squares or triangles)
How to Set Up
Navigate to Back Office → Panels → Hero → Image.
Select the Image type and choose your preferred style number.
In the Content tab, add:
Header and body text
Widgets (optional)
Background image with alt text
In the Settings tab, customize:
Hero width and height
Background (colour, gradient, image, or pattern)
Element styles and positioning
Use the Fonts tab to adjust font styling and text alignment.
Once the desktop version is set:
Switch to mobile view
Upload a different image if preferred (e.g., portrait vs. landscape)
Settings mirror the desktop setup for design consistency
Click Save to apply changes.
The Hero Image panel is ideal for creating a polished, branded banner that draws attention while allowing flexible customization for both desktop and mobile views.
Watch the Video Demo:
Video Transcript:
One of the hero options in the Composer 2 platform is the Image style.
This is a simple image background with some wording over the top.
There are 6 styles available. All of these styles can be seen in the Composer 2 Showcase website.
As it is a panel, please open up the panel menu, followed by Hero and then Image.
Please take a note of the style number that you prefer.
This will be used to set it up in the back office.
To set this up, please go into your back office, go to the panel section and locate the hero that you would like to edit.
As you can see, I can set up many different hero styles, and restrict them to different pages just as you would any other panel.
Please ensure you have selected the item, Image, followed by the style version that you prefer.
The first thing you'll need to do is set up your content.
So here, I have my title, any body text, followed by any widgets that you prefer.
This could be a button, or a countdown clock, for example.
As this is an image, please locate the image that you require.
Don't forget to add some alternative text.
This is useful for screen readers.
Once you've set up the content for your desktop view, please move on to the settings.
This is where you control how your hero is going to look.
For example, you can change the width of the item or the height.
A value of 100 would represent 100% of the height of your screen, this is the vertical height.
If you wish, you can set a pixel-precise height.
If your style has a background, you can choose your background colour, or gradient or image or pattern here.
If you're choosing a colour, you have the options of your entire colour palette, or you can choose a custom item.
If you're choosing a gradient, you'll be able to choose between a linear or a custom style gradient.
For linear gradients, you have top to bottom or left to right.
The colours can come from your colour palette, or you can select a custom colour if required.
Moving on to the next tab, this controls the styles of the things that you have selected.
So for example, if I've chosen style 4, this is currently being displayed as a square.
I may choose to perhaps have a triangle.
Your next tab controls the sizes and colours and styles of your fonts.
You can set up the header here and the body in this section.
Don't forget to hit save.
Once you are happy with the way that your desktop view looks, you can then move on to your mobile view.
Some people may prefer to have a different style picture, or video, or slider in the mobile view.
This is useful if you have different style pictures so you may want to use a landscape version picture on your desktop, and maybe a square one or portrait one on your mobile version.
Again, don't forget to hit save.
Comments
0 comments
Please sign in to leave a comment.