Overlapping Columns with the WordPress Gutenberg Block Editor

good morning today you're going to learn how you can create beautiful overlapping columns like this using the gutenberg block editor block of the week block of the week yeah block of the week which block is it going to be well you will have to stick around my friend and maybe you will see [Music] to create this overlapping column effect we're actually going to use the normal gutenberg media and text block which is just a core block that comes with gunberg this is what it looks like when you first get out the bag and use it it's quite useful it has an image on the left and then it allows you to put some text on the right but i'm going to show you how you can transform it into something much more exciting where you have these overlapping columns so this is a great example and you can see you can also change the orientation of them as well and within this box we've also got a mixture of blocks so that's a really good trick i'm going to show you how to do that with the media and text blocks so let's get into how you actually do this there are two ways to create the overlapping column effect i'm going to show you both today the first way involves code and some css now i will put a link in the description of this youtube video below to where you can go and grab the code it's just some css that you pop into the customizer so you can see on my screen here you go to additional css and you just drop the code in there the second way that you can create the overlapping column effect is to use our gutenberg pro plugin which does lots of things but one of the things that lets you do is create these overlapping columns with a click so you can choose which way you do it the procedure on how you actually create this overlapping effect are both the same whether you go down the css route or whether you use the plug-in route and that's what i'm going to move on to next okay there are just three simple steps to create this overlapping column effect regardless of which way rick which route you take the css group or the plug-in route they're both kind of the same from now on so i'm going to show you with the plug-in but it's the same procedure whether you're if you're using the css so i'm going to create a new page here this is what i want to end up with and let me just give it this a title so i know what i'm dealing with and then i'm just going to add the media and text blocks so you click on the plus sign find media and text which is that one there and i'm just going to add it into my page when you add the media and text block it's going to ask you to upload a photo and then over on the right here add some content i'll come back to that so i'm going to upload a photo in fact let me just choose one from my library that's the photo i want to use and just select that then that will bring that into your page and then over on the right here it's going to ask you some to add some content so don't add any content this is really really important because if we add content then all we've got is a paragraph block whereas what we want to end up with here and this is the secret source really to creating this this is actually can you see how we've got the same background color and we've but we've got three blocks within this to illustrate better what's going on as we're creating these overlapping columns i've just done two simple things i've turned on list view on the left here this that's these three lines that just shows us the blocks we're using and the hierarchy of those blocks i've also turned on a plugin called editor outline which just puts little borders around all the blocks makes it really clear to see what's going on so here we are here's our media and text block it's added the image and can you see over on the right here this is actually a paragraph block so don't put content in that what we want to do is we want to change that paragraph block into a columns block the reason we do this is because the columns block is a container block which means that we can put multiple blocks within it and can you see on my example page how we've got this lovely one background color behind all these blocks this is this is actually a heading block this is a paragraph block and this is a buns block and that's because this block is actually a columns block so that's kind of the secret source to getting one of the steps to get this effect so hit forward slash and then just type columns and then you transform that into a columns block okay now we really just want one column so we're going to select the one column option and can you see over here now we've got medium text but we've now got our nice columns block with one column within it and now we can start to build out this content so i'm just going to copy and paste for speed today but the beauty of this is you can put any blocks within this so i'm going to start with a heading block and just pop my heading in and can you see over on the left here now we've got the columns block with one column with one heading within it i'm going to add a paragraph block underneath i'm just copying and pasting underneath here uh that's my paragraph block can you see there but i could if i wanted to i could add any blocks within this this kind of section that i'm building over on the left that's why we create it as a collins block and then underneath here i just need to add the buttons block so i could drag and drop it using the plus icon the quicker way is to hit forward slash and then type the name of the block you want to add add the buttons block and to link a buttons block you just click on it and you get this little little link icon and that's how you add the buttons block and then you can style it over here on the right because again if we look at our hierarchy it's just a block so we can you know we can do all sorts of cute stuff to it so there's two other things we need to do to get this overlapping the first is we need to give the whole column a background color and because we're using the columns block adding a background color is easy because it's just part of gunberg so just make sure you select the top level columns using your list view here and then over on the right here go to color and this is the option we want background color i'm going to use a custom color which i've already got which is that one there can you see how now the whole section this is why we added the column has now got a background color one background color the second step is we just need to create that overlap now if you're using the gutenberg pro plugin you just select the top level media and text block here and you'll see this new option which is overlap click on that can you see how it now overlaps the image if you're using the css method this will happen automatically for you but you won't see it in the preview you'll only see it once you publish it the other thing nice thing you can do with the media and text block is you can flip the orientation you just select the top level media and text here and over here you can actually play around with these the other really cool thing you can do with the media and text block is you can drag this little middle slider like so to change the size of the image and the orientation of you know your text box so if you want a smaller image and larger focus on the text you can literally just drag this little slider in the middle and place your heart's content so that's really cool as well and then the other option you've got is to change where this box actually goes with the media and text block you have these options so just make sure you select the top level and then you come over here and click on this little icon here and you've got a line top middle or bottom on this particular theme it doesn't seem like the bottom is quite the bottom for some reason but i suspect that's a theme issue but there you go so you can actually change where you want that to appear my suspicion is most of the time you want in the middle but you do have those options that are just built into the media and text block if you want to add another one a really quick way to do this is to select the whole media and text block and duplicate it like so and then you know you could also change the orientation on this one if you wanted to and replace the image and the text so it's just a quick way of working so there we go that's how you can create beautiful overlapping columns just using the gutenberg block editor and the media and text block i really hope you found that useful it's one of my favorite effects so give it a go if you enjoyed this video i will love you forever if you can give it a thumbs up and if you want to see more gutenberg tutorials hit the subscribe button because i'm producing two or three a week at the moment and we're going great guns thank you so much thanks for watching and i'll see you soon

Channel: Jamie Marsland

Views: 1,007

Keywords: gutenberg, wordpress, gutenberg wordpress, gutenberg wordpress editor, overlapping columns, columns overlap, elementor overlapping columns

Id: D2JqFiommgM

Length: 8min 4sec (484 seconds)

Published: Thu Oct 28 2021