Putting an image next to text — your flexible alternative to “Hero side-by-side”

One question we hear a lot: “Is there a more flexible way to put an image next to some text?” The Hero side-by-side block works, but it’s locked to a 50/50 split with the image only on the far left or far right. Here’s a more flexible way to do it — and it’s built right in.

The short version

Instead of Hero side-by-side, use a Section with a plain Image in one of its columns. The Section lets you pick the ratio between the image and the text, so you’re not stuck at 50/50.

Image

An image in a 33% column with text in the 67% column — no Hero side-by-side in sight.

How to build it

1. Edit your page and add a Section block.
2. In the Section’s settings, set Grid layout to the split you want — for example 75-25, 33-67, 25-75, or 50-50.
3. Drop a plain Image block into one column and a Heading or Text block into the other. Whatever you place first sits on the left — so for “image on the right,” add the text first.
4. On the Image, you can set Aspect ratio → Natural and Image fit → Fit so the whole image shows, undistorted.

Image

In the editor, the Image block (the purple label) lives inside the Section, and you preview the result as you go.

Which ratio does what

It looks after phones for you

On a narrow screen the two columns automatically stack into one — image on top, words below — so you don’t have to do anything special for mobile.

Image

The same 33/67 section on a phone: it stacks cleanly, no setup required.

When to still use Hero side-by-side

Hero side-by-side is still a great choice when you want a big, bold 50/50 banner at the top of a page. For everything else — different ratios, an image tucked beside a paragraph, finer control — reach for a Section + Image.