About this block
A full-width hero with a photo behind a gradient tint in your theme's accent colour. Your company name, a large headline, a subtitle, and two buttons sit centered on top. On tablets and desktops the photo stays fixed while the page scrolls over it, for a simple parallax effect.
When to use it
- As the first section of a product or brand homepage with strong photography.
- For a store, studio, or event where the image does most of the selling.
- On a campaign landing page that needs one clear headline and action.
What's inside
- A full-bleed section at least 28rem tall, 36rem from tablet width, with a cover photo.
- A top-to-bottom gradient overlay in your accent colour, so text stays readable on any photo.
- Your company name as an uppercase eyebrow, filled in from site settings.
- An h1 headline that grows in three steps from phone to desktop, plus a subtitle.
- A primary button with an arrow and an outline button. They stack full-width on phones and sit side by side from tablet width.
How to customize it
- Swap the photo in the section's background settings. Pick one with a calm area in the middle for the text.
- Change the overlay colours if your photo needs more or less tint behind the text.
- Set your company name in site settings so the eyebrow shows it.
- Point both buttons at your own pages, and keep the labels short and specific, like "Shop headphones".
Questions
- Does the parallax effect work on phones?
- The fixed background starts at tablet width. On phones the photo scrolls normally, which avoids the jumpy or zoomed look many mobile browsers give fixed backgrounds.
- Does this include a navigation bar?
- No. It's the hero section only. Place it directly under your site header.
- What image size should I use?
- Use a wide landscape photo, about 2400px across, so it stays sharp on large screens. Keep the subject away from the center if you want the text to sit on a quieter area.