The term hero is pretty broad, but for something with full-width image and text/buttons overlaying on top you can always use
flexbox. It’s fairly straightforward, flexible (no pun intended), and can easily allow for absolute centering.
The basic process for creating this would be something like the following:
- Create your parent container (the div/section that will contain your background, text, and button elements), give it some dimensions, change it to
display: flex and give it a background color or image.
- Add a div element (that will contain the content you want overlaid within your hero) and drag in any desired heading, text, or button elements.
- Finally to get everything centered within the section, on your parent container element, change both the align and justify settings to ‘center’.
I ran through a quick example using the steps above along with some explanation in the video below:
In addition to building one yourself, Webflow also introduced a number of pre-built Layouts to help speed up the process—one of which is a hero overlay that should give you something similar that is not only responsive, but accessible.
If you have any questions feel free to reach out