Rapid Website Recreation

Recreating a famous photography website.

Learning outcomes

1. How to design your home page
2. How to design a vertical menu
3. How to use the Gutenberg Navigation Block
4. How to use the query loop block to create a gallery
5. How to create a sticky navigation menu
6. How to create the single post page layout

Comprehension questions

1. What are the key elements to consider when designing the home page?
2. What are the main components of a vertical menu, and how do they contribute to user experience?
3. How can the Gutenberg Navigation Block be used effectively in a website’s design?
4. What is the query loop block, and how can it be used to create a gallery?
5. What are the steps to create a sticky navigation menu, and why is it useful for a website?
6. How can you customize the single post page layout to improve user engagement?

Transcript

Good morning in today’s 30 minute Rapid website recreation challenge. I’m gonna try and recreate this beautiful photography website by James Popsys.

Here’s a famous YouTube photographer, one of my favorites, actually. Very laconic and funny. This is actually built on Squarespace, so it’s an interesting challenge. It also has some interesting technical challenges, one of which is this left hand vertical menu that is sticky. So as I scroll down this page, this menu over here, this navigation remains stuck to the top.

Also, when you click on these images, they open into these full screen, well, almost full screen, beautiful photography images. So I’m gonna attempt this challenge just using core Gutenberg. Try not to use any plugins. I might need a couple actually, but we’ll see how we go. And I’m gonna use the 2023 default WordPress theme.

That’ll enable me to use the full power of site editing. So as ever, over on the left is my clean WordPress website, just using WordPress, and over on the right is a screenshot of the James Popsys website, the website I’m gonna try and recreate in simple terms, my plan is to create a new page template for this layout over here on the left.

And then change the layout completely. So I have a vertical left navigation. I’m gonna try and use the sticky position attribute that is now in Gutenberg to make this sticky. That is coming into WordPress 6.2 as well. So that’ll just be rolled out. For these, I’m gonna use posts. So each of these photos is actually gonna be a post, which I’m gonna customize, so we hide.

Stuff when we actually go and view the post itself. So the first thing I need to do is go and create these as pages over here on the left. I’m just gonna create these as pages. I won’t put any content in them for now, and then I just need to go and create all these as posts and add a featured image for each post.

Okay? So I’ve created all those posts very quickly on all that quickly, but here they all are. And you’ll see I’ve just added a posts for each one and for each one there is a bit of content because I wanna show you something. But for each one, it’s fundamentally all I’ve done is add a featured image, cuz that’s actually.

Or we’re really gonna display on them. I’ve also added those pages as well. What we’re doing here really is building the skeleton of the website. If we go and look at it, we’ll see. It’s still kind of what you’d expect from WordPress. It’s still just a classic blog to start with. Our challenge now is to turn it into this.

So let’s dive into the site editor and start to redesign this homepage. So I go edit site at the top here. I’ll bring me into my page templates. I click onto templates, and I’m actually gonna utilize this one here, the homepage template, which is now with the 2023 theme. Super useful, let’s you customize the homepage, and so I’m gonna edit this.

Click on edit. And now I can just redesign this page pretty much. Anyway, I like, let’s click on the list for you to see what we’ve got to start with. So we have a traditional header, which I don’t want actually, so I’m gonna remove that in a minute. Then we have this group down here, and in there will be a number of blocks.

The most important one for our purposes today are gonna be the query loop block, and we also have a footer as well. Now the James Pops website is shown as two columns over here on the right, but actually that’s because I squished it. This is what it looks like on a full screen desktop, which is actually three columns that.

Is useful to know because I’m gonna use three column layout in a few seconds. So you can see, actually, see we’ve got a three column layout already in our group layout here, so I could leave that. But actually I’m gonna just delete it. Let’s just delete everything from this page. Essentially, I’m gonna delete the header as well, so I’m removing the header.

So I’m basically starting with a blank canvas. I could remove the footer as well. In fact, let’s do that. So we just start with a completely nice, clean canvas. Now we can lay this out. However we like essentially. So I’m gonna start by adding a Columns block, because essentially I want two columns. This left hand column over here, and then actually this is just one column.

We’re gonna use the query loop block itself to add those three columns within that column though. So I’m gonna start by adding the columns block. I’m just gonna type in columns and that will find the Columns block. And then I want to choose this layout here, which will give me that sort of layout I need.

Actually now we can change those. Width of those columns if we want it to be more precise. But for speed today, I’m kind of happy with that, and that gives me that column layout. Then over in this left hand column over here, I’m gonna add my navigation block and the site title. And in this right column over here, I’m gonna add the query loop block.

Right? Let’s start, so I’m gonna start by clicking the little plus sign here, and then I’m gonna search for site title, which is just there, and that’ll bring in my site title. It’s not quite the right size, so I’m gonna just make sure I select it. And over here on the right, I can actually change the size of that if I want to.

And I can also change the font if I want to. In fact, let’s do that now. So click on those three dots. So we want Serif Pro, that’ll get us closer to James’s sort of title. Then underneath that, we’re gonna add the navigation block. Now, the quickest way to do that is just hit return, then type forward slash, and then navigation, and then hit return.

You’ll see it finds it up here for us. Just hit return and that adds it into your page for you. And you can see it over on the right now. At the moment, it’s just a page list, so we actually need to turn it into a menu. So you can just click into the block itself and you’ll see a little edit link up here.

Click on that and that’ll now turn that into kind of a traditional WordPress menu. You’ll see it listed over here in this page list menu over on the right, and you can actually now drag these around to change the order of them. You’ve probably noticed they’re in completely the wrong direction. They’re going horizontally at the moment.

To change the direction of your menu, just make sure you’ve got the navigation block selected over on the left. And then come over to the right click on this little cog and you’ll see this orientation thing here. Just click on the down arrow. And now our menu has gone vertically aligned rather than horizontally.

This is one of the benefits of Gutenberg core using Flexbox. So we’ve just got one little issue to fix, and that is the line height is too big on my site compared to James’s site over here on the right. So let’s come over to the styles option here, and you’ll see there’s this line height option just there.

And you’ll see it’s 1.5 at the moment. Let’s just reduce that down a bit until we’re sort of. Happy with what we’re looking like. And I think that’s probably good enough for now. And then all we need to do is add these little social icons. What have we got here? We’ve got YouTube, Instagram, and Twitter. So I’m gonna click on the navigation block and I’m gonna go insert after.

So it’s super useful, the insert after function, especially when you’re dealing in columns, actually. So rather than trying to drag stuff in there now I’m just gonna go forward slash and social icons. That’ll add the social icons block. And then I just add the social icons. So what did I say? We’ve got, we’ve got YouTube.

At that block. Now we can style these in a minute, and you click on it and then put your YouTube link in. I’m putting dummy links in today, and now I just need to change the size, the color, and the spacing. So to change the size, come up here and click on size and let’s go small. We want some more ones And come over here to styles again.

And I want to change the background color, which is gonna be white. So I come background. Let’s choose white. And the icon color itself is black, so let’s choose black. And now all I need to do is change the block spacing. So you can see, you can drag it up, but as soon as you drag it down, it actually gets some small as well.

And there we go. There’s my new little small, tiny icons looking pretty much identical to James’s. So there’s my left hand menu looking pretty good. There’s a few issues, like padding is certainly an issue. It’s too tight. To the edge of the page. So I’m gonna change that and it’s also not sticky at the moment, but I’m gonna sort that out once I finish up with this query loop block over on the right hand side of the screen.

But just a recap. Here’s James’s website, which is a three column layout over on the right here, and you’ll see them, they’re different sizes of these photos, so it’s not doing anything mathematically clever. It’s just basically assaulting them by size as you go down. So it’s not like a sort of masonry layout.

It is a masonry layout, but it’s doing it primarily because the images are different sizes. So let’s flip back to my website, right Time to get out the query loop block to create this nice page layout over on the right. So I’m gonna add a block. I’m gonna search for query loop. Let’s add that into the page.

I’m gonna start blank. There are some presets, but I’m gonna start blank. And the one I’m gonna choose actually is image, date, and title. That’s gonna have some extra stuff in there I don’t want, but I can get rid of that. And the layout’s wrong. So I’m gonna click this little icon up here that turns it into a grid.

So now we’ve got our three columns, and if we look at the list for you, we’ve got a column over here, that’s our right hand column in there. We’ve got the query loop block in there, we’ve got the post template, and in there we’ve got the post featured image. That’s actually the only block we want to keep.

So we’re gonna get rid of the post date. Let’s remove that one. Let’s remove the post-it. I’m actually gonna make these square as well because there is a certain issue at the moment with the query loop block, which is kind of cool as well. It’ll align each row. So that just creates some extra space, which we don’t need.

So I’m gonna make these square, and then all I’m gonna do is I’m gonna click on the query loop up here, and I’m gonna click on that little icon and I’m gonna say I want nine images to come in, which is all I’ve got at the moment. We’ve got these extra gaps in here. Which I don’t really want. I found a strange workaround for this.

So click on post template and come to typography. This is a bit odd, but then we can actually change the size here and it seems to remove the gap. Not ideal, but I think that’ll be cleared up in a future release. The other thing I want to do is just. Changed this patternation down here. It’s a bit tight, which I’ll add a bit of space, but it’s also not centered.

So I’m just gonna gonna click on this little icon here and I’m gonna justify it. Oh, there’s one more thing as well. On the post featured image, [00:09:00] it’s essential that we click this little option here, linked to post. So here’s my site on the left. I’ve actually changed the orientation of the photos just so we can test out the sticky navigation.

You can see at the moment when I scroll up, This navigation isn’t sticking to the topic. It’s lost. And the second thing I need to fix up is to add a little bit of padding. You can see this left hand navigation here is too tight to the side, so let’s go and fix up the sticky navigation.

So it turns out that the sticky attribute that’s coming in WordPress 6.2 isn’t available when you are working within the Columns Block, within the group block, which I’m still asking the guys that are developing Gutenberg about. So as a short term fix, I’m gonna use this plugin called Sticky Block for Gutenberg editor, which I’ve used before.

Which should work. It’s a shame I can’t just use Core, not quite sure what’s going on. But let’s activate that plugin and now we’ll go back to the site editor and make that navigation sticky. Hopefully all I need to do is add the sticky block and then put all my stuff on that left hand column within it.

So I’m gonna add the new block. I’m gonna go insert before again here. Where’s it gone? Let’s going set before, and I’m just gonna add the sticky blocks. So four slash sticky. There it is. And it’s a bit like a container block, essentially. I’m gonna chuck it in this left hand column. Now I’ve actually put my content in here in a group, and that’s kind of sorted out my padding anyway, so I’m just gonna put all that stuff within that sticky block like, so I’m gonna try and drag it in there.

Let’s see if I can drag it in there. That should work. And now you’ll see it over on the right. We actually have some sticky settings. If I stick on, if I click on sticky, you’ll see they were over here. But that should, now when I save this automatically, let’s go back to the website. And let’s scroll up.

And now can you see how that’s sticking to the top of the page? Now you can also adjust with this plugin, you can adjust the size of this gap up here that you want it to stick to as well, which is one of the kind of nice reasons for using the plugin as well. So it’s looking pretty good. The only thing I’m not quite happy with, Is the width of this first column.

There’s quite a gap between my navigation. Let’s see if we can go and fix that up. One of the nice things about the Columns block is you can adjust each individual column width, and you just do that by clicking on each column. You’ll see I’ve clicked on the left hand column over here, and over here on the right you can see the width is 33.3.

And if I click on the right one, you can probably guess it’s 66.66. So let’s just this first one, I’m gonna take this down to 20. And I’m gonna take the second one up to 80, like so. And now we have a much smaller gap on the left than we do on the right, and obviously you can play with those around to get the proportions that you want.

Okay, so here’s a look at my homepage. I think it’s looking pretty good. Very similar to James. This apart from the image proportions, but when I scroll down here, you can see how my menu on the left here, this vertical menu is sticking. I’ve actually increased the gap up here. So it’s got a bit more room to breathe as I scroll, looking really, really nice and elegant.

Great for a photography or portfolio. Website works fantastic on mobile as well. You see as I scroll down here, as I make it smaller, how it automatically flicks into a mobile [00:12:00] menu. And these go into a nice one column layout. So the only other thing I need to do to finish this off is the single post page.

That shows that beautiful full screen photo. So this is James’s single post page and it just shows a photo essentially, but it also has the navigation over on the left here currently is my single post page. I’m hoping this should be fairly straightforward. What I’m actually gonna do is copy the existing page template for my homepage.

I’m just gonna columns here, click on the three dots, and I’m gonna just copy that. Now I’m gonna reuse that on the single post template, so I’m gonna go, where is it? Copy block there. And then I’m gonna go back to my templates. I’m gonna locate the single template, which is the single post template, which is just that one there.

This is the existing one. I’m gonna delete everything from here cuz I don’t want any of this on my page. Remove it all. And I’m just gonna paste in my existing one. Now I’m gonna go into the second column here. And adjust that. So to keep things simple, I am actually gonna delete the existing query loop block.

So we can start from scratch. Uh, I am actually gonna add one back. So just add back a query loop block. I’m gonna start blank. I’m gonna add this one here. The image, date and title. There’s a lot of stuff in here I don’t actually want, but all I need to do here is select one item per page, like so. You’ll see it’s bringing the title down here.

I can get rid of that if I want to, and I can probably get rid of the date as well, cuz we don’t really want that. What I’m really after here as well is this Patternation block down here. Let’s just center that. Shall we click on that little icon there and. Center that. So now dynamically we should have images coming in to our single post page, but being able to toggle them down here, finished result, you can see I can click on this little pation thing down here and it takes me elegantly to each next picture.

So overall, I’m really, really happy with the finished result. I think for about 25 minutes, it took me actually less than half an hour. We’ve got a really interesting, beautiful portfolio website with a left hand sticky navigation. Thank you so much for watching. I hope that inspired you to have a go yourself.