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.

A woman with long blonde hair and colorful tattoos on her arms stands in a modern living room with a blue and white abstract patterned wall, green velvet sofa, and decorative items on wooden shelves behind her.

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.

call to action button
A woman with blonde hair and tattoos on her arms standing in a modern room with a blue patterned wall, green velvet sofa, and wooden shelving in the background.

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.

call to action button
A woman with blond hair and tattoos on her arms, wearing a gray t-shirt, standing in a living room with a blue marbled wall, green velvet sofa, and wooden shelves with books and decor.

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.

call to action button

Layout four is when we start to separate text.

A woman with blonde hair and tattoos on her arms standing in a modern living room with blue abstract wall art, green velvet sofa, and wooden shelves with decorative objects.
A woman with blonde hair and tattoos on her arms standing in a modern living room with blue abstract wall art, green velvet sofa, and wooden shelves with decorative objects.

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.

call to action button

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.

call to action button
A young woman with tattoos on her arms, with blonde wavy hair, standing in a modern living room with a blue and white abstract wall, green velvet sofa, wood and glass coffee table, potted plants, and decorative shelves.

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.

call to action button

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!

A woman with tattoos on her arms standing in a modern living room with a blue and white abstract patterned wall, green velvet sofa, and wooden shelving in the background.
call to action button
A woman with long blonde hair, tattoos on her arms, standing in a modern living room with a blue patterned wall, green velvet couch, and decorative shelves in the background.

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.

call to action button
A woman with long blonde hair and tattoos on her arms standing in a modern room with a blue abstract mural on the wall, green sofa, and various decorative items.

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.

call to action button
A woman with long blonde hair and tattoos on her arms, wearing a gray t-shirt with a black graphic, stands with her hand on her chin in a room with a blue patterned wall and wooden shelves behind her.

For layout ten we’re rearranging the common order of things.

call to action button

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!

A woman with long blonde hair, tattoos on both arms, wearing a gray t-shirt and black pants, stands in a modern living room with a blue abstract patterned wall, a green velvet sofa, and wooden shelves filled with books and decorative items.
A woman with tattoos on her arms stands in a colorful, modern living room with a blue abstract wall art background. She has blonde hair and is wearing a gray t-shirt and black pants, with a thoughtful expression.
A woman with tattoos on her arms, standing with arms crossed in a living room with a blue patterned wall, green velvet sofa, and decorative shelves.

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.

call to action button

Layout twelve introduces a new text format.

A woman with blonde hair and tattoos on her arms and chest, wearing a gray t-shirt with a black design, stands in a modern living room with her hand on her chin, in front of a blue abstract wall, green velvet couch, glass coffee table, and houseplants.
call to action button

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.

A woman with long blond hair and tattoos on her arms standing in a modern living room with a blue and white patterned wall in the background. She is wearing a gray t-shirt and black pants, with her right hand resting on her chin, looking thoughtfully to the side.
call to action button set to fill
A woman with blonde hair and tattoos on her arms stands in a room with a blue and white abstract wall, green velvety furniture, and decorative shelves in the background.
A woman with long blonde hair, tattoos on her arms, wearing a gray T-shirt and black pants, standing in a modern living room with a blue marbled wall, green velvet sofa, wooden bookshelf, and various decorative items.
A woman with tattoos standing in a modern, stylish living room with a blue abstract wallpaper, green velvet couch, and decorative shelves with books and ornaments.

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.

call to action button

For layout fifteen, we’re relying on extra space to make it interesting.

A woman with blond hair, tattoos on her arms, and a gray t-shirt standing in a modern living room with blue patterned wall, green velvet sofa, bookshelf, and plants.

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.

call to action button
A woman with long blonde hair and tattoos on her arms is standing indoors with her hand on her chin, looking slightly to the side. Behind her is a blue patterned wall, a green velvet sofa, and wooden shelving with plants, books, and decorative objects.
A woman with tattoos on her arms and shoulder, wearing a gray t-shirt and black pants, standing in a modern living room with a blue patterned wall, green velvet sofa, and wooden shelves in the background.
A woman with long blonde hair and tattoos on her arms, wearing a gray t-shirt and black pants, standing in a modern room with a blue abstract patterned wall, green velvet sofa, and decorative shelves.
A woman standing in a modern living room with a blue abstract wall mural, green velvet sofa, glass coffee table, large potted plant, and wooden shelving. She has blonde hair, tattoos on her arms, and is wearing a gray t-shirt and black pants.

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.

call to action button
A woman with long blonde hair, tattoos on her arms, and a grey t-shirt with a black pattern, standing in a stylish living room with a swirling blue and white wall mural, green velvet sofa, bookshelves, and houseplants.
A woman with long blonde hair, tattoos on her arms, wearing a gray t-shirt and black pants, standing in a colorful living room with a blue abstract wall art background, green velvet sofa, and wooden shelving units.

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.

call to action button
A woman with long blonde hair, tattoos on her arms, standing in a modern living room with a blue and white abstract pattern wall, green velvet sofa, wooden shelves with decorative objects, and a glass coffee table.
A young woman with blonde hair and tattoos on her arms standing in a modern living room with a blue swirling-patterned wall, green velvet sofa, books, and plants in the background.

Layout eighteen uses the text block background feature to create interesting shapes.

A woman with blonde hair and tattoos on her arms is standing in a colorful room with a blue patterned wall, a green velvet sofa, and shelves with various decor items and books.

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.

call to action button

Layout nineteen brings a unique perspective.

A woman with long blonde hair and tattoos on her arms standing in a brightly decorated living room with a blue abstract-patterned wall, green velvet couch, and wooden shelves in background.

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.

call to action button

layout twenty

*

layout twenty *

A woman with blonde hair and tattoos on her arms, standing in a modern living room with a blue patterned wall, a green velvet sofa, and decorative shelves in the background.

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.

call to action button set to fill

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.

A woman with tattoos on her arms and a tattoo of glasses on her chest, standing in a modern living room with a blue artistic wall, green velvet couch, glass coffee table, and bookshelf in the background.
call to action button

Layout twenty-two is ideal for large horizontal images.

A woman with blonde hair and tattoos on her arms standing in a room with blue abstract wallpaper, green velvet sofa, books, and decorative items.

The subheading of supportive text placed here is usually used to describe the image or add a hint of personality & context.

call to action button
A woman with tattoos on her arms and shoulder, wearing a gray t-shirt and black pants, standing in a modern living room with a blue patterned wall, green velvet sofa, and wooden shelves with books and decorative items.

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.

call to action button
A woman with tattoos on her arms and shoulder, wearing a gray t-shirt with a black design, standing in a modern living room with a blue abstract wallpaper and green velvet couch.

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

call to action button set to fill

Layout twenty-five is focused on the call to action.

The subheading of supportive text placed here is minimal & concise.

A woman with blonde hair and tattoos on her arms standing in a living room with a blue abstract wall and wooden shelves, looking thoughtfully to the side with her hand on her chin.
call to action button set to fill
A woman with long blonde hair, tattoos on her arms, wearing a gray t-shirt with a graphic and black pants, standing in a modern living room with a blue abstract wall, green velvet sofa, and decorative shelves with books and ornaments.

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.

call to action button