Creating and Customizing Hero Sections in Composer 2

The hero section is the prominent area at the top of your website’s homepage, typically featuring a bold message, visual element, and call-to-action (CTA). Composer 2 allows full customization with a variety of flexible panel options to make your hero sections visually striking and highly functional.

Key Features

Multiple Hero Panel Types:

• Image: Static visual with text overlay

• Slider: Multi-image/message carousel

• Video: Full-screen or framed background video

• Text Only: Simple headline and body copy

Additional Capabilities:

• Six pre-designed style variations per type

• Separate desktop and mobile views

• Use different hero types for different devices

• Maintain full control over design and layout

Flexible Content Setup:

• Add headline, body text, images/videos, and widgets

• Include alt text for accessibility

• Restrict panels to specific pages or landing sections

• Create multiple hero versions for A/B testing or campaigns

How to Set It Up

1. Go to Back Office → Panels → Hero.

2. Select or create the Hero panel you want to edit.

3. Choose your Hero type (Image, Slider, Video, or Text Only).

4. Select your preferred style number (e.g., Image Style 4).

5. Input your content:

   • Headline, body, media files, and widgets (e.g., buttons or countdowns)

6. Adjust design settings:

   • Panel height and width

   • Background: solid colour, gradient, image, or pattern

   • Font styles, colours, and positioning

7. Configure mobile version:

   • Choose a different layout or media if desired (e.g., Image instead of Slider)

8. Save your changes

This setup enables a flexible, visually compelling hero section that can be tailored for each device and campaign, enhancing both user engagement and conversion opportunities.

Watch the Video Demo:

Video Transcript:

This video will give you an overview of the hero section of your website.

The hero section is normally the large part at the top of the screen when you first land on the homepage.

It usually comprises a message, call to action, and some kind of visual.

In our platform, you can set up different types of hero.

You can have a simple static image, a video, a slider capable of having multiple images and messages, or some simple text.

All of these different styles can be seen on our Composer 2 showcase.

As this is a panel, you'll have to go to the panel option, then Hero, followed by the style you wish to see.

For example, if it is Image, open up the Image tab and you can view all six different styles.

To set up your hero, please go to the back office.

Once again, this is a panel, so please go to the panel section followed by the hero you would like to edit.

As you can see, you can set up multiple different hero styles.

This is a normal panel and you can restrict this to different pages.

This is very helpful for testing purposes, or by creating a new landing page for a certain section of your website.

To edit the panel, click into the name.

From here you'll be able to choose the type of panel you need.

As mentioned, the options are Image, Slider, Text Only, and Video.

You'll then be able to choose the style required.

We give two different versions of heroes for desktops and laptops.

This is the default view.

You can also set up a different version for your mobile.

So for example, you may want to put a slider on the desktop version of your hero, and perhaps an image on the mobile view.

The same settings are available in both options.