The Media and Text block fills a gap in WordPress design that many users didn’t even realize was there. Sure, you could use separate blocks for images, videos, or text, but getting them to sit neatly side by side often turned into a juggling act of columns, alignments, and layouts.
This block steps in as the no-nonsense answer for those who want their media and text to complement each other without the hassle.
Think about a food blogger showing off a recipe photo with instructions, a business highlighting a new product with details beside it, or even a storyteller combining visuals and words to draw readers in.
The Media and Text block makes all this possible with just a few clicks.
This guide walks you through everything so you can quickly master the block and take your content to another level.
Step 1: Add the Media and Text Block
Enter the WordPress post or page where you’d like to add the block. Click the + Block Inserter icon to open the block library. Type “Media & Text” in the search bar and select it to add the block. We can also type /media on a new line and press Enter to insert the block quickly.
Step 2: Insert Media
Inside the block, click Carregar to add a new image, choose one from the Biblioteca de mídia, or use the Featured Image if it’s already set.
Step 3: Add Text
Begin with typing your text in the area next to the media. You can also utilize the + Block Inserter inside the text section to add your preferred block in this section.
Step 4: Customize the Block
We’ve divided the customization process into three parts.
4.1 Customize with the toolbar
From the toolbar above the block, you can change the block type, drag the block, move it up or down, adjust the width and alignment, toggle the media position between left and right, and add a link to the media or replace it.
4.2 Customize the text
Move on to the text content, click it, and access the toolbar above. From there, you can transform the text into different block types like Heading, List, or Quote, apply formatting options such as bold, italic, strikethrough, or inline code, adjust the text alignment to left, center, or right, and add hyperlinks to selected text. For this example, we’ve transformed our text to a Quote.
4.3 Customize through the Block Settings
Open the Block Settings panel on the right-hand sidebar to explore more customization options. Under General settings, you can enable Stack on Mobile, toggle Crop Image to Fill Entire Column, adjust Media Width, add Alternative Text, and choose the resolution.
Now, if you move to the Styles tab, you can modify text and background color, typography, dimensions, and border settings.
Etapa 6: Visualizar e publicar
Review the block and check the Preview to see how the block looks on your page or post. Make any final adjustments if necessary. Once you’re satisfied, click Publish or Update to save your changes.
Conclusão
The Media and Text block was introduced to make your content flow naturally with media and text working together in perfect harmony. Instead of piecing together separate blocks and worrying about layouts, this block provides a quick and reliable way to create side-by-side designs that look great on any device. Take your time to go through the article, understand each step, and start creating with confidence.
