How to Build Peter Mckinnen’s Photography Website using WordPress

Summary: Peter McKinnon is a popular YouTube photographer and this video is a tutorial on how to recreate his website in under 30 minutes. I start by building the structure of the website, then design the homepage, and then create the sub-page templates. I use a Gutenberg block called Parallax Effects for Gutenberg to get the subtle Parallax effect and then add the cover block with a background video. Finally, I add a heading block with social icons and style it. Here’s the video 👇

Transcript:

• (00:00) good morning Peter McKinnon is one of the best photographers on YouTube and his channel is completely awesome lots to tell there lots to make lots to create that’s all coming slow is smooth smooth is fast he also has a really really beautiful website [Music] so in today’s rapid website Recreations I thought I’d take his website and try and recreate it in just 30 minutes it’s a beautiful website let’s get into it I hit the website I’m going to try and recreate in 30 minutes.
• (00:42) I really love it and you’ll see it’s got these menus along the top here it has a little subtle logo up here as you scroll it’s got this nice Parallax effect as you scroll down it’s got this Ford GT here looks very very beautiful so I think I’ve got an idea on how I might be able to recreate that so here is my plan and like all good plans it’s written on the back of an envelope so number one I want to create the structure on the website and I’m going to do that primarily by building my navigation and
• (01:08) also setting the home page then I also once I built the stretcher I need to design the home page because the homepage has a very different layout to all the other pages so I need to do the home page second but I must do the stretcher first and number three after the home page I want to do the kind of sub pages templates I want to get those laid out so as ever on the left hand side we’ve got my website which is just a blank version of WordPress running the 2023 default theme and then over on the right hand side we’ve got the Peter
• (01:35) McKinnon website which I’m going to try and recreate in 30 minutes I’m going to start by creating the structure and I’m going to do that primarily just by building some blank pages just these the shop page the collabs page the about page and the contact page so I’m just going to go plus new here and I’m literally going to create some new pages thank you so we’ve built that now I want to go off and actually create this structure along here on our navigation using the full site editor so back to dashboard
• (02:04) appearance and editor here and once you’re in the editor just click on the W in the top left of your screen that’ll take you to the site editor menu on the left here where you’ll see templates and template Parts we’re interested in template parts so just click on that and then we just want to go to the header template part here now if we look at the list view we can see what we’ve actually got here we’ve got a group block with a roadblock with the site title block with a navigation block but actually the
• (02:25) navigation block at the moment doesn’t really consist of a menu so we need to create a menu to kind of put in that navigation block so you come down here over on the right just make sure you’ve got the navigation block selected and just click on create new menu so we just now need to add the page items that we’ve added before so we just search for shop now I’ve published these Pages which is why they’re showing a shop and we need collabs so you just search for them and WordPress will find them so
• (02:49) I’ve got the structure in place it looks nothing like we need but that’s fine we’ve got the menu license along the top here and we’ve now got the home page as the home page so I think it’s time to now try and Design This Home Page so actually looking at this I did think I was going to use the cover block for all this but it’s not going to work because these are actually proper Parallax whereas the cover block in the cover block you have a fixed background which doesn’t really do this effect how I want it so I’m
• (03:11) going to have to do a search around and see whether there’s a Gutenberg block out there that will let me do kind of this subtle Parallax effect let’s go and have a look okay after a bit of searching I found this now I’ve never seen this before it’s called Parallax effects for Gutenberg it’s not called that but it’s full Gutenberg and it seems to get good reviews from what I can see hasn’t been updated for a while but I think it just uses JavaScript not any kind of third-party library but we
• (03:34) can check on that but I think the thing to do is get it out and see whether it works in the first place so I’ve installed the plugin and let’s see how it works I think it comes as a block so maybe if I just search for Parallax there it is Parallax section so I’m guessing it just adds sections into your pages like so and then gives you some settings I’m hoping here here it is yeah cool so yeah we get that nice little Parallax let’s just see if we yeah it’s full width by default I’m suspecting I
• (03:58) can change the background image so I’m just going to save this background image over here and just run a really quick test to see whether this is going to actually fly for me so background here click on the plus and I think hopefully I can change the picture yeah cool so let’s upload that picture I’m gonna change the background opacity I guess I wanna doesn’t have so much yeah that’s bad it’s got a little bit of gradient on it or opacity yeah so now we have a we have a nice subtle Parallax so the secret
• (04:26) sauce to get this to sit flush at the top here I think is to use the blank page template so you just come to templates here click on page and then we want to choose the blank page template that will get rid of anything from the page basically it’s just going to show the content in the template you will notice that there’s this white space running along the top here now you can change this now just using the site editor in 2023 by default it’ll add a little bit of padding to the top of your blocks to change it just go to Global
• (04:52) Styles which you need to go into the templates to actually see so hopefully one day soon this will be more obvious where to find it but it’s that little icon there just click on that and there are some presets set for the layout so then we want to go to layout now it might look like the top has no padding on it but that actually does so just force that with by putting naught in and that’ll get rid of any padding from the top of that page so time to build out this page all I need to do is delete the existing blocks which I’ve already done
• (05:17) from this Parallax section and then I’m going to insert the columns block just so I can lay this out two columns this left hand column I’m actually going to put the size logo right hand column over here I’m going to put the navigation block and then the other thing I’m going to do is once they’re in place I’m going to align them to the middle now with the navigation block you’ll see it actually needs a bit of block spacing so I’m just going to introduce some block spacing side so
• (05:40) and then the final thing I’m going to do is I’m going to line these to the top so this little icon up here you can actually align the content to the top and you’ll see it’s now aligned nicely to the top and the final thing I’m going to do here is actually add a little bit of padding to the left and to the right of my menu okay so my attempt is on the left looking pretty good this font is a bit heavy there’s this lighter Peters is lighter so I can change that in the typography settings but now we move on
• (06:05) to this section down here which I’m just going to replicate What I’ve Done essentially I’m going to add The Parallax section a background image and some text over the top of it so let’s start just by fixing up this text here it’s a little bit bold whereas Peter’s is much lighter and nicer so I’m going to go down to typography make sure you selected the navigation block and just choose appearance here and now you can select here different appearances now you’ll see there it’s gone nice and
• (06:29) light so that’s cool that’s done let’s go back to this next section here and I’m just going to duplicate my first section for Speed because I’ve got some settings in there kind of that I’ve already created that I don’t need to recreate there’s is my second section and now I can jump in here and actually just remove some of this stuff in here you’ll see it put the default text back in here but that’s all right we can change that the next thing we need to do is just align the text in the center
• (06:51) we’re going to edit that text in a minute but first i’m going to replace the image so click on the Block settings click on the little pencil click replace here and now we need our Ford car so I’ve changed the text here so it’s got the right text Stars aren’t quite right though so let’s go and fix those up the Topography is still probably a little bit small so we can make those a little bit bigger here and we probably want it thinner again so let’s play with that that’s pretty nice we’ve got this big
• (07:15) gap here where I want to make this text yellow here so again we can just do that by changing here now I’m not choosing the exact text but that’s probably close enough and it looks like it’s bold to me is it bold let’s make it bold and see what that looks like we have this big gap here so this is where we look at line height here so choose that one there choose line height and we want to reduce that down you see and now we’ve got them more Square so we’re pretty close actually letter spacing isn’t
• (07:37) quite right there as well so we should be able to change I think yeah a letter spacing here so let’s add a bit more that’s a spacing between the letters pretty good and now it’s just a question of repeating the process [Music] foreign [Music] next up we’ve got this really cool
• (08:39) YouTube section here with a background video playing and we are going to use the core Gutenberg cover block for this because that supports background video I already have a video pre-prepared and this will just play without any sound and I just need to make this full width I think here we go it’ll start to play now you might see some discrepancy between The Parallax section block and the core gunboat blocks it’s just an editor thing it’ll look fine once it’s actually published so I’ve added the
• (09:05) text and spaced it just like I did in the previous block and it looks pretty good and then the final thing I need to add is just this section down here which I’m going to do with the heading block and the social icons block so I think I’m going to actually put this in a group block that will just give me a bit of margin control because I don’t want it flush to the block above it so I’m going to add the group block this is new this is so you can choose these layout you want I just want that layout and
• (09:29) then all I need in here is a heading block so I add the heading block type my words I will style these in a second but within the top level group block rather you can actually come in here and you can set a top margin so I want to go margin here and then I’m going to go this option here and just add a top margin see how I’m just adding a bit of space now then I want to align it using our little align tool up here and I also want to style it because it’s there I want it thinner so I’m going to
• (09:57) go appearance basically what we did before so and then I want to go thin text and that looks pretty cool it’s not quite right probably want a bit of lettuce spacing actually let’s add a bit of lesser spacing as well now we could do this globally as well for our headings but I haven’t done that today and then underneath this I’m just going to add the social icons block so probably YouTube and I will style these as I go actually now style them at the end so I’m just going to put in false links today so
• (10:20) that’s YouTube and then I’m going to add another one after this so just make sure you click on the social icons block to add new ones and then we want we’ve got Instagram I guess and again I’m going to put in a false link here and I will just repeat the process for those but before I do that I’m just going to show you how you style them so you can change the icon color here that’s how you change the icon color and the background color as well so I’ve just got my nice icons there and
• (10:47) that looks pretty good to me I’ll probably want a bit more no the spacing’s all right actually so I’m just going to add the other icons and that’ll pretty much be finished then here is the finished page my attempt is on the left the official website the real website is on the right and I’m pretty happy with it looks pretty good that Parallax section is pretty cool it’s very subtle but it’s nice it’s not too crazy so as we scroll down you can see we’ve got Parallax working there there’s Paris
• (11:09) coming up see The Parallax working then we’ve got the Motion Graphics section again looking pretty cool that little Pete’s part life section looks oh the text isn’t bold enough but I could have replica I could have rectified that pretty easily and then we’ve got this cool YouTube section here his is a bit higher than mine I could have changed that in the cover block but looks pretty good and then finally at the bottom we’ve got this little social icons follow section so all in all for 30 minutes work or just under
• (11:36) actually I’m pretty happy with how things turned out I would probably give myself seven and a half eight eight and a half out of ten that time there was some quite challenging stuff hope you enjoyed it I hope you found that really useful I didn’t actually have time to build the shop page on the product page but I’ll be looking at e-commerce sites in the future so subscribe if you want to see those tutorials I just ran out of time today thank you so much for watching if you can like this video it’d
• (11:57) be amazing because it really really really really helps spread the word of the channel and also every time you do hit that like button below our cats get a little treat [Music] so thank you again for watching if you want to see more videos like this hit that subscribe button keep well and I’ll see you soon bye for now