Hero Section
Creates a prominent introductory section with one or more configurable hero cards.
Best used for
- Top-of-page introductions
- Landing page headlines
- Important offers or announcements
- Rotating homepage hero messages
Key features
- Build one hero card or a rotating set of hero cards.
- Configure title, subtitle, CTA, foreground image, and background per card.
- Use image, video, gradient, or animated backgrounds.
- Control card transitions, timing, and pause-on-hover behavior.
- Tune hero height separately for desktop, tablet, and mobile.
Available settings
| Setting | What it does | Options / notes |
|---|---|---|
| Hero cards | Adds, duplicates, deletes, reorders, and selects individual hero cards. | |
| Card transition | Controls how multiple hero cards rotate. Available transition types include Fade, Slide, and None, with interval and pause-on-hover controls. | Available transition types include Fade, Slide, and None, with interval and pause-on-hover controls. |
| Title | Shows, hides, edits, and aligns the title for the selected card. | |
| Subtitle | Shows, hides, edits, and aligns the supporting text for the selected card. | |
| CTA button | Shows, hides, edits, links, and aligns the button for the selected card. | |
| Foreground image | Shows or hides an image beside the text for the selected card. The image can be placed on the left or right. | The image can be placed on the left or right. |
| Background type | Chooses the selected card background. Available choices include Image, Video, Gradient, and Animation. | Available choices include Image, Video, Gradient, and Animation. |
| Background image | Chooses the image used behind the selected card content. | |
| Background video | Adds a Pexels or external video background for the selected card. | |
| Gradient | Controls the gradient colors and angle for the selected card. | |
| Animation | Chooses an animated background preset for the selected card. | |
| Overlay | Sets overlay color and opacity for image, video, and animated backgrounds. | |
| Height mode | Controls whether the hero fits content, fills the screen, or uses a manual height. | |
| Device heights | Sets desktop, tablet, and mobile hero height behavior independently. | |
| Reveal next section | Lets full-screen heroes reveal part of the following section. | |
| Custom CSS | Adds advanced custom styling when available for the account. |
Tips
- Keep each hero card focused on one message and one main action.
- Use transitions sparingly so the first card still works if a visitor never waits for the next card.
- Check desktop, tablet, and mobile height settings after changing foreground images or full-screen behavior.
- If using a background image, video, or animation, use overlay controls to keep text readable.
Notes
This block does not appear to have additional user-facing notes.