Hero Sections
Eye-catching landing page hero sections with calls to action.
5 templates available
Give the first screen one clear purpose
A hero should explain what the website offers and why the visitor should continue. Replace a vague slogan with a specific description, use one main action, and put supporting information in a short paragraph rather than several competing badges.
Check the section with your real heading length and image. A composition that fits a desktop may need a different crop on a phone. Decorative backgrounds should never make the text hard to read, and important content should remain available when an image fails to load.
Preview a design at desktop, tablet, and phone widths on its detail page. You can download the HTML and CSS or customize it in the code editor. Review the code reuse terms before publishing external assets.