In this lesson we will explore how to effectively use the Media and Text block.
The Media and Text block is designed for combining 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.
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 am going to select my first paragraph and use my block toolbar to transform it to a heading,
and also 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.
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 background color of the block,
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 entire 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.
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 to work from or as inspiration.
When you select the Media and Text block, you will also notice you can change the vertical alignment of your text to align 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 off, 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.
The Media and Text block allows us to create a balanced layout and ensures a consistent viewing experience across devices.