Using the WordPress Media and Text block

Transcript

Introduction

This lesson will explore how to use the Media and Text block effectively. The Media and Text block is designed to combine images or videos with text side by side – this is ideal for creating engaging content sections, like feature highlights, about me sections, meeting the team, or even a Contact Us section.

Adding media and text

Let’s go ahead and add the block by typing in /media and text. Firstly, I will add an image from my Media Library or upload it from my computer, and always remember to add alt text to images. Then we can go ahead and add some written content on the right. I will select my first paragraph, use my block toolbar to transform it into a heading and change the size to extra large. Then I will go ahead and add a Buttons block or call to action below the text, and change the style to outline.

Customization

Then I will open up my List View to ensure that I select my parent block, and change the alignment of my block to wide width. In the block toolbar, you also have the option to show the image on the right or on the left. When you open Styles on the right, you will be able to change the block’s background color, so I will go ahead and add a custom color. I will also add some padding or space around the content of my block, and when we return to Settings, we will notice a few other options. Firstly, you can change the width of your media by using the slider, sliding it to the left or the right, and below that, you will notice that ‘Stack on mobile’ is selected by default, and this, of course, means that your content will stack on top of each other when viewed on a smaller device. Another option worth mentioning is that you can select ‘Crop image to full’ – this is relevant when your image does not fit the entire width and height of its column. You can turn on this option to automatically crop the image to fill the whole column, and then you can use the focal point picker to select which section of the image you’d like to have centered after cropping.

Using a pattern

Let’s look at another example, but this time, we are going to click on the Inserter top left, type in ‘Media and text’, and then select one of the ready-to-use media and text patterns that comes with my theme. You can use this as a base from which to work or as inspiration. When you select the Media and Text block, you will also notice that you can change the vertical alignment of your text to align with the top, bottom, or middle. Furthermore, when you open Styles and scroll down to the bottom, you will notice you can also add a border to your block or a radius. To end, let’s quickly transform your Media and Text block pattern by changing the background color and replacing the image by selecting Replace in your block toolbar and selecting an image from your Media Library or uploading one from your computer. So, in just a few clicks, I customized the pattern.

Conclusion

The Media and Text block allows us to create a balanced layout and ensures a consistent viewing experience across devices.

Practical

Use WordPress Playground to apply your knowledge.

Re-create the following design:

1. Add a Group a Media and Text block and select wide width
2. Add content to the left column
   • Heading: Man’s best friend
   • Three paragraphs:
     • Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     • Paragraph 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     • Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   • Buttons block: Learn more
3. Add the following image to the right column: https://unsplash.com/photos/shallow-focus-photo-of-short-coated-brown-dog-eIJuI0TW0sQ
4. Change the background color to FBFAF3
5. Add horizontal and vertical padding: Small
6. Enable ‘Crop image to fill’
7. Use the focal point picker to place the dog centre after cropping