Picture a services page where each service gets a photo on one side and a short description on the other, alternating left and right as you scroll down. It is one of the most common layouts on small business sites, and it is also one people struggle to build. The image either sits above the paragraph, or floats with the text wrapping awkwardly around it.
WordPress has a block made for this. It is called Media & Text, and many people search for it as the media and text block. It holds an image or a video in one half and any text blocks you like in the other, and it handles the switch to a single column on phones. Set up with a little care, it stays tidy on every screen.
Is this the right layout?
Image next to text works best when the picture and the words are about the same thing: a service and a photo of it, a team member and their bio, a product and what it does. It is less suited to:
- Big headline banners. If you want words printed over a photo, that is the Cover block for a hero image.
- Three or more items side by side. Media & Text has exactly two halves. For a row of three services, use columns.
- Long pages of text with an occasional photo. A normal Image block, aligned left or right, lets text wrap around it and is simpler.
Also check the page opens in the block editor. If you see a page builder interface instead, its own image-box or two-column widget does this job. For a broader picture of how images are handled across WordPress, see the guide to adding images to WordPress that this post sits under.
Adding the media and text block
- Open the page, click where the section should go and press the + inserter.
- Search for “Media” and choose Media & Text.
- In the media half, click Upload or Media Library and pick the image. A short video works too.
- Click into the text half. It starts with a paragraph placeholder; type there, then add a heading above it, a list or a Buttons block with the inserter.
- Save a draft and preview on desktop and mobile.
The text half is a container, just like a Group block. Anything you can put on a page, you can put in there. Keep it short, though; a heading, two or three sentences and maybe a button is what the layout handles best.
Putting the image on the left or the right
With the Media & Text block selected, the toolbar has two buttons: Show media on left and Show media on right. Pick one per block.
To build the alternating pattern, add the first block with the image on the left, set it up fully, then duplicate it (the block’s three-dot menu has Duplicate). Switch the copy to media on the right, then change its image and text. Repeat. Duplicating keeps the widths and colours consistent, which is most of what makes the pattern look deliberate.
Changing the width of each half
By default the two halves are equal. You can drag the handle on the edge of the image to make it narrower or wider, and the sidebar usually has a Media width setting as a percentage for finer control. Somewhere between a third and a half of the width for the image tends to look balanced on a business page.
Vertical alignment
When the text is shorter than the picture, it can sit at the top, middle or bottom of its half. The toolbar’s vertical alignment control sets this. Centred usually looks best.
Cropping the image to fill its half
A tall photo next to a short paragraph leaves a long empty strip under the text, and a wide photo next to a long paragraph leaves blank space around the image. The sidebar has an option to crop the image so it fills the whole of its half, whatever the text height.
When that crop setting is on, a focal point picker appears. Drag the dot to the part of the photo that must stay in view, such as a face or the product, so the crop keeps it. Turn crop off if the whole image must be seen, like a diagram or a certificate.
How it behaves on a phone
A phone screen is too narrow for two halves, so the block has a Stack on mobile setting in the sidebar, switched on by default. With it on, the image and text stack into one column on small screens.
Leave this on unless you have a very small image and very little text. Two squeezed halves on a phone make the text column a few words wide, which is tiring to read.
When the block stacks, the image goes on top and the text below, whichever side the image sits on a computer. That suits the alternating pattern well: on a phone every section reads image, then words, in the same rhythm. Check it in the editor’s mobile preview and then on a real phone.
Readability and accessibility
One reason to choose this block over text on top of a photo is that the words sit on a plain background, so they stay readable. A few things keep it that way:
- Background colour. If you give the block a background colour, make sure the text colour contrasts strongly with it. Pale grey text on a white or beige background is a common problem.
- Alt text. Select the block and look in the sidebar for the alternative text field for the image. Describe what the photo shows if it adds information. Our post on writing image alt text in WordPress explains how to word it.
- Real headings. Use a Heading block for each section title rather than bold paragraph text. Screen reader users jump between headings to find their way.
- No text inside the image. A photo with the service name painted on it is unreadable to search engines and assistive technology, and shrinks badly on a phone.
Media & Text or the Columns block?
Both can put an image beside text. The difference is in what they handle for you.
| Media & Text | Columns | |
|---|---|---|
| Number of sides | Always two | Two to six |
| Image fills its side | Yes, with the crop option | No, an Image block sits inside a column |
| Swap sides | One toolbar button | Move the blocks between columns |
| Best for | Feature sections, bios, services | Rows of several items, mixed content |
If you need three items, or text on both sides, our guide to the Columns block for two or more columns covers it.
Fixing common snags
- The image looks stretched or blurry. A small image has been enlarged to fill a wide half. Use a larger original, or reduce the media width.
- There is no space around the text. Your theme may set tight padding. Select the block and look under the Styles tab for padding or dimensions controls, depending on your theme.
- The block will not go full width. Use the alignment control in the toolbar. If wide and full are missing, your theme or page template limits it.
- You want the image to be a link. Select the image half and use the link button in the toolbar, then enter the page address.
- You changed the wrong section. Undo with Ctrl+Z (Cmd+Z on a Mac), or open the page’s revisions to compare and restore an earlier version.
Mistakes to steer clear of are mostly about consistency. Mixing different image shapes, widths and background colours from one section to the next makes a page look assembled in a hurry. Pick one width and one style, and reuse it by duplicating. If you find yourself building the same section on several pages, saving it as a pattern saves time.
Layout blocks like this one are a small corner of running the site. The WordPress management guide is where we keep the map of the rest.
Frequently asked questions
Can I have the text above the image on phones?
Not with the block’s own settings. When it stacks, the image always comes first. If the words must lead on small screens, build that section with a Columns block instead, putting the text column first, because columns stack in the order they are arranged. A short piece of custom CSS can also reorder it, though that is one more thing to maintain.
Can a Media & Text block show the featured image instead of a fixed photo?
Yes. Open the Replace menu in the block toolbar and choose Use featured image. The block then shows the featured image of whichever post it appears in, which is mainly useful in Site Editor templates or in a pattern reused across many posts. On an ordinary page, choosing the photo directly is simpler.
Can I add a caption under the image in a Media & Text block?
There is no caption setting in this block. The simplest workaround is a short line of small text at the top or bottom of the text half, such as the project name. If you need a proper caption under the picture, use a Columns block with an ordinary Image block, which has its own caption area.
Padding you cannot change and sections that refuse to line up are theme styling problems rather than block settings. Our WordPress theme customization service can adjust how these blocks are styled across the whole site.
Next in this series: WordPress Image Caption, Title, Alt and Description
