Blocks

Blocks »Media & Text Block

Use the Media & Text block to place an image or video side-by-side with text.

Media & Text block
Adding a Media & Text block

Table of Contents

Add 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 ↑

Add Your 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.

Empty Media & Text Block

Upload allows you to upload a new image or multiple images to from your compuer to your website.

Select Images lets you choose from previously uploaded images in your Media Library, or choose from Google Photos or the Pexels Free Photo library.

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

This section in the Block settings screen has several options.

media & text block settings

Stack on mobile

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.

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.

Crop image to fill entire column

If your image does not fit the entire column width, you can turn on this option to automatically crop the image so that it fills the entire column.

Alt text (Alternative text)

You can add alt text to the image to describe what the image is about. It is useful for both accessibility (screen readers, for example) and search engine optimization.

Image size

The drop-down lets you choose which image size to load on the Media & Text block.


↑ 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 ↑

Advanced

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