I researched 1000 WordPress designs, and here are my top 20

In this video, I explored the Block Patterns that are available on WordPress.org and I pick out my top twenty.

I also breakdown how each design is accomplished using the Gutenberg Block Editor.

Transcript:

• (00:00) good morning today I’m going to show you how you can recreate these [Music] on wordpress.org now there are over 1 000 block patterns that you can use on your own website for free so I’ve gone through all 1000 and picked out my top 20. what’s really amazing about block patterns is just how easy they are to use and reuse on different websites so here we are on the wordpress.
• (00:35) org website if I see a pattern I like this one down here I can just click copy then I go to my website and I literally click paste and that pattern is now in that page and because it’s just using call Gutenberg I can edit everything all these don’t use any CSS and no plugins whatsoever if you want to test these out for yourselves then you can go to wordpress.
• (00:56) org and see the block patterns there but I’ve also put a link in the description below where you can find just my top 20. right without any further Ado let’s get into the patterns [Music] coming in at number 20 is this fantastic page design here what I really love about this though is this photo overlap effect this is done with no plugins and no CSS whatsoever let’s go behind the scenes and see how they actually did this so on the left I’ve got Gutenberg the block editor on the right for reference I’ve got the actual website
• (01:26) but all they’ve done is add a cover block and then they’ve set an overlay gradient on top of that cover block background image you can see this here they set a background image which is the left hand line and then down here in the block settings they’ve just added an overlay opacity and then basically graduated that opacity so it fades to white but put the two points right in the middle so you get this very distinct line check out my previous tutorial if you want to see how to do this in more details but it’s a really really simple
• (01:53) effect and then to get this image here all they’ve done is add an image within the cover block and set that image using this little Matrix here to be center right [Music] next up is this lovely frame effect again using no plugins and no CSS whatsoever so we’ve got this lovely Yellow Frame we’ve also got a graduation from the bottom here so it’s darker here where we’ve got the call to action so it is at the top so let’s go and have a look how they’ve done this one but it’s a really creative way of using Gutenberg
• (02:23) I wouldn’t have thought of doing this way so essentially we’ve got two cover blocks that’s all they’ve done the first cover block has a background image and a yellow overlay opacity a second cover block has the same background image set to it it has this overlay going from black to transparent at the top so we get our eyes are drawn down to this section here which is really great and then to add the border around it on the first cover block they’ve added a little bit of padding down here in percentage and you’ll see
• (02:53) as I drag this wider you can see how the frame effect actually comes to play so you can play around with the color and also the size of the frame that you want foreign is this nice simple call to action section here great use of colors to draw your eye to where they want you to go to let’s go behind the scenes and see how this has been built it’s pretty straightforward stuff with a few nice touches let’s look at the list here and see how this has been built so we start off with a group block at the top level
• (03:22) which just has a gray background color assigned to it then within that we have a two column Block in the left-hand column we have a heading block here and another heading block underneath so we can set different colors and then in the right hand column we just have two buttons the other thing they’ve done in the right hand column though they’ve set the alignment the vertical alignment to be in the middle so those buttons over on the right there line up and then to customize the button what they’ve done
• (03:49) the key bit really is down here they’ve set a different radius for each of the corners going from top left to top right to bottom left to bottom right and they set those as 35 30 but obviously you could jump in here and change the buttons you see how that button now has a more curved Edge but the overall effect is really cool [Music] this next one is a really clever way of using the overlay color effect that you get built in with the cover block let’s go behind the scenes and see how they’ve done this one and essentially what we’ve
• (04:24) got if we click on the list view we’ve got a cover block with other blocks within it and all we’ve got is a group block and then within that we’ve got a core heading another cool heading another cool heading they’ve added different core heading so you can have different colors on each heading block I think they’ve probably planed around with the line height here as well and then a paragraph block and the buttons block but the key bit let’s close down the list view is on the main cover block
• (04:46) itself they’ve added this amazing overlay because you can have multiple points that you create within your overlay picker see they’ve got multiple points here they’ve got a white point a yellow point because you can set the color for each point essentially and a black point there and the Black Point there and a yellow point there and this is all this is doing so if I change the opacity slider here can you see what’s happening it’s basically just turning that overlay on and off [Music] this is a great example of how simple
• (05:18) can be really effective it’s a pretty simple layout but what I really love about this is this highlighted text feature which I don’t think everyone knows about but it’s built into Gutenberg now so I want to show you how you can do that if you want to on your own sites so here we have Gutenberg over on the right let’s quickly look on the list view just to see what we’ve got so we’ve got a group block where the background gray color there is a subtle gray color to that has been applied then
• (05:41) within that we’ve just got a Collins block but this is the bit I want to show you how to do so you select any words you like then you come up here and click on this little more Arrow here and then just choose highlight now you can choose the text color and you can also choose the background color so if I click on the Color Picker let’s choose a very lurid pink color and there you go that text has now got a background to it it can be abused so be careful how you use it [Music] this next one uses the mysteries of the
• (06:12) cover block to create this nice window effect so essentially we’ve got two pictures and it looks like we’ve edited the pictures to show different sections of it but actually we’ve just used the cover block and fixing the background let me show you how this one works it’s really cool so here we’ve got Gutenberg again over on the left and let’s look at the list view just to see what we’ve got so we’ve started off with a group block and we’ve set a background color to that group block and we’ve also added some
• (06:36) padding to the top and the bottom but within that we’ve got a columns block within the left hand column we have this cover block here now the secret Source here is when you set the background image you need to select fix background so we set the same background image for each of these columns but we set the fixed backgrounds and that means it’s hard to explain but that means basically it’s going to show like a window effect onto those two columns it’s a really cool and simple effect to do you can add
• (07:00) multiple columns to get even more windows as well if you want to foreign could be used for a Services page and what’s really nice about it is nice design but these nice little Corners again and how they’ve achieved this let me dive behind the scenes and show you how this one has been built so on the left here you’ll see in the list view we’ve just got a group block at the top and we’ve set this sort of off yellow color and then underneath this we’ve got a Collins block which is this block here
• (07:31) and then underneath that we’ve got these four columns let’s close this down now so we can see it but the key Secret Sauce to this is they’ve essentially let me just select one of these so you can see what’s inside it we’ve actually got a group block inside that and they’ve set a padding but the key bit is down here they’ve set a different radius on the group block they’ve also obviously set the background color for that group block but the key bit is down here they’ve set
• (07:54) a different radius so you’ll see oh that corner there has no radio set on it but if I do set a radius on it let’s go for 90 radius can you see how it’s changed the proportions of that group block very simple to do but a nice way to accomplish it [Music] this price is page layout uses the columns block really cleverly to create this nice simple design it might look simple but actually it’s quite complex how they’ve built this let’s go behind the scenes and see the block editor so I’ll
• (08:27) make this a bit bigger so it’s easier for us to see so essentially we’ve just used lots and lots of columns but at the start here at the top level we have the group block which has a background color of that nice light gray then within the group block this is where the columns start to go a bit crazy but it’s really smart we’ve got the first columns block which is the main columns block and then within that we’ve got essentially two columns the left column is pretty simple we’ve just got a couple of paragraph
• (08:51) blocks three paragraph blocks and the right hand column we have got a whole bunch of other Collins blocks because we if you think about it we’ve got the second column but we need to space both the description and the price out and they’ve done that by adding Collins block within that but within that we’ve got further columns so you’ll see if I click on this we’ve got uh two columns within that which is basically that text there and that text there that’s how we get those two columns at the top level on this right
• (09:17) hand column within the column we’ve actually set a background color so if I click down here you’ll see the background color for that column here is set as orange and then the other thing they’ve done they’ve added a radius down here on each of those column blocks so you can change the radius to accordingly to change the design [Music] the next one might be the cleverest one of the whole 20 actually and I still don’t fully understand how they’ve achieved this so if you want to use this
• (09:47) I recommend you just copy the pattern and make your changes here’s what I’m talking about this amazingly clever progress bar effect again we’re not using a plugin for this or any CSS this is just using core blocks the secret Source seems to be over here within this column I’m not going to go through every single column of this because it would probably take about an hour but essentially you’ve got columns and groups and within this column they’ve actually set a background again using
• (10:11) this background opacity to change it here so if you wanted to change the direction of this like I’m doing here you could just drag these points along to make it less or more I’ve kind of broken that one but you get the idea this is how they’ve done it they’ve just used the overlay Color Picker to create these effects so you can change the colors you can change the proportions it’s a bit of a mind you know what but it’s incredibly clever foreign [Music] box just using chord blocks again let’s
• (10:40) go behind the scenes and see how this one’s done it’s pretty straightforward nice use of the group block so over on the left we’ve got Gutenberg and you’ll see the important stuff really we’ve got a cover block and we’ve set a background overlay on that actually you could probably just use a group block for that but within that we’ve got another group block here so we’ve got essentially two group blocks this white group block here and this gray group block down here and we’ve just set different colors for
• (11:05) those within the first group block you’ll see if I open this up we’ve actually got some columns I’m not quite sure why we’ve got columns but we’ve got essentially we’ve just got a whole bunch of stuff heading and then some paragraph blocks and a buttons block and then we’ve got the second group block but the key bit here to get this working you might need to change the margin between these two blocks and you’ll see if I click on the second group block I can go down here there’s the background color but the key
• (11:30) bit is down here we’ve got a zero margin for top and bottom and you’ll see if I increase that it increases so depending on your theme you might need to play around with that zero margin make sure that set is zero [Music] this is actually one of my favorites because it’s so simple but so effective this is actually designed by Brian Gardner a very well-known designer within the WordPress world it’s really simple to do but it just looks beautiful there’s so much lovely white space to let you breathe this is how it’s built
• (12:03) and there are a few things to note essentially we’ve got a group block at the top level then we’ve got two columns within it so fairly simple stuff within this First Column we’ve got this nice bit of big text fantastic and then we’ve got this little paragraph underneath here and then we’ve set that paragraph to a line to the right it’s a simple thing but it just takes it to the next level in terms of design then we’ve got the second columns block over here with essentially two paragraph blocks and the
• (12:27) buttons block but the important thing in here is up here we have set or Brian has set the vertical alignment to be at the bottom of the Collins block which is why it’s down here [Music] this is a really clever and cute way to do cutouts within your pages the clever bit is this yellow border that comes around here and this piece of content cuts into the page cuts into the picture we’re not using any CSS and we’re not using any third-party plugins can you work out how this was done let’s go behind the scenes and see Gutenberg so
• (13:01) we can work it out essentially all we’ve got though at the top level we have one cover block and we’ve set the background image but within that cover block we have two group blocks this is how it works now the first group block we just set a background color over here on the right and we also change the padding on the top and also the right you’ll see why then if I increase the padding can you see how it increases the padding and more of the second block or the first block the first crew block shows through let’s set that back to one
• (13:28) although I quite like 17. now this we also on this one we set a radius on the top right here as 3M again you can play around with that radius you can put in different values the more you put in the more curvy it gets essentially then we go to the second group block this is where we actually put our things like our heading and our paragraph but to get this effect we also don’t add any padding on this one but we do need to add a radius to the top right [Music] here is a nice simple idea for a hero image could be used for a call to action
• (14:00) or in this case a quotation can you work out how this one was done you may be able to by now it’s pretty straightforward let’s go and have a look behind the curtains at Gutenberg to see how it’s being built essentially though it’s pretty straightforward we’ve just got a cover block with a columns block within it that has been set to show on the top left within the cover block up here using the little dot matrix but the important stuff the secret source is the cover block let’s select the cover block
• (14:23) up here has an overlay applied to it and you’ll see the overlay is here it’s gone from black to basically transparent which you can set in the overlay picker which I’ve covered before so check out that tutorial if you want to learn how to do that if I change the overlay opacity here you can see how that is working and if we want to change the angle all the colors we come in here and you can see I can just play around with the angle here to get different effects nice and simple but looks great [Music]
• (14:52) I spent a long time looking at this next one working out how they did it because this yellow isn’t part of the background image it’s really smart it’s actually using blocks there are blocks let’s go and have a look at this one really clever again let’s look at the list view because that’ll show us how it’s all been built let’s make this a bit bigger essentially we’ve got a group block at the top level then we have a Collins block that Collins block has a background image apply sorry background
• (15:14) color applied to it but the secret Source here is within each column we have some stuff we’ve actually got this First Column has this group block which has a background color applied to it but this is where it gets really cute it has loads of padding applied to it like 400 pixels that stretches it down you’ll see if I reduce this it comes down so you have to put this in manually rather than using the little slider because the slider doesn’t give you enough value it’s not expecting you to go that crazy
• (15:40) so that’s the first thing you add some padding we’ve added a background color and some padding to it but then we come down to the radius here and we just set a radius pretty massive radius to the right hand Edge you see if I reduce this it goes back to square so you can play around with the radius to get the effect that you want and then essentially we’ve got in the middle column we’ve got some blocks essentially we’ve got a heading block and some paragraph blocks and a button block the same thing happens in
• (16:04) the third column let’s look into that we’ve got a group block again here and we’ve got the same thing we’ve got a top padding of 150 let’s remove that down so we can squish that down if we want to or we can increase that again if we want to if we wanted a longer bit of stuff and we’ve also got a radius here but to get that position what they’ve done within that columns block this is the key bit here they’ve changed the vertical alignment to bottom and essentially that’s what
• (16:31) they’ve done with this top one as well in this columns block they said all blocks aligned to the top foreign because it really shows the interplay of design and Gutenberg essentially where we’ve got this layout here where we’ve got a laptop with a textured image behind it and some text over on the right but what’s clever about it and it’s not that clever but it kind of is clever from a design point of view this image is actually one image this textured background and this laptop is one image
• (17:01) so if I drag it you’ll see you can sort of see there that’s actually the image and you can see how the textured background is part of that image this is how it’s been built essentially we’ve got a group block at the top level and a background color has been assigned to that group block then within that we’ve got two columns blocks in the left column we have our image with our texted background now because it’s set as transparent PNG this image basically the background shows behind the laptop that’s pretty much it and
• (17:27) then in the right hand column we have our text and then that’s duplicated down below [Music] it is a cute idea to make your titles more interesting the cute bit is this overlapping title up here can you work out how this was done we’ve seen this before let’s go and have a look at how this was built in Gutenberg essentially what we’ve got here is we have a group block and within that we have the cover block and then within that we have our heading block but within the cover block this is the secret source and you won’t be
• (17:58) surprised to know we’ve actually got an overlay in this now you can’t really see it here but essentially we’ve got an overlay that goes from transparent to non-transparent Let’s remove this can you see how that’s working so essentially we’ve knocked out the background image by using a transparency to Overlay that on top of that sorry a white on top of that not a transparency a white on top of that so essentially we have white here and we have this color here the image is still there but it
• (18:21) looks like it’s not there because we’ve added this graduated effect over the top of it foreign how about this for a cute hero section can you work out this one let’s go and have a look at Gutenberg to see how this one has been built so what we’ve got is we’ve got a group block at the top level and then a background color has been set to that group block and within that group block we’ve got some blocks we’ve got a heading block and a paragraph block and the buttons block but at the top level group blocks
• (18:52) as you’ve probably guessed by now we have a background gradient and we set the color here and the color Pickers here set where those colors go so you can see I can make this thinner or wider but the key bit is these color Pickers have to be right on top of each other so you get that nice sharp edge you can also change the angle though how cute is that [Music] there is nothing very complicated about this next one but it’s really nice because you have lots of white space we have a big heading and we have these
• (19:25) nice interesting placement of images the subject certainly helps let’s go and check out how this is built in Gutenberg there’s nothing particularly complex in the block editor it’s more around how these designs have been placed so here we’ve got the block editor on the left all we’ve got is a Collins Block in the left hand columns we have this image block here that has been set to the top of that column using the alignment option up here so it’s been set to the top then underneath that we
• (19:53) have this paragraph it looks like a heading block actually it’s just a paragraph block with a large font size over here and it’s been set as appearance black because we have these extra options in here then in the right hand column all we’ve got here is one image and all that’s happened on that image is it’s being placed using the vertical alignment again in the columns block this one here to be aligned at the bottom [Music] something a little bit different now we have this nice Gallery with a read more
• (20:24) button down in the bottom right what’s nice about the gallery though it has the same duotone filter applied to it so we get a nice consistency for all the images let me show you how this was built this is Gutenberg over on the left and you can see we’ve just got a group block at the top level that’s the main container block and the background color has been set as black in that block we have the gallery block with each of these images as a separate image but a duotone filter has been applied to each
• (20:51) of those images and you can see here that is where the duotone filter is applied if I click on that you can see this is the one that’s being applied you can choose your own colors and you can choose one of these different ones over here and then underneath that we actually have a Collins block you could probably achieve the same thing now I’m guessing using the roadblock but we’ve got two columns and in the right hand column we’ve got the buttons block [Music] and then at number one this is my
• (21:20) favorite example of a layout I think it’s so clever if you stare at this for a long time can you work out how they did this again no CSS no third-party plugins what’s really clever is these images here and especially this image here how it’s dissecting or rather bisecting this block here and this is how it’s achieved let’s click on the list view because that unveils the secrets of this so at the top level we have a group block but the secret Source on this is we have a background set here
• (21:47) 50 50. we’re using the gradient overlay again where we’ve got Blue to White essentially that gives us this nice background now within that group block we actually have in the left hand column we have an image block up here and within underneath that we have a heading block and down here we have a paragraph Block in the middle column though we have this image over here but that is set to show in the middle and we do that by going to the Collins block the middle columns block and choosing this little icon here and just changing the vertical
• (22:16) alignment to be aligning the middle that means that will now align vertically in the middle and then in the left hand so in the right hand column we just have a heading block a buttons block and an image block fantastic design quite simple when you look at it actually but really really clever oh the other thing that this has on each image it actually has a border a white border of 10 pixels that gives us that nice sort of radius so you can see how you can play with that as well so you can experiment having more padding or less
• (22:42) padding on your images thank you so much for watching I hope you found that useful remember if you want to use any of my top 20 you don’t have to recreate them from scratch you can just go and download them and edit them there is a link in the description to WordPress block pens and there is also a link to my top 20.
• (22:59) thank you again for watching if you enjoyed this video if you can hit that like button now it would be amazing because it really really really really does help spread the word of the channel and also every time you do hit that like button our cats get a little treat [Music] foreign [Applause] [Music] if you want to see more videos like this hit the Subscribe button and the little bell icon and you’ll be notified every time I release a new one keep well watch one of these two videos and I’ll see you soon bye for now [Music]