Overlapping Columns with the WordPress Gutenberg Block Editor

[@wd1534]

I've used the CSS method and I can flip the orientation (image on the left or on the right). Without modifying the CSS code. That is perfect. Cool stuff Jamie.

[@kristynaosickova9905]

hello, i don’t know if you’re gonna notice this comment, but i really wanted to simply say thank you. thank you for what you’re doing! i’m new to wordpress and it was very confusing for me. you’re tutorials are straight to the point and you explain everything super well!!! thanks to you, i made my first website and must say, it looks good for a first one! so thank YOU :)))

[@jamiewp]

Thank you so much Kirsty - it's so great to hear comments like this 🙏 Thank you :)

[@kristynaosickova9905]

@@jamiewp no problem! you really deserve that :)

[@boxoffisa]

This guy is old to be my father but his taste of music and beats is what I wanted to see. Tell him he can adopt me if he will. 😊

[@Quynn-Oneal]

he is not that old. you are so young

[@inn8ly]

I share each and every one of these in our Content Specialist group thread. "That's pretty cool" Keep up the great work.

[@jamiewp]

thank you so much James :)

[@wd1534]

Hi Jamie, Andy from France here. Awesome tutorial! I am a beginner using only Gutenberg for now and my websites will look really cool with this CSS code. I've sold my very first website last week so I'll add this. Very nice, thank you! Subscribed.

[@jamiewp]

That's so cool - congrats 👍

[@wd1534]

​@@jamiewp Thank you Jamie. I've modified your CSS code to get a vertical overlap effect on smartphones and I've added a cool box-shadow property to get a beautiful card (3D effect) responsive on all sizes of screens : .wp-block-media-text { box-shadow: 5px 5px 10px #666; padding:20px; } @media (max-width: 640px) { .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { margin-left: 0px !important; margin-top: -120px !important; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { margin-right: 0px !important; margin-top: -120px !important; } }

[@paulhildmann8392]

Very helpful, thank you. I've made the switch from Elementor to Gutenberg and have learned quite a bit from your tutorials. Is this a better alternative to using a negative margin?

[@jamiewp]

Interesting - didn't try negative margin - will give it a spin

[@wd1534]

Hi Paul. Yes, it is easy. Just change the values of margin-right and margin-left (let at zero for mx-width:640px)

[@lanceevans1689]

Yep. Using Kadence blocks you can go: MEDIA+TEXT > KADENCE SECTION BLOCK > WHATEVER YOU WANT BLOCK. I did not get it to work with all Guten blocks because I didn't see a core container block that included the needed margin controls, as are found in the Kadence Section block Advanced tab. Glad to be able to do this. But it still bites compared to any other normal design package.

[@geraldheagney6038]

Your Videos always provide extremely useful information. Thank you for your wiliness to share your knowledge.

[@jamiewp]

tks Gerald :)

[@WineGiftBoxMaker]

oh am I grateful to have found this channel ! Thanks Jamie for nicely paced instructionals - fantastic value-added bits to my WP journey

[@jamiewp]

thanks Scott :)

[@MarieRoyal-n5c]

Great Tutorial, thank you! I used the CSS Method and when I switch the image to the left, the column block doesn't overlap. Any Tips? Thank you!

[@jamiewp]

Hmm strange - what theme are you using ?

[@gabbyl7247]

Love when your videos pop up in my inbox! If you were to play with the column margin settings, would you be able to customise the overlay a little bit more?

[@jamiewp]

Hi Gabby, good question, i'm going to try that.

[@Agileslick]

Another very useful video. Thanks Jamie

[@jamiewp]

tks Carlos :)

[@tubeymoto]

I really like the intro video and music style ❤

[@jamiewp]

thanks, my daughter Meg makes them - she's a songwriter :)

[@SuperskillsCoUkTraining]

Excellent, thank you

[@DBCVC]

Can one use adjusting the margins (negative or positive) in the in the columns block to move the photo, text, and button over?

[@jamiewp]

Hi, a few people have asked exactly the same question - I'm going to dig into this 👍

[@mattholmes4543]

This works great! Except for some reason when I have the media on the right, the media ends up overlapping the content block with the column and text. If I switch the media to being on the left, it's fine. Any ideas why? I'm using the CSS version, running Neve theme.

[@mattholmes4543]

Figured it out (with a little help from the Wordpress community). A z-index of 1 has to be added to the block of code with the media on the right to get the overlap to work properly.

[@taniagoffredo]

@@mattholmes4543 Can you tell me how you added the z-index block of code with the media on the right to wordpress (what code you used and where you put it)? I am having the same issue as you (image on right is in front of text). Thanks.

[@MarieRoyal-n5c]

@@taniagoffredo Hey there! Did you ever get an answer or figure this out? I am having the same issue

[@rmcellig]

It would be nice if there are other free block solutions. Great video. Instead of having three blocks in the second column I wonder if you can add a reusable block that already contains the three blocks.

[@EdReibsamen]

I wouldn’t see why not

[@wd1534]

I just did it and it works perfectly. Just select the column block, add it to reusable block (give it a name ), then create again a new media text block, convert the paragraph block into a column block, and insert in the column block you reusable block who contains a heading, a paragraph and a button. It works. Thank you for the suggestion, it saves my time ^^

[@debajyotinath5021]

should have shown how it displays in mobile and what changes will be necessary in mobile view

[@tomfraser3086]

Terrific insights, but I don't see alot of references to tablet and phone.....most people go to our sites on those devices and the designs that work well on laptop and desktop often need to be modified for them...

[@christopherrimplington3643]

Why not the same but w/ "Image + Column" blocks instead of "Media-text + Column"?? Wouldn´t be more straight forward?

[@wd1534]

because the media-text block is the container of the column container block + image block. If you do only image+ column, you don't have the container nor the same css attributes

[@dinorossi6611]

cool stuff

[@jamiewp]

thanks Dino :)

[@kristyatkins4317]

Why not just use HTML. If you don't know it I can see. But except where WP functionality is specifically required, from what I can see, html blows the doors off of those wp tags.

[@jamiewp]

You certainly could hand code if you are a developer but this is for non developers 👍

[@salvadorfernando4721]

Hello everyone! Has anyone here used the CSS method

[@wd1534]

I just did 5 minutes ago. It works fine. I have to change it to keep the same effect on smartphone if possible.

[@salvadorfernando4721]

@@wd1534 Did you manage to keep the same effect on smartphone?

[@wd1534]

@@salvadorfernando4721 I've tried but the smartphone screen is too narrow to overlap images from left to the right or right to the left. So the best was to overlap images from bottom to top. I add a negative "margin-top:-120px" to do it vertically and it works fine with me. Here is the CSS code : @media (max-width: 640px) { .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { margin-left: 0px !important; margin-top: -120px; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { margin-right: 0px !important; margin-top: -120px; } }

[@salvadorfernando4721]

@@wd1534 Thank you so much!

[@wd1534]

@@salvadorfernando4721 Did it work for you? It's beautiful right? I've improved it : .wp-block-media-text { box-shadow: 5px 5px 10px #666; padding:20px; } @media (max-width: 640px) { .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content { margin-left: 0px !important; margin-top: -120px !important; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { margin-right: 0px !important; margin-top: -120px !important; } }

[@gads_guy]

Just use a negative margin for overlap.

[@jamiewp]

Negative margin isn’t possible in core blocks (yet)

[@lanceevans1689]

@@jamiewp But fairly well implemented across Kadence.