EspañolHero section generator (top of the page)
Write the promise, the short explanation and the button. Choose the layout and colors; the preview shows the result on desktop.
How to useYour site's first screen, ready
Available in: 
Hero section generator (top of the page): what it is for
The hero section is the site's first screen, where people decide in seconds whether to keep going. It needs a clear promise, a short explanation and one main action.
The generator builds the hero with a background image and an adjustable dark overlay so the text stays readable, or with text and image side by side, a fluid-size title, and primary and secondary buttons. The image goes in as an img with fetchpriority=high and no lazy loading, because it's usually the largest element on the first screen (LCP).
How to use
- Write the title, subtitle and buttons.
- Choose the image, layout and colors.
- Copy the code and paste it at the top of the page.
When to use it
- Local business home page.
- Campaign landing page.
- Launch page.
Frequently asked questions
What goes in the hero?
The result the customer wants, in one sentence (the title), how you deliver it (the subtitle) and a single main action, like "Get a quote". A discreet second button is optional. Everything should fit on the first screen, without scrolling.
How does the image not slow down the site?
The hero image is usually the largest element on the first screen, which Google measures as LCP. The code uses an img tag (not background-image), with fetchpriority=high and no loading=lazy, so the browser downloads it first. Use the image in WebP and at the right size.
What about text on top of the photo?
The dark overlay on top of the image ensures contrast for white text on any photo. Adjust the opacity until the text is easy to read; 45% to 60% is usually enough.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.