Overlapping layout, image over two blocks

Hi,

Thanks for your message, glad you like our plugin.

Unfortunately, I don’t see how to achieve this kind of layout using the core blocks, even with some custom CSS.

On this demo https://demo.twentig.com/orlando/ at the bottom of the page, we’ve managed to create an overlapping effect using a gradient, but the overlap is between 2 groups ( on your mockup, the overlap is between 2 Media & Text blocks). This is a bit similar to your layout. If you are interested, I can give you the code used on the demo.

Tom

Thanks for the response! Yes, I would love to see the code. I guess I can make the media and text blocks into groups. Really appreciate your help!

Here’s the code (modified with Media & Text to fit your needs):

<!-- wp:group {"align":"full","style":{"color":{"background":"#e3f2fd"},"spacing":{"padding":{"bottom":"40px"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#e3f2fd;padding-bottom:40px"><div class="wp-block-group__inner-container"><!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Content</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"gradient":"linear-gradient(0deg,rgb(255,255,255) 0%,rgb(255,255,255) 50%,rgb(227,242,253) 50%,rgb(227,242,253) 100%)"},"spacing":{"padding":{"top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-group alignfull has-background" style="background:linear-gradient(0deg,rgb(255,255,255) 0%,rgb(255,255,255) 50%,rgb(227,242,253) 50%,rgb(227,242,253) 100%);padding-top:0px;padding-bottom:0px"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"width":220,"height":172} -->
<figure class="wp-block-image is-resized"><img src="https://demo.twentig.com/orlando/wp-content/uploads/sites/12/2021/03/home-10.png" alt="" width="220" height="172"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"40px"}}},"backgroundColor":"white"} -->
<div class="wp-block-group alignfull has-white-background-color has-background" style="padding-top:40px"><div class="wp-block-group__inner-container"><!-- wp:media-text {"mediaPosition":"right"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Content</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:group -->

If you enjoy Twentig, please rate it. It would really help me out ??
Tom

Thanks! I will!