The Hero element builds the big, attention-grabbing band at the top of a page: a background, a headline, a short description and up to two buttons.
Hero is currently in Beta
It's fully working and safe to use. The badge simply means it's newer than our other elements and we're still gathering feedback on it.
Hero or Banner/Slider?
Both create a banner across the top of a page, and both are still available. Hero is the newer option and does more:
- Layout presets to start from, instead of a blank slate
- Buttons on every slide, which Banner/Slider has none of
- Ten background types, including video and animated backgrounds
- 'Fill screen' height that measures your header and fills exactly one screenful
- Separate text sizes for tablet and mobile, so headlines never look cramped
Use Hero for new page banners. Existing Banner/Slider elements keep working exactly as they are, and nothing is changed or moved.
Adding a Hero
- 1In the editor, open Add Elements and choose Hero from the Basic group.
- 2A window titled Choose a hero layout opens automatically. Pick a starting layout (see the presets below).
- 3Your Hero lands on the page already filled in with example wording and a photo, so replace those with your own.
| Preset | What you get |
|---|---|
| Centered classic | Text centred on the background. The safe, classic choice. |
| Centered, dual CTA | The same, with two buttons side by side. |
| Left-aligned, lower | Text anchored to the bottom-left. Editorial, magazine feel. |
| Split 50/50 | Image on one half, text on the other. |
| Boxed card | Text sits inside a translucent card over the photo. Great for busy images. |
| Animated background | Centred text over a moving, generated background. |
You can change preset later from the Layout tab using Browse preset layouts. Limecube will ask you to confirm first, because switching resets alignment, width and padding; your words, images and background are kept.
Writing your content
Open the Content tab:
- Title and Heading level: use H1 for your main page banner
- Show eyebrow line: a small line above the title, like LICENSED · INSURED · 24/7
- Description: a sentence or two
- Buttons: up to two. For each, set the Button text, choose whether it goes to a Site page or an External URL, and pick the Primary or Secondary style. With two buttons you can also set Button arrangement and the Gap between buttons.
Choosing a background
The Background tab offers ten types.
The straightforward ones
- Image: one photo. The only type that supports the parallax effect.
- Solid colour: one flat colour.
- Gradient: a blend between two colours, with eight directions to choose from.
- Video: a YouTube or Vimeo link, playing muted on a loop behind your text.
The slideshow ones (each slide gets its own words and buttons)
- Slider: a classic slideshow, up to 8 slides, with Fade, Slide, Zoom or Crossfade transitions.
- Wave motion: photos gently rippling and moving all the time, up to 6 slides.
- Scale hover: your slide titles listed over a photo; hovering one reveals its image.
- Diagonal gallery: four photos arranged on a tilted grid, with your title across the middle.
- Image transitions: up to 6 photos cycling with effects like a circular wipe or cross zoom, under one shared headline.
The generated one
- Animated: a moving, generated background with no photo needed. Thirteen styles including Soft aurora, Aurora, Beams, Plasma, Galaxy, Hyperspeed and Iridescence. Set the Mood to Calm, Balanced or Energetic, and use Advanced if you want to fine-tune colours and speed.
Every type except Gradient also offers an Overlay: a tint over the background so your text stays readable. Set its colour and Opacity (40% by default).
Working with slides
When you choose one of the slideshow backgrounds, the Content tab swaps its single Title and Description for a Slides list. Each slide gets its own image, subtitle, title, description and buttons.
- Add with the + Add slide button at the bottom
- Reorder by dragging a slide's handle
- Remove with the bin icon; you'll always keep at least one slide
Switch back to a single-image background and your original title and description return.
Layout, size and position
On the Layout tab:
- Content alignment: a three by three grid; click where your text should sit
- Content width: how wide the text block is, with an optional different width on mobile
- Height: choose
- Auto: only as tall as the content
- Fill screen: exactly one screenful, allowing for your header and any notification bar
- Custom: your own heights for desktop and mobile
- Inner padding: breathing room inside the band (automatically reduced on phones)
- Border radius: round the corners, all together or individually
Styling text and buttons
The Style tab gives your Title, Description and Eyebrow their own Weight, Size, Line height, Letter spacing, Text case and Colour.
Each also has a Tablet scale and Mobile scale: a multiplier that shrinks the text on smaller screens. At the defaults, a 64px title displays around 51px on a tablet and 35px on a phone. Increase them if your headline feels too small; decrease them if it's crowding the screen.
Primary button style and Secondary button style are two looks you can apply to either button, each with its own Shape, Fill, Size and four colours.
Effects
The Effects tab has two options:
- Entrance animation: Fade in, Fade up, Fade down, Slide in left or Slide in right, with adjustable Duration and Delay. Plays once as the Hero scrolls into view.
- Parallax scroll: the background drifts slightly slower than the page for a sense of depth. Available on Image backgrounds only.
Tips
- Keep it to one Hero per page, at the top. A second Hero further down should use H2 as its heading level so your page structure stays correct for search engines.
- Use at most one moving background per page. Video and the animated or slideshow backgrounds are the heaviest things on a page, so several together will slow it down, especially on phones.
- Background videos are always silent. Browsers block sound until a visitor interacts with the page, so never rely on audio.
- Set a Fallback colour for animated backgrounds. Visitors on older devices, or anyone who's turned on reduced motion, see that colour instead. The default is dark navy, which looks wrong behind dark text.
- Parallax is switched off on phones and for visitors who've asked for reduced motion, so don't depend on it for the mobile look.
- Scale hover needs a mouse. Phone and tablet visitors can't hover, so they'll only ever see the first slide. Don't put essential information behind it.
- Images are always cropped from the centre, so keep faces and key detail near the middle.
- Alt text is available on the single Image background. Slideshow images don't have alt text, so keep meaning in your titles and descriptions.
Was this helpful?
Last updated:
Related Articles
Banners and Sliders
Create eye-catching hero banners and image sliders with parallax effects, call-to-action buttons, and responsive sizing.
7 min read
Spotlight
Turn a grid of photos into an interactive showcase: click a tile to expand it full-screen with the full story. Ideal for team profiles, case studies and portfolios.
6 min read
Buttons
Add call-to-action buttons to your pages with custom sizes, links, hover animations, and Google Analytics event tracking.
4 min read
Still need help?
Submit a Support Ticket