How to Create Overlap Blocks in WordPress

Overlap blocks in WordPress

Creating 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 one you see below:

WordPress overlap blocks
Notice how the text blocks overlap the image.

Create Overlap Blocks With CSS

Here is the CSS code you will be using:

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

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

Notice that the margin values (set at -100px) are adjustable. I would recommend adjusting this value to get the exact margin you need.

Add Additional CSS Code To Your Site

Follow the steps below to add this code to your site:

  1. Log into the WordPress Dashboard
  2. Click Customize under Appearance
  3. Choose Additional CSS
    Additional CSS
  4. Paste the code into the CSS editor window

Creating a Media & Text Block

Now for the easy part. Below, you will learn how to add a Media & Text block to your site. A Media & Text block is simply a type of block that pairs media (like images) with some text.

  1. Select a post to edit or create a new post
  2. Create a new block and select Media & Text
    WordPress Media & Text Block
  3. Fill in your content

When done, save the post and view, and you will see your overlapping blocks. Changes will not appear right away in the editing window. This is because the CSS changes made do not affect the design elements in the editor window, only the final appearance once the page is viewed live. However, if you want to see changes take effect right away, open the Customize window while viewing the post or page. This way, you will be able to see your CSS changes happening in real time.

Tip: adding background color to the text content can help amplify the overlapping effect.

Using a Custom Class

In the above example, the changes made to the CSS will affect all posts and pages. But what if you want to limit this effect only to certain pages or posts, or you simply want to have more control over where this effect takes place, you can use a custom CSS class.

Adding a custom class is easy, but you just need to pay close attention to the syntax. For the sake of simplicity, we can create a custom class called “overlap”, for overlapping blocks. You will be adding the custom class to the beginning of the same CSS code used above. Note the change (overlap.) highlighted in green below:

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

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

Now, you will just need to apply this custom class to the Media & Text block in your editor.

  1. Open the post or page for editing
  2. Highlight the Media & Text block
  3. Go to the Advanced dropdown section in the block menu on the right side of editor window
  4. Fill in “overlap” under Additional CSS class(es)

That’s it! Now, the overlapping effect will only apply to Media & Text blocks utilizing the custom “overlap” CSS class. Remember, you can name this class anything you want to help identify it. To get the CSS tweaking just right, you can use the customize window to edit the CSS and see the changes in real time.

CM
Christopher Maiorana Content Writer II

Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.

More Articles by Christopher

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!