Adding Media and Text Blocks to WordPress | Raney Day Design

Reading Time: 4 minutes

Media & Text Block Featured

We’ve reviewed how to add media blocks to your WordPress Website, as well as how to add paragraph blocks. But did you know there’s a block option to place media – a video or an image – with text that appears side-by-side?

This is handy when you want to really call out something about an image or you have a graphic that requires a bit of explanation. Adding the media & text block allows you to connect text information to your media more directly.

Adding the Media & Text Block to WordPress

To add this block, click on the block inserter icon, which opens the block library. Then select the media & text block from the options. If you’re new to WordPress or need a refresher about how to navigate the block editor, read our overview.

Block menu media icon

As always, there’s a second way to add the block. From a new paragraph block, type /media and hit enter. If you’re one of those people who tries to avoid taking your hands off the keys to use the mouse, knowing the command is a great shortcut.

Add media shortcut

Add the Content to the Media & Text Block

When the block appears, the media part is on the left and the text on the right. To add your image, click on the Media Library link if your video or image has already been added to your library. If you need to upload new media from your computer, select the Upload button.

New media and text block

For your text, simply click in the text area and the cursor will appear. Simply start typing, then do any formatting and editing you want to add.

Block Toolbar

As always, while you’re working in a block, a block-specific toolbar appears above the block. For the text side of the media & text block, you get the same editing options as for a simple paragraph block. The media side toolbar gives you the option to flip the placement of the media and the text, left to right.

Switch content left-to-right

The pink highlights the icon to place the text on the left – like this!

The next icon to the right of the highlighted one above sets the alignment between the text half and the media half of the block. The text can be aligned with the top, middle, or bottom of the media.

Block Settings

As always, clicking the cog icon on the top right of the window opens block options that are available in addition to the ones on the block toolbar. The right sidebar then displays those additional options.

Stack on mobile option

One important option in the sidebar is a toggle to stack the text and media for mobile devices. This will help visitors viewing your website from mobile devices. On mobile, leaving the text and media to appear side-by-side will likely make them too small for mobile visitors to see well. When you enable stack on mobile, the portion of the block (text or media) you’ve placed on the left will show up on top. So, consider whether you’d prefer for the text to appear above the media or vice versa when you determine the left to right placement of the two pieces of content.

Stack on mobile toggle

Color Settings

Click on the Color Settings dropdown, and you’ll get options to change the color of the text and/or the background. This can be useful for really drawing visitors’ attention to the content, but make sure you do not use a color combination that will make it hard to read. Ensure there is sufficient contrast between the color of the text and the background.

At the End of the Day

The media & text block offers an alternative way of arraying related media and written content. Adding a media & text block to your WordPress website can help you really focus attention on an important picture, video, or graphic. It’s also an option for simply making your page or post more visually interesting and keeping visitors’ attention.

Think about it: Where could you incorporate a media & text block into your WordPress website?

Share This Post

If you read this Do It Yourself WordPress post and still need help, we got you! Either drop a message to us in the chat or Schedule a Call!