Media and Text Block

The Media and Text block lets you create a two-column layout with media on one side and content on the other. It’s a quick, reliable way to pair an image with supporting text — without needing to build a layout from scratch.

Why use the Media and Text block

Use the Media and Text block when you want to:

Combine an image and related content in a clean, structured layout
Create a consistent side-by-side design without managing columns manually
Highlight key content with a strong visual and supporting text

This block simplifies a very common layout and helps keep content consistent across the page.

How to use the block

Start by adding the Media and Text block to the page. Learn how to add blocks.

Once the block is added, editors typically:

Add an image using the Media Library
Add content to the text side using inner blocks
Arrange and style content to support the layout
Adjust layout and settings in the block toolbar and settings sidebar

When adding media, you can:

Upload a new image from your computer
Select an image from the Media Library (most common)
Use the Featured Image if one is already set for the page or post

On the content side, you can add any blocks. A common pattern includes:

Heading block for structure
Paragraph block for supporting text
Button block for calls to action

But you’re not limited to this — use any combination of blocks that fits your content.

The block toolbar appears above the Media and Text block when it’s selected.

Available options

Change vertical alignment: Align the content to the top, middle, or bottom of the block
Show media on left/right: Swap the position of the image and content
When Stack on mobile is enabled, the image will always appear above the content on smaller screens
Link: Add a link to the image
Block width: Control how wide the block appears within the layout
Replace: Replace the image without removing the block

Block settings

Block settings appear in the right sidebar while the Media and Text block is selected.

Media width

Controls the percentage width of the image. The text column automatically adjusts based on this value. The default is 50%, which works well in most cases.

Stack on mobile

Controls how the layout behaves on smaller screens. When enabled, the image and content stack vertically instead of displaying side by side. In most cases, this should remain enabled to ensure content is readable on mobile devices.

Crop image to fill

Forces the image to fill the full height of the media column. The height is determined by the content in the text column.

Focal point

Available when Crop image to fill is enabled. Lets you choose which part of the image stays centered when cropping occurs. This is useful for keeping important parts of the image visible.

Alternative text

Describes the purpose of the image for screen readers. This is pulled from the Media Library, but can also be updated here. Alt text is not needed for purely decorative images.

Resolution

Selects which version of the image to display. Options typically include Thumbnail, Medium, Large, and Full Size. For most Media and Text layouts, Large or Full Size is recommended. If the image is displayed at a smaller size, Medium may be a better option.

Block styles

In the Styles tab of the right sidebar, you can adjust the visual appearance of the block.

Text color

Changes the color of all text within the Media and Text block. This applies to all inner blocks, so use it carefully to maintain contrast and readability.

Dimensions

Padding: Adds space inside the block, between the content and the edges.
Margin: Adds space outside the block, separating it from surrounding content.

Accessibility and content structure

The Media and Text block combines layout and content, so it’s important to use it thoughtfully.

Always provide meaningful alt text for images that convey information
Ensure text content is clear and structured using appropriate blocks (like Headings and Paragraphs)
Avoid placing critical information only in the image

When used well, this block creates a strong relationship between visual and written content — improving clarity for all users.

Tips for editors

Use this instead of columns for simple layouts

If you’re creating a basic image-and-text layout, this block is faster and more reliable than using Columns.

Keep content balanced

Try to balance the amount of text with the size of the image. Large blocks of text next to small images (or vice versa) can feel uneven.

Be intentional with cropping

If using Crop image to fill, check how the image is cropped — especially on different screen sizes — and adjust the focal point if needed.

Keep media width consistent

Using a consistent Media width across your site — and especially within the same page — helps create a clean, predictable layout. When widths vary too much, sections can feel visually disconnected.

Patterns can help with this. If a Media and Text block is saved as a Pattern with settings like Media width already configured, you can reuse it to maintain consistency and align with the design system. Consistency in layout makes content easier to scan — and helps your page feel more intentional overall.

Please note that your implementation may include customizations that affect available settings or behavior.