Create a Website Using Elementor Pro | Florin Buzea | Skillshare

Create a Website Using Elementor Pro

Florin Buzea, Full Stack Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 39m)
    • 1. Intro

    • 2. Getting Started

    • 3. Putting Your Menu Together

    • 4. Our First Section

    • 5. Let's Make It Responsive

    • 6. Making Progress

    • 7. Press The Button

    • 8. Mixing It Up

    • 9. Price Lists & Testimonials

    • 10. Contact & Footer

    • 11. Finishing Up


About This Class

Hi there, my name is Florin Buzea and together we’re going to build a professional and responsive website with Wordpress using the all-powerful Elementor Pro.

During this course, we are going to build a landing page that looks and works great on all of your devices. The skills that you'll pick up will help you create your own website for a potential customer or for a personal project.

This course was created with beginners in mind with no prior experience in web design or for creatives who are thinking of integrating Elementor into their workflow.

Along the way expect to learn tips and tricks, shortcuts, some do's and don'ts alongside some other resources.

You can preview the website here:

Sign up for the course and let’s make you a web designer.

Once you completed the course please make sure to leave a review. 


1. Intro: Hi there. I'm floor Full stack, graphic designer and founder of We Flow Studio, an independent agency that deals with brand identity design and website. Together, we're gonna build a responsive and beautiful website using elemental pro in WordPress. If you don't know what elementary is, is pretty much a visual Web page builder, which means you won't need to know how the cold, which is pretty awesome. During this course, you are going to build a landing page that looks and works great on all of your devices. The skills and your pickup will help you build your own website for a potential customer or for your own personal projects. This course was created beginnings in mind, with no experience in Web design or for creatives. We just want to use elemental and bring it in their own world from along the way. Expect to learn tips and tricks. Some do's and dont's alongside some other Resource is speaking off resources. All of the assets I'm gonna use to build this website are down in description. You don't have to use them. You can use your own images to build your own project, but if you need them down there, enough chitchat, let's make your Web designer 2. Getting Started: thank you for choosing this course to actually learn elemental into a bit of war press as well. Before we start, let me show you exactly what we're going to create. Its this cafe website, It's mostly landing page. I'm gonna created another page at the end of the course. Just you know how it's done. But the meat off this website is this landing page Most likely. If you like what you see, you will stick along. If you don't think this is for you. This is the best moment to move on without the way. Let's start creating the website. So the first thing I would recommend is actually download all of the assets we're gonna use to create this website. If you want to create exactly the same website, obviously you can use your own images. But just in case you want to tag along, you for all of the assets down below. Once you've don't order them head over to the media, click on that and then add a new and then just drop all of the files here. You don't have to do at this stage. I've just done it now. Just so we save a bit of time when it comes to actually using these images. So now they've got these images uploaded or not. Let's move on to the next age. So the second thing would be to actually install elemental click on plug ins. Afghan. No problem here. So this is actually a clean slate. So you're no missing? Nothing. The first thing you have to do is add new here and then typing Elemental. It's actually the first plug in here with over two million active installations, which is pretty good. Just click install. Now, once is installed, you just have to activate it. And then they actually give you a small tutorial here. Obviously, we're gonna press X because I'm gonna teach you how to do it. Now, the second thing you actually want to do is go back to plug ins and click on GoPro because obviously we are going to use some elements from Elemental Pro. The first thing you would have to do is create in the count. I've already have my card. I'm just going to click on that you have to do is download a plug in. You can see here is stone on it go back here and are the new plumbing. Instead of searching for a program, you just have to upload program and then just dropped a zip file without extracting nothing . Just drop it in there. Just click. Install now and then activate the plug in. Now. Mine's already activated. Most likely for yourself. If you've got a new account, they're gonna ask for accord the court you'll find on the your account office. Last blood mine here. But this is the This is where you're going to find a cord. Just copy it, control, See, and just pace it whatever the elemental pro ask you to do. So now that we've done that, we're ready to move on to actually creating the website. 3. Putting Your Menu Together: So now that everything's installed, we're gonna move on to creating our pages. We just go to pages here on the left side. We click on that, and then we put at new, and this is gonna be all first page. We're just gonna call this home for now. And then we're just gonna click publish, Publish the first bridge Moving back to page second. He hasn't updated yet. Cool. Now we go to pages again, and we're going to create another page which we're gonna call contact. We're going to publish that again. Now we got to save it, and that's it. Now we've created two pages, but our menu is gonna have four items. So we're gonna have the home, which is the page. We've created a story section of Value section and the contact, which is a page I'm gonna show you exactly what we gonna do. Go to your parents menus. Now, let's call this menu aroma official. We're gonna click on create menu. Now, What we're gonna do is we're gonna add the two pages that we've created are two menu. So we've added the two pages. Now I'm gonna add to custom links one of them's gonna be story. So I'm gonna add my domain. This I'm using normally when I create tutorials. But obviously yours gonna look different. Slash story, and then the link text is gonna be story. We're gonna add that to the menu and you can see here we've got a story, right? So I've done a small mistake here should actually be hashtag story in the Ural section. So no, the falling that I'm putting on there is hashtag story and from the values, obviously hostile values. Then let's add another one again. The domain slash values. We're gonna name that values. We're gonna add that to the menu. Let's just changes around a bit. So when the first thing to be home, the second thing to be story, then values and in contact, we're gonna have to click, save menu. Don't forget to save your menu. Now that saved. And then we've created our menu 4. Our First Section: Okay, so now we've actually created the menu. It's time to build our first section. So let's go back to the pages we've created. Let's go to home, Click on home. Then there's a button here that says Edit with elemental. Let's click on that and then this is elemental. Obviously, let's get rid of this stuff here at the top. Everything at the bottom. This stuff here. To do that, you just go to settings, then the page layout. Make sure that set to elemental campus, so everything is quite clean here. Let's update that So let's create our first section, which is gonna be the hero section to create our first section. We just have to add new section here. She's the image. Let's click on Edit section Let's go and style this. Let's click on style in the background type. There's a bunch of options here. Let's just click on classic. Then we want to add an image. Let's choose the image you want to add as the background. I'm gonna choose. This image, obviously, is the biggest image it works best with, ah where I'm using it at the moment. Concert media. Now you can see that this section here is quite small. Just to fix that, we're going to go to lay out. We're going to go to the height of it now. You can select fit to screen and then that's gonna cover your whole screen. But I don't want to do that. I just want to add a minimum height off. 7 20 That's cool. Let's go back to style because I don't like the position off this picture. So to change the position, just click here on the position tub. I just sent a center. That looks much better. I don't want this to repeat, and then the size of this will put to cover. That's quite beautiful. The first week we want to armless. Just other text here. Can you see this as a box here with a plus stew? Things you can do is actually click the plus. This will show up for there's another option. You can actually click on this, and this is we've got all of your elements. What we want to do first is other having, then we want to style this heading This looks quite atrocious. Had the moment, so to edit this, we just click here and it Let's other or new text. Which is we out here to serve you good coffee? Feel free to add something else. I'm happy with that. Let's make this in the center as an alignment, but obviously we don't want it as blue. So let's style this. The text cooler we want to. We want it to be white and then typography. I already know I want to use play fair display. Obviously feel free to odd what's ever for what you want. We're not going to style this at the moment, but we are going to change the size too 50. This is quite cool. And then let's have a dark shadow to this as well. Let's make it. It's dark. It's possible so we can actually see the text. But there's something that I don't really like. I want to actually want to break this apart. So what? What I'm gonna do is, should we go back to the title here? Then after you, I'm gonna add this. Well, you can see that I've done it in the right wrong place. It's just copy that to put the space bark and then actually wanted after serve here. That's quite cool. Now there's another thing here. I want to add another text on top of this so we could actually go here in under text at the top. But that's gonna take too much time. What I want to do is click on this right, click it and then select duplicate now less style this to a different font. So where you want to do is go back to style, make sure this is selected gold typography and will select Poppins. Cool. That's a bit fat as a fund. So let's just select the weight to 300. Make it smaller. Select, maybe 18. Obviously, I don't want to use the same text. I'm just going to use Welcome to Ah, Roma and let's make that our hates one, which is the first and the main actual Heather. And this is the hate. Okay, so welcome to a Roman. Let's style this a bit more cause I don't like how this is sitting here. We'll just go to typography. What I want to do is actually spread the letters out a bit. Yeah, it looks a bit better. Let's just stick with six, then let's change the style. No, Sorry. Let's change that. Let's transform this toe all uppercase. Yeah, that looks cool. No, I can't really read this properly. I mean, I can read the main text year, but because there's a lot happening in the background of the image, this makes it difficult for the text to be dread properly. So what I want to do, it's click on the image or the section which contains the image. Then I want to add a background overly this other classic. You can actually add another image, but at the moment licious stick with a cooler, which is gonna be black, so you can see you can still see the image. But obviously the text pops out a bit more now, which is beautiful. That's exactly what I want. The next thing to do is actually create the menu. So I want to add a logo here at the top, then the menu we've created in the last episode right here. As I said before, we're gonna other section. But this time we're gonna have to columns because obviously along what is left and the men you have the right so you can see these two boxes. These are called columns. Ah, this is not going to the edge here. This is actually stopping here, but I don't wonder. So what I'm gonna do, it's click on the whole section here, and then here I'm gonna change boxed to fool with. So you can see that change here. So going to the elements here, and then we're going to search for the logo put site logo right here. Now, there's no local here. I'm gonna show you how to put the logo in the moment, and then we're gonna pull. Let's search for the menu. We actually want the enough menu, which is short for navigation menu. Now we're gonna style everything and make sure that's on top of this image. But first, let's just put a logo here. What to do is update what we've just created, and then just click on the top left here than exit to dashboard. Make sure you do this only after you've saved it. Now go to your parents and then customize where we gonna have to click here in sight. Identity. Select the logo. Obviously, I've already have my longer right here. Just selected. Make sure everything scrapped obviously because it's white. You won't see nothing here, which is select crop image he could see are always right here. You see a small preview, Hughes. Well, if you haven't added the title and the tagline, make sure you are that now, if you want to and then select icon This is pretty much the fabric on is the small icon here. Select site icon. I've just got this a select Now just select Publish. Now let's go back to creating our menu. Go back two pages home. You can actually click Edit with elemental from here now, so click on that and we're actually back from where we left off. But now we've got the logo here. Obviously you don't see at the moment. What we actually have to do is ah, put this section here on top of this one. Now, to do that, we just have to select this and then click to advance. Don't get scared. Just because it says advances, nothing to be scared about. So what we want to do is actually change the margin. We're going to make sure this is unlinked because we only want to change the top two minus 1 25 minus not deal so you can actually see these are now intertwine. But the only problem we've got now is that the top section is actually underneath this or the section with the picture. So what we have to do is click on there menu section, go to advance and change the set index. You can put one you can put two are just like chipotle five so you can see everything's in front of this now because this is in front. Now I can actually style less and actually see how this looks on this section here. So we click on Edit Section, click on the Roma, and we want this to be left. The line less styled is this is a bit too bigas. You can actually see the pixels. So we want to do is change the with to just keep it at 25. There's another thing I don't like here. This is quite it's too close to the edges, so let's go to France and then select the putting. Let's change all of them to 11th then make sure that's linked, and then I want this to be further away from the left. So we go to the left, then select. She's a 30. Yeah. Yeah. Like how that looks. No, I can actually make this a bit bigger. So less change this 2 30 as well. All right, I'm happy without let's change the menu. Now click on the menu. We actually want this to be a lying to the right, which is gonna select none. Now we are going to play with these in the bet. But for the moment, let's just style the menu with in front of us. Let's just change the top typography to Poppins again. I only like to use to force out of time. So we are going to stick with Poppins for now. Let's just change the weight first 300. I'm actually happy decides to be honest. You can see that this is not actually in the middle now. So aromas quite nicely in the middle. But this is at the top here. We can change this by selecting the actual column and make sure the horizontal alignment is at the center. No, that's wrong. Obviously, I won the vertical one and what I want to do is ah, select the menu I want to go to advance here. Let's change the padding. You remember we've done this as 30 to 35 account. Remember, let's just click on it just to check 32 left. This means I'm just gonna do ability to the right here, that's what. 30 here. Then let's just make 10 10 and 10. Just with much. Is the local parting as well. Obviously, I don't like the screen, so let's change these coolers here to do that. Obviously, we have to style it. Before we changed, the typography just changed the text color. Here to White. You can see that's changed the white, but then there's no hover at the moment. Let's just change the hover. We can change the text cooler here. Now I've got called here, which I already in order I like. Feel free to copy it if you want to. It's a beautiful cream that I think much is the coffin vibe. I'm going to keep that and then the active bit just couldn't keep one. You can actually make it cream if you want people to know what patient, so you can see if the active bottom is set up to the cream color because I'm at the home page now that's gonna be highlighted. This cream. Okay, I'm happy with that. So that looks quite cool at the moment. Let's just kill update. Then let's just see where we've created. You can see there's a nine here. You click on that to review the changes. So when you click on that, we actually see what we've created, which looks quite cool. We've got the menu here. The nice timeline. Nice picture. When you're gonna publish this website, you won't have this by here at the top. This is only present when you actually logged in to WordPress so you can actually click edit with elemental, so you can make quick changes. But your question was not going to see that strip. 5. Let's Make It Responsive: there's a button here that says Responsive. Obviously, this helps us see how our website looks on the tablet and on the moor while version. So if you could have on tablet, most of this looks quite fine. We need to fix this and obviously the menu and then the more bowel. It's a bit more complicated, but don't get too scared. So let's move back to the tablet. Let's fix this one first. I don't like this menu being a tangled bottom because I only have four items. I'd rather see them here than have him in the burger menu. Here. You just click on this and then the break point. You have to put it as a more bowel version. Copy that. Also, these are in two lines here because it doesn't have enough space to be on one line. Put it onto lines, the one that we can actually make this column smaller. So we just click on the column, then change the percentage here. She's changing to 35 then the other one. Let's change it to 65 So happy with the menu here. I'm not happy with the local, though. Let's just make it bit bigger here. Rights 75 looks good to me. Spot would be more space here. So you click on this advance on link it and then change the rights to 25. Looks cool. She changes to 30. So much is the aroma of it. It's actually fixed the more by now it's a bit more complicated. Before we get into this part. Let's just change these two. But I just want this to be a bit smaller. Change the size Philippine looks quite fine. Then let's change the size off the main title as well. 30 looks good to me, but 27 would work best just in case the customer would have, Ah, smaller phone. Now let's fix out the meat off this on. Let's just change the color to this first. So again style. This is the total bottom here. Cooler whites and then the background color transparent. Let's change the whole exactly the same. Okay, I'm happy that that's not really in the center. That's because you actually picked the values off the parting from the desktop on the tablet. But if you do click Valley one and then resets, it is actually reset as you can see. I don't actually want this to see underneath the logo. So what I would do is in the column. Let's put this is 80. Then let's put the other one as 20. The parting here, this distance here, the parting from the left and actually is the value from the first stop or from the tablet . To do that, just reset it to zero. I'm happy with size here. Let's see what happens here. Obviously, this is not ideal. Make sure this is done to fool with, so it's do that go to style. This is the drop down menu. Click on the drop down menu. Then let's play about with these in the vertical putting. Let's just make it so it covers all of this text. Maybe. No, all of it. None of it. Then the distance. Here it's making a bit further away. Just saw this distance at the top is the same as the one at the bottom. So a bit more maybe 26. Cool. I want us to be in the sentinel on the side, so moving back to the content, but it says a line here. Make sure this is set to center. It's quite cool. Okay, so the text color should be white. The background color. I actually like this. Speak it. So you don't really see it. Let's put the background as the cream looks quite nice. Now, there were actually seeing all of this. Let's make this a bit shorter. So the vertical parting should be a bit short. I hope so. I'm happy with that. Looks quite nice, in my opinion. Obviously you can play about with these, but because of the time we need to spend in this, I'm happy without this is the time where we click update. If you preview it, you can actually take this cord and then look at it through the phone. Just so you make sure it looks great on the phone as well. Okay, Hopefully that looks good on the tablet. Looks good on the desktop. 6. Making Progress: so moving on to the next section, we're going to create one of these. First we were going on is another heading heading, which we gonna style again. Style, text color. Let's just use this color. We can use this as our third color alongside the whites and the cream. Change the typography of it again. Play fair display is what I've chosen. Okay? Not like school to me. Let's make sure it's in the center. So here this will be a free. Then let's change the text to We all share the same passion. That's quite cool. Now we want the break point to be right here between the share and the Gordon. You know how to do this? Just copy this over a break point. Now they're going to break here. Let's change the size of this. Just make this a bit bigger. Let's make it thinner. Let's choose maybe 500. No. 600 from the looks quite cool to me. Let's make you a bit smaller. 25 should do it because I don't want this to overpower this one. There's another thing. You could have actually copied this from here and then change their properties I'm going to do this with the second text. Let's just duplicate this, that you can actually drag it from here above the wheat all share the same passion text. Obviously, we want to style this go to style. We don't want no tech shadows so we can click this. I can hear back to default. Yep. Then the typography Ah, text color, create office. This is way too big and I don't want the same properties as the other ones. Just push this back to zero. I want us to be quite small, and obviously that sex should be something else since let's just say, since 86 that's around them. Number. Just go back to styling for a bit. Make this even smaller. Let's make it as a 10. I want people to barely notice that. Then let's just spacing out a bit more. One point. You should do it. Okay, that's cool. Next thing we will do is add another paragraph to do that. Take the text that is. So don't take the heading. We'll do this. Obviously, I'm not gonna write nothing in there, or you can put whatever text you want whenever you added the text. Make sure you edited from the left side. No, from the actual, uh, box here, and I put my own Lauren Epsom in here. That's great. Make sure this is still Poppins, and then I want a line in the center. She's choose a different kind of gray. I'm happy with that. Okay, let's edit this a bit more. Obviously. Typography, secondary Poppins. It's a bit too big, in my opinion. Change it to something that's readable, but not crucial. 13 is quite great and what we want to do now. I don't like how long this is stressed, so let's just make sure it falls into a nice box like here. So what to do? Click on the Edit advance The list is other parting. We've learned a bit about parting and margins when with this did section here, but this is a bit different. A bit more simplified, delicious odd. The 100 to the right, in 100 to the left. Did you see what that does? Let's just have 200 yeah, I'm popular that And now let's add free more columns. It's called Intersection. That pretty much puts a column within a column so If you've got two columns here, it's duplicated that. And then we've got three columns. Each column is gonna have a Nikon a title in a small paragraph. First of all, let's bring on the icon, which is gonna be an image. I'm gonna change that to full just because the images are quite small. Anyway, make sure that that's in the center and it's gonna be this image here. And we were just going to style it and make it as, ah, make it as a 30. Yeah, I'm happy with that again. We need some text underneath this. There's a bunch of ways to go about that. I'm just going to take this, duplicate it and then drag it underneath here. But I'm going to restyle it cause that's too small for a one here. It's gonna make it a hateful Let's style this really quick. Let's make it. It's to be a bigger let's make it a 16 year. I'm happy without to make it 600. Yeah, that looks quite nice. Obviously, I don't want to say since 86 so that will be highest quality. Okay, so now we need a small paragraph right after this highest quality. To do this, be just gonna duplicate this. We want to bring this right underneath the highest. I've done a mistake here. No biggie. Just wanted out of it here. Now let's edit this quite quick. I don't want the putting anymore. Just gonna fix this. See, that's a lot of text. I don't want it one less sexy. That's quite nice, then it's quite difficult. You can see this quite difficult to add this underneath, but months to do it, click unedited. That's let's add a different kind of parting. It's on 50. Let's see how this looks. Looks quite great. Obviously, you cannot be alone. Text year. I'm just happy with having three lines here. Obviously, we can do this for these two sections for these two columns as well. But quick way of doing this is just to let the column just click right Click on the column just duplicated. I couldn't do this again. Duplicate. That looks quite nice that you changed the icons. This is the second I can I want to use, and then this is the 3rd 1 Let's call this carefully crafted and then this one served with love So depending on the kind of website you're building, this could probably be services or steps in creating something. I've just came up with this, uh, for this particular section. This is quite cool. Now everything's a bit cramped up, So the first thing I would do is putting to the actual the big column click advance. Make sure is no length. Can you see? The since now is touching the actual margin here. So if we do 1 50 at the top and warm 50 at the bottom, we've got being more breathing space here. These two are also a bit too close, in my opinion. But I don't want I don't just want to add some parting. Let's put a pretty little line here, so I will add an image right here. Well, obviously, that's too big this. Just select our line. Insert media. You can see that looks quite cool. Now you can make it smaller if you want. By doing this, I'm happy to hear the last thing I'm gonna do is add a bit of a putting underneath the paragraph here. Just do 50. Looks quite cool. Now, let me click on that issue that looks quite nice. Let's update this and let's just see how it looks. It looks quite nice here. Nice. I like that. Let's make this a bit bigger, though. As you can see, there's a lot of trial and error. I didn't like how big this was, So just gonna make it a bit bigger, making a 30 update this preview it. Yeah, this looks much better. Let's make sure it looks fine on all of the devices. Let's move on to the tablet. The padding. He is too big. Obviously, I don't want this to be linked. Let's put 100 on each side. That looks quite cool. And then let's put 50 at the bottom. Let's add a bit more putting on the right and left side of these columns. 50 to the left, 15 to the rights. Lets reset these ah paragraphs budding. Obviously, the padding is picked up from the Destin version, so that's why it shows up like this. But we can just re certified clicking it, making it zero. Nothing is quite nice. The last thing I don't really like is these are quite close to each other, so where you can actually do it's going to the columns advance. So what you would do? It's poor 25 to the left, 25 to the right. Do the same thing for these 25 to the left, 25 to the right, and again. Now the last thing we have to do is just make the icons a bit bigger. So 50 works quite nice, I think. Make it as a 50 and 50 again for the T Cope. It's a coffee cup, but whatever. Now we just have to fix the more bile version. As you can see, it's mostly done in already. Looks brilliant. There's a few things that I'm not happy with. First of all, it's this parting on the left and on the right, resets it and just put 50. Obviously, we're just trying 50 for the moment. I think it looks quite nice. Oh, but I've put 59 by mistake here. Let's fix that and then the line here. You don't really see it, to be honest, can you see it on a tablet you see on the tablet? On the moment? I don't really see it, so let's make that a bit bigger for the more wild boys. That looks quite nice. I don't mind the sexy and the putting looks quite great. The only thing that I'm looking at is that I can this too close to the top, not only for the 1st 1 but for these as well. So what to do? Look in the column. Chinese departing on all of them. Just let's just reset it just so we can look at what we've got. Cool. Then what happens if we change the parting all around? That's not bad, actually. Let's put training for all of them. 20. Yep, Now looks quite cool. Projected on the versions. Quite quick tablet and then, obviously the best. All that's updated. Let's quickly preview what with? Don't happy with that. Obviously you can fluff about with these. Um, if you don't like something, feel free to change it. You've got the skills to be honest now to make your own decisions now, So, yeah, let's move on to the next section 7. Press The Button: right. So the next thing you want to do is create another section which is gonna be is easy. Is this want to be honest? Just gonna have a few images, a bit of text and then some buttons. So the first thing I want to do is add a section here, which we're going to split into two. So we're gonna have the image here, and then we're gonna have the text and some buttons here. So let's have the image first image. Let's choose the image one that image, insert media and then moving on to the other side. Let's just odd another intersection here. So this is gonna be for the bottoms. The first of all, let's just add the text. So I'm just going to duplicate this, going to drag it over on top here. It's going left just to find out, changed the text to drink and let's duplicate the paragraph is well and then left justify it. Let's reset the parting as well. Put everything down to zero. Obviously, we're gonna change the parting, but I'd rather do it all at once, then every box at a time. Now let's brings important Let's bring the first bottom here. Then let's just say view menu on this one. Let's style it for a bit typography. I will recommend using more than two funds in the size. Yeah, that's quite cool. 13. Cool and then background color has changed this to White to the cream. I've changed my mind here. Let's just put the way to 300 than the letter spacing to 1.5 school. Now let's put aboard a solid board over can see. That's quite cool as well. But I wanted to be as a one and then the border radius 70. You see, we get this round bottom here, which is quite cool. But when I hope for over it, I wanted to change to cream and then the text to be is white. So to do that, go to hover text color his white. Then let's just quickly get this court from here. Copy that, Teoh background color in the border color. Make it in the same. This bottle is gonna be active, so it will be able to click on it and then it goes to section off the menu. But we're gonna do that at the end because we don't have a many, you can actually set an animation. So let's just put these lords of here. But normally I like to use sink. The easiest way to do this she's dragged this over. Let's just keep it at 32. Let's just duplicate this Injun licious. Delete the last one. Obviously, you can have three buttons if you wish you don't want to, so just keep. This is 30 for now. So we've got two bottles here for click away. You can see it looks quite nice. The other button. Let's just name it. Contact. This just puts a parting on here looking this and make sure it's in the middle here. Left side of the column. I wanna add 45. Mystery. 40. Yeah, that's quite cool on the right side. This just at 40. Maybe 50 is the way to go, right? And then we can fix this as well. 34% for the left bottom. You can see the distance year. I want us too much. So what I will do is like on this, Then let's see. Let's try and much there. That's a 15. I would say that this one should be a 15 as well. Yes, it's quite cool. And what I want to do is add a notice section exactly like this one. But the other one, let's call it coffee to go now. Another thing I want to do. Let's just flip these over, drag the column to the other side. That looks quite cool. Obviously, I want to change the image to this image here. Let's add this line in between because this two column C I can't added. So it is a way around this. Let's just leave it here for now. Then let's use add another section. Don't do nothing to it, then just drug this over. We just had a bit of putting to this. Okay, 100 at the top, then 100 at the bottom. Maybe that's a bit too much a stick with 50. Let's quickly fix this on the tablet version, So the first thing I would do is I don't actually want this to be on the left side of this . I just wanted to be at the top of it. So what I would do is sit like this column and then put 100% and then for this one. I'll put 100% as well. Make sure you click on the column and make it 100%. Now we want to fix the parting here. Obviously, we don't want 100 to the left. Just keep it as 15. But I don't want the parting at the bottom either. There's no point in having it now. Just want a parting set to this column. Yeah, that's quite cool. And at the bottom 50. Okay. And then on the left side, 50 then. Obviously, I want to change this to a 22 and it's perfect. Now, then, for the other one will do the same thing. The image as 100 for the section as 100. Let's just fix this again real quick. We don't want nothing at the left. Was it something? It was something. I believe it was 15. And then the bottom as a zero. And then the view This was a 22 and this was remember, Now 28 obviously we need to fix this is Well, okay. We just want 50 to the left. Oh, Then let's just get rid off. They wanted the right, I believe. Okay, So the last thing I want to change here, I actually want this image here to be at the top of the text. So you will have the image, the text, the line image in the text. Okay, So to do that, you just have to go to the section, go to responsive, and then reverse columns and tablet. Obviously I want to do that on the phone as well. You can see that works wonders. Okay, cool. I like how that looks. Now let's quickly do it to the phone as well. Although I'm assuming most of it's done. Okay. Just a few things here to change again. Fixing the parting would be one of the most important things to change. I would think 30 is quite good. And then let's change. This is Well, was it 15? She changed it to zero for now, but I believe it's 15. Oh, yes. Okay. It was good to meet. Let's do the same thing. It authority and then 50 at the top and then 15 for the left side. Here. Okay, that's quite cool. Let me just show us something really quick. You can actually hide this line if you want. I don't want it on the tablet and under the mobile. So what I would do is click on this culture advance. It doesn't matter if its desktop tablet or more by preview, just click on this, go to Responsive, then pour hide on tablet Heidel Mobile. It doesn't preview it here, but when you access the website from the tablet or from the phone, that won't be present there, This cake update, then let's quickly check when we've done. Obviously you have to check in on the form your yourself using the same link. Is this so Yeah, looks my cool. 8. Mixing It Up: Let's move on to a new section and with something a bit more exciting, let's have a new section. First, let's just start two columns for now. It doesn't matter how many are you can always duplicate this as we learned in the past. Okay, let me just delete that and this. Just make sure it is full with. Actually, I'm gonna on five of these. We're not going to do them all individually. It's just so I know how much space I've got for one of them. So let's use a new element called call to action. Should be here somewhere. They know you just drug in and you can see you've got a space to put your image yet from heading some text and then ah, a button. Why did you want to do is I want this image to be in the background over the text and the bottom. So to do that it is going to classic and make sure its cover to see that already has an animation where I'm gonna choose a different animation. But for now, let's just entities here. Let's choose an image. Okay, let's use this beautiful image yet and then insert media, so that works quite fine. Just make sure it's full, because I've already the images already measured and everything, so I normally tend to use for Let's go to the content. The first thing I would say Let's just pull in blonde roast just might not even make any sense. But I've already have some text year. Uh, I'm gonna copy over here. Feel free to out your own tax, depending on the business you're trying to, Kate. Then let's just make this hey age for I don't actually want to buy a bottle, not old. So what I'm gonna do is just believe the click here in the bottom disappears. Then obviously, if you are going to use the bottom, just put the link here. When you click on that button, you are going to go to that section page or whatever you want to create. So let's just tell this a bit more so it works with our website. Let's change the height of this to five 50. It looks quite tall here, but obviously with a preview, this you can see it looks quite nice. It's a great sides now. This is the parting for the text. Just gonna at a bit of a parting. Let's just put 40 in here. Now let's just bought 50. I like to work with rounded numbers content. Let's just change the typography here. So less issues. Poppins. This is our second a refund, if not the primary fund. Actually, um, I think it was 600. Appreciate with 600 make IDs all up a case and then delays it a bit more. Letter spacing. Mrs. Make it a five. Let's make this size So it fits on the one roll 18. Looks quite cool, actually, Let's call box of the putting here she was 40. Just we don't have problems with this. So the typography for the secondary tax year, obviously still Poppins 14 looks quite fine now. You could actually changed the color of the text, so it goes from one color to the other, but we are what we are going to do. Instead, it's make it so There's no text at all unless you hover over the picture. When I go to normal, it's like clear not that doesn't work. Just bring this down so you don't see nothing here and then let's do the same thing for the description here. So there's nothing here. Obviously, when you hover. I just want a nice white. See how called us? Nice stood out with the 2nd 1 as well. Looks quite called to me. Let's just change the hover effects as well. They're quite nice as they are to be on a sport. It's a bit much for me, so you can see you can change a few animations here for the text. You can make it so it zooms in, so grows. I just wanted to fade. Fading, obviously, yes, that's quite nice. It's a bit more subtle animation duration. You can actually changes evermore, So let's just changes to 1500. Now let's change the background here. The Khobar Animation that this is quite blood, which is good enough, but let's see if we can make it a bit better. So now we can actually read this a bit more or less, keeping a 50% a bit, but still want to get their image in there. But obviously the text would be point important. That's cool. Now let's go to advance here. Obviously, click on the column first, cause you can see We've got this white board around the image this click on the column, then change the margin. Uppsala is departing 20 You can see there's no space here for the image as it was before there was that white frame which has gone Now this is the right time to edit for the tablet . Do you see on the W? This is quite squash now is no something that find appealing sledges style. This that the minimum height. Let's just make it as 400 because I still want to get that height, but obviously not as high as the desktop version in the punting. Obviously you get the parting for the text made this 40 my mistake. So I still have the putting here, which I'm going to keep at 30 for this one in the content, all of the text. I want us to stay the same over effects. They stay the same, but the only thing I want to change obviously you can see this is quite thin here. What I would like is for this section to be probably half off the full screen. So to do that, we just click on the column here we've done this before. You know exactly what you're doing. Then call him with just put us to 50. That looks quite nice here. Now, the only problem we've got is not a massive problem here. But it's just really a few of these. Then duplicate this now. The problem we've got now is because we've got five images. This is not gonna fit, right. You're gonna have two of these under to here. And then one this on its own. So what I'm what I'm gonna do is leave to these and then have one on its own, a bigger one and then another two. Okay, let's just go to the more while version. Make sure everything looks cool here is pretty much done. The only one. The only thing I want to change is this is probably a bit too big. So I'm gonna click on this. Obviously, let's just delete the last colon because that's in the way. Then let's go back to changing stuff. Going to the box. Let's make This is 2 50 I should be good enough. Yeah, you can. You can start seeing how this looks here. The only thing I want to change in the more about version that I didn't do on the order two versions is you can see we've got this cool space here. I didn't like it on the desktop. I didn't like it on the top of version before. Every reason on the mobile, it works quite well. It just flows quite nicely. So this is understeer. Just do ways and doing this. You cannot be on the actual column, which obviously I'm gonna do it. It's 10. You can tell this 10 because I'm not a normally like to use around the numbers. And I recommend you do this as well. Obviously, if I go back to the tablet, there's no frame on the mobile version. We've got friends. If I duplicate this before too big of a space here. So what I'm gonna do is delete days click on the column. Didn't only the values at the bottom make sure it zero. So now when you duplicate it floors quite nice together here. Okay, cool. Let's go back to the desktop and finish this off. Mr. Lee, this delicious make five of these has promised. Okay? She's changed the images here. I've already caught them prepared. He just changed image. Cool. And this is the last one having used. It means you can see all of the animations and we're already done. You've done it once. You don't have to do it five times. Looks quite cool. Now, this is too close to the other section, so it's gonna edit section advance, and then I'm going to click. Just put 100 on the margins. Monsieur, that looks just 1 50 I think should work better. Yeah, I prefer 1 50 This looks quite nice. Let's go back to the tablet now. Maybe 100 for the tablet. What do you guys think? One This once Basie it you can see here. We've got this small issue. Still looks school. Don't get me wrong. You don't have to fix this. This two ways of doing this. You Your I report 33 on these columns here. They put 34 in the last one, and then you've got this kicking. I don't really like that. So our controls at this undo it. So what I want to do is I'll actually click 100 on this one then. I think I like that better for every is, and it gives me a bit more balance and you can actually put the most important thing in the middle. If you want. It's up to you. I'll just leave it like this for now. Okay? Go back to Mobile. You see the looks quite nice. Very nice. This Let's go back to that. Stop. Then Let's obey this. Obviously, don't forget to save. Then let's see what we've created. 9. Price Lists & Testimonials: Okay, So picking up where we left off, we gonna do two sections. Absorb, let's just start with the menu. Now, this is quite easy. You just go on to the elements click menu and then price list. All you have to do, go to style, then click on cooler. Just one day. Used to be my beautiful cream Here. 16. 600. Hope a case? Quite nice. Um, let me just put products for now. I'll just say products. Then the price will be nine 95. I'm not gonna put euro dollar or pound. I'm just gonna let you do that in the description. Less put quick, Lauren Epsom outside the typography. First Poppins is the one. Then the size is quite bright. Keep this zero and then pulling death. 13. Quite cool. That would be the description than the dotted lying here. Obviously, you have a few options here. Mine is none. Now, why did I do none? I'm actually going to duplicate this column. The price is gonna get closer to the product. So you're I will follow that because it's the same front, the same color. It's quite easy to follow. You don't need that line, so I use it now. I'm just gonna do this five times. It's just imagine we have 10 products. Duplicate this. We've got our products here. I want to add putting, obviously a little space in between these two. So let's just leave the column because I don't want to do this twice. Let's go back here. Let's see how much did we aren't in terms of putting on the left side. So 40 on the left, 60 under rides. What I'm going to do here. I wasn't gonna pork. Obviously we have to on link it again in the import, 60 on the left and then 40 on the rise. That's supposed to be all the way around cu snow When I duplicate this Got a nice Bates. Nice everything. Let me click out time. I looks quite called to me, but obviously this a bit too much here. So obviously it worked there. It won't work here. Let's just keep it even as 40 and then 40 on the other side as well. Obviously you can play about with these. He would works best for you. I think that looks quite balanced. Let's have a title to this as well, with a small description, pretty much the same as we added here. So she's going to this title here, duplicate it, then drug it on top of here. You can see we've got a small problem now because I've already done the columns I can only under tight on top of one of these. Obviously, this is not something I once thought. We delete that, so there must be a quicker way to do this. But the way I would do is I just had another section and then in here, just in a section. Whatever it's in. This column don't have the colon cause this one work. Describe this. That added inside the column about this again here and then the leader section. We've done a small mistake here, but obviously I left it in just so you can see that it's easy to fix. Obviously, what I want to do is edit this again, but now I know is that I want this to be a 40 than 40. Let's do the same with this one. Link 40 40 so you can see there's a few ways and off going about with the I could actually delete this and then duplicate this, but works fine now, now, listen. You will be initially wanted to do duplicate this and then drag it over. So now you can see I've got this space at the top menu. Not very original. It does the job door and then let me out A bit of a description here as well. She's drunk this over. I don't want the line. I might try it. There you go. We've got a small description. Maybe that line did look quite cool, so I'm just going to take it from here. Added in between, it looks quite nice just to be safe time. I'm not going to change this text just now. You can see I've done a small mistake here. You see, I've added the parting here on the column instead of the contents of the column. I don't want it. Try and fix it from here. Let's just didn't lead. The column been duplicated. This one? No, I know what you're both the same if you go on the tablet. Quite cool. She going to mobile looks cool. Let's just change this a bit because this is a bit too close this is just meet nit picking , but 30 here and then let me out a bit more on to the top Here, Tend. Should do it yet. Cool. I'm happy with that. Feel free to cheap Trick it and make it however you wanted. I'm happy with this. That's the version. Looks quite cool. We didn't have no problems with this editing on the tablet in the more while they've done it for us, let's have a new section. This is gonna be quite quick as well. That's why I've opted to do both of them on the same absorbed. It's gonna be a testimonial section here, licious on an image in the background, which all I've already got. She's this girl sipping on some coffee instead. Media position, center, center. No repeat cover. She's go back to lay out. We can see we've got this space on the left here which you want to put the testimonial section and only the left side, not on the right side. So what I'm gonna do is duplicate this column so you can see I can on Leon store here. The good thing about the testimonies quite easy to out as well it's called Testimonial Carousel. Just find it in the Elements Section Dragon and most of it's already doing for us, which is quite cool. What I'm gonna do is the lead, the second, and just so I can edit this and when I'm happy with this, I'll just duplicated over. Before we look at this, let's just get rid of this image because I don't want to image here. But then I can see this a bit better now when I want to end it, it going back here. Let's see the which Lil works best. Obviously, I know I want this left justify. So let's just click that from the start. Most of these work quite fine. I'll just keep image above the next. Things I'll Do is and it the text. I just noticed something really quick. You don't have to do it. It's very minor. But let's change it. Sex to the description here to agree very minor. But I just noticed that I just want to keep this is consistent. It's possible. Obviously, I'm not going. I am going to try the agree, although I'm not sure if it's gonna work. Try something dark. Just make sure the works consistency is important, but obviously I want people to actually see the testimonial here and then changed the Czech scholar here. Yeah, that looks quite nice. So I'm still keeping this consistent with using the same. Call it as a description and most detects have used on the website. To be honest, now that I think about it, let's just get rid of the position because most customers they want put their position is more important to have the name licious put in Rose Chill. Yet, unless finally, let's just change the typography here to Poppins the way it should be. I don't want to 600 because that's a bit too thick. 300 would work just fine, but then I want a text bit smaller, not too small. Maybe 18 should do the trick, then the line height should be a bit bigger. When districts to breathe a bit. Let's just give it a two. Then the name sex should be again Poppins and then the size of it. Let's make this a bit bigger. 24 should do this. Sheik 23 Find without it looks quite cool. Then the last thing I want to do is other title here. Duplicate. This is going on this on the top. Here, let me just left. Justify. And now I'm just gonna add a bit of a putting here on the left side. Just with much is the actual testimonial. Obviously other one. That's to say, menu. What this is going to say is could book testimonies, But let's just put our promise. Great. Okay. Other bit of a margin at the top here. I'm just trying too much this space here with this pace here. Great. Now let's go quickly to the tabla version. See these works quite well. You can still see that sexy. This is quite nice as well. Um, let me see if I can change this just a bit. Now, what I want to do is it's on a bit of a cooler as a background. Overly, it's choosing Grady in. Let's make this creamy. Obviously, we've got the pink here, which we obviously don't want. Put the cream back. But I want to scream too. They see. So we're gonna change the location. Can you see that? It just pins around. Now what I want to do is actually try and must bottom left here 80. It's quite cool. You can actually put radio, but it's not something we want, but let's just push it back a bit. Nice. Now, this is actually copying on the desktop version as well, which I don't mind at all. Now, I don't think this works at the moment. So the decision I would make when it comes to this, I would just change the color to detect. See it just going to make your wines, which I think is gonna pop out quite a bit. What I'm going to do is change the background overlay here that we've just created the Grady int just going to try and make it a bit colorful. It's just change all promised to White as well. Just so this much is. You see, it looks quite clean. Quite nice. Would actually play about a bit more. But again, tank and strength go to the tumbler version could see it works. The only problem I see here I would want us to be a bit more to the left. Maybe the column should be a bit bigger, so I would make it as 60% then the other one, I would make 40% and he still read the testimonial here. Then on the phone version. Because we've done this white. You can actually still read the text, which is exactly what we want. She's changed the punting here. 10 20. Maybe. Obviously we've got another common needs, but that doesn't hurt me at all. Then finally, let's change the name to Wiese's. Well, this is quite cool. Now that image is the main focus. Then obviously the testimonial going back to the destiny. It's quite nice. It breaks it up a bit. Depending on the image you want. You might want to change these colors. I think the white looks quite cool. Just want to make this a bit even more dark. So the text pops out a bit more than the location of it. It's gonna bring it in at 100. Here, let me go back to the tablet. Looks good to me. More about version looks quite cool. Go to the content off the testimonial. Just duplicate this. I just couldn't duplicated twice. You can see I've got the dots and a few hours here. This is how the testimony is gonna work. The only thing I don't want is for the arrows and the DOS to show. I just wanted to scroll automatically. So you go to additional options? Sure. Arrows? No. And then none when it comes to pagination. Now, I don't want this to pause in interaction, cause there's some people that might not know that this is crawl able, so I'm just gonna keep this as short as possible. Three seconds should be more than enough time to get an idea. Actually, four seconds should be fine off what the testimonials about it just changed the names here . Just gonna pull reaches David, then for the other name. Simon. Chris. Great. Let's update this. Let's just see how we've done. Let's preview the changes. So we've got the simple menu here in a nice This looks quite nice here. I didn't expect us to look desk on so you can see the animation here boat. The last thing I want to do is line this up a bit. Here, let's go quickly to the column and then changed the left side 25 on the menu section at the bottom changed the margin to 1 75 Update that. And then here we go. It's quite cool. Let's move on to the next section now 10. Contact & Footer: so moving on to the final sections of the website, we got to create a contractor's area with a map with a form and then with a photo with all of the contact details in opening times. The first thing I would do is at a two column section here. Make sure the content is full with, and then with no gaps available, we'll be going to the elements. We just type in Mup Google mobs just drunk this one in and most of it's already don't know if you've got a white frame all around them up. Don't worry. You can easily remove that. If you wish to. You go to advance, you click once imparting and them back to zero. Moving back to contents. You can change the location. You can be a specific is you want I'm just gonna type in San Francisco, then gonna zoom this in for 16 points, then the high. Let's just put it to put it to 7 24 now, okay? And they're moving on to the form section. Just gonna type in form delicious druggists over were the first ones name. I don't want to change that 2nd 1 email but I would like to other telephone section in between days. So thank you. It's tell the label name phone number in the place. All the should be the same. Make sure this is required because I want people to give me the four number. Their name, the emails already ticked. Then everything else looks good. You can put a required mark. I don't want it moving on to submit bottom. I would like it in the center rather than being the whole width. So click sensor. You can select an icon if you want. I think it looks a bit cheesy. Swells. Keep that part now. The last thing I would do is go to email putting a new email right here. Obviously, yours is not gonna be this. This is pretty much the email. You're gonna receive the message that cannot multiple emails by your separating them with the comma. You can see it says right there. I wonder Name in the number to be on the same line. So to do that to go to the name and when it says call them with 100% here just changed to 50. Then the phone number do the same thing in case he does that automatically moving on to the styling options column Go up. You can see how the distance between the name and the phone number changes have to be 25 there rolled up. Let's make this breathe a bit happy with 25 once again in the spacing between the labels I'm happy with, This is zero. The color. Here. You can change this. You can actually have it. So you can only see the one on the label. I'm happy with that now, obviously, because that's not part of the form anymore. We can just bring these even lower. I'm happy with the text Colors is going to quickly change this to Poppins. That's okay. Moving on to the field text color. That's not going to be needed anymore because we've removed detects on the top. Now, what I'm gonna change is actually the bottom macron cooler. Then typography less bring Poppins, but in the size of the bottom off the text. Obviously, if you want, you can change it. I'll just keep it as 16 300. Putting 15. Just so much of the tux. Okay, cool. Let's just bring the title here. Duplicate. Bring them text right above the form. Just put contact us. Now, let's just fix the parting on. Everything is going to start with the column here. Go to advance that. See, for hundreds. Okay. Looks okay to me. S Okay. Okay. Now that we've got that sorted, Obviously, I don't want all of this space here, so we either move all of this in the center, But then the guy up would be a bit too much. Here. What I'm gonna do is move back to them up. Just make it a bit short. Put it as 601st and see how that looks cool. I'm happy without. Then let's move on to fixing this for the tablet version. Okay, So the first thing I would do is actually let's get rid of the map, because I'm gonna have the dress on the photo anyway. So to do this, just go to the column here, then go to advance. And then when it says responsive, click on the then hide on tablet. I want to hide this one the more well as well. When I preview this, you can see you can only see the contact us. He's gonna put both columns at 100 and then put the 2nd 1 is 100 as well. Just so there. One on top of the other. You can actually leave the mop if you wish to. Because he works fine on the tablet. Obviously five. Preview it. I only get a contact which I'm quite happy with this. Moving on to the mobile version. They should be already done, more or less. Just have to change the punning here a bit. You just have to keep adding a bit of a part here. I think 60 works quite find out. What I want to do is just on 80 at the top in the nature of the bottom. Okay, so what I want to do is create four section in the foot area on the about US section a contact of section with the dress, the number in the email opening hours and also the side up underneath that will have the copyright infringement message and ah, few social media. Aiken's other one section here. Let's change the height of this just so we can see what we're doing. Okay, cool. We've got two column here. It's duplicate this four times, just so we know what type of space with playing with cool. So what I want to do now is a reconnected section. Go to styling. Then let's edit the background to something dark. Maybe not that dark. Let's bring the color up a bit too gracious, and then let's just start bringing some texting again. I don't want to restyle the text over and over again. So what I would do is find the text I'm happy with using their, which is this one at the moment. Then click duplicate and then grab, grab the text and just bring in the column here. Okay, let's change this text to about course. Let's change this to a having five and then make sure this is left justifying underneath. I want out of a bit of a text. Obviously, I am going to use this, then drag it underneath de about us. It's a bit with obviously we just have to change the parting here. Just keep it at zero zero once again. Coup. It's just left. Just fight. This is well, this already looks quite good to me. The second thing I would do is Just believe the second column and duplicated first Cool. Let's just seems that about us to contact and then just gonna delete this. Then what I'm gonna do here, it's just bring one of the menus ride there. I'm gonna explain why I'm doing this. Okay? What I'm doing now is Ah, let's go to edit all of this. Delete listless. Leave one product. What I am going to do first is take the color from here. Bring it instead of the cream and change all of this in here. Poppins, 13. Should be in the title in the price, and I'll show you why I'm doing this in just a minute. 300. So that looks the same to me. Go to content. Delete the description. Just changed the product to the actual address. San Francisco. Just copy that. I'm going to use something similar, delayed the price, then go to styling once again because I forgot to change this to default and then in advance. Let's reset the padding. Okay, so that looks quite cool to me. And when I click on duplicate just changed it for the address. Duplicate. This are the phone number. Obviously. All of these are made up. It's other made up email as well. So I like the spacing in between. The nice thing about this is that if I duplicate this, it's to leave one of the columns when I'm gonna put the opening hours. Now, the distances in between are quite perfect. We're gonna change the first address to Monday to Thursday. Do we're gonna put a time here 9 p.m. Till 90 sorry. 9 a.m. till nine PM What I want to do here is ah, go back to styling and then go to the separator and then other dotted line. I looks quite cool here for the opening hours. And now for the last section, Let's duplicate this again. Delete the column. Changed the title to cite my delete the actual, uh, opening times yet just going to copy it from the top of the website is just going to duplicate it. Just gonna take it as we've done in the past and just drop in there so we can check everything still find here, relying on your decide vertical this time around, then go to style. Poppins Looks cool to me. Text color changes to the agree. I don't mind out being cream. Winning hovers over school to advanced real quick. And then let's reset all of these zero 00 And then, of course, zero. If I click on the opening hours, it's had a bit of a parting here, but not just for the top. I did everywhere, So let's just stick with 15 and go back here. Vertical parting tube 14 looks a bit better to me. I didn't go back. It changed the putting. Two. Looks quite cool if you preview okay, So what? I've changed yet. That's on the same parting for all of the boxes. Now let's add a bit of putting for the title here as well. Just very much is the line it's gonna put left. 12 12. It's not enough that a bit more cause the menu had some sort of a parting even before we started editing it. Now, the cool thing about the desktop version you see you can actually edit, stopped from here. She's do this by I. For now, there's another thing I want to add a bit of more parting on the right side. Let's just keep it US 30 Okay, that looks cool to me. This poor 30 on this, moving on to the tablet version. It's a bit confusing here. Obviously, this was picked up from the what? The section we've worked on. Yes, reset. This will quickened on the value off 12. Now this already looks quite cool. We just have to change the column with a bit. So it is just our 20 here. Can actually put 25 I believe. So that adds up to 45. Let's put this as 35 then this one as 20 now looks quite cool. Let's have a bit more parting on the left and right side of the whole section, maybe 30 to the left, and then just tend to the right. That looks cool. Works they're moving on to the more while is already looks quite cool because I don't want to mess up with the actual site map. Just going to click on this section here, just going to make it so it's hidden on the mobile version. So in a preview, there's nothing there. Let's just quickly change the distances in between this columns, quickly going to this change. The left 20 just gonna fix it here, Giove. Then go to here. We said it. And just other bit more. Maybe 20 from the sides. 50 at the top, maybe 50 at the bottom. Cool lets out a bit more pointing at the top here. Obviously, let's keep the 12 as it wasn't before. Remove the link in other bit more. 35 should do it. And then the last thing I'm going to do is something quite simple. That's other two section layer here, a scullery as black, not the harshest black, a bit more grayish but darker than the previous. Great. That's cool. Let's duplicate text here and just bring it down below. I'll just put in copyright symbol Aroma 2020 cause we're in the future and then on the right side. Let's put some social media wings. Social icons bring them in. Let's add another one. Unless she's changed. The Google plus to Snapchat want them to be right just to find less course style. It's a bit official color now. Let's just bring the custom colors. And so the primary color is obviously the actual boxes, which I'm gonna remove completely. It's going to keep them white gonna make them small over your sleep. Is there a bit too offensive at the moment when you hover over the icon again? The primary color just going to remove that, go to the secondary color and change it too. That lets out a bit of animation. I love sink quite a lot. I'm going to choose that. You see Hope the sink of it. I can't seem to centralize this for that reason. So what I'm gonna do, she's deleted and then bring the title in just for time constraint. If you know how to do it, please let me know. I've been struggling with this for a while now. Okay? So do you have it? It's got a beautiful website hand. I spoke, Did this and let's see what was done. 11. Finishing Up: So we've got the core of our websites. Let's just start linking everything together. I want people to click on story here and then I want them to go to this section here and then when they clicked values, I want them to go over here. Then obviously contact goes to content and view. Menu just goes here. Obviously, don't forget to update your project. Exit to the dashboard. We're gonna move away from Elemental just for a bit. Go to apparent. I mean, if you can remember at the start of the course, we've created this menu here. If you go on story here, we've actually put hashtag story. I think if we had a link before we need to do is on the the You are ill. You have to put hashtag and then whatever reward you want to use in this case story and then for the values hashtag values, then the contact is different page. So we're going to leave that as it is, as we are going to create that paint really quickly. Once we link everything together, save menu and then go to pages, go back to home and then edit with elemental Now in other for dis linked to work, you just have to odd a nunca point menu, uncle. Then I'll just gonna bring this year at the top. Now, you won't see this once the websites live, as you can see. Okay, I just have to put in story here the word I would have used with the hashtag in the menu. You just have to use it again without the hashtag hope that this So when you click on story now, you can see it goes to the section. It's not perfect. Should go right amount here. So let's do that. He's gonna go to the uncle point and I'm gonna add 100 parting at the bottom of the uncle Point. Don't worry, You won't see this once The websites life hope that this and let's see what we've done. So when I click on story boom, that's perfect. I wouldn't want to do is quickly under the section or right here on this section. It's not gonna have anything on it. Well, what I'm going to do is actually bring the uncle point right there. So after we've duplicated just take it into that space, let's put value here is his values less does some When I go to values here now should go right here. It's a bit too much wanted around here somewhere. It is not the best use off the word value there, but we'll just stick with it. Mrs. Change this to zero because I don't want disporting on this particular section. If you could come values now he's he takes you right here. It is quite cool. I've taken the liberty off. Changing all of the text year in between courses is not too important. Issues that I was sick of looking at. Laure Maps. Um, now what I want to do is connect these two buttons to the menu section. So when you click on the bottom, it says here link, it already has the harsh stagnant. So you know where to put the world. It's just spoke menu. They would do the same thing for the other one. So the next thing I want to do is duplicate this uncle point once again. Okay, then bring it down on top of menu and then obviously changed the story were Semenya lets you see what we've created. Let's click on view menu boom. How beautiful is that under the one as well. Looks quite beautiful now that all of our bottoms work except the contact one. Let's bring in a bit of animation working. So the first thing I want to do is Ah, I want this text to appear a bit later. So to do that and go to advance motion effects and then entrance animation, then just fading up. No, listen, changes to fade it in. That's cool. What did that? And then when that preview, she just fades in quite nicely. What if we have the whole section fading and I go to the Navigator? So, like the second section, obviously, you could have named all of these. Don't play with the Navigator unless I've got columns or sections in front of other sections. So this section clipped advance and then motion effects entrance animation fade in. Okay, that's what we've created. So you can see it was quite cool. Let's go to the second section now. Obviously, I'm going to use all of these animations. You don't have to use them, to be honest, if used too many off, Um, it becomes a bit cheesy, in my opinion. Now I want to change this section. I only wanted sex to come from the right into the left side, so I'm gonna go to advance motion effects Berries, right? Boom. Now looks quite cool. When is to be slower? Same with the other one. Click on the column. Motion effects fade left and then slow. Cool. You can actually play about with these. Their lords of animations and the most effects and schooling effects, as you can see. Okay. I don't want to change nothing here. Maybe just the fading once again. Motion effects attributes are not motion effects yet and then fade in the normal. It's put the fading for the menu as well. The reason I'm using the same effective shot. It's because it's quite subtle. So I'm gonna go here. I'm gonna go to style, and then I'm gonna try and something. They've released gruesome mass effects. Just direct. You can see this follows the mouse yet. It's quite cool. When you gonna screw, You gonna notice it? And then you're gonna think it's quite cool, which is something I probably wouldn't use their. But it's there if you want to use it. Obviously you can use a lot of scrolling effects in there. Time purposes. We're not going to do that now, but play about what it let's have another motion effect and the animation fading. Let's do the same thing with this. We're gonna previous quite quickly now, just in one second motion effects, then fade in. Well, let's leave the foot as they raise. Let's see, we've done Now scroll down. The text comes in from the right side. But I think it looks cool like this where you've got this cool caller call to action boxes . The menu here in this nice calling effect. Now, this one last thing I want to show you before we end up this course, let me show you something else that I think is gonna help you quite a lot. Obviously, we've learned that we can copy and duplicates, so obviously we don't have to style, um, every time. But what if you wanted to take this whole page and copy over onto another page? Now, if I open up my navigator here, I can select the section here, which is the section with the image. If I right, click on it and go save template I'm just gonna name this hero. Gonna save this, gonna click Banks, and then for this first section, I'm going to save that one. But this one's gonna be called menu Top. That's quite cool. Let's copy the contact section here as well. You can actually do it with this sporting here if you right, click on the middle bit service template. And now you get the gist. We do this for the photo as well. Service template foot. And then obviously the copyright stripe saves template copyrights, and then save this. Now, if we go back to the dashboard, go back to the pages and then go to contact. Obviously we want to edit this with Elemental once again go to this settings bought in here . Just select the elemental converts. So we've got a clean slate now. Now what we're gonna do is click on the folder, which is a temporary You've actually have lords of pre made templates, but obviously we're trying to follow Ah already made design. So we're not going do that for this particular course. Then we've got all of the saved sections. Let's start with the hero. Gonna click. No, we've got the hero here. Let's quickly delete. Welcome to Aroma. Then we're going to click and added the text for the title. Let's just put contact. It was okay if you click. Plus here you can barely see here. The template cannot it my template. Then put menu top again. Click. No, let's make this a bit smaller. Make it as 4 80 That's cool. You can imagine how you can do this with all of the pages. Obviously, the image of the background I would actually changes. We're not gonna do that now, But you get the just let's aunt the rest of the templates. We don't quick so well on the contact. Gonna under gonna underfoot again? No. Then obviously, we're gonna add the copyright. So that's our contact section. Obviously you might want edited Make it your own way, But this is how you would do another page. If you update this, let's go back to the dashboard and let's make the home page as the main page of the website . So go to settings reading and then make your home place displays putting us a static page and then the home page selected to home save the changes So now when you click on your website, it's going to be live. We've got your nice website here. This looks quite call. In my opinion, all of this stuff we've done, everything looks nice. The view menu, everything works, didn't. Obviously, if you click on storyboards story, if it's become contact, we're going to the contact page and then obviously home, we'll bring you back to home and then the logo will bring you back two Home was well, so this was my cause. Hopefully you've enjoyed this course. If you have make sure to recommend it to other people, I am going to make another course with a bigger website. Ah, a few pages is going to be a bit more advanced, but hopefully with skills you've picked up on this course, it's gonna be easier for you to start working on the more complicated website. This is it for now. Again, let me show you the website with created with buttons that actually work. It actually works on all of your devices. Please check out my other courses as well. If they're not up already, rest assure that I'm working hard on them. Make sure to give me your feedback and hopefully you've created a cool website for client off for yourself. Most importantly, you've learned how to use elemental.