{"id":95497,"date":"2022-05-05T10:42:33","date_gmt":"2022-05-05T14:42:33","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=95497"},"modified":"2022-07-22T12:14:37","modified_gmt":"2022-07-22T16:14:37","slug":"overlap-blocks","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/","title":{"rendered":"How to Create Overlap Blocks in WordPress"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png\" alt=\"Overlap blocks in WordPress\" class=\"wp-image-95507\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p> Creating an overlap block is not offered by default in the Gutenberg editor.  However, with some <a href=\"https:\/\/www.pootlepress.com\/2021\/10\/how-to-create-overlapping-columns-with-the-wordpress-gutenberg-block-editor\/#css-code\">CSS code from the makers of the Gutenberg Pro plugin<\/a>, you can achieve an overlapping effect using a <i>Media &amp; Text<\/i> block to create an effect like the one you see below: <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"645\" height=\"253\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/overlapping_blocks2.png\" alt=\"WordPress overlap blocks\" class=\"wp-image-95500\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/overlapping_blocks2.png 645w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/overlapping_blocks2-300x118.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption>Notice how the text blocks overlap the image.<\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#overlap-block\">Create Overlap Blocks With CSS<\/a><\/li><li><a href=\"#additional-css\">Add Additional CSS Code To Your Site<\/a><\/li><li><a href=\"#create-media-text-block\">Creating a Media &amp; Text Block<\/a><\/li><li><a href=\"#custom\">Apply a Custom Class<\/a><\/li><li><a href=\"#graphics\">Using a Graphics Program to Create the Overlapping Effect in an Image<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overlap-block\">Create Overlap Blocks With CSS<\/h2>\n\n\n\n<p>\nHere is the CSS code you will be using:\n<\/p>\n\n\n\n<pre id=\"org516ee29\" class=\"wp-block-preformatted example\">.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {\n\tmargin-right: -100px;\n}\n\n.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {\n\tmargin-left: -100px;\n}\n<\/pre>\n\n\n\n<p>Notice that the margin values (set at <code>-100px<\/code>) are adjustable. I would recommend adjusting this value to get the exact margin you need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"additional-css\">Add Additional CSS Code To Your Site<\/h2>\n\n\n\n<p>\nFollow the steps below to add this code to your site:\n<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">Log into the WordPress Dashboard<\/a><\/li><li>Click <b>Customize<\/b> under <i>Appearance<\/i><\/li><li>Choose <b>Additional CSS<\/b><br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"409\" class=\"wp-image-95430\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_004.png\" alt=\"Additional CSS\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_004.png 402w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_004-300x246.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><li>Paste the code into the CSS editor window<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-media-text-block\">Creating a Media &amp; Text Block<\/h2>\n\n\n\n<p>\nNow for the easy part.  Below, you will learn how to add a Media &amp; Text block to your site.  A Media &amp; Text block is simply a type of block that pairs media (like images) with some text.\n<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Select a post to edit or create a new post<\/li><li>Create a new block and select <b>Media &amp; Text<\/b><br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"698\" class=\"wp-image-95502\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_009.png\" alt=\"WordPress Media &amp; Text Block\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_009.png 369w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/wordpress-blocks_009-215x300.png 215w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><li>Fill in your content<\/li><\/ol>\n\n\n\n<p> 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.<\/p>\n\n\n\n<p class=\"alert alert-info\">Tip: adding background color to the text content can help amplify the overlapping effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"custom\">Using a Custom Class<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 \u201coverlap\u201d, for overlapping blocks. You will be adding the custom class to the beginning of the same CSS code used above. Note the change (<code>overlap.<\/code>) highlighted in green below:<\/p>\n\n\n\n<pre id=\"org516ee29\" class=\"wp-block-preformatted example\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">overlap.<\/mark>wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {\n\tmargin-right: -100px;\n}\n\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-green-cyan-color\">overlap.<\/mark>wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {\n\tmargin-left: -100px;\n}\n<\/pre>\n\n\n\n<p>Now, you will just need to apply this custom class to the Media &amp; Text block in your editor.<\/p>\n\n\n\n<ol class=\"article_list wp-block-list\"><li>Open the post or page for editing<\/li><li>Highlight the Media &amp; Text block<\/li><li>Go to the <em>Advanced<\/em> dropdown section in the block menu on the right side of editor window<\/li><li>Fill in \u201coverlap\u201d under <em>Additional CSS class(es)<\/em><br><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"631\" class=\"wp-image-95745\" style=\"width: 500px;\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/overlap-custom-class.png\" alt=\"\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/overlap-custom-class.png 272w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/04\/overlap-custom-class-238x300.png 238w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"graphics\">Using a Graphics Program to Create the Overlapping Effect in an Image<\/h2>\n\n\n\n<p>If you want complete freedom in formatting the graphic for an overlapping effect, then you should consider using an image. You can use a graphics program to create your content with the only limits being the size of the graphic and your imagination.<\/p>\n\n\n\n<p>Images may also include text, but they must have metadata added in order to make them searchable.  <\/p>\n\n\n\n<p>Although it can also be quicker to use CSS code to add the overlapping effect between blocks, you are also limited to the shapes, text, and colors that you can use through the code.<\/p>\n\n\n\n<p>The main advantages of using a graphics program for the overlapping effect are that you have creative freedom and you are not adding custom code to your WordPress site.  You would simply be using an image block.<\/p>\n\n\n\n<p>The disadvantages are that you need to make sure that the image metadata is added and that you may need to obtain a graphics application to create the image in addition to knowing how to use that program. <\/p>\n\n\n\n<p>That\u2019s it!  Now,  you know how to create the overlapping effect through a graphic, or by using custom CSS. 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.<\/p>\n\n\n\n<p>If you\u2019re looking for tutorials like this one, check our articles on <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/\">WordPress Blocks<\/a>!<\/p>\n\n\n<p>Looking for more guides? We have over 400 <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/wordpress-how-to-articles?mktgp=t&amp;utm_source=id$$post_id$$&amp;utm_medium=link&amp;utm_campaign=supportcenter&amp;utm_term=wp-how-to\">WordPress How To Articles<\/a> to help you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\"> Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4524],"tags":[],"class_list":["post-95497","post","type-post","status-publish","format-standard","hentry","category-blocks"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create Overlap Blocks in WordPress | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Overlap Blocks in WordPress | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"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 &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T14:42:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-22T16:14:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How to Create Overlap Blocks in WordPress\",\"datePublished\":\"2022-05-05T14:42:33+00:00\",\"dateModified\":\"2022-07-22T16:14:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\"},\"wordCount\":776,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png\",\"articleSection\":[\"Blocks\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\",\"name\":\"How to Create Overlap Blocks in WordPress | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png\",\"datePublished\":\"2022-05-05T14:42:33+00:00\",\"dateModified\":\"2022-07-22T16:14:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Overlap Blocks in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Overlap Blocks in WordPress | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Overlap Blocks in WordPress | InMotion Hosting","og_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 >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2022-05-05T14:42:33+00:00","article_modified_time":"2022-07-22T16:14:37+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png","type":"","width":"","height":""}],"author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How to Create Overlap Blocks in WordPress","datePublished":"2022-05-05T14:42:33+00:00","dateModified":"2022-07-22T16:14:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/"},"wordCount":776,"commentCount":2,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png","articleSection":["Blocks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/","name":"How to Create Overlap Blocks in WordPress | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP-1024x538.png","datePublished":"2022-05-05T14:42:33+00:00","dateModified":"2022-07-22T16:14:37+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2022\/03\/How-To-Create-Overlap-Blocks-in-WP.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/blocks\/overlap-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Create Overlap Blocks in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"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.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=95497"}],"version-history":[{"count":17,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95497\/revisions"}],"predecessor-version":[{"id":98956,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/95497\/revisions\/98956"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=95497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=95497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=95497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}