26 ways to arrange 4 things
A hero section is usually the same four things. Headline, subtext, image, button. What makes one site inspiring and another forgettable is how you arrange those four things. This page is a collection of 26 hero layouts worth stealing, with a video breaking down how to recreate every single one.
You’ll find all 26 layouts below, and for my Figma fans, here is a free wireframe file you can play with. No email required; just click that link to access it.
Layout one is the half page
The image on one side, text and button on the other. Image is set to fill, not fit, and the page section has the fill screen option toggled off so the image can reach the edges of the section.
Layout two is a classic
The image on one side, text and button on the other. Image is inside a shape, and the page section has medium padding with the content vertically aligned in the center so it’s even on the top and bottom.
Layout three is about space
The image on one side, text and button on the other. Small adjustments like a large gap above the text make this layout unique.
Layout four is when we start to separate text.
The image on one side, text and button on the other. We’ve added space between the headline and the other content to make it more unique. Use two text blocks for this one.
Layout five is where we break the midline.
The image on one side, text and button on the other. We’ve got a headline that spans full width, while the image, button, and supporting text are no longer half screen size.
Layout six is all about focal points
With an image as the background, arrange the supporting text and call to action button in a unique way that is still legible. Consider using the page section background overlay options.
In layout seven we introduce shapes
Shape blocks can help us add color and depth to our main four elements. I like pushing them to a section edge to help keep this look seamless on all screen sizes. Make sure your button is a top layer!
Layout eight is
all about layering
Layering text over images can be tricky. Utilize the overlay feature for image blocks to create enough contrast so your text is still legible.
Layout nine makes the image the main focus & breaks the midline
Both the title and image cross the midline in this layout. Use the curved corner features in Squarespace to achieve this tab shape. Set your image block to fill, and the fill screen option for the page section is turned off so it can reach the top of the page.
For layout ten we’re rearranging the common order of things.
This section is similar to the classic layout two, but we moved the button above the supporting text. Make sure your headline is powerful enough for this layout!
Things are getting interesting here in layout eleven
For this layout, we’re using filters to make the image unique in each of the three instances. All four elements are separated to reach the corners of the page section.
Layout twelve introduces a new text format
simple scrolling subtext
〰️
simple scrolling subtext 〰️
Layout thirteen is a take on the bento hero trend.
Each element of the hero section is contained within it’s own shape. Combine the headline and subheading text so you can use the background color option for the text block. Make sure your button is now set to fill instead of fit. Consider altering the grid gap for your page section.
For layout fourteen we’re relying on focal points to make the image look cooler.
This layout has three image blocks, each with a unique focal point that creates an interesting look without needing additional content.
For layout fifteen, we’re relying on extra space to make it interesting.
Vertical alignment and a smaller paragraph text give this layout a unique look. You can experiment with breaking the midline with your title. Pay close attention to your text block vertical alignment here, especially on mobile.
Layout sixteen can feature multiple images or filters like this example.
This layout has four image blocks, each with a unique focal point that creates an interesting look without needing additional content.