How to use a Media & Text block

A Media & Text block lets you add media and text next to each other on the page. The media can be:

  • either a decorative or informative image
  • a video you have uploaded (if it includes hard-coded captions)

If you want to add text next to a video you have hosted on YouTube or Vimeo:

If you want to use a decorative image or include a title in the text, use an Image card block.

How to use a Media & Text block

Consider how you include media like videos or images on your site. These can make your site more visually interesting. Think about your whole site design when you add several kinds of blocks. Some neurodivergent or visually impaired users may find lots of this kind of content overwhelming. Find out how to design content to meet the needs of neurodivergent users.

A Media & Text block displays media and content in 2 columns on your page, for example:

Every Mind Matters can help with expert advice and practical tips to help stay on top of your mental wellbeing.

Any image you use on your site needs to be the correct size and quality to display correctly. Though an image can be any size you need to make sure it can be displayed correctly for users on mobile devices or older screens:

  • maximum image width is 800 pixels
  • maximum height 300 pixels

If you upload a video you should make sure it includes captions and use a group to add a transcript link. Find out more about how to make videos accessible.

How to add a Media & Text block

To add a Media & Text block to your page:

  1. Click the plus (‘+’) button to add a block to your page.
  2. Type ‘media and text’.
  3. Click the ‘Media & Text’ option.
  4. Click ‘Upload’ to add the image to your site.
  5. In the right settings sidebar, click the ‘Block’ tab to make sure it’s selected.
  6. Type alternative text to describe an informative image in the ‘ALT TEXT’ box – find out how to write effective alternative text.
  7. Select the image size you want from the ‘IMAGE SIZE’ drop-down menu – select ‘Full Size’ if your image is taller than 300 pixels.
  8. If you want your image to be resized to a square ratio select ’thumbnail’ or ‘medium’ from the ‘IMAGE SIZE’ drop-down menu
  9. Add your text to the page by clicking ‘Content…’ next to your image

In this section