How do I update the hero panel for mobile and tablet devices?

You may want to customise how your site appears on mobile and tablet devices, as layouts and media that work well on desktop don’t always translate effectively to smaller screens. Within Composer 2, you can control how certain panels, such as the Hero panel, display across different devices.

Updating the hero panel for mobile

Composer 2 allows you to configure the Hero panel independently for mobile, giving you more flexibility over performance and design.

To update the mobile hero:

1. Navigate to Panels

2. Select Hero

3. Go to the Mobile tab

4. Open Content

5. Update the Image field

This allows you to upload a mobile-specific image that will only display on smaller devices.

Why use a different mobile image?

Using a dedicated mobile image ensures:

• Faster page load times

• Better image scaling on smaller screens

• Improved user experience

Mobile users are often on slower connections, so optimising media is important for both performance and engagement.

Image vs video on mobile

• Images are recommended for mobile hero panels, as they load quickly and are more reliable across devices.

• If you choose to use video, it’s best to keep files under 10MB to avoid slow loading times and potential performance issues.

Best practice tips

• Use a simpler, cropped version of your desktop hero for mobile

• Avoid heavy media that may impact performance

• Ensure text within images is readable on smaller screens

• Test across multiple devices to confirm layout and speed

Customising your Hero panel for mobile ensures your site remains fast, clear, and visually effective across all devices.