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, 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.
WALK THRU VIDEO COMING SOON
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 supporting 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 create a triptych.
This layout has three image blocks, each with a unique focal point that creates an triptych 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 layer that creates an interesting look without needing additional content.
Layout seventeen is similar to the last one but has more of a focus on the text.
I try to avoid relying on centered text for most layouts, but this one is definitely an exception.
Layout eighteen uses the text block background feature to create interesting shapes.
This text block has a background color that is the same as the section background, so layering it on an image can make a unique negative space effect.
Layout nineteen brings a unique perspective.
This background is the same image with a zoom out parallax effect and overlay creating a soft and textured canvas for our content. Heading crosses the midline, secondary text aligned right and a bit longer than usual.
layout twenty
*
layout twenty *
This layout uses the scrolling block to create a powerful headline and is only recommended for shorter text. The image, description text and call to action follow and remain centered.
Layout twenty-one maintains a 1/3 ratio with the image centered.
Layout twenty-one maintains a 1/3 ratio for three even columns of content.
This layout supports a significantly longer supportive text statement.
Changing this text to a larger body text or adding extra line spacing helps this layout work well and look less sparse.
Layout twenty-two is ideal for large horizontal images.
The subheading of supportive text placed here is usually used to describe the image or add a hint of personality & context.
Layout twenty-three is about perspective.
This layout mimics the classic layout one, but features a hero banner background image that has been zoomed out using the built in parallax effect. The image overlay softens the background and the main image block supports the visual focus.
Layout twenty-four is focused on image first, supporting content second.
The emphasis here is on a longer and stronger headline. That headline crosses the midline and is the most important piece of this layout. Also note the larger call to action button balancing supporting text
Layout twenty-five is focused on the call to action.
The subheading of supportive text placed here is minimal & concise.
Layout twenty-six is a twist on a classic.
I avoid centering text in my designs but sometimes you just need the added emphasis! This layout has text grouped together and centered above an image. The overlay is the same as the background color to create a transparency effect. The shape border is an optional element that brings focus to the call to action.