Hero Block (Lofty AOS)

Introduction

The Hero Block is the large, full-width banner section typically placed at the top of a page. It combines a background image or video with a headline and subheading to make a strong first impression. Most website templates include a Hero Block on the Home page by default.

Adding the Hero Block

1. Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
2. Select the page you want to edit from the Pages panel.
3. Click Blocks in the left navigation.
4. Find the Hero block type and choose your preferred style.
5. Drag the block to the top of the page canvas.

Configuring the Hero Block

Double-click the block or click the Edit icon to open the settings panel.

Background - Background Type — Choose between Image, Video, Color, or Slideshow (multiple images). - Desktop Image / Mobile Image — Upload separate images optimized for desktop and mobile views. - Video — Upload or link a background video. Maximum file size: 50 MB.

Block Size - Desktop Size Type — Aspect ratio, full screen, or exact height. - Mobile Size Type — Same controls for mobile view.

Content - Heading — The main title displayed on the hero. - Subheading — Supporting text beneath the heading. - Button — Optional CTA button with link and label.

Opacity Layer - Add a semi-transparent overlay on the background to improve text readability.

After configuring, click Publish in the top-right corner to go live.

Tips

• Use a mobile-specific image. Hero images often crop differently on mobile. Upload a separate image sized for mobile (portrait orientation) to ensure it looks great on phones.
• Keep headings short. Hero text is read in seconds — use 5–10 words for the heading and no more than a short sentence for the subheading.
• Add an opacity layer over busy images. If your background photo has a lot of detail, the opacity overlay makes your headline easier to read.
• Video backgrounds add impact — but test load time. Video heroes are visually striking but can slow page load. Test on a mobile connection before publishing.

Troubleshooting

The background image looks cropped on mobile. Upload a dedicated mobile image in the Background settings — a portrait-oriented version of your image works best for smaller screens.

Text is hard to read against the background. Enable the Opacity Layer in the block settings to add a darkening overlay that improves contrast.

The video background isn't playing. Check that the file is under 50 MB and in a supported format. Also confirm that autoplay is enabled in the block settings.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.