Media & Text Block

Last updated 15 days ago

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

To add a media & text block, click on the Add Block button and select the Media & Text block. Alternatively, you can start typing /media in a new paragraph block, then select Media & Text from the drop-down list.

Use the slash command /media then select Media & Text from the drop-down list

Detailed instructions on adding blocks can be found here.

Block Interface

To reveal the block toolbar, you can click on the block and the toolbar will display. Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

The media & text block toolbar has basic layout adjustment options along with a few others

The media & text block offers the following options in its toolbar:

  • Change the block to a regular image or video block.

  • Toggle the block between a wide-width display and a full-width display.

  • Display the media on the left and text on the right, or the other way around.

Alignment

If you wish for the latest comments to be emphasized on the page, the Wide and Full-Width options will expand the latest comments block beyond the bounding column of the page. These two options are exclusively available within the Conj - eCommerce WordPress Theme which supports these alignments in any fluid width page template.

Adding Media

Upon adding the media & text block, you have two options to chose from, Upload and Media Library. The upload button allows you to upload a single image or video from your device and media library allows you to select image or video that you’ve already uploaded to your site’s media library.

Once you’ve uploaded your media or have chosen them through the Media Library window, you will get the chance to caption the image afterward.

Edit Media

This is another option in the file block’s toolbar. Choosing the pencil icon will allow you to select a new image or video file for your block. Use this if you need to replace the image or video file in your media & text block, or change the Title or Alt Text.

Resizing Media

You can resize and adjust the image or video alignment to better fit the side content right after adding the media to the block.

Resize an image in media & text block by dragging its handles

Clicking on the media will reveal the draggable resize handles. Then, you would be able to resize handles by dragging the media to your desired size.

Adding Content

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

Media & Text Settings

There is an option which enables you to stack the media and text on top of each other for small screen devices. By enabling stack on mobile, the content on the left will show on top of the content on the right which provides a better experience and might be useful for readers who are viewing your website on mobile.

Color Settings

Background color can be set for the text side of the block, allowing you to call attention to valuable content.

In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.

The media & text block settings can be found in the sidebar

Advanced

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