How to create overlapping columns with the WordPress Gutenberg Block Editor

This article explains an easy way to create a cool overlapping columns effect using the WordPress Block Editor and the Media and Text Gutenberg Block.

Here’s what we are going to build.

overlapping columns wordpress

Video tutorial

Step One: Add the Media and Text Block

First, add the Media and Text Block to your page.

how to add the media and text block

Step Two: Replace the Paragraph Block with the Columns Block (or transform the Paragraph Block into a Group Block)

First, we need to replace the Paragraph Block with a single column, Columns Block.

This is so we can add multiple Blocks within the Column, and set a background colour behind all the Blocks.

note: you could also achieve the same thing by transforming the Paragraph Block into a Group Block, as Group Blocks lets us put more than one Block into the same container, and set a background colour for that container.

media and text block

In the picture below you can see that I’ve added a Columns Block and then within that a Heading Block, a Paragraph Block, and a Buttons Blocks.

I’ve also added a background colour to the Column.

media and text block

Step Three: Create the Column overlap

Now it’s time to create the column overlap effect.

There are two methods to create the column overlap, you can either add some code or use a plugin called Gutenberg Pro.

Method A: Using CSS Code

Just add the following CSS code to the WordPress customizer

*if you use the CSS code method then you won’t see changes in the Gutenberg Editor. You’ll see the overlap once you have published and viewed the page.

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	margin-right: -150px;
}

.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
	margin-left: -150px;
}

CSS code for stacking the media on mobile and tablet:

@media (max-width: 640px) {
  
    .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
        margin-left: 0px !important;
    }
    
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        margin-right: 0px !important;
    }
    
}

Method Two: Use the Gutenberg Pro plugin

If you don’t feel happy with adding CSS code then another option is to use the Gutenberg Pro plugin.

Gutenberg Pro adds an Overlap option in the Block settings panel, shown in the picture below.

set media and text block overlap columns

Three additional customization options with the Media and Text Block

There are two extra options that you might want to use with the Media and Text Block.

Option 1: Change the size of the Text Box

Simply drag the Blue Dot shown in the diagram below to change the size of the container box.

change size of media and text block

Option 2: Change the vertical position of the Text Box

To change the vertical position of the Text Box click on the icon shown in the picture below.

media and text block vertical positioning

Option 2: Swap the content and image position

To swap the position of the image and text click on the icon shown in the picture below

media and text block swap image position

Conclusion

The Media and Text Block is one of my favourite core Gutenberg Blocks. I hope you find this tutorial useful, and if you have any questions, please feel free to leave them in the comments below.


Comments

2 responses to “How to create overlapping columns with the WordPress Gutenberg Block Editor”

  1. […] an overlap block is not offered by default in the Gutenberg editor. However, with some CSS code from the makers of the Gutenberg Pro plugin, you can achieve an overlapping effect using a Media & Text block to create an effect like the […]

  2. Hi! My name is Salvador. I would like to understand how to make the css method

Leave a Reply

Your email address will not be published. Required fields are marked *