Using the Hero Panel Video in Composer 2

The Hero Panel Video is a dynamic content option in Composer 2 that allows you to display high-impact, immersive visuals using a video background within your hero section. This is ideal for eye-catching homepage banners, landing pages, and other prominent sections that require rich media and messaging.

Key Features

Layout Styles (6 options):

• Full Screen

• Framed

• Overlay (with adjustable opacity)

• Video on the side

• Split Screen (Vertical)

• Split Screen (Horizontal)

Flexible Content Options:

• Add header and body text

• Include widgets (e.g., countdowns, buttons)

• Upload and embed your own video

Video Display Customization:

• Set height and width (percentage of viewport or fixed pixels)

• Add overlays with adjustable colour and opacity

Design & Styling Tools:

• Backgrounds: solid colour, gradient, or pattern

• Customize gradient direction (top-bottom or left-right)

• Use colours from your palette or define custom ones

• Control font styling: typeface, size, colour, boldness, and case

Responsive Design Controls:

• Set different versions for desktop and mobile

• Optionally replace video with a static image on mobile

How to Set Up

1. Navigate to Back Office → Panels → Hero → Video.

2. Choose your layout style (review examples on the Composer 2 Showcase site).

3. Add content via the Content tab:

   • Enter header and body text

   • Upload your video file

   • Add any widgets to display

4. Customize appearance via the Settings tab:

   • Adjust height using VH (viewport height) or fixed pixels

   • Configure background: solid, gradient, or pattern

   • If using an overlay, set opacity and colour

   • Style fonts for header and body separately

5. Set up a mobile version:

   • Optionally hide the video and use a static image

   • Ensure all styling settings are consistent across views

6. Save your changes and preview the result on desktop and mobile.

The Hero Panel Video creates a visually striking, interactive experience that enhances user engagement and highlights key messaging at the top of your site.

Watch the Video Demo:

Video Transcript:

One of the hero options available is the video.

There are 6 different styles of videos you can add to your hero: full screen, framed, opacity over the top, video on the side, split screen vertical, or split screen horizontal.

All of these can be seen on the Composer 2 Showcase website.

As it is the panel, please open up the panel section, followed by Hero and then Video.

To set this up, please go to the back office, go to the panel section and then locate your hero.

As you can see, you can set up multiple different hero styles. This is useful if you would like to test things.

Please ensure you have set the type to Video and then choose the style you require.

In the first tab, you can set the content that appears on your hero. This includes the header, the body, including any widgets you'd like to include here, and the video itself.

Please browse to your video as normal.

Once you've set up your content, if you want, you can customise the way it looks.

Go to the Settings tab and in the General tab you'll be able to set the height and the width of the video. The 100 here represents the height of the video. This would be 100% the height of your screen. The vertical height is VH.

If you want, you can set a precise pixel height. Please note if you do this it will not be responsive.

If your video style has a background option, you can set this here. You can choose between a colour, a gradient or a pattern.

If you choose colour, you'll have the colours available in your colour palette, or you can choose a custom colour.

If you choose gradient, you'll be able to select a linear or a custom style. Whether it appears top to bottom or left to right, the colours will come from your colour palette and once again, you can also set your own custom colours.

Moving onwards to the actual content itself, you can add an overlay to your video and you can adjust the opacity and the colour here.

For the wording, you can control the alignment and the colour of your wording.

Further down, you can control the header and the body fonts independently. Here you can set the font family, the size, boldness, uppercase or colour. Same on the body.

Once you are happy with the way that your desktop view looks, please don't forget to set up the mobile version.

For example, you may wish not to show a video on a mobile. You may want to change this to an image instead.

The settings here will be very similar to the ones that you've just set up.