Wait! Are you leaving?

Try Gutenix subscription for Free !

  • +6 Free templates for Elementor and Brizy
  • Free Gutenix theme
  • Warm hugs from Gutenix team!

Media and text block overview

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

Page Break in WordPress and Separator WordPress Block
Prew post
  • Mar 04, 2020
  • 3 min read
  • 325

Media and text block overview

From this quick overview, you will figure out how to add media to WordPress and style this block. The media and text is a Gutenberg block, which showcases an inline image or video and a text side by side.

In case you want a vivid block to combine the media and text content, you may add media block to WordPress and enjoy the customization process. As a text, you can add paragraph, list and heading. You are also able to implement a button.

add block

After we’ve added a media and text block on your page, let’s upload an image. As you can see, you are able to move the media element to the left and back to the right, if it is needed.

settings

You may also make a block full width and set the alignment for the text element. Moreover, you can resize an image as well.

set alignment

Let’s move to the block sidebar panel. Here you can enable stack on mobile and crop an image to fill the entire column. In case you’ve enabled it, you can set the picture’s horizontal and vertical positions, as well as add an Alt text for an image.

Visiting the Color settings tab, you can notice that here the background color change is taking place. This option is only available for the text element.

In addition, hit the Advanced tab and set the additional CSS class. You will be able to use it in the WordPress customizer to add more design features and style your media and text block up.

add class

You have to remember that after you add media to WordPress, you can customize each element of this block. As for the image part, here you are able to set tonnes of options:

  • change an image size and its dimensions in pixels or percents;
  • apply parallax effect and make ir round;
  • write down an Alt text and add an additional CSS class.

As for the text element of the block, here you are also able to set the size or enable drop cap. As for the colors, text and background ones are available.

However, you should remember that if you’ve set the background color in the media block settings, the text background will appear over the previous one.

Congrats! Now you’ve learned how to add a Media WordPress block to your page and style it up.

3
Appreciate
Circle progress bar WordPress block overview
Next post
Page Break in WordPress and Separator WordPress Block
Prew post
Circle progress bar WordPress block overview
Next post

Get Gutenix Subscription

Create unlimited websites with dozens of templates, premium Gutenberg blocks and lightweight theme — all in one toolkit.

Meet Gutenix, the devoted team of developers that stands behind ZeGuten plugin and Gutenix free theme. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2020 Gutenix. All Rights Reserved.