Learn WordPress 5 by building a landing page | Sandra Dudley | Skillshare

Learn WordPress 5 by building a landing page

Sandra Dudley, When code and design collide

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Lessons (1h 16m)
    • 1. About this class

      1:10
    • 2. Before we start

      3:35
    • 3. Understanding blocks and rows

      1:59
    • 4. Walking through WordPress 5 interface

      6:25
    • 5. Sneek preview of landing page

      2:03
    • 6. Let's build our first block

      3:20
    • 7. Let's create a section with a title and image

      8:15
    • 8. Let's add a section with image on one side and text on the other

      4:31
    • 9. Let's create a photo gallery

      4:17
    • 10. Let's create a slider

      6:27
    • 11. Let's build a 3-column layout

      3:00
    • 12. Let's add some icons

      5:09
    • 13. Full-width, full-height header

      8:13
    • 14. Buttons sliding through other sections of the page

      6:39
    • 15. Let's add a parallax effect

      2:53
    • 16. Let's make the header responsive

      4:57
    • 17. What if you use a different theme?

      2:53
    • 18. Thank you!

      0:16

About This Class

The best way to learn is to practice, so this class is a hands on exercise that will help you understand and master WordPress 5.

After walking through its new interface and explaining WordPress 5 new concept - blocks, we will be building a landing page. Step by step, I'll show you how to navigate through your document structure to create a stunning responsive web page.

I really encourage your to take time, and pause, replay and practice during the classes. The more your practice, the better at it you'll get!

Thanks for taking this class and I am looking forward to seeing your work!

Transcripts

1. About this class: whether you are fighting with virgins or if you are new to work, press this club will help you to familiarize yourself with what Press five. Together we walked through its new interface and learning its powerful features. While it's building and landing page, you'll see work, prestige and gray to create flexible layouts. So by the end of this class, you will be able to design beautiful, responsive Web pages with little to no Cody. Make sure you look at the prerequisites before starting to make sure you have the necessary set up to full the class really and courageous during this class attack. Time to explore what press as we go along. The more you practice, the easier it'll gets. My name is Sandra. I have been working as a front end developer and graphic designer for over 10 years. Everything I learned I'll only through Internet experience and great Mendel's. So I really hope you like this class and learn a lot from its. If you have any questions or comments, please do tell me, and I can't wait to see your pages 2. Before we start: wear some prerequisites. People starting this class, you need a self hosted version. Off press will need to be ableto upload themes and at new plug ins during this class and use the latest version of WordPress as we speak 5.2 pointer. If you work on a different version, the interface might look slightly different, but hopefully not too much, who will based lending page under the fourth team installed WordPress 5 2019 However, if you're planning to make changes on the functionality of the website, it is best practice to create a child theme. Child Team allows you to change small respects of your size appearance He had still preserve your themes, look and functionality. It is important to make site changes on the child team so that even a parent team gets no update. You will affect the changes you created. Basically, a child thing is a great way to create a unique website without having to start from scratch. I've created a child him you can download called Lending 2019. It is really basic. The only fancy additions I added rpech templates called lending and also a bit of JavaScript. So it is possible to smoothly scroll to a section on the page. This child him would only work with 2019. If you really have a theme and want to create a child him, you have to either do it manually or via a game to activates the same, go to the dashboard and click on appearance themes at New Activate Landing 2019 Chuy's in. They're in mind that for a child seem to work. You need to make sure that your parents is installed in your WordPress install. Don't go dating it or your child team won't work. We will try and use the default blocks him still with Press five. However, some projects will help us enhance even more. You pages Takeda's blocks plug in offers a lot off customizable blocks. I like in particular, is really out block as it allows a lot of flexibility in terms of Rayo couldn't Slider is a great plug in that enables you to create stunning slighter. It can contain images, but you can also add text on them again. This is very flexible. Simple Lightbox is a great program, very simple that enables you to open images in a pop up over my window once he's told, you don't need to do anything with it. All you need is to make sure your images are linked to their attachment page, and the right box will take effect automatically to instill it's going to the dashboard. Could it? The plug ins and click on Add New than in the search box. Search for the street begins ticking store and then activate lawyer. Epsom gives you some random generated text. I used this to feeling paragraphs when I don't have official text ready yet for the images , you can download them from free website like picks. Obey. The main one that we will be using is this one, and I've created a mobile version that you can also download here. 3. Understanding blocks and rows: Bruce WordPress versions, you really could add the content on the page or post was basically a Texas now also known as a classic. You could add text. You could add images. You could even embed videos and short calls. But if you wanted to break out off the layouts and have, for example, of section with full with the major multiple columns, this could prove to be quite tricky. Now what Press five has a new editor, and it's called Gutenberg Editor, which is a block based editor. So let's talk about blocks blocks her collection off reveals page elements that can be customized. So, for example, a paragraph can be a block and a header is a Serb bloc. You could have a whole section that is a block, and inside the section you can have other blocks inside. Those are nested blocks. What's talking about message blocks? I need to talk about rules when I say your rule. Think like a table like you'd see in Excel, so a rule would have multiple columns, and that would be a block. And inside of which columns, you can have message blocks like a header like a paragraph and imagine released and you can even put another room. This is a very important concept, as we are going to use Rosa Lots West building our landing page. There are a lot off different blocks that are available Body falls and this is some great plug ins that offer even more block options, and we will explore. Some of them were moving our landing page. 4. Walking through WordPress 5 interface: when we're in the dashboard. What press spy doesn't look much different than previous versions? So that's other new page by clicking on pages and then go to add new, there isn't love yes area where you can add the title of the page. So let's say Let's call its life a spay judge using WP five. And then there's a obvious area where you can start writing some things. Well, let's start writing something theses a paragraph, not presenter, and it shows the cursor is moving against. So this is I can also write something else. This is another paragraph greatest fine of managed to create two paragraphs. But what if I wanted to add heading or if I wanted to add a new manager or any other kind of blocks like you know or rule like after cough mission before or forties? You need to add a block, so there are various ways of doing it, and I will show you different ways whilst doing building our landing page. But let me show you a couple of ways very quickly. So you've got Theo obvious place here. Whether is a plus sign at the top, and he says Adblock. When you click on it, you can see all the various blocks that are available to you. You've got a whole such you've got a whole array of blocks are available to you by the fools when you install WordPress five. When you school down, you've got very stops here that you can open to discover even more blocks. If you know which one you're looking for, you can also search into the search box here and say, if you are, if you're looking for heading, he can start typing heading and you can see it here on. Then once you click on it, the heading appears at the bottom of your contents and this is my heading. Another cool way after in This is if you know which block you are looking for. It's actually stopped. Type starts typing it. So if you type four slash and then say if you're looking for an image, you start image, you type image and she can see that this block appears. Imagine click on it and then there you go. You will be able to import an image from there, so those are a couple of ways I will show you all the way stirring, you know, during the other lessons. But I wanted to show you the rest of the interface very quickly. So at the top, we've already explored the president to add blocks the other buttons on the right inside off this prez button, you've got STI under button, which is also controls that, Oh, common that if you were on the back. So this is absurd to undo what you just did, and then you've got reader. She's control, Sheets said to redo what you do to redo where you've just done you for the information button as well that show you the structure of your content so you can see how many headings and paragraphs and was that you put on how many blocks have been using, if that's of any interest to you. That button there is an important but and it's a block navigation, and we will be using it a lots while building the landing page. When you click on it issues you all the various blocks that you've been using on the page, and this is very useful when you want to jump to a block that is at the bottom off the page , and she want to edit it without having to scroll down the page or so if you want to check where you are within the pace, just to make sure that you are not editing the wrong Brooke. So if I click on that second paragraph here, you can see that the second paragraph has bean highlighted, so that is great. On the right hand side, you can have you have the button to preview the page. So this is when you want to look at the page without a dating it or without publishing it. And then you got the publish button that is when you pitch is ready to be published. Invisible to the whole world. This is a Sony potent one. This is the Cox sign that opens that toggles open and closed the advanced settings. So when I click on it, you can see that the panel on the right hand side houses appeared, and then when you pick again, then the panel has appeared. This panel dental setting is also very important. It allows you extra custom is ations off the page and the blocks that is currently selected so you can see here at the top Your guts to tabs one is for documents and one is for block in the documents stuff you can, uh, you can dual the various prohibition jobs that you'd usually do. So you can, you know, said the visibility can change the featured images. Well, you can have country insert on page attributes as well, um changed, pummeling, changing the your well slug as well. So those are the very things that you can do and in the block settings. If you don't have any block selected, it will just say no blocks elected. But once you are on the block, then you will be able to see extra settings that to customize, to be able to customize a block, and that we all come into tubs that you can expend or close when you select a block the results of a bar at the top that gives you additional settings that are not available on the adverse sitting panel on the right inside. So, for example, for paragraph you'll be able Teoh change the alignment, the text alignments, and you can also make sure you can also make a word. Boulder, Italy cannot lings and you've got also a more options button where you have all the section that that will be using later room. 5. Sneek preview of landing page: So let's have a sneak preview or what we're going to be building. So the Landing Bay she's going to start with a very strong header. Food with full height with a big title and some buttons are willing to other parts off the page. And as you scroll down, you will be able to see that lovely parallax effect where the Baghran image moves at a different speed than the text. Then it will be followed by a paragraph with large text, a three column layout with images that has text over late on top of its, followed by a section that has been more texts that can have some links and image where the text can rock around. It's a lovely slighter that you can navigate and the images fade into each other. Another section with very strong images and texts from one side and imagined the other a gallery where when you click on the images, the images Thean Mages pop up in the light box, and again you can navigate through each of the images, using the our navigation and close the page in the X sign and finally, a nice bar where you can put all your social media icons of you will know where to follow you with all those of different sections that have different functions. And as we are building the landing page, we won't be building it in the same order as they appear. But in order that will help you understand. How would press five works, okay? 6. Let's build our first block: I'm going to at the block that is called Row. By clicking on a plus here you can scroll down and then you can see that here there is in you tap that appeared called cadence blocks. And this is where all the blocks come With the cadence problem clicking on this, you can see all the various blocks are available and we are interested in the one called roll layout. When you click on it, you can see a menu where you can be fined a number off columns that you want to use with this for layout. We are interested in just one rule for the time being. So let's click here, which is the one rule tonight. He might not be very clear where we are within the documents, everything is wise, you know, you can really see the container. So this is where the navigation structure is quite useful. When you click on there, you can see that you have the ruling out, which is our container or our section and within the ruler. Yet we have just one column and inside the column you have the paragraph. So when you click on the rule here on the right. Inside, in the advance menu, you can see all the different settings that you can change on the so on top of the block, he can see all the different things you can change if you say Let's the column. You can see all the sections, all the settings that you can change on the right and above the block and again similar when you select the paragraph here. So I'm going to add some text. I like to go to the Loom Ipsum generator. Nowhere maybe's, um, those io for sash generator. Let's let the first line here and then I'm going to cooperate and I'm going to place it into my paragraph Now. Within the paragraph, you can see that there are some things that you can change. I am going to make the text larger, so 40 she can see on the right inside you can. The front size is currently set us no more. Speaking from here, I am going to change it too large. You can see that attacks as we come larger. So let's have a look. Click on previews and now you gets you first block. Okay, I'll make sure that I'm selecting my column, so I click inside there and look into my block navigation. Click here and make sure that I select the ruling out here looking at all the same things here. I am interested in looking inside the structure settings, and you can see here that I can sets the maximum width off my contents. So I'm going to say something like 1200 pixels maximum. Let's preview. Consider difference. Now you can see that the column is much narrower. 7. Let's create a section with a title and image: Let's creates another section with a bit more tax and within Imagine side, making sure that you are on the top level so you can see There you go, you relay outstay you've created earlier. We're going to create another room with some content inside. It's not. I have a paragraph here, an empty paragraph and I want to add a row so I can either click on the plus here and as my rule layouts days, either in my most used or in the cadence block tab or I can type for stash role here and the block is going to appear. So I've created it. Take on it and again, I want a one column somebody. I need a bit more text. So going back into my lower abs ERM generator, I'm going to say that this whole paragraphs here copy this and then I'm going to paste. It has plain tax or just paste. It's middle matter. There's and I've got this very long paragraph. So I want a title and I want a couple of paragraphs and any match that will be where the text can wipe around. So to create the header that, let's say the header would be Norm Epsom here. So I peek after luring Gypsum and the press answer, and it just creates a paragraph for the rest of the documents. Has put a Capital D, even though it's not worry a sentence. So this would be my header and then I have this from paragraph. I'm just going to breaking into go in the in the middle, roughly in the mirror off the long paragraph. Present her again and I have two paragraphs here. So festival these were My title is is currently set as a paragraph. So when I click on the block Navigation here, you can see the have created in my room with one column and I've got three paragraphs. But I want this to be a title. So for these, I can change the block style. Some blocks can be transformed into other blocks, so when you are inside the partner style, you can click on this section where it says change block type or style. Click on there and you can see that you can transform this into headings laced. First perform Aarti performances and cause s O. I am going to choose Advent setting and you can see. Now that's my text has become a header that has the hate em attack off Taster. We some help here the moment you can see here that I could set it up. Us heading three are heading for 56 and try. But I'm having with heading to cash in Texas diamonds, you can change your text color. It said it to blue. So selects here. And I changed through here. You could pick any other random colors that you've got here, but I'm happy to have it in group. And let's look at the aginst typography settings. You can change your it s spacing if you wanted to. I'm happy without these at the moment, and I am going to change it to upper case and I have my title inside a paragraph IQ and add slinks. We just select the text where you want to have the link, and then you can click on this icon there at top, which is a you which probably family with that, you can see in various tax editors like only males. Word click on that and then you can type in the euro where you want to go so I'm going to press hash, which is an anti link. If you click on the link, it would reload the page. Well, you need to make sure is to apply the link. If you type in the link and then click outside the text, you can see that the league hasn't taken effect. What you need, Teoh is apply its fight, selecting the text, clicking on the link for opening your link, and then press on the arrow here to apply it. And you can see now that I have a link. If you click on the little pencil here, you can aided the link. You can change during their and if you take on this hour here, you can also decide whether you want to open the link on the same page or in a new tab. So let's take care to open on a new tab. Now I want to add an image, and I want to text to wrap around the image, and the image would be right at the top off this paragraph, and then I want this photograph to wrap around. It's so for these. I need to create first an image block so I want the image block to be in between this paragraph and STIs heading. So what I can do is with this paragraph selected. Click on the more options and then I can insert before and I will insert the block before the paragraph. Now I have a block here, and what I want is an image. So I type pain for a slash image. They're on a click on image, and you can see the outcome in certain image. So let's go to Media Library and select the first image. Three counts, elects, and I have my image block so that if you previewed a page, have the first paragraph, the first block that were created and you got the seconds you've got. Imagine some text you got your link but the Texas and wrap around the image source of what ? I'm going to make the measure bit smaller so you can see around this image. There are some who handles. Just click on one of them, and then you can just resize it to a different how to smaller dimension. And then you have this at the top off the block where you can change the alignment off the image clicking on here, you can see that you can align it left center writes white, weep and full with So let's click on line left and that you can see that the text wraps arounds nicely around the image. If you did a line rights, then you can see the text with rap on the other side of the image. If it censored, the image was, he added top and attacked food wrap around. So let's put it to the left and Prevue How that looks like, and then you can see that erupts around. Now we have the simple Bremer's we hade with the first block, where Texas Way too wide. So going back into the back end, I am going to make sure that I'm selecting the row where, after all these contents, so clicking inside one of the contents that was created inside inside the section, you can blow paragraphs, making sure I'm selecting the rule. Layouts go to structure settings here on the right hand side in your settings and the content. Maxwell puts the same number I put on the other one 1200 pixels, and I can preview the page and then you can see the D column is much now. Aurora 8. Let's add a section with image on one side and text on the other: so that we have created two sections, one with the introduction texts and one with the longer texts. With the title Lincoln An image, let's create 1/3 section that has been imagine one side and the text on the other. So making sure I have got and nothing selected, you can see here block no blocks selected. If ever you're inside a block, just click anywhere outside those blocks and then you can see that no bracket selected. I am going to create a new role by clicking at block and going to cadence blocks and click him on fully out. Now, half added the block at the bottom off my content. And again, I'm going to use just the one column room clicking on there. So now I'm going to use another block that is one that comes pre builds when you install WordPress five on the school's media item so you can find it by clicking on the plus button here, and then you go to lay out elements and you find it here. Media and text. Please come there and you can see it's pretty straightforward. You've got media on one side and you got concepts on the other. So let's had any match by clicking on Media Library and then selecting an image select and then you can add some content. So let's go back into my lower lip. Some generator fact, a couple of sentences copy this going back there and then typing for pacing. It's as plain text. So by defaults, the text is going to be large when you create a media an item. Brooke, I would be happy with just having it as a normal size. So I go into my pack sitting here, change large to normal, but like in there, so that's previewed this. Now we have this. We should swear to squat a large image. Maybe I'm going to change it to something else. So speaking of the media and item block, you can click on the pencil here and change the image to something else. Let's put this one Select Island Prevue. Let's see There it's a bit off. A simple, poor trading measure looks less big. I'm so happy with having just a little bit of types. You can add more text if you want to. Within the same section, I would like the same block but I want to stay. Image should be on the rights and the text on the left. So where you can do what you could do its grace underneath another block by going to plus and then kick in on, play out elements and clicking on media text. But what you gonna do is difficult for you have already created, so you don't have to create everything from scratch. So for this to make sure that you have the media and text blocks selected so by clicking inside the block or by going into the block navigation and click on medium text and then he and the more options you can click on duplicates. And now you can see that he has duplicated the began text doctor you've created earlier, and it's still within the same section within the same holy out. So you can see here they are. You rule and you call him and he said, you got it to meet Mantex. You want the image to be on the right on the text on the left, and it's very simple. You can see here the top. You've got stiffened options. Click on show media on rights and you can see that it nicely swept the images. And again you can click on the pencil here to change to a different image as image there. Let's preview the page and there we go. 9. Let's create a photo gallery: Now we have created three sections, one that has the introduction text, one that has a longer paragraph and imagine a title and then one section that has an imagine one side in the text. On the other hand, he has this toy unless greater for together to create a new section. So I click on Adblock and I go Teoh cases blocks, and I trust my really Out and again, I choose my one column throw and I'm going to other gallery. So there's a gallery that comes pre builds with WordPress and is just call gallery. So if you do four slash and type in gallery, you click on there and you can see that you can drag images open. New ones also lit fires from the library. So let's elect fires from my library by clicking on Media Library, and then I'm going to select the few images there for all of the images, Really, to create a new gallery, you can reorder them, want you press next, so to just change the order off the images, he can delete some if you want to, so you take candidates and you can. I had more pictures together if you wanted to, and he would show you the images that you haven't selected. It did the gallery here, back to where you are. You can add captions if you wanted to. On, then you click inside gallery and then you've got your gallery here that has been created by default. If you look at it here on the right, inside by the falls, the gallery has three columns. You can change it, Teoh. More columns if you wanted to. Five to. I'm happy with three at the moment, so let's review how it looks like. So I've got my heading high school down and I've got my gallery at the bosom. Let's elects the container in which the gallery is so With the gallery selected, you can click on the block navigation and select to relate out, and you got different options. Here. You've got a line center, you've got white weights or you've got full weight, and this is what we want. By clicking my full weight, the container is going to be as wide as the width of your browser on. The content Inside will scare proportionally inside, so that's click on full width and you can see here is taking the full size, and so has gallery. So let's review there, and you can see here that you have a full wits photo gallery with very large images. So I click back onto the gallery. There is a bit of a bleach here. What press? Five is not working all the time as it shows, but it doesn't mean it's broken. Just ignore it for the time being. You have the photo gallery selected and what you can see here. You got a setting that says, leading to non at the moment, and I'm going to say Ling Teoh attachment page there. So let's preview the page now. You can click on each image, as you can see on when I click on one. You can see the image pop up in the right box and you can go left and rights to never get through the whole gallery and take on the X to close it. Yeah, 10. Let's create a slider: Now we're lending pages. Second shape. He has a bit more images. Let's add a nice lighter that I'm going to put in between the section here that has the long paragraph and the image and the section here that has the image in one side and the text on the other. So I'm going to select The Roda has all my media and I, the media and I 10 block and I'm going Teoh insert a block in between. So instead of blood before by clicking here and now, I can add my cider. So I'm going to click here on the playoff plus sign and I'm going Teoh AJ of the brook that we installed earlier called Goodson Slider, which you can see in common blocks and here couldn't slider. Or you can search for AIDS groups and slider. And there it is. So now it says that you can drug images, approve new ones. Also, X files from your library lesson like fires from my library. Take on media, select a few images and then click here to create and you get a read again like under photo gallery. You can reorder the images you can delete some if you want to. And when you're happy, you can click on insert gallery. So I'm going to click on there either. I I couldn't prevue and you can see here that I've got my slider go Miley to the arrows to go left and right And I've got adult now vacation here as well. That enables me to never get from when he messed her another. So let's review it. I got mine. Sure, there. And of course, my cider. I got to collect on rights there and then after I have my section with the medium one side and takes on the other. So now let's make this slider for wits by doing back on the photo gallery, I can Sure the I have the actual Oh, I forgot to actually add a room. So let's change this. Let's create a rule before Gooden slight. So I am here. I've got the couldn't slider and I'm going to insert before a paragraph, and I'm going to select my proof. I really out with this one column and then I'm going to select my slider here, and what I'm going to do is I'm going to click and drag IDs so that it goes inside the paragraph at the moment, you can see that's if I click outside everything. You can see that I've got all my rules here. This is my empty weird that I just created and I've got the goods Good insider here. What I want is to drive this Putin's later into the role layouts. So I'm making sure that I'm selecting it. And then you've got this little handle here with the six thoughts that you can click on. Then you just drug. It's so that there's the line. If you can see the blue line that is just above the power grafter is inside the rule. Then you Well, is it on then? If you look inside, we can see the Nam I couldn't Cider is inside the root out creative. And there is a paragraph here, guys empty at the moment. You just take on paragraph and then you can take back space and they did it take four year . So now I want thes slider to be full weight. Instead of being in a kind of white column. I wanted Teoh start, you know, from one extra the other off my browser. So I select the rule, which is now the Third World, and I make sure that it's full wits by clicking on the full with I come, they're on. Now. You can see that's my slider is for weeks. That's Prevue. It's there we go. We have the slider. So now I have noticed that the hours are quite small. I don't really see them that over. Even when it's a dark image, let's make them slightly bigger by looking at its on the right inside, having selecting the good inside and then on the right. Inside, you can see all the very settings that you can, um, change in order to customize the good inside so you can change whether you want the auto play or not, whether you actually want to see the arrows for nuts. So I'm happy to see the arose or even to see the navigation. I live that there you can change the heights off the slide, seek and make it slightly Toller. If you wanted to fight in our and let's have a look at the hour settings here and you can change the size of the arrow, so that's make it bigger that, say, 50 pixels. Let's see if I can see it's you can see here that the arrow is much weaker. I don't know what it is a bit here. I think it's not the village off. What Press five. But let's preview and see how he's going to look like Good. You cut all the hours here. Ready? She's great. 11. Let's build a 3-column layout: So that does create a section that has three columns on within each column. We're going to put any match that has text on the profits, and I'm going to put it in between theme introduction and the Olympics that just break it down because there's a bit too much next. So let's make sure that I'm selecting the actual container. So by kicking on one off the option for one of the contents here I go into my magnification African ra layouts, and I'm going to pick a more options and insert before their toe have, um, the space in there where I can at my new block and I'm going to art my rule a else. And now, instead of using the one column, I'm going to use the three equal columns, and then you can see that some empty progress have been created in three columns. And if you look at the block navigation you consider welcome aboard a else. I've got my three columns and inside each of those columns Afghans paragraphs. So I'm going Teoh at a block that is, that comes privy yields with what press, and it's called the cover block. So you can do for stash, typing cover, and then you can add an image from your media library. But you can make a library so that FedEx this image, for example, select and you can see here that you've got the image that has be often overlay. And I could just like that some text. So there's pulled fact one here, but this is my first cover, and then this create another one here, backlit, therefore slash cover combats on the African Media Library, and that creates another one using this Mitch. Then they fucked Teoh, and then I can create, Let's say the 3rd 1 cover you get ivory, said X, another image Select factory. So that's have a look by taking up reviewed. Now you can see that I have my layout with three columns with some images and some text on top of it. 12. Let's add some icons: I won't going to add a section of the bottom where I'm going to put some icons tooling to social media profiles. So now you know the drill. I'm on the page here. I've got snow blocks selected and I'm free to add some text at the bottom. So what I can do is just click from plus here, go to cadence blocks and take on road a outs. And so that's my one. Could, um, roll there and I'm going to other block that comes with the cadence begin and that is called Icon. They can see here, or what you can do is click on it. Suppose here, going to cadence, locks and find it here I can, and then you can see by the faulty comes with one icon, and we're going to change this. So let's say that we want to put our Facebook and Twitter and linked in account, for example, so having the icon selected, I go on the right inside to look at all the very cities that can change because he here yet that you've got I can one setting, So I want to have Facebook and that's this article icon so I click on the arrow and then I can search for Facebook. Social Facebook become their honey as it so you can change the size as well. Take a small can change the color such and she to blue can style Afghanistan margin, which is the spacing around the icon there and then the link so it would go to your Facebook profile. I'm just going to put a hush. For the time being. You can so choose whether you want the link toe open in the same window or into a new window country new window here. It's not pretty happy with how my icon looks like, and I'm going Teoh, create my other icons, I two and three there, and I'm doing exactly the same for the of us. So I I'm going to look for my Twitter accounts there. I'm going to set this the right size so silently 38. So I'm going there and I'm going to buy in 38. I'm happy with this color, and I'm going to use the same margins Cheese 14 and I'm going to have a link. But hash on the same dating gets to a new window and I'm doing the same with the third icon . Let's say I want linked in Be instagram or any other off your social media. Click on That's change yet come size changed, color changed a margin. They just got the copy and paste hush and then you window there. There we go with God's we'll likely camp reviewed. You can see right at the bottom of the page. We have all our icons that our sensors. So let's say I want a bar at the bottom and others have it playing whites. This is something we can to, thanks to the ruling out. So with the icon selected, I'm just going to a block navigation selecting the container, and I'm going to set it us for weeks, as I am going to change the background color to a light gray. So with the selective you can see here all the very sitting so you can change and I'm interested in changing the color of the background. So I see here background settings. How come that you can see that you can add image, but you can the color. So I go there this gray. It's a big too dark, so I'm just going to type in a custom color. So I'm going to put have to have to have two, which is a light gray we share much up here with and then I can click outside Taken Prevue . And now when I click to the bottom of the page, you can see here I've got my full with column with my social media icons. 13. Full-width, full-height header: So now we nearly really with the page is very exciting with God's quite a lot in it. Now you have the introduction texts, and we've because the three columns with text with the images and the text from top and on the paragraph got Ling's. We've got like a really nice slider with fading images, vice flocks of images and texts and photos gallery that when you click on it, theme edge pops up and the social bharatha bottom. And now it's time for the Chester Resistance. The main thing, which is the lovely heather that we're going to create that's going to take the full with the full heights off our page, and it's going to attract people into taking further onto the page. So let's go into the backhand and above my paragraph, my introduction paragraphs. I am going to create a new section. So again, click inside the paragraph. Make sure here by clicking on the block navigation that you have that you have your block layout's selected and then click on more options. Insert before and you can ask your rule. Yes, from one. Cut him so you can see the Afghan. My room. I'm going to start by adding some texts into the section so I can see where I am. So it's not just something anti at the moment. So with the paragraph selected, have a look inside the bag graph here. I'm going to put this is my main title going back into my lower maps. Um, generator here. I'm just going to said X those couple of sentences again, their control seats a copy. We'll come and see if you're on a Mac and then Contrave come and read based. I'm going to change this paragraph as a heading. So I'm taking here, changing the block style and I'm great to transform mating. Two indictments heading so they start like this. Um, so that's I like this and preview what it looks like. Great. So Adam amounts just nothing really new is very similar to what we did for the section here . We've got the title and we've got to the bar graphs here. So let's add a background image behind this. So clicking on the title here, I'm going to click on the block navigation and make sure I'm using my layouts and I'm going to add any mention the Bagram so earlier, we added a great background to the social power. I can't right at the bottom here. So we're going to go into the same section background settings and instead of changing color, are agreed to select an image click of Select Image. And I'm going to use this image there with the lady that is on the right hand side and some mice empty space on the left hand side. I'm glad. Come select and you can see here. That's the image is behind the text there. So let's preview it. They're so obviously you know, it's not ideal because because it ahead of the lady and we want the session. Thank the full width of the browser. So again, we know how to do that. With the rule selected. Be great to click on forwards. Let's preview again. Yeah, there we go. Nice forward. Were so wonderful. Height. So we want also the section to take the full heights off the browser. So how do we do that? We could there We make sure again that we've got through selective and we could structure settings. So we've played with the content maximum with settings. So you can see here the minimum height settings. So you gots difference units available. You've got the pixels, which you might be familiar with. You go. So VW behaved with it, which is not as common. So VW is the width off the view. Polls on DFI hedges the height of the people to report heights. So what we want is using the heights off the U boat and say that we want the block to be 100% off the heights of the people. So you can see here is taking the heights of the report. So let's preview under page and that you can see that it's taking the full width under full height off the page. And then as you school down, you can see all the different block that we've created. So that's great beginning there. Now you can see that detects is at the top of the image, but we really wanted to be vertically scented. So for this again, with the Reuss electives, he can see that you're on the road section. If you're not, you go to block navigation and you become layouts. You have different options here. You've got a vertical line top center and down, and so you can see how it moves here. We wanted censored. Let's review against you can see it's on the page that you've got the title here. Everything is centered, which is great now, obviously, the taxes not very legible, the images quite dark in the Texas black. So let's change the color off the text. How can we do that? Became of the ruler Yard blocks can change the color of the text, so you go here to text color settings. They can change the text cover two white Make a change. Julian color toe white as well financed forward. We have links later up, making sure you've got the rule selected. Go to structure, said things and changing Max with here to 1200 pixels so that it's aligned with, like with Theo, the introduction checks on the power graft X as well. So let's preview so that you can see that you've got some text that is on top of the lady. But really, you want the Texan one side on the ready on the right inside. So the reason is that the text of the woman is in tow. One column and it sense it, and you've got some margin on either side. So in order to have a Texan one side and to have this lady on the right inside, the trick is to create a two column layout and to just put the complaints into the first column. So by clicking there, you can see on the rule of the moment you've got just one problem. Just select two and you can see here that you've got and then to come in here with an empty paragraph and you've got another column here where you've got all your contents, you content as automatically move them to the first column. So let's preview this. 14. Buttons sliding through other sections of the page: we made a good start are creating the header on. What we going to do now is create some buttons in the header that we link into sections within the page. So let's go into the back end to edit the page. And were we going to do first select the two sections where we want the buttons willing to . So let's say our warms the first Burton tooling to the section here. And then I want the second button tooling to the section there, so I need to give them unique names so that the buttons no where they need to go to when they clicked on. So let's go and select the container that contains all the contents of the section. So clicking inside the title, for example, I go into the block navigation and click on the ruling out on the right. Inside, in the outfit settings, I click on Advanced, and you can see here that you've got her scheme. Alenka. This is where you can give a unique name to a section. You kick inside and you can put, for example, feature one putting one word. No space. No need to put in the capital's capital letters. Everything in your case is fine, and I'm going to do the same for the section that has the media and nights and blocks. So I'm going to click on one of the blocks and clicking on block navigation to rule layouts with the adverts here, and I'm going to call it and I'm going to call it feature to. So now I've got two sections that have a unique name. One is feature. One now is featured two. So I'm going to create two buttons that we linked to the section's so going back into my head or hear a click onto my paragraph on the presenter. It would create a block on benefits, and I'm going to add some button. So if I click on, if I start typing for a slash person, then you can see I've got two different types off. But on blocks you've got bitten and advance button. Britain is what comes automatically with WordPress. Advance button comes from the cadence again that we installed earlier. At the moment, you can see that my Putin is outlined in gray. It's not really visible is in the center. I wanted to be left hands on the left hand side. I've got a few things that I need to do and also album to Britain's so less out with the first thing I wanted to be left line. You can see on the block settings they can change texting environment here. Look like they're online text left. You can see here that you've got the text on the left. Now you don't. It's really hard to see the button because it's great. So I'm going to go to the settings on the right. Inside, we come there and then I'm going. Teoh move here in the color settings. I want the text color to be whites, and I want the border color to be white, so that's great. When you're over ornate, it's gray and again it's not very visible. So I'm going Teoh. Pick outside there and change your settings for when you over by clicking under the tab. I'm happy for the whole Vertex to be whites, and I'm going to change the background color to that little color here. When I click here, I have read every Consider the border, you still grace. I'm going to change this. The white Let's see what it looks like now I'm going to put into Yeah, Can you? There we go. Self got my bitten. So when you kick inside, you can change text inside the red sensing and say Go to feature one goto picture. Fine. And, um, I'm just going to put an initial euro here off the hush, which is an empty feeling can take on the fly so you can see that when you kick outside the button the euro, these appears by clicking inside the button. You can see the period again. You can also change the euro by going into the button settings and you can change drilling here. So now I want a second button as well. So I click on. But count here at the top and I going to have to Britain's, and you can see that it's taking the same style as the first button. So I'm going to change the text to go to future too. So now I want to say this button, go to future. Want to go to the section that is cool feature one and to the go to future to Britain to go to the section that is cool feature to. So what I do is I click on picture one and I say I'm going to typing the name off the section where I wanted to go to with the hajj that follows. So feature one here, which means stay in the same page and go on to the section that has the I D or feature one and saying Here featured two. We can apply here. Sure, click on apply to make it work. We can preview to see how that works. So you go, you two buttons click on Go to Future one. Click there and you can see that it's according to the section one school backs the top because a future to I only smoke to the section that we've called future, too. 15. Let's add a parallax effect: so that we needed there with the header. There are still a few things that we need to change to make it look pretty stunning. So, first of all, but this is quality herbal because the background is quite dark and attacks is whites. But there's my kids. Let's make the text a bit more of us because it should really be the center off the header , the center of attention of the header. So for these, we're going to add a novel a on the background image. So with the row selected so you can click somewhere outside there. So you gots there were selected for If you are, say, on the heather, you can click on block navigation and convert layoffs. You can you have section here that is called background over the settings. This is where we're going to create our background overlay. So when you click on AIDS opens and you can you have different functions here that you can play around with. But what I'm interested in is changing the color. So I select color and then click on the dog gray and you can see here straight away that the background is darker, become changed capacity as well. So make a very dog or a bit lighter. I think you wish no sitting was fine, so I keeping that. So that's great. So let's privatise. So that's right. So now when you start scoring the place, you can see that the images moving at the same time as a text and what we want is to add a little bit of parallax effect, which is an effect where the image moves at a different speed of the text and he makes the patient. It's a bit more dynamic, so going back onto our page you have there were selected and with the background settings you can see here, you've got different settings and you've got something here called background. Imagine attachments is currently set to school. You could have it to fixed, and you can see that the image is slightly changed. So you click on preview when it's fixed. That means that the imagery man statics as a text moves. So let's have a look at that. Looks like you think that you can see the money measures and move, but the text moves which can be quite effective as well, or you can also use the parallax. That's pretty. It is. When you click, you can see the image moves slightly sweet word on the text. 16. Let's make the header responsive: So now this is a very large head on. The attacks at the moment is quite small sore. Let's make the text at least a title a bit bigger and the introduction text bigger as well . So, going back onto the page, you go into the heading. You can see here that you can control the size after heading, so let's click on the handle and click. Make it bigger. So, yeah, I'm happy with 100th and pixels. You can see that the space between defective quite big, so it's called the Line Heights. So you click on there and then on the handle, and then you can make he's a bit smaller as well. When you click on the paragraph, you can change the front size Teoh something a bit larger, large, but that's pretty. This so that is a bit more attractive. It's a bit bigger, you know, the text text. Most takes more space, which is what we want. However, if we were to look at it in a smaller browser, say on your phone you might be a big too big and the swim. I have some issues with the main image. Let me show you So when you click on minimize here and make sure that it's a smaller. But if you were on your by phone, you can see that you can see the background image anymore under Texas way too big. So we're going to change some settings to make sure that's our header is nicely responsive . I'm just restoring basic full screen, making sure that as he goes, my rule layout's selected. Let's start with the text. We're going to become the header and you can see that you have some size controls available . So you go here for the stop here for tablets and here for more by phone at the moments by default, the size off the desktop tablets and mobile phones are the same, so we wanted to be smaller for more body phone. So I'm going to change the front size, which waas as 110 pixels to something smaller. I'm going to go to 60 Big sold, for example. They come there and you can see here that my title has changed. It's bigger, smaller peka. Hence Mota. She's what we want now. Did you image the background image works quite well because we've put the lady on the right and we've got the text of the left, went on some. When it's on, more by the lady is completely disappears. What we need is a different background image for when we are on a more bio size. But it's again. This restored is to full size going back there to make sure that you got your a rule. A of selected go to back on settings. You've got your different backgrounds There, there, you can see where you go, said your image. And here you get a Yugo icon, Sarah prison best off tablets and mobile phone. So I select more by phone and you can see here in the movie background. It's asking the question. If you want to set a custom background for more bite, which we do, so let's click on there to make you active and select another image for the background so that select this image there. That is a portrait image where the lady is on right in the centre. Select this so you won't see anything at the moment because it's on this sub size for let's preview this and then minimize its to a more by phone size, and that you can see that the image has changed and got the lady in the center 17. What if you use a different theme?: So what do you feel? Really have a theme and you are happy with it. And you didn't want to use the, uh, 2019 theme and the child him created for this course. It would still be possible to create my standing page following the steps highlighted during discuss. But you might see you must you have the navigation and said the title of the page, then you might not necessarily want to see them, so you might have the foot as whether you might not necessarily want to see So what you need to do first thanks is you know, you want to make unjust just for these pages and that for other pages. So you need to do a bit of inspection of the pace to figure out what you see in the name of this page. So clicking on the top of the page anywhere you can inspect the page to you, right? Click here and you click on inspect page for inspect. What we are interested in is looking at the class names off the body type here where you see here, school buddy and you got classiness has lose of different names. So based on my default page. Page i d 49 Loved End up me parts it Sure. So Paige idly 49 is the unique name off the base, and this is what we are interested in. So we know now that the pressure's called special 18 49 you paged my be page I d. With a different number. So with that in mind on the page here, we can become customize. Are we goingto other a little bit of CSS? So you click on customize click on additional CIA says and then you're going Teoh, add some CSS year. So it was called Page I D 49. So you need to say that it's a class or you have to put it that first fage by the 49 that what you want to hide is the headers. So you type in Heather and you need to put display, you know, and then you can see that it has disappeared and you can see that your foot is there. So you want to do the same. So you put a comma here, Dutch page i d 49. And so you say that you don't want it to be displayed. And when you click on that, you look at the bottom. It has disappeared as well we can publish. 18. Thank you!: thank you for taking missed mass. And I hope you have enjoyed learning to use WordPress fight. Do practice more play and experiment with all the settings and you'll be amazed with pressed flower. Don't forget to share your landing pages so everyone kind of my work, I