Blocks »Media & Text Block

The media & text block allows you to place an image or video side-by-side with text.

Media & Text block
Add Media & Text block

Table of Contents

Adding a Media & Text Block

To create this layout, click on the block inserter icon to open the block library and select the media & text block.

You can also type /media and hit enter in a new paragraph block to add one quickly:

Media & Text Block Shortcut
Add Media & Text Block shortcut

Detailed instructions on adding blocks can be found here.

↑ Table of Contents ↑

Adding Content

To add your image or video to the block, you can use the options provided to upload a file from your computer or select from your existing Media library.

Media & Text Block
Empty Media & Text Block

To add your text, simply start typing in the text box. You will be given the same text editing options as a regular paragraph block.

↑ Table of Contents ↑

Block Toolbar

In order to reveal the block toolbar, you can click on the block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The media & text block offers the following options in its toolbar:

Media & Text Block Options
Media & Text Block Options

With these options, you can:

  • Change the block to a regular image or video block.
  • Toggle the block between a wide-width display and a full-width display (if supported by your site’s theme.)
  • Show the media on the left and text on the right, or the other way around.

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.

↑ Table of Contents ↑

Media & Text Settings

You will be given the option to stack the media and text on top of each other for mobile phones. This is useful for people viewing your website on smaller screens.

Media & Text - Stack on Mobile
Stack on Mobile Setting

If the media and text in your block were to stay side-by-side on mobile, they may be too small to view on mobile devices. By enabling stack on mobile, the content on the left will show on top of the content on the right. This provides a better experience for mobile visitors.

↑ Table of Contents ↑

Text Settings

By clicking on the Paragraph block inside the Media & Text block, you can edit text settings such as font size and drop capitalization.

↑ Table of Contents ↑

Color Settings

A background color can be set for the text side of the block, allowing you to call attention to important content.

Media & Text Block - Color Settings
Color Settings

↑ Table of Contents ↑


The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help