Can I Recreate this Canva Design in the Gutenberg Block Editor?

hi i'm sure many of you out there use canva it's a great tool for mock-ups or for templates or for posters lots of stuff anyway i was playing with it and i came across this design and i thought this would be a really interesting design to try and emulate in the gutenberg block editor not using any plugins whatsoever it's a really i think it's quite a cute little design it's but it's got some really interesting features that will really help your learning when you're um learning the editor it's got things like these lovely curves on these these columns here it's also got this nice background color behind and this sort of subtle thing here and it's got these nice icons here and we can pretty much achieve all of that without any plugins this is actually what i built this is what i'm going to show you how to build uh but you're going to have some really good learning in this and specifically around group blocks and column blocks because they really power a lot of the layouts that we can do with gutenberg so here we go this is how you can do it before i jump into step by step on how to recreate this i just want to give you the helicopter view on our on the structure because i think that's really important to understand and i'm using a really cool plugin actually called editor block outline to show the structure and you can use this when you're building your gutenberg pages and i'll put a link to the plugin it's a free plugin in the description for you but this is what it does it basically lets you see you know all your blocks and it's got some cool settings here so you can increase the um so it's not changing the output it's just changing how you edit stuff so if you wanna you know this this can help you understand how your gutenberg pages are built so it's a really uh cool little plugin that you can have on show hover always anyway let's get back to the um the structure of this so you you can see here and i'm going to turn on list view as well so we can also see list view let's just turn this off so this is the structure of our basically this thing here uh and what we've got at the top level we've got this core column block so that that basically is like the outer container this contains everything so we started and i'll talk you through this in a minute by just adding one column block then within that uh you'll see here we've got a spacer that's not so interesting and then we've got a paragraph but the interesting stuff comes down here these three columns which are these these three shapes are actually columns and can you see here we've got a core column block but then in here we've got this group we've grouped the block and what that means is we can group this icon this heading and this paragraph into essentially one group why why we need to do that is so that we can actually put this background behind it if we don't group them then you can't you can only put a background behind the entire column and then we can't do cute things like this nice radius to it so that's why we do that and you'll see we've just got three columns with that in as well and then down here we've just got the button block and a spacer block to finish off so that's kind of how it's constructed it's basically blocks within blocks so we're nesting blocks you can see the hierarchy on the left but it's kind of it's a bit difficult to see from there let me take you step by step through how to do this there's a little bit of css as well just to get these nice little um rounded tops on the top of our columns and a little bit of padding but i will give you all the css as well so you don't have to do any coding if you want to recreate this all right let me show you how how to do it right let's do it so we're going to start by adding the main container columns block i'm going to flick back and forth between these so basically that whole section there with that sort of light beigey color that's our first column so i'm going to add the column block here now i'm i'm continuing to use i'm just hitting forward slash and then columns you can also click the plus sign here and do it that way so there's two ways to do it i'm just doing it the quicker way and i'm going to choose one column because this is basically my almost like my page my container block and i'm still using the block editor outline just so we can see what's going on clearly as i'm building stuff hopefully that will be helpful to you and then within this we've let me flip back we basically got some text we've got a head um let's put a heading actually so i'm gonna search for heading um okay and i'm gonna center that by just aligning it up here um now what else have we got here let's flick back and then we've just got a little paragraph underneath so you can just hit return and type your paragraph i'm going to grab some dummy text from my little lorem epsom generating thingy that i've got on chrome okay there's my text and again i just center that so that's easy stuff so far now we get to the more interesting stuff but what i'm actually going to do to start with i'm going to add a background to uh the container just so we can see kind of we've got the container and we're building stuff now there's two ways to do this but you need to make sure you select the proper level you can click on the list view here and hit columns and then we can change the color over here like so or you can use your bread crumbs down here and kind of traverse back up the hierarchy so i find a really quick way to actually work with columns if you're ever trying to edit the top level columns is just to click anywhere within it look at your crumbs down here and then just traverse up to the top level block select it and then you can change the color now we want this sort of beige color so i'm going to use a um a great chrome add-on called colorzilla which basically lets me pick any color from any web page and it will just copy to your clipboard i will put a link to it um in the dis in the description for you so you can use it if you want to and let me just change the background color here it's just a free chrome add-on so there's my kind of background color that i've got working next it's time to add these three columns okay so i'm gonna put my cursor at the end there and just hit return and then i'm gonna hit forward slash columns now again you could do this using the plus sign up here and just pulling them in drag and dropping sometimes when you're working in columns just hitting return or forward slash is the better way to do it so now i've set my grid and can you see it's telling me it's quite cool this block outline plug-in actually it's it makes life quite easy when you're working in complex things like these layouts here and then within here basically i've got a social icon i've got a heading and i've got some text so what i'm going to do is i'm going to work on one column first and then once i'm happy with it duplicate it across so i'm going to start by adding the social icons so i'm going to click on the plus to add a block search for social icons and it's this one here and this lets you add different social icons anywhere on your site so it's a pretty cool little block and you click on the plus sign and then you add your icon so i'm going to search for twitter and you have to click on it again and then put the address in now i'm just putting a hash in you would actually put the address of your twitter account in now the other thing i need to do here is to make sure i align it center now it won't in my experience of using this i think i'm using astra on this site it won't preview here align center but when we publish it it'll be it'll be all good then we've got this heading block here so underneath that i'm going to add the heading block and coming what i said follow my tweets or something follow my tweets okay and then under that i just had a paragraph block let's use my lorem ipsum gen generator again just to get some stuff in okay and that's let's just i'm going to publish as i go here just so we can so i can show you where i'm at with this okay there we go so you see how it's kind of looking okay i just need to align these two colors here but the next bit i need to do is i need to add a background and that get that nice rounded sort of arch effect that we've got here and this is how you do that so we go back to edit page and this is where the group block is so essential for us so what i'll do actually start with i'll just align these some one of the line center because i want to try and get this one right before i duplicate it and use it in the other columns so what we need to do is select each of these by holding holding down shift and then clicking and that just selects them all and then this is the key bit this little icon here i'm going to convert this to a group block and that now is a group block and you can see here it tells me with this cool little plugin that i now have this group block also down here we can see the hierarchy as well okay so if i click in here i can traverse up and that is the group block okay now there is a little bit of css that i've used uh to do those rounded corners but first and i'm going to show you what that is first i just need to grab this color here i might use a less subtle color to start with just so we can see it so making sure we've got the group block selected so if you're down at the paragraph level you don't want to change the color we have to be at the group level so again click that click into it and then traverse up to the top level we need which is the group lock you can also use these three lines here just to make sure you're actually there and now in the color section in fact let me just choose a really vigorous color okay and that's going to put a color background color behind that that group okay but the next thing we need to do is we need to add a little bit of css which i'm going to show you now and i'll put a link to in the description as well just to create that nice sort of arch effect so what we need to do and i'll show you the css quickly first and then i'll show you what we need to do to get this to work so you'll see in additional css i've just created uh this bit of css here which is that's the class and i'll show you where you put the class to make this work and this is this is basically rounding off the top um for us and then i put a little bit of padding in it okay so that's my css and you can you're free to use exactly these you know if you don't want to come up with your own css just use mine so to actually apply that what i need to do is go back here select the group block and again we can click in here traverse back up the hierarchy go to advanced and this can you see over here on the right this is where i put that class that basically gives this section like a name and then that css applies style to that name let me just check double check that that's worked so we've applied that class to that group block and now we should see that cool little archway isn't that isn't that isn't that cool it's all working nicely um actually the color's not too offensive so i'm going to keep the color just so it's crystal clear on what we're doing so once you've got your first column correct what we're going to do now is essentially just replicate that column so not the group the actual column itself so again click into the group and go to the column block because the column block contains the group and that's the one we want to duplicate essentially it can get confusing but it with a bit of practice honestly it's very very powerful and now i've just duplicated that column okay and i'm going to click into these other columns and delete those two you can just literally click in them hit um backspace and it will delete them and now you've got three columns and because i duplicated them they're all using that css class so they'll all be formatted perfectly for me and what what i would do i'm not going to do it today but i'll just go in each of these and basically edit the text and edit the social icons so we pretty much got the layout and then the final thing i did on this page which is quite a new feature with the buttons blocks i do want to show you this quickly if it should ever load here we go come on come on come on so at the bottom here i'm just going to add that button but there's a nice new feature newish feature with the buttons block this one here that um get get in touch but over here on the right you can actually set the width settings can you see that so you can actually set that to be a proportion of the container that it sits within okay so i've set that to be 100 which is kind of mimicking you know that canva design that i showed you this one here at the start whether this button goes all the way along the bottom so there we go that's how you can recreate that fairly um complex but nice elegant layout you're just using just using core guttenberg blocks and knowledge of the group block and the columns block they're really powerful in combination so i hope you found that useful if you did and you want to see more tutorials like this hit the subscribe button and if you like the video if you can give it a thumbs up that'd be fab because it just really helps share the word about what i'm up to so thanks very much and i'll see you soon

Channel: Jamie Marsland

Views: 766

Keywords: block editor, canva, canva design tutorial, gutenberg, using canva prototype software for wordpress, wordpress

Id: JcnDII7RWfQ

Length: 13min 15sec (795 seconds)

Published: Sat Sep 11 2021