Media & Text

Easily combine media and text in a single block to create visually appealing and engaging content layouts on your page.

How to add an media & text Block

The Media & Text block lets you pair images or videos with text in a side-by-side layout.

  • Click on the ‘+’ icon and select the Media & Text block from the library.
  • Alternatively, type /media in a new paragraph block and hit enter.

Block toolbar

After adding an media & text block, the block toolbar offers various options.

Transform to

The ‘Transform to’ button lets you change an image into other things like ‘Image’, ‘Cover’, ‘Columns’ or ‘Group’ easily. This button changes how your text looks so you can make your writing look just right with a simple click.

Drag & Move

Use the six-dot icon to drag your block, or the up and down arrow buttons let you move a block one position higher or lower.

Alignment

The ‘Alignment’ tool lets you adjust the width of your media & text block. Simply click the icon, and a menu will appear with options. You can set your block to no alignment, max 1200px wide, or full width. This feature helps you customize your block to look exactly how you want with ease.

Vertical alignment

You can change the vertical alignment of the text in the Media & Text block by selecting ‘Align top’, ‘Align middle’, or ‘Align bottom’.

Media content position

You can position the media on either the ‘left’ or ‘right’ side of the text.

Easily insert links into your images by pasting a URL or typing to search for the desired link. You have several options for linking.

  • Link to image file: Direct viewers to the image file.
  • Link to attachment page: Direct viewers to the attachment page.

Replace

Click the ‘Replace’ button to change the image. You can select a new image from the Media Library or upload a new one.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Access the block settings from the editor sidebar, visible on the right side panel when you click on the block.

Settings

  • Media Width: Adjust the media width from 15% to 85% to suit your layout needs.
  • Stack on Mobile: Opt to stack media and text for better viewing on mobile devices.
  • Crop Image to Fill: Automatically crop images to fill the column width, ensuring a perfect fit.
  • Alternative Text: Add alternative text for better accessibility and improved SEO.
  • Resolution: Choose the size of the source image to ensure optimal display quality.
  • Advanced: Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the Group block, enabling you to link it to another web page.

Styles

  • Color: Customize the text in the Media & Text block by selecting unique colors for your paragraph text.
  • Typography: Adjust the font size within your paragraph block for better readability and style.
  • Dimension: Add padding and margin to your paragraph block using the dimension settings for a well-spaced layout.

Additional resources