Easy methods to Create Overlap Blocks in WordPress – InMotion Internet hosting Help Middle


Creating an overlap block isn't provided by default within the Gutenberg editor. Nevertheless, with some CSS code from the makers of the Gutenberg Professional plugin, you may obtain an overlapping impact utilizing a Media & Textual content block to create an impact just like the one you see under:

WordPress overlap blocks
Discover how the textual content blocks overlap the picture.

Create Overlap Blocks With CSS

Right here is the CSS code you may be utilizing:

.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;

Discover that the margin values (set at -100px) are adjustable. I'd advocate adjusting this worth to get the precise margin you want.

Add Further CSS Code To Your Website

Observe the steps under so as to add this code to your website:

  1. Log into the WordPress Dashboard
  2. Click on Customise below Look
  3. Select Further CSS
    Additional CSS
  4. Paste the code into the CSS editor window

Making a Media & Textual content Block

Now for the simple half. Beneath, you'll learn to add a Media & Textual content block to your website. A Media & Textual content block is just a kind of block that pairs media (like photographs) with some textual content.

  1. Choose a put up to edit or create a brand new put up
  2. Create a brand new block and choose Media & Textual content
    WordPress Media & Text Block
  3. Fill in your content material

When completed, save the put up and consider, and you will notice your overlapping blocks. Modifications won't seem instantly within the modifying window. It is because the CSS modifications made don't have an effect on the design components within the editor window, solely the ultimate look as soon as the web page is seen reside. Nevertheless, if you wish to see modifications take impact instantly, open the Customise window whereas viewing the put up or web page. This manner, it is possible for you to to see your CSS modifications occurring in actual time.

Tip: including background colour to the textual content content material can assist amplify the overlapping impact.

Utilizing a Customized Class

Within the above instance, the modifications made to the CSS will have an effect on all posts and pages. However what if you wish to restrict this impact solely to sure pages or posts, otherwise you merely wish to have extra management over the place this impact takes place, you should utilize a customized CSS class.

Including a customized class is straightforward, however you simply have to pay shut consideration to the syntax. For the sake of simplicity, we will create a customized class referred to as “overlap”, for overlapping blocks. You can be including the customized class to the start of the identical CSS code used above. Word the change (overlap.) highlighted in inexperienced under:

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'll simply want to use this practice class to the Media & Textual content block in your editor.

  1. Open the put up or web page for modifying
  2. Spotlight the Media & Textual content block
  3. Go to the Superior dropdown part within the block menu on the appropriate facet of editor window
  4. Fill in “overlap” below Further CSS class(es)

That’s it! Now, the overlapping impact will solely apply to Media & Textual content blocks using the customized “overlap” CSS class. Keep in mind, you may title this class something you wish to assist establish it.

Supply hyperlink


Leave a Reply