{"version":"1.0","provider_name":"InMotion Hosting Support Center","provider_url":"https:\/\/www.inmotionhosting.com\/support","author_name":"Christopher Maiorana","author_url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/","title":"How to Create Overlap Blocks in WordPress | InMotion Hosting","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"0oyqCZwoYV\"><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\">How to Create Overlap Blocks in WordPress<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/embed\/#?secret=0oyqCZwoYV\" width=\"600\" height=\"338\" title=\"&#8220;How to Create Overlap Blocks in WordPress&#8221; &#8212; InMotion Hosting Support Center\" data-secret=\"0oyqCZwoYV\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script>\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/\/# sourceURL=https:\/\/www.inmotionhosting.com\/support\/wp-includes\/js\/wp-embed.min.js\n<\/script>\n","description":"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 &amp; Text block to create an effect like the one you see below: Create Overlap Blocks With CSS Add Additional Read More >","thumbnail_url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png"}