Creating an hero? (beginner)

hey reader,

So after watching alot of youtube and weblow university i got confused on the hero part.

i cant get my head around on how to create an header iv seen alot of different ways people make them but cant seem me make mine work. is there a ‘‘best’’ way or atleast a good way to make an header… maybe a youtube video? or a guide?

(sorry for the noob question, im just really confused)

Kind regards,

Hello :slight_smile:

Could you share a reference or a link showcasing what you’re looking to achieve? There are so many videos available online. I feel it would be best to share things that would relate back to what you’re looking to do.

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:

  1. 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.
  2. 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.
  3. 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 :v:

@mikeyevin Thank you so much for the explanation it cleared up so much! u saved my day for sure! thnx again!

@Nicole_Klaver thank you for the reply but Mikeyevin answered all my questions

1 Like