https://youtube.com/watch?v=b6wucz0JPCM
Music, a big thank you to SEO press for sponsoring today’s video SEO press is an exceptional, WordPress, SEO plug in that boosts your website visibility on search engines. If you want to upgrade your SEO game visit SEO press org today in today,’s video, I’m, going to recreate the Bob Dylan website in under 30 minutes Music. So over on the left is my website over on the right is the actual website. The first thing I’m going to do is go into the dashboard, then appearance and editor, and because the Bob Dillan website has a very, very unique front page that’s different to all the other pages on the site. I’m going to go into templates and add new template here and what I’m going to do is select the front page template. That means I can have a very different front, page layout to the rest of the website. So now that’s loaded in I’m just going to close down the choose pattern panel and I’m going to start by adding a header and one of the beautiful things about block themes. Now you can see over on the right of my website on the sort of right hand, column. I’ve got all these different choices for my header layouts and I can just click on these and in one click the layout of my header will change, and this is the one I want, because I want to put a background video behind my header and This uses the cover block and that lets me add a background. Video behind I’m just making a few little changes here deleting the site logo, because I just want to use the site title as you can see over on the right. There’s no logo, that’s just Bob in’s name and then what I’m going to do here is open the list View and I’m – going to click on the navigation block and just make a few changes. I’m going to make the text a little bit smaller, just really finessing the layout to make it look fairly close to the Bob Dylan website. I’m not going for exactly the same but as close as possible within the time limit that I’ve got and then because it’s a cover block. I can select the background video and you can see it’s loading in there and then I’m just going to select full width and full height for that. I’m going to choose that little Matrix option which basically puts my navigation right at the top. So now we’ve got the layout not far away actually and I’m using the spacer block. So I can actually choose where I’m going to put my heading. So now I’m just going to write the words in the heading paintings and sculptures, and I’m using the H2 block for this, and then I’m just going to align that center. Now here I’m going to choose the right size. Well, roughly the right size and I haven’t really sorted out the fonts. Yet I’m just getting approximately the right size trying to replicate over on the right. You can be much more precise than I’m being here, but I’m trying to work relatively quickly just hit return, and then I’m going to put my little subheading underneath by Bob Dylan and then I’m going to align that using The toolbar just to align that Center, so the layouts not exactly the same, but it’s. Pretty close. I’m going to move on to this section underneath now, so I’m just going to scroll down and hit return, and you can see over on the right that’s, the section I’m trying to accomplish, which fundamentally is just a two Column layout with a image in the left hand column. So I’m just going to click on the plus sign and add the image I’ve already pre loaded all these images and there’s Bob. So I’m just going to select him in there and then I’m just going to full speed. I’m just going to copy and paste text over on the right. You’ll, see when I paste this in it’s not quite right in terms of formatting, but I’m going to sort that out next, I’m going to select the columns block and I’m going to align the content in that Columns block vertically centered and then I’m, going to select the columns block again using the breadcrumbs as you can see, as I’m doing down below, is a fantastic way of doing that and I’m just to set the background color black there. We go now. You’ll see there’s a little white Gap and that’s, because naturally there’s some margin put in the columns block. But you can remove that just by selecting the colums block and taking the margin back down to zero, and here I’m going to try and finesse the text slightly. I’m not going to get it exactly right now. Normally what I would do with these, which I’m, going to show you a little bit later is. I would make changes to these in the global stars, but just to show you quickly now you can see you can do things like change the line height. The letter spacing the size of the text, but again I’m going to do these globally later, which is the better way to do them for maintainability and then. Finally, I’m just going to add a bit of padding to the top and the bottom. You can set individual paddings for top and bottom, but I’m going to choose a uniform one so that’s pretty close. It’s not exact, but it’s not far away at all. So I’m going to select the cover block again and hit return that’s a great quick way of doing it. We can see the layout underneath here with Bob on a train staring out the window, and this essentially again, I think, is probably just a cover block. So I’m going to add the cover, block and add a background image behind that. Now you can see there’s a few differences on this one. We’re going to remove that margin as well at some point, but I’m going to take the opacity down because when you add a cover block, it naturally adds some opacity to help make your text stand out. I’m going to remove that and I’m just going to copy and paste my text in over on the right now when you copy and paste your text in it’s going to assume in this case it’s a paragraph, but I’m actually going to transform this using that little icon there to a quote block, which is one of the cool things you can do in the block editor. You can transform certain blocks to other blocks and then I’m just going to change the text again. You can see the letter spacing and the line height, isn’t quite right, but frankly we’re not far away for a few minutes work. So it’s pretty it’s pretty good, and I’m just going to make a few style changes here. I’m going to fix the background, so this gives you a sort of pseudo parall effect you’ll, see when I make this cover block the full height in a second, using that little icon there, you can see how the background image is now fixed To the back, which isn’t a true Parallax, but it’s actually in my senses it’s actually a really nice way of doing it. So that’s not far away at all that’s, pretty good, let’s scroll down. So I’m going to select the cover block again and hit return, which is just a really quick way of adding a block, and you can see we’ve got a three column layout, so there is a bit more complexity to this one, because we’ve also got discover artwork that we need to add in so I’m going to show you a neat way that you can do that, where you can have three column layouts, but you can have a heading that’s sort of independent of those Three columns, so I’m going to start off by just adding in each of those columns the images which I pre loaded. Now the one thing you can do when you’re, adding these images, you can fix the aspect ratio which is fantastic for maintainability, because if you set the aspect ratio and then you change the image, it’ll maintain the aspect ratio. So I’m setting these all to exactly Square. So if they weren’t Square, they would take those proportions. So it’s a neat little trick that you can use that all sorts of ways – and I’m just going to add these three images and there we go there’s, my third image and obviously the background color is wrong and I also need To add a heading, so what I’m going to do is select the columns block first and I’m going to change the background color to the black color. Underneath the image you can see that there’s little headings, so I’m. Just writing some text paintings and I’ll just basically style these as well. So I’m going to change the letter. Spacing you can see how you can go in and change the letter spacing on all of these and for Speed. What I’m going to do is just duplicate these by using the list view, so you can see up there. I’m just clicking on the three dots and duplicating and then dragging it into the second column, and then I’m going to go off and do that again for the third column and that will maintain the formatting that I just changed and it means I just need to basically retype the text to the correct heading and it’ll maintain that formatting and I’ll have everything. Looking exactly how I want. I’m just moving the image up on that one cuz it when I dragged and dropped. I didn’t quite do it in the right place, so there’s, sculpture and then the final one is lyrics and drawings and you can see how they’re, naturally stacking. When I resize the screen, because we’re using the columns block, they will be intrinsically responsive, they will just stack naturally for whatever mobile device they’re being viewed on. So this is the bit where I’m, going to show you how you can add a heading, but almost like it’s within the same grouping. So I’m, adding a group block, as you can see here and I’m going to justify it left now within that I’m, going to add my heading itself and just type my text. It won’t be the right font at this point, but let’s not worry about that. We’re just trying to get this where we’ve got this black background behind the whole section and then what I’m going to do is open the Styles over on the right and I’m, going to set the background to that. Like so, I’m going to change the text color to white. Then I’m going to select the group itself and I just need to remove the margin on this, because we’ve got those little white spaces above and below. Like so, and also on the columns block, you can see we’ve got a little white space here, but what I’m going to do here is just add a bit of padding to that group to let it breathe a bit. The words can breathe bit and then all I need to do to finish off once I’ve sorted out my text size and letter spacing and finessing. The text, like I’ve done before, is in a minute. What I’m going to do is remove that white space like that. Just select the columns block itself and then remove that white space, and then we go that’s, pretty close. It’s not exact, but it’s. Then we move on to this section underneath, and this is another great way of adding blocks if you ever get stuck with adding blocks. You use the list view just select the list View and go add after and you can see over on the right. This is what I’m trying to achieve, and essentially again we’ve just got a simple two column layout, so I’m just going to copy and paste my text from the left hand column over there and we’re just going to paste That into that right hand, column, like so, and I’m going to change the text size again to small again. I would set these globally, which I’m, going to show you how to do a little bit later on just so, we can keep the flow of this one. I’m going to keep going this way and then I’m going to select the image and you probably guess what’s going to happen. Next, I select the columns block itself. I’m going to change the vertical alignment M like so, and then what I’m going to do is using the styles again. I’m going to change the background color to Black change, the text color to white and then all I need to do make sure you select the columns block itself again and I’m going to remove the top and bottom margin and there we go That looking not bad at all, oh, I’m also going to add a little bit of padding into that as well. Just to let it breathe a bit like the real website over on the right, you can see. We’ve got a what looks like another cover block with a fixed background, but can you see how we’ve got much more opacity? So there’s a much more of a you, can barely see the image behind it. So I’m adding the cover block and adding the background image like so, and what we’re going to do. Next is we are going to fix the background like so just fix the background, make it full height using that little icon. There click on Styles and we’re going to basically add some overlay opacity. So I’m going to change the color overlay opacity and that’s looking pretty accurate and you can see how it just when you’ve got white text against that. It’s going to make the white text stand out much more, so the overlay opacity is really useful when you’re using the cover block and you’ve got text in there and you want to make the text stand out and pop and it’s not getting confused with the background now all I’m going to do as you probably guessed, is, remove the margin to the top and the bottom, and that’s not bad at all that’s pretty good, and then we’ve got This final section down here, which is the Bob Dylan rail car, and you can probably see again that’s just simple two column layout and I’m going to add an image over in the left hand column like so there we go there’s, The rail car and then for Speed I’m, just going to copy and paste this text. Let’s see what happens it’s, one of the really nice things about the block editor. Is it’s really great at handling copying and pasting text and it’s uh it’s doing its best on actually sorting out, which is which, which is great, so I’m going to line it vertically again, I’m going to change The text color to white on these a text and then in a minute what I’m going to do is I’m going to make sure I select the whole columns blockers again and I’m going to set the background color to black. Pretty good that’s, not bad at all, the text is a bit all over the place, so I’m going to just finesse that up a bit again. I’m working really fast here, so you take more time over this. I just want to show you what’s possible within the limited time of the video again, I’m doing these individually, which I wouldn’t recommend. You should set these globally and I will show you where you do that in a second, but I just want to keep the flow going for this for Speed. What I’m going to do here is a little soft return, which is useful, just hold down shift and then hit return. If you don’t want to have like a paragraph line, break it’s a useful thing, you can do in WordPress and then the final thing at the bottom is this sort of footer area where it says, manage cookies, copyright, right, Etc, and this is Pretty straightforward: this is just I’m just going to copy and paste the text, and then the final thing I want to do here is that that add that little separator line, so I’m going to use the separator block to add that in and That’s kind of completed, looking really good. Let’s have a look at the whole page now, so there we go there’s the there’s the site that’s, the top of it. Looking pretty good the text, isn’t exactly right, but I’m going to show you where you can change that and finish it a bit more here.’s, the second section that’s pretty good mine, isn’t quite deep enough. So I’m just going to actually go and change that this is how you can be a bit more precise, so add a little bit of more padding around. It is one way to do it that’s not far off that’s pretty good, and then we’ve got this section down here with Bob staring out of the train window and then scroll on down. We’ve got this three column layout, which I that’s pretty spoton, that little two column layout, pretty good. My text, isn’t right, but it’s not bad. For the time. I had that little section there and then the final rail car section with the footer below overall, I think for whatever that was about 15 20 minutes. I’m pretty happy with that. That’s a pretty good effort. One of the nice aspects of the block editor now is the zoom out view so that little icon that I’ve clicked on in the top of the toolbar, and it gives you a zoom out view. So it’s a much easier way. You can see your work and there we go there.’s, my there’s, my finished page, looking, really beautiful and – and the next thing I want to show you is how you can select the font. So what this is, this is a little Chrome add on that. I’m using here called what font and basically you can activate it and then go on to any website, and it’ll actually tell you what fonts that website is using. I will put a link in the description, so you can use it yourselves. It just saves you having to inspect the code. It’s a really quick way of doing it to see what fonts and you can see the fonts that the Bob Dylan website is using here so uh it’s using Spartan and now in the block editor, you can add these fonts yourself. It’s really easy to install fonts. So this is me just installing those fonts, so I use exactly the same fonts or the same font, families at least that the Bob Dyan website is using. So I’m just installing these using just call WordPress. This is built into every single WordPress website. Now I’ve selected The Heading font and now I’m going to choose the text font. You can see here that I’ve already installed it so now I can actually select it for which elements of the site I want, and there we go there -‘s monster r, so that’s now selected. I can also change everything here globally. So these are Global style changes, so I can set the the height the line. Spacing the letter spacing everything here and then I can choose my heading font as well here, if I want to so. This is where you can set it globally. Just a few more little tweaks before I finish, one of the things I want to do is my site title. You can see in the top left of my site where it says Bob Dylan. I want to increase the letter spacing on that to like make it look a little bit more like the real website, so I’m just going to play around with that increase the letter spacing and then I also want to select the navigation block itself. Go to Styles and just to make a few little tweaks. Here again, I’m going to change the letter spacing on this one, because I want it a little bit those words to breathe a little bit more there. We go that’s looking pretty good and I probably just want to bump the size down a little bit. I think again you can play with these. Obviously so your heart’s content that’s a little bit small, let’s bump it up! A bit let’s have a look at that that’s pretty good. I think it’s still a bit small, but it’s it’s not far off. Is it let’s have a look at the final site. Then now, with my new fonts that I’ve installed globally, that’s looking pretty good, let’s just save that and let’s go to zoom out view. Here we go here,’s the site and I’m pretty happy with that. For but not very much time at all, we can replicate the Bob Dylan website and it’s got some it’s got some really nice features, but it’s also very simple and very elegant. Looking pretty good and let’s just test it on mobile, this is what it looks like on mobile and because we’re just using core blocks, pretty much everything works. Intrinsically you can see here. This is the first screen you see the top of the page with the video playing behind it. It automatically flips to a mobile menu, let’s scroll down and you can see how those columns are automatically stacking, so everything actually haven’t done anything in terms of you know any CSS tweaks to this all, but everything’s looking pretty much perfect Out the box, I don’t think I’d want to change very much at all about this, for a mobile, so overall really happy pretty good and here’s a final look at the zoom out View and I’m going to scroll down The page, so you can see there’s Bob playing above, let’s scroll down. Looking looking pretty great, if you enjoyed this video as well, if you can hit the like button, it’d be amazing, because it makes a huge, huge, huge, huge, huge difference in terms of how many people actually get to see this video. So thank you. If you can hit that like button and also every time you do hit the like button, our cats get a little Music treat. If you want to see more videos like this hit the Subscribe button and you’ll be notified every time I release a new one. Thank you. So much for watching keep well, and I’ll see you soon. Bye, no
As found on YouTube
Truth or conspiracy? You decide . . .
yoseamorosk69team
