How to build a Designers Portfolio Website on Wordpress with free tools within 1 day

1. Trailer: How to build a portfolio website in Wordpress with the free version of Elementor: in the scores. I will give you an in depth view off the free version of elemental or so. This means that anybody can start working on this course. So who am I? I am Reno. I'm a designer from the Netherlands. I started designed 10 years ago and I studied design at the University of Applied Sciences . So devils really cool. So that's my background. Now. I'm also selling websites for on average, 1000 to 5000 euros or dollars. And I'm also teaching online what are really enjoy. I've made a website that you can see over here, where I've used almost all off the free elements off the free version of elementary. This whole website is made within the free version of Elemental. As you can see, there are a lot off cool things happening on this website and this is made with the free version. So in this course we will be working with this design. Fell thes are four pages and you don't have to have a designed to like this. This is Adobe 60. You could just also work often image, But I will show you how to work from eight existing design that you made or somebody else made and transform it into a real website. And if you have to skill, you will be able to create those websites which you can sell for hundreds and thousands of dollars. And the website that we're gonna build in this video. I actually used his website right now, so it's not a fake project. It's a real project that you're gonna work on. So what makes this course difference? Well, I've watched a lot of other elements or courses on DWhite. Most of them do Is they just import pre made templates, which I'm also going to show you how to do. But did you import a template they edited, and that's it. But that's not really how it works in the real world, because with real projects you will get a design fell from somebody else, or you designed something yourself, and you need to transform that design into a website, not the other way around. So that's what I'm going to show you in this course. Okay, so now what will we be covering in this course in the first chapter? We're going to make sure that you have your repressed set up ready to work with then a section to we were going to install a mentor and installed the plug ins that are important . In Section three. We will design the home page inside of Elemental or a wait a separate video for every section on that page That is just going to be Viet wreck and drop as I was not gonna be very hard and once you are familiar with elemental, or we will make the home face responsive. So that means also good few herbal on mobile and tablet. And then we will move on to the other pages, which will be a lot easier because we now can copy things from our home page to the other pages. And then, lastly, I'm gonna show you how you can put your website life installed backups and make the were Pre's looking experience a little nicer. And there's also a bonus section where I will show you what you can do with element or pro and how to get your website do the next level. So I designed this court for people who don't know how to go but are interested in earning money as a Web designer just from their laptop. So to make sure you get a result out of their scores, I've provided all the images. Like I said off my website in a download link inside. Of course, So you can also build a website and you can, even if you want to use my design, change the colors, change the phone, and use that design for your own portfolio website. All right. I hope to see you inside, of course. 2. An Overview + What you will need to know: All right. Welcome. Inside the course, you're now officially in the course. It's super awesome that you're now here. We're gonna build this website together. You've probably already saw the website in the trailer. But let's dive in what we're gonna create together or right. So when you first come on the website and the website is loading, uh, the sections coming to place women animation. And there's a video in the background that's playing. You've got the school wave effect, got mouse over effects when you're scroll elements gets built up when you scroll through the website. Um, you know, I've tested some different animations. Here is a timer or an animated number, the testimonials that came in with a fate and then something with a slight animation. And then there's the portfolio section, and every page has this nice animate in animations. There are items here, and as you can see, there are a lot of mouse over effects. These can be links, but the right now it is just a text. There's a food or on every page. The about page has free sections. We're also overlapping images with cool tap bars. Over here, there's a image gallery. And then there is the F A Q, which you can open and close however you want s. Oh, that's pretty cool. And then on the contact page we have a Google Maps and you can set this map to any location or even specific street or house or office that you want. And then here is the contact information with a phone number and email and social media Aikens. All right, so what do we need to understand in order to make this website? All right, So this website is made with elemental or but elemental runs on vour pra So how does this all work together? So I've made a little sketch on the iPad, which I want to show you. OK, so all of our pages are built with l. A mentor and elemental cannot run without a team because that's how we're press work. So there's a team. Um, and there were pris. So we're press has a team and l a mentor is using the team and we're gonna use the team on the website to create this menu on the top, and this whole package has to be safe somewhere on the Internet so that everybody can access it. And that's what we go hosting. So hosting is use a server somewhere on the Internet, where all of your fells or stored and everybody can access your website 24 7 eso deaths. What what hosting is for? And then for people to get to your hosting, you will need a domain name. And a domain name is just a name. Is that you're also, for example, is your name dot com and the domain name is just a link to all the fells on your hosting. So then the viewers can see the pages that are public and you can see ver press. All right, so that's the first thing we're gonna do in next video. We're going to make sure that we get this. I'm going to show you the most easy way to do this. And they were gonna install over press on that hosting so we can get started. All right, so it's you in the next video 3. Choosing a good domain name: All right. Welcome back In this second figure, I'm gonna show you how you can get your own domain name and hosting for your website. And this is the only thing that you have to pay for If you want a website, we're gonna use Onley free tools in this video. But you cannot have your website life in the air. You know, hosting everybody on planet Earth has to pay for hosting because, as I explained in the previous video, your website is a stored on a server and a company is keeping those servers online 24 7 They have support if you run into a problem. So that's the only thing you have to pay for and I'm gonna show you The cheapest way to do it is because you don't want to spend a lot of money when you're just starting out. All right, so let's just get started. I'm gonna go to my website because I've made a list for you with all the links that you need to design and build build websites. It's on my Web site living with pixels dot com, and then you click on links, or you just go to living with pixels dot com slash links. And I will also put that link in the description below this video s O. This is the page that I use Teoh put all the sulfur that are recommend on my websites and you can always access it. And I've also put some explanation on each point on why I think this is the best. So I recommend you save this link as a bookmark on your on your computer on your browser so you can always excess it. So on this page, I will, you know, put the best hosting domain providers have a boot, the best page builders. Eso you will always have one place where all the links are. All right, so on this page, the first thing that you will see its site ground site ground, is, in my opinion and a lot of others uh, the best housing provider in the world they are number one recommended by repress, which I think is you know, that that only says enough about how good they are. They have 24 7 support. So if you run into a problem, they can help you with phone and jet. I've transferred all of my Web site to site ground because they have just great support and they are super cheap compared to what's out there. I was being and hosting provider. That was very, you know, technical. And they had, you know, no support Fiat yet. And if you send a support ticket, you had to wait like two or free days, and that's that's not what you want. And I was also paying $5 per month for every website on, and I'm gonna show you how cheap this is, All right, so this is one of one of the best in the world and one of the cheapest. And, you know, that's also the reason why they are so popular, of course, but it's it's super nice. It's also super nice is that you can get started right away with most hosting providers. When you buy your hosting, they will let you wait, like one day or a few hours on, and you just want to get started right away. So I highly recommend side ground. It's I think it's the best right now in the world. And if I'm changing my mind, I'm gonna change this page But for now, I run all of my websites here on a super great. So let's just click on psych road hosting and bigot blend. That's right for you. All right, so here you can go to repress hosting, and they have free packages. All right, I am on this package, but you don't have to start with this package. If you want to make a really cheap, you can start with this package. But what's super nice about this package is that it has unlimited websites on and with the unlimited website. You don't have to pay, you know, $5 a month extra for a new website, as I did with my old hosting provider. I paid, like, $50 every month for Onley hosting, and now I'm only being $6 a month, and that's that's super cheap. And they have better support. They are faster. So I'm not going back. Okay, But if you're new to days and you don't want to spend a lot of money and you just want your first website in the air, I suggest that you did You go with this one right now. I'm also gonna go with this one to show you the cheapest way to do this. And this is this is the price for the hosting. And you will also need your own domain name. You want to have your own name dot com, for example, Might first and last name is reno de boer dot com. And I don't want anybody else with a website that's, you know, the board are called because it's my personal name, but But that's up to you. I suggest that you at least by your personal name, you know, for the most cheap option eso we're gonna get this plan we're going to click on, get the plan and we're gonna enter the domain name here. Eso If your name is John beautician, you're gonna type it in here and then you can at the extension. And if you want dot com, you're gonna go with proceed. And as you can see here, John Peterson is, of course, name that more people have. So the dot com is is not available anymore. So you can choose a different one or just, you know, put something behind it that you want eso Now I have to choose something else, but my name is not jumpy, Edison, but I just wanted to show you, like, what will happen if the name is not available anymore. Eso Now, I'm just gonna go with the no portfolio dot com, and I hope that one is available. Yes, off. Right now, it says, congratulations. Reno portfolio dot com is available. So this is what you also have to do, like, pick a domain name. If your own name is not available, then pick something else, and then you will get this screen where you will see congratulations, and you will need to feel in your info. So So now I'm gonna feel in my info, and then I will get back to you when I filled in the info. All right, All right. Now I have come to the payment information. You can just pay by cart. Um, and I'm gonna use ideal because I'm in the Netherlands in this the payment system here, but you can just feeling your your credit card info. Okay, So now here, you need to choose what you want. Um, and I'm gonna show you the cheapest way to do this. We are on the cheapest blend, which is start up. The data center is in Europe. But you need to change this. What's the most close to you? The period. All right. This is an interesting one, because this will change the price. They will give you a huge discount if you, um if you buy it for a longer period. Right. So the more months you buy, the more discount you get, which is a great system. Because if you already know that you want you know, this your personal website for at least two years, you could just go with 24 months and then you will get the hosting for 24 months for this price, and that's that's really cheap. So let's just put it on 12 months and see what the price is. Um, so here you can see the price, and this is for a whole year, right? So you're with this pressure will get a domain, and you will get the hosting for 12 months, and if you then go to 24 months, the price will be higher. But, you know, if you calculate the price for two years, it's gonna be cheaper because you're getting 24 months for two discount, right, Because if you're going to do 12 months, you're gonna bay for, you know, four euros or dollars per month. But after 12 months, you're going to go to this. If you know that you want this website for a least two years or even three years in the air , it's just a smartest Teoh, you know, do this option. And then, yes, you will have some bigger investment at the beginning. But this is the price for free years, so you won't get the bill every month. But if you think this number is too high for now and he just won a test, If this is something for you, you can also choose to try a one month. Um and then they will, you know, at $12 for the set up, and then it will only be dirty dollars. So that's the cheapest option you can get. But then remember that it will be, ah, higher price if you don't set a period to 12 months or 24 months. So for me, this domain name is only a test to, you know, for the score show. I'm gonna do it with this, but for my own website. I just bought the T 36 months. So here you have a few other options. You can just check the domain privacy. It will be a bit more expensive, but this will allow you to hide your name because some people will have a website that's not their personal name, like I f here. And then they don't want their personal name connected to the domain name. So if you want that, you can, you know, check this and, um then if you know somebody is going to search online for who is the owner off these domain, they're gonna not find your name. And if you don't check this, they're your personal name can pop up in the in the results. And I don't think that it's a huge problem that they know it's me, especially not because this is a personal website. So I'm not going to buy this, um, side scanner. I'm also not going to buy that. Ever press has a lot of tools to do this, so I'm not going to use that, and they also have a money back guarantee. So if you're really not happy, you can just ask your money back. Um, so right now, I'm just going to confirm that I have read and agreed deci crown terms, which I have not. I mean, who does that? I trust them. And I would not like to receive off. I would not like to receive offers, and I'm gonna pay now. All right, I've just paid and they say thank you for purchasing. Your transition was complete. And now I need to check my email because they've sent me an email. All right, so here it is. Here's my email from Site Ground. And now I've just received another email from them with my luck in. And that's good. That's perfect. And now I received another email from them recently. You have resisted. In order to insure your domain name remains active, you must click the following link. All right, so I'm gonna collect the link, and you just need to wait. And then you need to verify that this domain name is for you that I'm going to click on verify information because the information is good. All right. And now it has been verified. So I've bean set up. And then in the next video, we're kind of in silver press on our hosting insights site, ground 4. Installing Wordpress on a hosting and domain: All right. Welcome back to episode free. In this episode, we're gonna install WordPress on site ground eso. We're going to go back to our email that we got and I have received a lot of emails from them, but I only need this email important information about your new hosting plan. So here is the log in information. I'm going to click on my site ground dot com, and then we're gonna go to the Logan, the user name. I've got that in my email. That's just my emails. I'm gonna got be dead, and I'm gonna delete this. Only my email. Then I'm going to go to next, and the password is up here, the one you choose during sign up. So my google chrome jos a password for me. So I'm just gonna use that. But of course you need to write that down. So I'm gonna signing right now, and we get some cool animations. And now this is the new site ground lugging experience. It's so nice. Just a week ago, Dave updated their whole system and it looks so cool. They have the school administrations here, and it's so easy now to insult your website. So this is William. Look into your account. Um, here you will see your all of your websites here. You can see your billing information, but right now we're just gonna set up our first websites. So we're going to click on set up site, and then we will, of course, start a new site, and then a few options Well, will be at the bottom. And then we're gonna go with wordpress, right? If you already know that you also want a web shop with per press, you can choose this, But right now we're just going to start with WordPress, all right? And now we need to create our ver pressed look in eso. I'm gonna use the same email and not the same password. I'm going to do a different best word for our ver press Le Guin. They have to generate options. So I click that and I'm gonna copy that. And now I'm going to save it somewhere in my notes. So I suggest you safe this. It's even better to save it in a password manager. Of course, I have one password here, but this is the the log in your name and is the best word that you have to safe s So this is your WordPress looking right? The looking If we just used to lock Inish your site ground looking right. So now we're gonna click, continue, and then they can you know, they will still try to sell you even more. But we don't want that. So we're not gonna add that and we're just gonna click finish. And now it's creating my website. This means that in the background right now, it's in selling repress. We don't have to do anything. And this is so, so easy, Like, back in the day, you will have to you have to download a zip from repressed on ork that you have Teoh extracted in a in a folder blah, blah, blah. And that was just a few clicks. You just choose a user name and password, and now it's installing. So we're gonna wait for this, and then when it's done, we're going to go to the next step. All right, so now it's done, and we're gonna click on manage site. So this is the place where you can add email accounts, for example. I want another email. So If I want to have a info at Torino portfolio dot com, I can create it here. All of the fells are of your website are in here. And here are also some ah analytics. But we're not going to use at the end of legs off site ground. So now we can just go to our website, which, in my case, is city no portfolio dot com. And they were going to go to the lugging over press, which always is WP Dash Atzmon. Okay, so now we're gonna lug in with our user name, which is just my email and the password that I just saved. And now we're gonna log in. I'm going to save this for now, so I don't have to type it in all the time. And now I'm in my Rippers website. I'm going to click on start now and now site ground wants me to install 18. They have this whole starter package, but you know, they will install a lot of things that you don't need, So I'm gonna click on exit. I don't need all of this. And now we are in sight of er pre's and inside a verb as they will. As you can see, they've installed things off cycle on which we don't need. So in the next video, we're going to clean this up. We're gonna prepare for press s so we can start building our pages. All right, so it's see you in the next video. 5. Wordpress Basics, Cleaning up: All right. Welcome back to this next video in this video, I'm going to show you the basics over President. Kind of clean all of this up. So this is how it looks. When you look into were press, you will see. You will always see this bar on top and you will see this bar over here. And this is just a quick kind of navigation. You don't really use this. Sometimes you use it. But most of the time you will use this bar. Eso Here are all of your pages here. All your block boats. If you're going to start a block, your boats will be here. If you upload an image your your images, your video fells your Aikens, all of that will be here. If you have a block, you of gunman's, that's gonna be here. The parents here are your themes that your installed and the menu. So we're just gonna use that one and that one and sometimes this one, the plug ins. It's also really important up. That's the place where you can install plug ins because we're press is just a framework, right? You could few where press as just a brick walls off your house on but the plug ins, you just install a door you install, uh, the windows, Um, and everything like that. That's That's how I like Teoh. You know, explain it. Users, if you have more users, that's going to run your website. Besides you, you can do that here. Tools. We're not gonna you really use that one and settings. That's the first thing we're gonna do right now. We're gonna optimize the settings over here, so we're going to go. We're going to start, of course, with General. All right, so the first thing that purpose will do is they will name your purpose website. Eso devil say it's called my work breast. But you know you want your own name here. So for me sitting a portfolio and you can also see it changes here. So we know portfolio and the decline will also appear at some places. For example, if you hover over your browser, sometimes it will pop up. So here I would also put something that is represented ble right, and not just another over press website. So something like my designers portfolio. Okay, so here you don't have to change anything. You know, you can change the time if you want to, but I'm just gonna leave it like that. So we're just gonna click, save. All right. So now it's safe, and the last thing they want to do is go to bear my links, and then we want to change this. Do the boast name. Why is that? Because if you make and you both and your block boats, it will generate a super long link on. That's not really what you want. You just want to clean and simple. So I always always changed its to post name. So then when you make a post and you call with ah Mei knew ah website is just your website dot com slash my new website. So that's also when I always change. All right, so that's that. And now we're going to go to plug ins because site grown has already installed ah, lot of things on our website, which we don't want. So we're gonna deactivate this Blufgan, and we're going to deactivate this plug in, and now we could go back to the dashboard. You're going to see that this is the normal wordpress. You know, starting screen that you want. You don't want all the fluff. So we're gonna go back to plug in Just so you click on the name and we're gonna go delete those two. So just click on the lead and click on, OK, Now, also, to make things easier, ver press is testing his own kind of page builder, which is not really good yet eso I suggest that you just install the old version which is called a classic editor. So we were just at plug ins. I click on Add New and here is where you can add and find plug ins to install on your website Ondas You can see five million people have have have also decided that they like the old editor over press better than the newer version, right purposes also trying to innovate. But a lot of people just like the old version. So I always install the old version on the Web sites that I made because it's just easier. Just just trust me on this one. You know, five million people have also done it so then also what you want to do is you want to secure your website of course. So now it says it's not secure and some people will get this red warning in their screen. That's not what you want. So we're going to install a simple blocking that will make it SSL. This only works issue if you're hosting Provider, of course, provides SSL, but you just want that green little lock on your website. So just go to a plug ins and at new and then just type in S S L as they were gonna make the website secure. Um, this is the one is the super lights and pull plug in use. Click on install. Now really simple SSL is called and you could just click on activate. And now if you click on activate as a cell and you click refresh, you will see that boom. Now the website is secure, you know, And that's also what's so nice about site ground. You know, with a few clicks, your website is secure and sometimes you just have to go in this settings and blah, blah, blah. So now we need to log in again. Eso we We've made our website secure and a little easier. And now we also want the basic were press a security right because we don't want our website to be hacked, so I'm going to show you how to do that really easy. They were going to go back to at New Blufgan, and I've tested a lot of security plug ins for WordPress. But the one that I think is the best is I teams. It's also a really popular one. As you can see 900,000 down notes. There's also one that's really popular. That's called work friends. I've used it for years, but it's making your website slower, and this one is also super good. But it's not that heavy. So you want a security plugging that's fast. That's not going to slow your website down. And that's cure, of course. So I'm going to install I team security for now, and I'm gonna activate it. All right, so then you will get the security thing over here. Some plug ins will, you know, at a little bar in this work process at Minbar. Most of them don't because otherwise it would become a mess. But security plugging has so just click on the security and then you will get this bump up and you will need to secure your site. And if you click and secured, then your site is secured. And there you can also join DIY Network Bruce for protection. That's super nice, because with Net network brute force protection, they just have this whole network of different websites connected together that will help each other to protect each other. Right. So that's what you want activated. So now you you just can't click on close. Don't click on this one because we already did it. Click on close and the last thing that you want to enable is 404 detection just enable it on. Trust me that it z good. All right. And now the last thing that we want to do is make the website private because right now, if anybody can access the website, this is how it looks like because we haven't installed elemental and a team yet, so it's it's really arty, but everybody can access it now. So does what you don't want when you're testing out pages. So the less blocking that we're gonna install for now, IHS called my private site. So we're gonna go to at New plug in and then my private site with this plug and we can make our website private so people from outside cannot see what we're doing in the beckoned. So we're gonna activate this, but that's not enough. You also need to activate it in the settings off the plug in. So you go to plug ins and then two descending off my private site, you scroll down a bit, you click on enabling because by default it's disabled and you click on safe. Now when somebody types in reno portfolio dot com, they will get this so they will see that the website is not life. That's just a basic set up that I always do. Before I really start building up two pages because now your website is secure. You have SSL and nobody can look on your website. All right, so that's it for now. In the next year, we're going to create our first Bages 6. Installing Elementor and creating our Menu: Hey, everybody, welcome back in this year we're gonna create our first Bages Dominion structure, and we're gonna set our home page. But before we're going to create our pages, we are gonna download Element Or, and the version that are used is a living with pixels slash links. So if you go to that link, you will see this page, and then if you scroll a little bit down, we're going to see the get element off free. And if you click on that link, you will download Elemental for free. Okay, so I clicked on the link, and now my download will start, so I'll just safety zip fell to my downloads. Fuller. I go back to work breasts, I go to plug ins, and I'm gonna click on ads new because we're gonna drag this zip fell into repress. You don't need to extract the zip file. You could just direct a zip fall into WordPress. Any will work just fine. So just click on upload, plug in, and now we have to choose fell option here. If you're on a Mac, you can drag it from here. Suit is Aiken, and that will work. But if you're on a windows. Just click on Choose foul goes your downloads folder click on the fell that you need and click on open. And if you don't click on install now, then ver press will start installing the elemental plug in on your website and then you need to wait until it says Blufgan insults successfully. But it's, you know, pretty fast, most most of the time. And then you click on Activate Blufgan. So now, element or is insult on our website? So if we create a page from now on, we can just add it it with elementary straightaway. Okay, so now we're gonna create our first pages. So go to page is just click on the text off pages. And this is an important Beijing ver purpose, because this is the place where all of your pages will be store. So if you create an about page a contact page, it doesn't matter. It is a very important page. If you create a block pose, for example, those are stored here. But all of your pages are stored here, so we're gonna click on at new to at our first page. Then we're going to give the name home. The most important page on our website, Of course. So I've got at home and now I click on Publish. And since we've made our website private people cannot see debate show. Don't worry about that. Now we're going to add another page because first, I want to add all the pages that I want before we're gonna fill the pages. So just at another page, the portfolio page and click on Publish. Now we're gonna add another page, and that's the about page and click on Publish. And the last page that I want at is the contact page. So click on, add new again and click on type in contact. Click on Publish. Now, if that's not, go back to the tap pages and you will see if you've done it right, you will see the four pages that we just created over here. This is what you need to see before we're gonna move on to the next step. So if you have this now, we can go and create our menu. So go to appearance and then go to menus. We need to create a menu inside of purpose, and later we can use that inside of the team or inside l a mentor to do different things. So what we're gonna do is we're gonna call the top menu. I always go to stop main menu because sometimes you will have different menu. Were navigation structures within a website, but the top main menu I always go top main. It doesn't really matter what you what you name it. So you just create you click on create menu, and then you put it on primary. That's the top section off your pages, and we also need to add pages to our menu. So go to the left here and just Glick all of those bages and click on add to menu. Now we have all those pages here, so our menu is ready and to see what we've done, we're gonna click on manage with Life Brief, you I clicked on his with control so I can see what I'm doing. And now, as you can see, the menu is over here, but it's in the wrong order, so go back to the page. And here we can just track the menu items in order that we want. If you hold it like this and it will jump in a little bit. That means that it's going to be a sub page. So So if you have a menu structure with drop down, it's gonna look like a drop down. We don't want that. For now. We just want four pages. So first I went home, then I want about I mean, portfolio about in contact. So now over gonna save the menu and we're going to go back to our beige and we're going to click on Refresh. We're going to see that the order now is correct. And the last thing that I want to do in this video is set our home pitch. So what we need to do is go to settings and then reading. And we didn't reading you. You need to say to her prayers like, Hey, this is my home page. Automatically, WordPress makes your latest SPO so your block post your home base because WordPress originally is a blogging platform. But we want another Basij as our home page. So click on aesthetic page below and then set the home page to home the paycheck. But you're just created. You can also set other pages as your home page. But of course, reaches wanted the home. We don't have a blocked page yet, so let's just leave that empty for now and click on safe changes. And now, if somebody feel few our website, it will first visit our home page, which is what we want. All right. In the next video, we're gonna install our team a free team, so stay tuned for that. 7. Installing the Free Theme : Welcome back in this video, we're gonna install our team free team that we can customize. Right now, we have this standard WordPress team that's not very customizable. So I will give you one of my top recommendation for a team. So what you need to do in order to create I mean, to change your team is to go back into never pressed dashboard. By the way, if you were here and you want to go back, you can just hover over this and then go to dashboard again. Close this one for now and also closed this one. Okay, so what you need to do is you need to go to appearance, and then you need to go to teams. Um and this is one of the place inver purpose that you don't face it that often. Once you have installed your team, you don't need to touch it again. And that's kind of it. So what you need to do is at a new team from this, But in over a year, we're not gonna upload it, but we're gonna find it. So type ocean, WB Over here. This is one of the best free teams that you can get very customizable. Um and it's free. I think there's also a bait version, but I didn't even use the beta version ever because the free options are so good. So just click on, activate again and wait for it to load. Okay? It's already done on. We can delete this one, so go to team details and then go to delete and click OK on. And this will keep your WordPress clean. That's the way how I like it. I don't want my verbose website to be a lot of blood gins. Ah, lot off deems that I don't use anymore because sometimes you will get emails from them like , hey, day Esteem does needs. Ah needs an update, but I don't even use that team anymore. So what's the point? Speaking off email notifications, I forgot to tell you in the episode number four I believe that you can also change the notifications for your security begins because security plug ins are known for sending you a lot of emails. So what I wanted to show you is another thing before we're going to change the team setting so hover over security, go to settings so If you're over here, you're gonna click on notification center center, click on a configure and scroll down. And then this able does to security Joe, I just You can leave them all, But I don't like, you know, to get so much emails, they even want to send you like a daily security email. I don't see. I don't really see the point of this. So I suggest that you, uh, uncheck those and click on safe changes, and now you will get less emails from them. Okay, Now we have insult a new team. So let's just check out what the new team looks like. And, as you can see, this is the new team. There's nothing on it right now. Will be. I have. We already have some categories over here. We're not gonna use that in this website, but this already looks a lot cleaner, and it's a lot easier to customize to get a design that looks like this. So that's what we will do in the upcoming videos. But for now, we're going to check if the team settings are correct. De with off Modern website is 1140 pixels. So what we need to do is we need to tell the team that we want also D menu to be 1140 pixels white. So scroll down. Go to general options and Denko to general settings. And then you will see here this team by default is 1200. So we're gonna change that to 11. 40. And now the whole wave off the website will be a maximum off 11. 40. And this is good for now. So just click on publish, then go back, then go back and we will change all of this later. So for now, just click on the X and we are done for this video. Now, we need to do one more thing before we're gonna jump inside of element or and started working with images and college and all of that fun stuff. We need to install a few Blufgan. So that's what we need to dio in the next video. So I hope to see you there. 8. Download the exercise files: Welcome back, Chapter two. We're going to start the design journey. This is gonna be exciting. I've made it very easy for you guys. I have made a folder which you can download. Fear the link below with all the images the Eigen state video, my logo, everything that you need to recreate those four pages that you're seeing right here. So Donald does fell. Go to the link below. Click on it. It will be a sip. Fell. You can unzip that fell on Mac. It's right. Mouse click and then extract extracted here on windows. It's kind of it's the same if it doesn't work on your computer. You said you should download something. Uh, like Vin. Zip on. This is one of those free tools that you condone. Oto, unzip, but almost computers. You can just right click extract, and you will get all of the images and videos that I'm using here. So that's is for this step. You need to do this. Otherwise, you cannot upload the images on your own website test. So that's it. You don't need to do this if you already have your own design for your own website. Off course But if you do not have a website yet and you just want to practice, this is the best way to do it. And then if you're done, you can just delete all of those Bages and make your own website. But I want to make it Eddie as easy as possible for you, of course. So go down on that link and then click on the next video. 9. Picking your fonts and your colors with Adobe Kuler. Save this!: Welcome back in this video, we're gonna talk about collars and funds. This is very important that you prepared this before you start inver press or in a designed to know what kind of funds and colors you want to use. I see way often that people just are so excited that they want to start and they create a whole page and it just doesn't look good. So what you want to do first? If you want to prepare all of your phones and your collars before you start designing, otherwise it will become a mess. Trust me. So I have some good sources for you that you can use. And the first thing that I want to show you is called Google Phones. Since a few years, Google has a pretty nice library with all with a lot of phones that you can use four free on your website. And the great thing is that l A mentor has implemented all the Google phone. So all the phones that you see right here very creative ones, very static ones into L. A mentor, and you don't have to pay anything for it. Google phones is free and elemental has just implemented it. So deaths really nice. Now I want to give you some tips to choose a fund. First of all, I want to say that off course handwritten phones are for more creative parts off your website. So, like I have up here in my header, I want to make it a little bit personal, so it looks like it has been 100. And even though it's it's not. And if you want to find those handwritten funds, you can go to galleries here and, um, own ejected Hendren of phones before now I just want to focus on serif and sans Serif. So what I'm gonna do is uncheck all of those. And the most important thing that you need to know is the different between San Serif and and normal serif. Okay, so let's just first look at Sarah if you recognize those phones, probably from books and from the newspaper toe printed newspaper, because it's easy to read because those phones have those little lines beneath or on top off every character. So all the little lines that that guide your your eye in the sentence. Those funds are called Siri phones and Sunsari far more like the modern version. And those funds do not have that They look more modern. So, for example, this is a song serif fault because it doesn't have those lines on top or the bottom off the characters. So this is a popular phone Poppins. And as you can see, these phones are more modern looking, sort of found that I use over here is called Monserrat, and you can also find that over here. So if you search for months around, you can find it here. And this is the ah thief inversion. But there's also a bolder version that you can select inside of elemental or so this is what I want to show you before you start designing your Web site. Just a little tip. You could just recreate my website to test. But if you start designing your own website, you want to prepare all of this before you actually start working elements or just a little dipped. I don't want to give you and this is the same for the collars. I have used a few different colors in the website, and I have prepared those collar here in my Adobe X'd fell If you don't have a designed to like this adobe X T, that's OK. You can just go to a website like Adobe Cooler thinks it's called. Oh, now it's called Collar. OK, we go to color dot adobe dot com. This website will help you to to create a color palette. Um, as you, as you can see right here the collars in my color palette or within the purple rain should . This is what you can also do. If you, for example, half a Corinne website, you could just directed this slider and make it a little bit more shaft or make it more hard. And what's beautiful about this tool is that if you scroll down, you can see the color of coats over here, write them down or put them in a text that it fell or just make a screenshot off there. So you you always know what goat is connected to. What Gahler. Because if you copy dis code and you go to L. A mentor and you based it, you will just get the same exact collar. So that's really nice. But analog issue can see is it's very similar in terms of color. So I suggested you use Mono Gramick, for example. So you can create something that looks like this. Maybe something like blue or something that I did something more like this. Or if you want to make your website more dynamic in terms of callers, you can pick something like this. So you will have two main collars and one extra collar to make it a little bit more interesting. So this is just a really handy tool that I want to show you. Write down the ghost or make a screenshot off this before you start designing or building your website. So for now, you can just use the college that I have over here. So now you can just use the color codes that I have over here. I will also put dis fell into my downloads. So now you can just use D collar coats that I have over here to create this website. But if you have your own website right on the collar, coats right down the phones that you want to use, you don't need to download them because they are already inside of L a mentor. But just write down the names and then you are done. Okay, that's it for now. In the next year, I'm gonna show you how you can implement these scholars into l. A mentor. 10. Preparing Elementor Global fonts & colors with a color pallet: Welcome back. In the last year, we have prepared the collars and our phones. So now we're going to implement those into L. A mentor. So the first thing that you want to do is go to your pages inside of her press, and then we're gonna go and edit the home page, click on edit, and now click on Edit with L. A mentor. And now it's gonna go full screen. We're going to see something that looks like this in this video. We're gonna only make sure that elementary is set up correctly. So we don't need to worry about this. We go to the hamburger I can in the left upper corner, and now we go to default collars in this section, you can set up your default callers, and this is one of those super nice features that helps speed up your work float tremendously. So what you want to do is grab the collars that are over here, and I've also made a text fell that's also inside of the download folder that you've just download with all the coast. Or you could just copy those fells. I mean, those coats along with me so what they mean right here is the primary header. The secondary Heather D normal body text. So the big blocks of text and the accent, this is for things like buttons. So now I'm gonna show you. If you go to D nine Aikens over here, for example, you dreck a button inside over your page. It's green, right? If you then go to default dollars and you change the green, for example to read, you can see that all the accent colors will change to Dad collar. It will just always be the color that you set up here. So the accent color that I'm gonna use is this a purple color, So just go to D color. And then here's the coat. You select everything and you based it. I'm using comments, see, and common fee. But you can also of course, just right. Click copy. Now, all of my text is another caller. Now all of my text is discolor over here, so I'm gonna copy deck coat and I'm gonna base it in here now for D titles. I'm gonna use this dark color. Uhm I'm going to use the same 40 primary and the secondary um because of my design, all the titles, hat or white or black so it doesn't really matter. So I'm just gonna put the black one over here and the other black one over there. And then if I click on, apply everything is Safed. So now we go back and we go to color picker. Unfortunately, did they don't copy the default collars onto here, so we need to paste those colors again. But we have more options here, so I have my website has a lot of different dollars. For example, I have dis Ah, very greyish purple background collar. That's this collar over here. So we're gonna grab this color and put it on the 2nd 1 The first thing I want to be I just wanted to be white light gray. And then I want to have the black version. I wanna have tea body texts, the dark purple, the darker purple. All right. And the last one is the light purple collar. And now we're gonna click on apply. And this is really easy. Because now, if we drag in a text, for example, three color picker already has all of our colors. So we don't need to go to check our color codes the whole time, and this is a little bit of work, but otherwise you need to check your color coast with every item you import. So it's very smart to to just take a minute and put this in before your design off your pages. Trust me. OK, so the last thing that we want to set up it's also the default funds most of the time. Rib Odo is the default phone. That's a nice phone. That's also a son Serra fund on. I will show it if you just drag a heading onto the page. Very simple Disc s rib, Odo. But for the design of my website, we have chosen Monserrat. So that's a Google found. So what you want to do is you go to default phones primary headline. You go in here and you type in Moonshots. If you press answer, as you can see, de heading will be changed. The same thing you're going to do for the second headline you're gonna type in Monster rots for the body text. Same thing. Oh, that's on good mold. Surat. And for the extent text same thing monster rots the accent. As you can see, that change detects off the button for the body text. I'm gonna change the weight because I wanted to be very light like this. It's a very light, Finn. Fond. That's what I want. So for the body text, I'm gonna used 300. So the big blocks of text don't look that heavy. All right, so now we're gonna click on apply. And I know we have not created anything yet, but this is very important. Before you start actually designing your web site, this can speed up your your process. So many minutes or hours. All right. In the next video, I'm gonna show you how to actually work inside of element or so stay tuned. And I see you in the next video. 11. Exploring the Elementor widgets + editor: I am walking back in the She, um can show you how to actually build a page inside of Element. Or so in the last video, we have prepared our colors and our phones, and we have already dragged a few elements inside of a kind of fast eso. That's what I'm gonna explain today. What is the difference between sections between columns? Um, this is this is also very important. A lot of people have questions about this when they are building a website inside of elemental. I mean, everybody can drag a block of text like this, uh, onto a canvas. That's the easy thing to do. All right, that's not a hard thing. Everybody can do that. If you want a video, just drag a video and it's on your page. Very easy. Very straightforward. But what's more important is knowing the difference between sections and columns and how a page is buildup. So before I go and explain all the elements inside of L. A mentor, I want to show you how a page is build up and this is very important. And if you have these designers, I you can almost, um, extract any website base that you see and you already know how it's build up. So that's what I'm going to show you right now. This website is not the most easy website, um, in terms off blocks. And I did that on purpose because then you will have a little challenge, but it's also not really hard. This page maybe takes like dirty minutes to set up, so it's it's not that hard. But what you need to understand is at page is always build up by sections and sections already harbors and horizontal blocks. Um, that build up a page. So, for example, this is one big section, then also from here to here. That's a big section. Now we have this middle section. So what's up with this middle section? Well, what you will see in the next upcoming videos is that this section is just a part off this section. But this intersection, this block is direct up, so it looks like it's between this main section and this means section bought in goat. It's a part off this section, so that's what you need to understand. For example, in this section, we have a background the background in This design is a image, but we're gonna use a video so we have a background video on top. Off that video is a is a background overlay that's a collar. In this design is a purple collar that has a opacity, so it has transparency off 50%. Then on top off those two layers. So the video layer and the purple Blair with transparency, we have the text layer. The text layer has four parts. We have to call him an inside of the column. There are four decks layers, as you can see right here and in elemental. Or you cannot use a section without a column. You always have a A main section and insight. That section is a column, and then inside of the column, you can place an an intersection, and then inside of those intersections are column, so it's always section Gollum Section column That's that's the way at a mentor structures a page, and that's the way it it should be structured because columns are vertical, so inside your main section you can have vertical sections, for example, this big section has two columns. One is dis column That's the left column and this is the right column, right? So this is the main section that's this big. Then you have a left column with a lot of text, A list, any button, and you have a right column with four images. This is a inner section that's part off this big section with four columns. Insight off that intersection, and now it sounds a little bit complicated with you, but you will see when we started working with this, that is actually pretty easy. This isn't more easy. One. It's one main section that's that's this big white part. Then you have a text layer, another text layer. This is a title. This is a normal text. Then you have well in this design. It's one big layer because it's a screenshot, Um, but in L. A mentor, it's This is an instruction with free columns. Insight off that intersection. And then there's another intersection that also has free column. So the columns are always vertical and the sections are horizontal and you can have intersections inside of a big section. That's all you need to know for now and then every scroll down. This part is also a little bit complicated. This is one big section. It has a wave effect on the top and the wave effect this part off this down section and the wave affect this part off this section. Then, inside of this main section, we have a background layer. We have a overly a purple with purple overlay. We have an intersection with to text layer on the bottom. And we have another intersection with two columns with images. That's it. And I know this is a lot of information, but but you need to understand how pages are structured because if you know, that is very easy to build up a page. All right, so what I will show you right now is how does works inside of L. A mentor? So leave this as it is, just click on update for now on. I want to get some space. I don't need this for now. So what we need to do is go to settings in the right down corner and go to page layout and go to element or full with then all of this decide bar will go away and we will just have a full page for our website Zoom out a little bit. Well, if you're all if you are on a bigger screen, you need to do this. But I need to zoom out. Otherwise I can see the white space. But as you can see this, this big thing that you see right here, that's the main section, this little I can hear that's called The columns of the column always have those dotted lines, and the sections are the sections always have tea, blue lights, and if you hover over it, you can also see that this is a section, and this is a column at it to call them. So the columns, as I said, are vertical. So if we duplicate this column, it's gonna get another broader in a vertical position. So let's try that. For now. We're gonna a right click and click on Duplicate. And as you can see right now, it has added a vertical column inside off the big section. If we duplicated the big section, it's going to get a horizontal duplicate with the same things inside of it. So this is how a bages structures of first you have to big sections and then you have the columns in sight. If you want to make it more complicated, you will need to use inner sections. So you have a main section. You have two main blocs, then you can have intersections. So that's what you add. Here you go here and you click on intersection and you can grab it and release it. And then you can have other sections inside off a column. But a column cannot directly be inside of a column. You will always need an intersection in between. So this is how it works. That's all you need to know. For now, I'm just gonna could delete everything for now. Just a lead it. I'm gonna update it. This is just what I wanted to show you. So now you are fully prepared to start building the first part off your real website, which is the main header. As I said, this is what we're gonna build in the next video off the next chapter. So I hope you are excited. You were absolutely fully prepared right now. So let's just jump to the next video and I will see you there. 12. Building our Video Header Background: Hey, everybody, welcome back to chapter number free in this chapter. We're gonna actually design the page inside of L. A mentor. I think this is a very exciting chapter because now you really start seeing how a page is build up inside of elements or we have prepared everything. First in this video, we're gonna make this background for video part. Then we're going to design this part in the next video and then in the upcoming videos, we will start doing this part, and after that it's pretty easy. This is a pretty easy part. The animated numbers are pretty easy to testimonials, and this is a little bit complicated, but also pretty easy. I'm going to show you how you can do the animations, the floating hover effects. But first, we're gonna start with this video background. So let's just get started. I am here on my home. I've clicked on edit this page with L a mentor, and now I am inside this page. The first thing that I want to do is click on the plus. Then here Elemental will give you the option to choose a column layout. For now, I just need the single column layout, and that's just 11 column the height. I suggest that you use the minimum height so you always have a bit of space toe work toe work with. So I said it to 400 pixels right now, and what we want to do is we want to give this section a background, and we're gonna use a video for that. So here you will see that you always have free steps. Its layout it's tell, and it's often. Sometimes here is Contin, but the middle one is also always to still hear you changed decks, caller to size. And in all phones, you do things like animations, margin beddings, which means how four elements are from each other. And in the layout, you're gonna put things like a text and more like the continent off departure, actually editing. So now the background is a stele option, so you can choose a background over here. If you go to a classic collar, this city collar tap, you can choose a color as a background. So, for example, if I click on a collar, you're going to see that this whole section is gonna have a colored background. We already have set our collars, but for this upper section, we're going to use a video. So we're not going to use this. We're gonna hover too. Video. We're gonna click on it. And now we can base in a video link here. You can use a you troubling a female link or and MP four fell link. They don't have a button here where you can select a video that's already inside of you over press. So we need to get outside of this page, upload the video and then copy the link. I hope they're gonna change this feature and make it a little bit more easy. But this is what we need to do right now. So what I want you to do is we're gonna open a new tap. Just go to your website again and go to the WP Admin link. And now you're at the dashboard and then click on media. And as you can see, there's nothing here because we have not uploaded one image, a logo, that video. So what you want to do is you want to go to your finder and you want to find the home video background. This is the video death you want. Ask the background. So in purpose is really easy. You just grab a video from your finder. You make sure you can see your browser behind it and you just track. He fell that you want onto WordPress and as you can see it now, start uploading the video. One thing that's important for you to know. If you use an MP four video, your website will not become super fast. But the advantage here is that it will play instantly, right? So if you drag and and before video fell, that's, for example, what is this? Oh, it's eight megabytes with that. That's not really big, But if you drag in a video of, like 200 megabytes, your website will not not become really fast. So if you have a long video that you want to put on your website, I suggest that you just use a YouTube link instead of doing it like this. So then you will just go to your page. You based a YouTube link here, and it's done. But for now, we're going to use the end before because you need to know how to do this, you click on the video. If it's done uploading, then here is the link. You click on it a few times. It will select holding. You copy the link, so come and see or just copy like this. You go back to L. A mentor and you based the video link over here that was so easy to do. Now, as you can see in the design, there is a dark purple background. So this is what they call a background overlay. So that's a layer on top off your background layer. So click on background overlay. Click on the normal Gahler, go to your collars and big a dark purple that we have selected something like this. Or maybe even the darker one. Yes, something like this. And then bring the opacity up to 1.7. Yes, you can see right now it gets a little darker. So if we put tax on top of the video, it will still be readable. That is the reason why I have a set this background collar. Okay, so now we need to put in the text that we have prepared here first. Let's just begin with this title So I said I design and build websites. Okay, go to dissection. Go to the heading. Drag it in here and that's it. No, there's a text layer inside of the column. Then just type in the text here. This is a big title. So used the html h one tech. Yeah, that's this size off your your titles. That's all you need to know. For now, this is also important for your search ranking in Google. But for now, just know the H one is the biggest one. Ph. Seven is, uh, the 86 is the smaller one. DP is just a text. But for now, we just want a big titles we're gonna use to h one now. If we go to style, we can change the collar off that text. So if you click on text color, you can just click on the white so you see f f f f. That's the white. And as you can see, the text turned white clicking caller again. And then we want to make the text bigger, click on topography, and then you can drag this up to make it bigger. Let's just see in my design fell it's 54. So you can type that in here or you contract a slider. It looks really big right now, but we're gonna put it on two lines, so don't worry about it. And now just click outside of it. Now we're gonna grab and not are heading. So click on the nine points over here. Direct in another heading. And this is detects. Welcome. Um, Reno the tight that Here. Go to Stella again. Go to the text scholar. And as you can see a thing, this is It's this collar. Yes, ASCI purple light color. It looks good. Click outside of it and you're done. Now we're gonna add districts. I love to visualize ideas and maintain come to life in a real website. Going only nine dots. Click on the text editor. The text editor is a block of text. You base it in, and as you can see right now, it's the color that we have set as the standard texts on a dark background. It doesn't really work, but most of our sections are white, so we need to change the collar off the text. Just based indexing here. Or type something that you want doesn't mean you matter. Go to style, deck scholar. Put it on wind and then you're done. Oh, no. Are we done? I think this is a little bit too small in my design. It's 16 pixels in size. So that's also where we're gonna use in here. Make it a little bigger. That's nice. And now the last thing that we want is this handwritten fund. It's actually pretty easy. Just copied. The title that you have here doesn't just click on the A pencil. I can click on copy, then click on the text layer below and then click on pace. If you do this, the thing that you copied will be based that beneath the layer, where you click on paste and as you can see, not duplicate because I copied this one. I pasted it on this one so it will be placed beneath that layer. So that's why it's now hair the size off. This is 52 so that's almost the same. So we will not see a big difference here, but off course, we need to change your phones first. I'm changing the title here to my name s So we go to Stell. We go to typography. And now the family. They got a family because with phones, you will have a lot of different variations off that fund. So it's like a family off phones. That's what they call the family. But it's just a phone selection. You go in here and if you want something different than the default found that we have selected, which is months read, you're gonna type it in here for death. Hendron and fund. I used the Mr Day Harvey Land. And as you can see, um, looks breeding eyes. I'm gonna make it a little bit smaller. 50. That's okay, but it's way figure, as you can see. So that's what we do in weight. If you click on Wait, you're gonna put it on? I don't know. 500. That looks a lot better. Okay, now, just click outside of this box and there are two more things that we want to do. First, we want to make this box a little smaller, so there will be enough space for D video over here, and that's what you do with padding and margin. That's also a concept that you will use very often in Web design. Betting is the space inside off an element and margin is the outside. I suggested you write it down somewhere because this can be very confusing if you don't know what those words are. So margin is the outside. Betting is the inside. So that's all you need to know. For now, I'm gonna grab the whole section. I mean, the whole column. I'm sorry. Go to advanced and then go to the petting because that's the inside off their column. We want to change the insight. So in the inside, we want to add a right. But if we just click and start adding, the bedding here is gonna add depending on all sites on, and that's not what we want. But that's cause because of the links. So just go back, bringing to zero unlinked this and then if if we add to the right, you're going to see at some point yes, okay, around 400 it starts affecting. Detects eso. Let's just type in a number here like 500. That's not enough. 607 100. Something like this. Maybe even 750. No, that's too much. 7 30 Yeah, something like this. This looks pretty good. 740. That's how I'm gonna leave it. And the last thing that I want to do is change the margins between those items because, as you can see, right here, there is less space between the items here and element or automatically adds 20 pixels beneath every element that you put in. Why they do that? Because if you add a lot of elements, there is a natural spacing between the elements. And that's why if you had a lot of tax on top of each other, you're going to see that there's a lot of margin between the items. That's not what you want. So, for example, if you click on this text, gonna go to advanced, you're gonna unlinked the margin. You're gonna put a minus 20 on the bottom. So as you can see now, this is more close together. We also want to do that with this title. So click it will do advanced unlinked this one and then at a bottom like minus 20. I think this is enough for now. Maybe also added to the title, though, to advance on Lingus and then add a little bottom minus margin. Um, yeah, that's it for now. This is This is good enough. I'm gonna click on update. I'm gonna press Commons zero to get to normal. Few click this away. And as you can see, right now, we have made the upper section. It looks pretty good. Video is playing. There are a few text layers and the text is corrupt to the left. All right, that's it's for dish video. If you do not understand everything that I did in this video, don't worry. We're going to repeat all those steps a lot of times in this course, so just continue with videos, and it will start to make sense. If you continue with all the videos, just click wherever I click, and that's all you need to know for now. All right, so I hope to see you in the next video where we're going to design these services part that looks like this. All right, 13. Floating services bar : Hey, everybody, welcome back. In this episode, we will transform this section into something that looks like this a little bit bigger. But most off the video, we're going to focus on adding these services section that you are seeing right here. Or as you can see here in my design, fell in this video, we're just going to create this section, and then in the next video, we're going to create a dissection. All right, so let's just get started. As I said a few videos earlier, this part is actually a part off this part. Right? So this is the main section, and this is an inner section in that big section, and this is also an intersection in that big section where those two components are. So first, we need to create all these sections and the columns that we need. So let's just get started. I'm going to go back to my element or home, and I'm gonna open a d tap over here. We're gonna zoom out a little bit and I'm gonna add a new section beneath the video section , all right? And give it a minimum heights that we will have some space and now we're going to start with our first intersection in this main section. We have just placed the text in the main column, but now we want intersections in the main section. So we're going to start with the intersections. Is very important that you do this first before you start telling the elements. Otherwise it can become a mess. So that's my advice. Always start with creating all the sections and the columns you need. The only exception when you don't need to do that is when you have a column and you are duplicating that column a lot of times. Then you don't need the empty columns, of course, but right now we that's what we want. So we're going to direct the intersection onto the canvas, and the first intersection is for dis Spartan. And here we're going to use the trick of duplicating de Gollum's. So we will need four columns here, but that's not where we're going to do. We're gonna delete them. We're gonna fill one column and then duplicated so it will become four columns now for this Spartan. We will already prepare that, and we will just need a normal intersections or place that beneath it, and you will have a normal intersection. Now, give it some space. So we see actually, what we're doing. So click on the lower intersection, go to advanced unlinked this and at a for example, 60 pixels off top marching. So the margin is the outside. We want to add 60 pixels on top off the outside, off this inner column. And that's the space that's here that you're seeing here. Actually, this rights so we don't need to worry about this anymore. We're gonna work with this intersection. First of all, why don't want to show you is a nice trick to create an Aiken and a text. Very easy. It's called on Aiken Box inside of Elemental. If you tracked that into the intersection, uh, Gollum, you will see that you will get a Aiken, you will get a title and you will get a description. Is this very easy? If you, for example, have services that you want display with a title and a description, you can use this. But right now, we're not going to use the description, so we can just delete that. Now we only have an Aiken and we have a text. That's it. If you want to change the title for me, it's website design and the I can. We want to change the Ike and we can do that up here. We can go to the ICANN library and elemental word in the new version. They have a lot of Aikens that you can choose from for free, but I like to search for my own. Aikens and I have also prepared them. It's called home Aikens. So for this example, I'm going to use those Aikens. If you want to get your own Aikens and you don't see the Eiken that you want inside of the elemental library, this is a tip. Go to fled, I conduct com. That's a website that are always used to get. My Aikins is very, very good website. You can type in a key award, for example, live in home, and then they will give you a lot of options for Aikins. Most of them are free. Some of them are paid than if you add them to your bucket or the call it collection. You can download the Aikens in, for example, svg. SPG is Victor. BMG is Big Sal's BSD is photo shop. Of course, an E p s is also vector. If you're making a website and using Aikens, I would always go for the spg option because in a PS, you cannot upload inside of l a mentor. Well, maybe you can, but not in this option and PNG s pixels. If somebody zooms in, you're going to see pixels that not that's not what you want to always use, SPG. So for now, we're just gonna use the icons that I have prepared over here. So we're not going to use the element or library. We're gonna go to upload our own SVG. We need to enable that. And then we can track our first Eichin that we want into Elemental and we click on insert media. And as you can see right now, my own Aiken, which is fact or so it doesn't matter how much I zooming, it's still going to be sharp. I have my own vector, Aiken inside of elemental. So for now, what we're gonna do is we're gonna try to get this dark background 40 inner column This is how I did it. There's this main section that has this almost white background color and this intersection just has a background color. That's all I did. And then there are four Aiken boxes. Insight off that intersection. So let me show you what I did. I clicked on the intersection. I applied a background Gahler on that intersection. Just blaze a background color. I don't know which one it waas, but as you can see now, I think it was this one Dark purple. Now this whole intersection has a background. And as you can see, my text now is gone because the Texas the same color as the background right now. So that's what we're gonna fix. So just click over here and that's perfectly fine. Now click on the Eiken, go to style because we need to change the text to white. Here it's incontinence. Go to title, go to call her and select white. And as you can see right now, we have almost already the design that you're seeing right here. The only thing we need to do right now is duplicated four times, changed the text and at some marching. So first of all, we're gonna duplicate it four times. So go to the column because the column was 40 horizontal duplicate. So we're going to placate the column. As you can see now we have to Aikens, duplicated again and duplicated again, See, was pretty easy. Now we go to the intersection where all the four columns are inside. And we're gonna add a petting because we wanna have space on the inside off the purple background. So depending was for the inside marching outside, right? So if I add margin, it's gonna add spacing over here. If I at betting it's gonna at spacing on the insight, I will show you. As you can see now, it's gonna add spacing on the inside so the section actually becomes larger. But this is what we want. And as you're also seeing right now, it has more space on the bottom than on the top. And in my design, it's this is even if it's the same space. So maybe add a little more, maybe 35 than unlinked it and then just remove a little bit of spacing from the bottom. But you can see right now this is more like the design we have created. See how easy it I waas very easy. Now, if you want to change the Eiken inside of it, just click on it, upload your own spg dragging the second Aiken insert media and Ben there it iss changed the text, and that's it. And I'm going to do that for D's other two. And now I'm done. This is it. Okay, so what do we need to do now? We need to move this section up, and we need to at that wave effect and also does back right now is white. We want to have this light purple, great dollar. So that's also what we're gonna change. And the last thing that we're going to do is at the shadow that you're seeing right here because this whole box has a shadow applied to it, because now it's very flat. You know what? Let's just first start with the Shadow, because that's a very easy thing to do. Click on the intersection now go to style, go to border. And then here's your blocks of shadow. I don't know what why Day placed block shadow inside. If the border doesn't really matter, just click on it. And as you can see already a, um shadow is applied If you if you increase the blur if you're going to see it becomes more blurry. And what I always do is I also make the vertical a little bit higher. So it starts levitating a little bit and now it's too intense. So then I just decrease the black color something more like this. And now we have this nice floating an image. I mean shadow on that section also. What? I always do it at a hover shadow. So if people hover over it with their mouths are going to see a little nice hover effect is you're seeing right here she hover over the shadow becomes more intense. So it is how you do it. You go to hover. You also add a box shadow and now you make it almost the same. Just dust it with your mouths over Make the blur more intense. Make it a little less intense. They'll make it too much. Just a little nice detail like this. And that's all I did all right. In my final design, I also had at a dis hover effect, So you have ah, over effect for the whole box, but also forties. Aikins. This is how you do it. You click on the Eiken, so click on the edit. I can click on the icon, click on Hover and that Derek is hover animation. And then it's called Grow. Effectively used. You can see not his Aiken has grow this dozens. So if you want to copy that, it's very easy, right? Click on the edit Aiken. Click copy. Go to the other one. Click it based style. Then it's gonna paste the style off. What? We have a plight over here. We're gonna use that a lot of times in this course because it makes really easy to build up the effects on your page really fast. So as you can see now, these two have it. Go to this one based L go to this one based L. And as you can see right now, all of them have the school hall for effect. And a whole box also has a hover effect. Effect is not too intense, and that makes it not too cheap. So now let's just add the background color that we're seeing right here. And also, let's add the wave. Uh, the background color is that light purple. So go to still go to background caller and she can see collar and then choose your was it? I think it was this one. Yes, it was this one. As you can see, it's now light. Very light. Greyish purple looks really good and the wave is actually a part off this section. It looks like it's apart off that section beneath it. But the wave is like a border effect off the section above it. So what you need to do is click on the upper main section, scroll down into stele, and then it's gold shaped divider. Go to bottom because we're gonna add a bottom effect, go to type and then you have different shape divider effects, for example, like this six sec she can see most of them are very cheap. That's not effect that you want to use. But for it is example, I used waves. This is really nice. As you can see, this is the effect that I used. You can play around with the settings. I think I had it something like this. Just go back to your design and try to make it match. Yes, something like this looks good. And now it's still white. So we also need to at the color to that shape divider, same color, as you can see. Boom! And now it looks like that this shape divider is a part off the other section. Now we need to add some hide, because this section is really small compared to the result. So just click on this one, go to lay out. We're going to increase the minimum height, as you can see right here, make it a little bit bigger. Maybe 5 50 Something like this. OK, so the last thing ever need to do is we need to move this whole section up. Um, so we can do that by using a minus margin, so it will go up if you use a normal march in and it will go down. If you use a minus marching, things will go up. First thing that we're gonna do is change the settings off the main section. So go to lay out. And then Colin position put that on top so it already jumps a little bit higher. Now, go to the intersection. And by the way, now these all these things are very much in the same space, so it's sometimes it's really hard to click if you if you can click, just use the navigator, so right click anywhere, click on Navigator and then you will see the whole structure off your page of they can click on this an intersection and on this intersection and then go to the settings. So if you can really click here, just use the navigator to find what you are looking for. Okay, so now we're gonna do is we're gonna use Dietrich off minus margin, so just hold it down. And as you can see, this thing starts moving up, and I think I need He has something like this. Let's just try to save it. Click on update, Go back to your page. And as you can see right now, open to zoom back to normal. Dis looks really good, and one little detail that I want to add is at a little bit of marching to DCIS eyes because as you can see on this design, there's a little bit more margin here than in between. So that's what we're gonna fix. Click on the intersection again, go to betting and then Atmore on the left and on the rights and maybe something like 60. And here, over here also, 60 sort of mawr margins on the site. Click and update again. We're gonna look at our results. And as you can see, this looks really good. Has this very soft, smooth, however, effect and those offer effects? Yeah, I'm really happy with this result. And in the next video, we will start building three next part off the page, which is this part. Okay, I will see you in the next video. 14. Checkbox text section: Welcome back in this video we're gonna build this section that you're seeing right here. If you finish this video and you have completed this part disbarred and the head are part, you know, most off the difficult parts. The other parts that were gonna dio are very simple if you compare it to do dese free upper sections. So if you feel like you're starting to understand the big picture off, how elemental works you are on the right track because this is this is also a pretty challenging part. The other parts are very easy, so we're gonna finish the home page pretty fast. So let's just now dive into this part. And if you can do this, you can also create very unique designs. Okay, so what we're gonna do is we're going to go back to our result. We now have this. And, um, what we're gonna do is zoom out a little bit and we're going to use the intersections, the columns inside of the intersection that we have already prepared in the previous episode. And first we're gonna work with some texts. As you can see right here we have a title. We have a little line. It's called a divider. We have a text and we have a Aiken. No, it's called a list I think I can list. So let's just make this thing first is very easy. Just dragging a heading. Boom, making an H one because it's a big one. Maybe it's even bigger. This little line is called a divider. That's over here. Just drag it in inside of the column, not outside of the intersection, just inside of that column. Boo And they're your line. Make it a lot smaller. Go to the style, give it a weight off free or four, maybe give a deep purple collar that we want and make the gap like zero. That's it. That's how you you create a little line. Now we're gonna drag in a text. So Gravity text editor and place it beneath de line that we just created. All right, now, just basing a text that you want and now we're gonna use the Eiken list of things called I can list. Yes, it's called I can list. Grab it, put it inside of the column and boom. There it is. It has three different icons by default That's not what we want. We only want t check Aiken so we can just delete these other two and then duplicate the 1st 1 so we will have a checklist kind of style. So now we're going to stelle all of this. So let's just first copy the decks that we have it over here. I made the title 36 pixels. So we're gonna grab this and make it 36. Biggs Also again, the phones family. It's the size off that formed now it's a little bit cramped up. So we're gonna do is create some space between the lines. Here it's on 44. So does what we're gonna do. It's gold line height. That's the space between the lines. So if we put it on pixels and we increases as you can see now the spaces between the lines start becoming bigger and this looks a lot better now for districts. I made it 16. So we're gonna grab the topography again and make it 16. And what we're doing right now, we can copy distill to all the other parts of the website. You don't have to do this all the time. If you do it good for, you know, section like this. We can in next video, we can copy this, disbarred and face it over here. We can copy dis text and pace it over here so you don't have to do the styling all the time . That's why the first few parts of your website take a little longer. Okay? Now we're going to sell this part, Aziz. You can see there's another kind of fund. I'm gonna zoom in a little bit so I can really see what I'm doing. It's a different caller. It's a little a little bit thicker. It looks like So I'm going to click on it. I'm gonna go to style, maybe get a little bit more space between Go to the I can make it purple, the purple that we want. Go to the texts, give it a little bit more spacing from the Aiken. Makes it a little nicer than the text scholar will be that I think we used this one. Yes, this looks good. And now let's also check if it's on the same size 16 pixels. No, it was not on the same size. Now would live really big. Um I think that's because of the space between Let's just keep it like this. And the space between this, you already know how we need to change this. Glick on a de text goto out phones and now at a minus 20 margin to the bottom because every element has minus 20 margin. I mean, has 20 pixels marching at the bottom. So as you can see right now, if we close this, this already looks a lot like our design. Maybe the spaces between are a little less. As you can see, this is maybe even too big. So maybe I'm gonna make this minus authority. Yes, that's that Looks better. As you can see right now, this looks good. So I'm now I'm gonna add some space at the bottom over here, so I'm not going to do that on this section. Of course, we're gonna do that on the main section because thes inner this intersection and this intersection is part off the main intersection. So if you want more space at the bottom, don't at space to disbarred s at space to this whole part. All right, so I'm going to click on the main intersection and I'm gonna give it a betting because we needs room on the insight and we need room on the insight at the bottom. Suggest where we're going to do, Go to the bottom at, like, 80 something like that. Save it and let's see what we have made. As you can see right now, this looked really good. Maybe I want even more space at the bottom here. But for now, this is good. I can just feel in the text here and then I'm done. So, like I said, now we have prepared this. If we are going to create other parts of the website, we can just copy this so we don't really need to dive into the start styling all the time. So this is really nice. In the next video, we're gonna build the animated images, so stay tuned for death. 15. Animated Image section: Hey, and welcome back in this video, we're going to create this school section. If I scroll down the images, start animating in its a part off this big intersection, which is part of the main section. Yeah, it's really cool. It has a shadow effect. It has a mouse over kind of fly effect. It started, you know, keeps floating. And it has this buildup effects. So if you scroll down the images, just start sliding, and it looks really cool. So let's just get started. This is my result page. And this is my element or page. All right, so it's just four separate images at at our place in a corner with a few effects on it. That's it. So what we're gonna do is we're going to start with one image, So just go to the section and grab an image, grab the image inside and select the image that we want. Okay, so I have prepared those images off course for you. A think it's cult? Yeah, it's the home examples. Um, so just based. I'm all in here and then just select the one that we want to start with. I want to start with this one. So I click on insert media, and as you can see, it's now here. Let's just duplicate this one very easy, duplicated one more time to pick it up one more time and now just change. The image is very easy. Click on it, click on another image and insert. Click on it. Click another in an insert, click on another one and insert That's it. Now we're gonna add the effects for the images. Um, let's just assume out a little bit. First of all, what we're gonna do is we need to place them in a very specific place, and if you just use margin, it's just not gonna look good. So what we're gonna use is something new, and it's called custom positioning. So click on your first image, and this is an advance feature. Goto US phones go to custom positioning, open it, and then for the whiff, click on in line auto, and what this will do is it will make the blue line. So the whole selection off the image it will make it just fits the image. So this first thing just click on in line auto and as you can see it now it's in the corner , but we cannot move it. So the other thing that we need to do is go to position and then click on Absolute. And if we click on Absolute, you will see that the other ones are moving up because we now can freely move this thing just like a design. Till you see, this is very, very nice. And this looks super easy. But I do not recommend to use this feature too often. Uh huh, because it's very hard to make it responsive. And day will also warn you. But this fing over here that this is not something you want to use a lot of times, even though it looks so easy to just move things around. But you want structure in your website. So for did for these kinds of designs, where it's overlapping is very complicated to achieve this with margin just used to custom positioning. So that's what I'm doing right now. And before I start doing that for all these other images, I want apply some effects. So now just grab it over here so we can see what we're doing, and we're gonna add a shadow effect. Go back, do Stell. And there it is. Box shadow. Now it's inside of image instead of border. Um, so go to blur, make it a lot bigger, moving to the vertical position and then make the capacity lower. So it's not that intense. Does that looks good? Now go to hover effect. And in the hover animation, I'm gonna use the effect called Bob. That's one off the nicest effects. In my opinion, there are a lot of cheap ones in here. I will show a few like purple shrink like Look at this is very cheap. Uh, or was this goof que forward? Like, I don't know when you're going to use this, but Bob is a really nice one and starts flying really, really nice. So that's the effective we want to use. And then the last thing that we want to do is go to advanced, go to motion effects, and here we can set the entrance animation and the entrance animation is for how the images come into the frame when you scroll to death part of the page. So, Dad, is he effect that will make all the images animate in at a different time. It's not because there's a timer. It's just because they are on a different height on the beach. All right, so what we're gonna do is click on this and we're going to click on Fate in up and you will see a preview off the effect again. Faded doesn't work. Then just click on fading up and that's what we want. That's the effect, everyone. So now place it back to the place that you want. Now we're gonna copy, Copy this based it on to this one, and then move it to another place on the canvas, base it on another one, move it somewhere else and base it on the last one and moved at to another place. And as you can see right now, these images start becoming smaller because they are aligned left. So, for this image, what you want to do is you can click on the phones, you want to go back to custom positioning and then said that this one too, right? So it will stay the original size. All right, Just place that over here, Do the same for this image. Go to advanced custom positioning and then align it to the right. And I was just gonna play around with the images. Let's look at my design. Oh, I've made I've done this wrong. I need Teoh. Dis need to be here, and this needs to be there. So just needs to be left, as you can see. And this needs to be right. And now I am just moving all the images into the place where it looks really creative and spontaneous. Something like this looks good. Then what you want to do is you want to move this one to the front. Inco It's called Z index eso. That's what you can do here in advance. So click on an image that you want to go to see Index and then put it on four, for example, because the higher the number, the more the element will come in front of other elements. So if you put this on four, you will see that it will pop up to the front. That's how it works. And now this is actually what I wanted. Um, but as you can see, it's overlapping this whole section. So we're gonna grab the main section and we're gonna add a bedding to the bottom. Just give it 100 pixels more something like this and maybe even more. Maybe 202 120. Something like this looks good. Now, dis space over here is a little small. So guess what we're gonna do. Click on the column, click almost fans. We want space on the inside. So that's got betting on Lingus space on the right. That's what we want. 40 pixels for it. So not zero for 40 pixels. And as you can see, there's a little bit more space, maybe even 50 60 something like this. And now this part is a little down compared to this part. So we're gonna do We also want to add betting to the top so this whole thing will come down . That's just at 40 and you can see we want this to be in the middle of that one. So maybe 60 70 something like this 60. That looks good. Let's now look at what we have created clicking update. Go back on a scroll down and as you can see, the images start animating and it looks really good. I'm really happy with the result That looks really good. I'm really happy with the result. This is just a cool effect. Don't overuse that custom positioning because it can mess up a lot of things, but this is really nice effect. Let's just look at it one more time. We're gonna refresh the page. And as you can see, it starts animating in Really cool. Okay, Thank you for watching. And in the next video, what we're gonna do is we're gonna build this client section's gonna be a very easy one. So see you in the next video. 16. Client section: Welcome back in this video we're gonna designed section that looks like this. It's a client section. It has a very nice little hover effect. You could also use logos that have color. These are just gray images, but it's the same thing. It's a very easy one. As I said in less videos or less use get started. So what we're gonna dio is we're going to create a new section. So go to the bottom off your page and create a new section just like this and give it a minimum height. So we have some space to work in. And this is very easy because we have this title, which is the same as this title, but it's middle aligned, and we have this text which is just distal but then purple. So what we're gonna do is we're just gonna use copy and paste. Click on this copy. Make sure your you see this before you right, click and click copy. Go to here and breasts based and align it in the middle. That's it. Then go to this one. Click it copy. Click on this one, which your left mouse, right click and then paste and go to Stell. Middle. Align it. That's it. So now what? We want to dio iss. We want to grab the text. So detects his clients. I had the opportunity to work for to go to this text based it Go to the title, changed the title and we will change this text in the style decks color to purple And this is almost all we need to do for the texts. And as you can see, this blue line is crossing the text. This is because off the minus marching that we have added, just put it on minus 20. So it's not crossing your text and 40 heading itself, as you can see in my design if resume inland a little bit, Um, there is a little bit of spacing, but of course, if you want less spacing, weaken, go into areas, phone settings going to the margin and at a minus, maybe minus 10 through the bottom. So the spacing between that is a little smaller, but now we need to add the clients sections. How we're going to do that is very easy element or has things gold blocks even in in the free version There are a lot of blocks that you can use. So if you don't click on the plus to create a new section and you click on this one, this is like a folder with a lot of designs that you can use for example, these five for free. You can even insert a whole page. But as you can see, most of them are pro, and we are now on the free version of Element or and we are designing the page ourselves. So what we're gonna do is we're gonna go two blocks and within blocks you have little parts that you can use. So, for example, if you want to use if you want to create an about page you go to about and you will see a lot of inspiration for your about page, and some of these are pro, but most of them are free. Actually, these are all free. Whoa. But if you for example, go to clients, you're going to see that a lot of them are pro because, for example, in this version you will have a slider that you can use that's not reading a free version, but the one that is within. The free version is if we're gonna go to clients because that's the category we will use. We're gonna scroll down. Here it is. It's this one. So just insert it, click on insert, and people automatically insert It will create a Colum. Everything is perfect. So what we can do right now? We can even delete this column and just drag those two titles onto here or we contract East to under our tech. So that's what I'm gonna do right now. I'm going to track this and just bring it into my into my own section and the other one, I just couldn't drag it. And there it is, inside the main column. And now I'm just gonna delete this and now I'm almost done. It's super nice. What I need to do is at a little bit off patting on the top and on the bottom. So we're gonna go to the main section over here. Go do it. Fans go to patting unlinked this at 82 the bottom. So some space here and 80 to the top and as you can see, were almost done. Now I think the spacing between these two are a little bit too high, and sometimes they have already applied spacing in those elements that you dragon from here , for example, here's a little bit of space that's not in this intersection. So if you click here, you're going to see in the fans that they have. They have already used a betting over here, So we're gonna make that less maybe, like 20 something like this. Now, if you want to add a nice animation in, you already know where it is. It's in motion effects. So make sure you are in this intersection, and what we can do right now is, for example, you see fade in. So if you scroll to that part of the page, it starts fading in or make it the same effect as before. But I recommend not used the same effect on your whole base because that, you know, if you do too much animations, it becomes a little bit childish. Eso That's not what you want to dio. I suggest that you mix up the animations but also not too much like try to finding balance in this. So I recommend for days, for example, used to fate go to this one advanced motion effect and fate. All right, let's just update it and see what we have created. Go to a result page on a scroll down. Everything look good. This any mates in and there it's slowly animates in. If you scroll faster, you're gonna see the animation. Let's go up and I'm scrolling festive. No, And there you see it. It starts animating in this part and inmates in first, and then this parts comes in. But if you scroll really fast, it's going to go at the same time. So that's it. That's how you create a client section. But if you want to change the logos, just click on the logo and click and choose an image. Upload your own local, but Onley use B and G images with spent transparent backgrounds. That's important. So if you have work for Coca Cola, for example, you can get the logo of Coca Cola but then just searched for the PNG version. So as you can see right here, here's a B and G version, because if you safe this to your computer, you're gonna see that it's a PNG. The PNG doesn't need to have transparency. But PNG is the only form of that can have. Transparency is a rush using right here. This is a transparent image. If you put that on the page here, is gonna look good. Ah, and you don't see a white background. So that's something that you needs that you need to know before you start adding the logos . If you cannot get a local without a white background, sometimes that's possible. Then what you need to do is you need to go inside of the column and make all the columns white as a background, not black, white. Um, if you don't have transparent images, so that's it looks really good. I'm really happy with it. And now in the next video, what we're gonna do is we're gonna create another cool effect, and that's the animated text effect. So hope to see you in the next video 17. Number Animation section: Hi, everybody. Welcome back in this video we're gonna design in the animated number section that you are seeing right here. Eso if you refresh the page, the numbers are gonna animate in looks really cool. And it's also really simple to build. So let's just get started. As always, What we're gonna do is we're going to create a new main section. We're going to give it a minimum height. So we have some space. And you know what? For this part, we're just going to start with a D background because that's the dark purple caller psycho to still go to background and then click on classic click on the collar and then select the collar that you want or use decode over here, As you can see in my design fell. It has three columns. If this is one, this is do and this is free dese to look identical. So what I'm gonna do is I'm gonna create this one. Then I'm gonna create this one that I'm going to duplicate this one and then changed the last one. That's all I'm doing here. We already have to text the only thing we need to change is the color of the text. So very easy. Just copy the clients text and based it over here. Now we don't see it because it's black. So go to Stell Deck scholar and then go to white. Very easy align it Left content a line left, then copy the subtext based it under our title. Go to style and then align it left. Then it says statistics. Some interesting numbers. Not the best techs, Uhm, but its effects were going to use right now. Statistics. Okay, so now we need to create the second column. So what I'm gonna do is I'm gonna duplicate this column. I'm gonna delete the everything that's inside because we're gonna use something new. And it's gold. Eight count, sir, you're gonna You're not going to use it if you try to fight. Number is gold gounder because it's an animated counter. If you drag that in your already going to see if it's not black? Yes, is black, so we don't see it. So let's first change the colors so we will see what we're doing. Go to still go to tech scholar, make that white, and also make the title light and as you can see, right now we have to school number, go to content. And as you can see here, we can play around with the settings. So, for example, we can use another number here. 50 so it will start. Oh, it will start from zero. Enable count to 50 but we can also start at 10 and then it starts at 10 and it and it stops at 50. So for now, I'm going to just put it at number one and let's make this 54. In my design, I have have to statistics, websites designed and clients served. So for now we need to change. The phone's over here. I don't know if this is the good fun. It looks like the good fund websites designed. That's a text that you put in here websites designed. I'm gonna go to the stele to the title typography. I'm gonna make this 16 and I'm gonna make the weight. Free 100? Yes, that looks a lot better. Maybe the number is a little bit too big, so I'm gonna make it. I don't know, 54 something like this that looks good. Now, before we start duplicating, we need to add that outline. That outline is not a bart off the animated number. It's actually a border inside off the column. So click on the column, click on Stell, click on Border, and now we're gonna use a lined border. Solid is when there's just one caller. You can also use a double line. I don't even know what this is. Just give it a color and see what it does Gonna make this purple at the whiff. We're gonna make one pixel and we're not seeing anything right now. Let's just put it on solid, for example. We do not see anything. Let's just make do with a lot bigger. So we see what we're doing there it ISS. Let's just leave it at eight for now, but we're going to change that later. First, we want to create some space between the border line and the actual column, because otherwise we don't see what we're doing. If we working, if we're working with a one pixel with border, that's why we need to go to advance. Normally you would add betting, but since D Border is a bart off the column, it's not gonna change anything So if I increase the border, as you can see, it just states connected Studio column. So that's not what we're going to do. We're gonna increase the margins of the outside off that column. So the insight, which is where the border is, will become disconnected. Eso Let's for now. Just put it at you know, five is okay, then go back to Stell Border and then make this smaller. I'm I'm just gonna put it at one. This is enough. And as you can see in my design, we have some more betting on the inside. So now we're gonna use betting, go back to advanced, go to betting. And we're gonna increase the betting on all sites to make it more like my design. And this text starts moving up. Why? Because the settings in this column says that all the content in the column needs to always be on top. So we're going to click on this column, go to lay out its T vertical layout and then put it on middle. And now it's just stays where it needs to be. Okay, so now we have this. It's way too white. But if we're going to duplicate this as we're gonna do right now, you're going to see that it's almost done because it just makes it smaller. So now we're gonna change this. Number 22 clients served. 22 clients served. We're gonna update our page, and we're gonna take a look at the results. Scroll down. Scroll down. Looks good. Looks good. You see, this is very nice. I want a little bit more petting on the bottom and the top is you can see right here so it looks more important. So last the last thing that I'm gonna change. Click on the main section, of course. Go to advanced and then add more padding on the top and the bottom. Eso unlinked this. Go to the bottom at something like, Oh, that's too much. 40. And on the top, something like 40. Ah, maybe like 20 and 20. That's enough for now. Glicken update. Let's go to our result. And as we can see right now, this looks good. All right. This is for this episode. As you can see, it's super easy to dio and it looks really cool. In the next video, we're gonna created testimonial sections in a very important section for your portfolio website. A lot of websites have a put foot. I mean, sorry, a testimonial section. So that's where we're going to create. It looks really complicated with decent, isn't that? But l A mentor has a little trick for it, so I hope to see you in the next video. 18. Testimonial section: Hey, everybody, Welcome back In this video we're going to design a D testimonial section. It looks really clean, and it's also really easy to make because Element or has a testimonial feature built in. So we don't have to mess with columns and sections to get a design that looks like this. It also, if you refresh the page, you're going to see it. It has this little animation that's also where we're gonna add, but this is going to be a very easy tutorial, But testimonials are anything that a lot of websites need, so I'm going to show you the easy way to do it. So we're back here at our website, and I'm kind of click on edit with L a mentor. I'm gonna zoom out, okay. And as always, the first thing that we're gonna do is we're going to create a new section, give it a minimum heights off 400. That's okay. And the first thing that I want to do is at those titles. Since we have already designed titles like this, we're just gonna copy this and then align. It's to the left. So that's going to be really easy. What I wanna do is I'm gonna grab this and based it in here and align it left. And also grab this with copy tool and then baste it under de clients and also go to stele and align its to the left. The title is testimonials. And the subtext is what clients say about my work. And to create a design like this, we need tree columns and to put three columns and next to each other we need an inner section. So that's the first thing that we're gonna drag in. So go to the nine points and grabbed the intersection and put it under your subtitle. Then we already have two columns, but now we only need one because we're going to duplicate the 1st 1 So the lead, the 1st 1 then go to the nine points again and type in testimonial. There it ISS that's also in the free version. Click on it. And this is the default. Pretty cool. As you can see, it already has a text, a photo, a title and a name. And you can also aligned this to the left. Then it would look like this. But as you can see it's not aligned to the left over here. So the first thing there that I'm gonna do is I'm gonna delete the inner patting off this column so it will align perfectly. So click on plus and minus, and then you can see that it aligns perfectly with the content above it. And before we're going to duplicate this, we need to change the stele. So click on your I can click on the stele and in my final design, it looks like this. So our title is a little bigger. Let's just see what the sizes of the title. It's 20 and the subtitle is 15. So it's 20 and 15 by the way. I don't know if I told this already, but this Blufgan is for Google Chrome. You can check phones on any website. It's called what phone? So go to Google Chrome Extension Store and search for it. If you also want to use this. Okay, so 20 and 15 that's what we need. So we will go to the name. The name will be 20 pixels so typed in in over here and and then a D title will be 15 and also the title is purple, and it's not as thick as it is right here. So we're gonna put that on, I think 300? Yes. And I'm going to give it a purple color. That looks good. And for now, I'm just gonna put a photo in here So we have a face on our websites, or let's just upload a photo off a person off course. I've prepared that it's in the download fells. And here are tree faces that I have prepared for you to test so you can attract those in, select the first image and click on insert media. And as you can see, right now, it has a face. So now we're ready to duplicate those columns so kind of click on duplicate one time at the column and now duplicated one more time. But as you can see, depending is not really good. So we're gonna fix that. We need more space between two columns. So what I'm gonna do is I'm gonna click on the column settings, and then I'm gonna add column to the right off that column, right? So the insight, and then on the right, because we've on space over here. So that's where we're going to do. We're gonna click on authority. Maybe. Or 20 maybe 20 is enough. So now this is good. I'm gonna copy to stay over here. So copied your column. Stell, go to the other column and base it. Go to the other column and based it. All right. Now, you can simply go to your other pro, fell, change the picture and go to the last one and also changed the picture. Okay? And I have also changed the text. So let's just updated and see what we have made. Some kind of click on preview changes. I'm gonna zoom in again to 100%. I'm going to scroll down, and as we can see right now, this looks almost good. We did change a few more things. So go back. Click on a minus again. And we need more space in this whole sections. Or click on the section Pellicano's phones. And of course, we're gonna add betting to the top and the bottom. So ad, for example, 80 to both sides. Maybe that's too much. 60 on the top 80 at the bottom, or you know what, 60 at the bottom. That looks good. And also I want a little bit more space between the testimonials and the title. So I'm gonna click, and I want more space on the outside. So that's the margin, and we're gonna add, for example, 20 pixels do the top. OK, now click on update again. Go back to your portfolio, refresh it, scroll down. And as you can see, this looks good. Well, actually, the text here is a little march. So that's the last thing that I want to change. Click on a stele on Deke Continent That's Kulti content. Go to typography and maybe put it on 15 for example, or 16. That's enough. Oh, it was. I think it was on 18. That's very huge. It's a click on copy and based East L on the other two. It's easy is that Save it again and go to your page. Yes, this looks good. So as you can see, the testimonial feature is very easy to implement. The only thing you need to look out for is that the text off your testimonials are not too long because, for example, if this one is very long and this one is not, it's not gonna look very great. I will show that quickly to you. If I go back to my page, I'm just gonna change the content and duplicated. You're going to see that the alignment is not very great. So I suggest that you keep those testimonials at the same length. And if that's impossible because the testimonial is just longer, then what you want to do is you want to click on the column and you want to put the content on the column to the bottom. Saudi photos will always be aligned. So if he goes a vertical selection, I mean vertical line and then click on bottom. You can set those all at the bottom and then your testimonial section. We'll look at least a little bit more aligned for now. I'm not going to do that. I'm just gonna change it back. Oh, and I almost forgot before we end. I also added animation, So I clicked on the intersection, I went to motion effects, and I added to the fate in up So it facing up. If you scroll to that part of the page, all right, click and update. And now, in the last video where we're gonna do is we're gonna design in the last part of our home page. Oh, I will refresh its or you're going to see there's also a little animation. And if you're done with this, you have built your own first full home page. All right, I'll see you in the next video. 19. The call to action with a button: Welcome back in this last video, we're gonna finish our home page. We're going to design a section that looks like this and has this nice hover of fact. It has a button Devil Link Teoh. The other page called Portfolio so does where we're going to create in this video. All right, let's go back to your element or base and off course. We're going to create a section. Let's zoom out a little bit and as always, we're going to give it a minute minimum mites. And first we're gonna look at the columns. That's always the first thing that you want to dio before you start dragging in all those elements. So what do we need? We need a big back around. That's what we need. We need a intersection for dis Bart. And you know what? I'm also going to use an intersection for disbarred so I can copy dis tell to other pages easily instead of having having to copy each individual layer. So that's what I'm going to do. I'm going to create two intersections with one column over here and two columns over there and in background. All right. Gonna grab at the $9 over here and grab our first intersection with which is has one column and then I'm gonna drag in another in a section which has two columns go back. And as you can see, the bottom intersection is a lines to the bottom off this main section. So what you want to dio is you want to grab the whole section and put all the content within the big section to the bottom for your vertical alignment. And then we will just at betting to the top Teoh make it fit. So vertical alignments put that on bottom and we don't see anything happen yet because we have a minimum height and there's no content. So what we're gonna do is we're gonna grab our image field, and we're gonna base in an image. And as you can see right now and now, it has enough height, so it starts aligning to the bottom. But there's only some betting here inside of those columns. So that's where we're gonna delete. So let's just fix this column first, and then we're gonna duplicated so we don't actually need this one, but I'm gonna keep it over here right now. so I can see my final results before I start duplicating it, because this is a 50 50 layout. So first, I'm gonna delete the padding because I want this to be a light at the bottom. Go to advanced unlinked this. And there you go also go to the main column because the advanced and on link this And there you go. Now it's perfectly aligned to the bottom. And the minimum height for this part is actually not that smart, Because if you start increasing this to increase the height of your column, it's going to create a white space over here because this whole main section needs to have a minimum height. That's what you're telling it. So we're not gonna use this feature for dissection. We're going to use the betting on the insides of Put that on default. So then we know that our images will always be aligned at the bottom, so we're just gonna grab the intersection of ours already on it. Go to advance, and I'm gonna add betting, too, to top on the inside. So let's put it on 80 for example. Oh, not 100 s, so we will have some room at the top. Also, as you can see, there is room between those items. So that's what I will also create. Go back, go to D column and go to right at a petting off 20 for example, because there's also gonna be pending in this section, but then on the left, So double, that's what we'll create the gap that you will see over here. All right, Now we can use images, so we're gonna click on the image, and I off also prepared those images. They are in the fuller portfolio previews. Drag them in and let's see if, in our result, it's first, it's contact one version. So I'm gonna click on that, and I've already inserted a shadow into the image to make it easier for you. So now you will see that preparation is really important and will really speed up your workflow even though it feels like it. Dozens. Because now I can I can really easily fill this page. All right, I'm going to duplicate this the leads that one grap D column because their space over here , we want that over here, go to advanced, and we're gonna put its 20 on the left. And there you go. Changes image to another image. Click on it, insert. And there you go. Now, before we're gonna drag in our text, which is white, we want to set up our background. Otherwise, we're not going to see the text. So gonna crap the main section. We're gonna give it a background. That's what in the style, click on classic, Select an image. That's one of the photos and the photos are in the photos map s so I'm just gonna drink in all the photos so they are are already in my media library. Devoted I've used in the background is my face looking at the button has said That's the image that I'm gonna use for now I'm gonna click on insert and now it's not really good because I've not sat city position, right? I think I've set it up at the top top center because then my face will be feasible. Yes, but it's still not visible because we need to add content over here, and then my face will be visible. For now, we're just gonna continue and at a background overlay, So go to the background overlay and select a color from our collar pellet. That's gonna be a dark, really dark purple call or something late this close it and increase the capacity to something like 0.7. Okay, Now I'm gonna add in the content over here, and we're going to see if we already have a stele on our page that looks the same. Uh, I think I'm gonna grab this text because it's already aligned. And then we only need to change the collars. All right, so go back to your page. What you want to do is copy the clients title, scroll down and base it and then copy the subtitle. Copy it and face it. Go to stale and change the color to white. No. What? No White. Okay. And also go to your title and change d color two whites, all rights. Now we want to add a button, and but it is also very simple. And because we have prepared our collars, it's automatically going to give us deep purple bottom, so make sure it's inside of your top intersection, so direct that in, and it's already purple. This is because we have already prepared the accent color over here. All right. Click on your button again. Align it in the middle and we need to add spacing between this intersection and this intersection. We can give this a bottom marching or dish atop. Doesn't really matter. I will go to advanced on link. This one and I will add something like 40 or maybe 60 or 70 or 82 Dietz up. And now my my face is still not visible. So I'm gonna play with the sections off that image. So click on your main section, go to the background, and we're gonna play with the position. Maybe the bottom center center is what we want. Yes, or D center. Center is what we want. So as you can see, it was not so some center top. It will center center. And now that looks good. So I'm gonna put in the title text. So I've changed the content off the text layer over here and now I'm gonna stell this button first. I wanted Teoh be named portfolio A. So you can see this is a bowls button bolt, text button. So I will go to Stell, go to typography, and I will give it a weight. That's bolts, Yes, that lose good. And now I also want to add this nice hover animation. And that is what you can find also in this section go to hover and then over animation and put it on shrink because, shrink, then you will have this nice effects. Now, if you want to link this bottom to another page, what you want to do is you want to go to content and there is a field called Link over here . It's they made it very easy. You can copy the link from that page and base it over here. But you can also find it if you just type it in over here. So you just type in portfolio and then it's going to say, Oh, you mean this this page? Yes. And if you click on this, it's automatically going to generate D link. Now, also, a little trick click on this gear. I can and you can open this in a new window. This is not what you want to do for these kind of buttons on your website. But if you have a button on your website that you want to link to another website you don't want the people to leave your website. So you're gonna check that one. So your website will stay open in a browser tab and the new website will open in a new tab for your own website. That's not really necessary. But I wanted to show you that it's there. And the last thing that I did is I edit an animation, do this bottom section. So I'm gonna go to advanced motion effects and then fate in from the left. All right, let's check. Our work would have. We've done. We're going to click on update. We're going to go back to my portfolio. It's going to refresh. We're gonna scroll down. And as you can see, this looks good. It almost looks identical to the design we have over here if resumed in. As you can see, maybe the backgrounds uh uh, purple is a little bit more dark than over here, but it's the same. Oh, I forgot to the hover effect on the images. I'll show that to If you go to an image, you're going to click on Stell and you guessed it. It's here in hover. And then there's an hover animation and the one that I used its gold hang. And this is kind of the opposite of Bob Worth where it starts floating like we did on the top. This is the inverse version off Bob. So it's called Hang and don't copy the stele from this to this one. Because otherwise we're gonna mess up the betting that we have already set up. So now we need to click on this image, go to Stella again. Colligan hover, hover animation and then click on Hang. And now those both images will work. And what you probably already thinking is why already images going outside of the page? Well, that's true. But that's not an issue for now. Because in another video, we're going to create the food er that you're seeing right here and we will We will make sure that that food er is on top off this section that you're seeing right here. So the images will just go below do food. Er, so don't worry about that. For now, just click and update. Go back, scroll down. And now Yeah, you can see there's already another food here, so that also looks good, but we're going to replace that food or with another one. All right, now you have finished your own first home page. I hope you learned a ton. We're going to create the other pages. We're gonna redesign the menu over here. You have already learned a lot. The other pages are relatively simple compared to what you have already learned. Eso I'm excited for the next videos coming up and I hope to see you in the next video. 20. Building the footer: everybody. Welcome back to the last episode Off Days chapter, where we're going to design the food. Er, the food er is actually not part off the home page, but it's part off every page in the free version of Elementary. You cannot create a header and a footer with in element or you have to do that in the team . But on a simple website like this, I just want to use L a mentor to create the food er, because this is not very easy to do within a team, and it is very easy to do in l. A mentor. But you cannot say like okay, this element needs to be on every page on automatic pilot. So what we need to do is we need to create this part and then we need to copy that section to our four pages. And since this website only has four pages, that's not a real problem. If you have a bigger website, you want elemental pro because we didn't elemental pro. You can design a section like this and then say Okay, this food or needs to be on every page and the header that we're gonna design later. This had also needs to be on every page. You know, this is a pretty simple header. But if you want to create a more complicated adding you certainly want elemental pro for people that are already interested and know that this is something that you want. I will put a link to elemental pro down here, but there's also information at the end of the course, so you can also wait for that. All right, let's now start with the food er s So this is the design that we're going to create. So what is it? It's a section. It's a big section and there are five columns with text and logo. I think you already know how we're going to do this. So we're gonna just go to our page, we're going to click on at a new section and then we're not going to give it in minimum height as normal. We're gonna go to advance, and we're going to use the betting option. You're gonna click on link this and then we're gonna add bending to the bottom into the top . So let's now, for example, at 60 to the bottom and 60 to the top. That should be enough. I think we're gonna give it a background scholar that we have in our color panel like we see here. All right, that's the right color. Looks good, but let's go back and see if I have done it. Right. Um, as you can see, it needs to be a little bit higher. So I'm going to go back to advanced, and I'm gonna increase depending to 80. So what I'm gonna do is I'm gonna drag in a heading. We're just gonna use the heading feature, and let's big, let's first give it a white collar. So then we can see what we're doing. So pick the white, then go to content and the big T html tech age six. So it will be a lot smaller, and then it's too bold. So what we're gonna do is we're gonna go to typography, go to do with and go to normal. Now, change the text, do whatever you want. For example, I'm on my email to be over here, and now we're simply going to duplicate this section a lot of times. So duplicated one time second time and make sure it's gonna be five off those sections and then click on the middle one, go to the nine dots, grab an image and put it on top or beneath. Doesn't really matter, because we're gonna delete this. Now we need to fix the alignment. As you can see, Click on the image. We're gonna boot our logo inside of it. Where is my logo? I don't know why it disappeared. So I'm going to drag in my logo. Um, yeah. Here's my logo. I'm gonna track it. And I don't know about my logos is not here anymore. Inserted. And then go to Stell, Click on pixels for the size, and then give it a mix. Uh, with off something like this 72. That's good for now. But as you can see, the alignment is not good. So what we need to do? And actually, I needed to duties before, because now I need to apply to all the the columns, but we're going to click on the column. Vertical alignment needs to be in the middle, because then it will be aligned two D logoed ever seeing right here. So I'm gonna copy. I'm gonna based based Stell over Judy's other ones. And there's also one more alignment issue, and that's that the text is left aligned. But that is causing a problem over here. Because now this part is a lot bigger than this part. So what you want to do is click on a distant text over here and right align. It's and also do that on this text, right? Align it so it creates more focus towards the logo. So now I'm just gonna change the text, and then I'm almost done. Okay, So I've added some text inside over the food er, and as you can see right now, this looks good. Then if you want to link those text to one of your social media, for example, you can click over here and you can base the link off your instagram over here. Okay, so I'm gonna click on update, and we're going to see if it turned out great. So we're gonna click on pre few. I'm gonna close the old pre. If you were going to scroll down, and as we can see the new column, I mean, the new section already is overlapping the older section. So now we don't need to fix the images that we're seeing over here. But the last thing is that our team footer is still here. So that's where we're gonna disable. We cannot do that. And we didn't l a mentor. So we need to go to the actual page and we need to click on customize Why? Well, because this is part off the team. As I said before the header and the food, er, you can only change them within the team. If you just want to do everything within elemental or you will need elemental pro eso. I'm going to zoom out a little bit with comments minus, and I'm going to scroll down so I can see the food or scroll down in this menu. And there it is, food or witch, it's and I'm gonna disable that. And now there's only this bar and that's gold, the food or bottom. So we can also disable that perfect in a few videos from here, we will also customize the header to make it look like the design you see right here. But for now, we're just going to finish this off because we have disabled two footer we're going to click on publish and see if it works. So click on the X and close that scroll down. And as you can see now we have this footer and it looks good. Okay, so that's it for Chip. Turn number free in the next chapter, Where we're gonna do is we're gonna create those other pages. We're gonna make the whole page responsive. So that means that it's also viewable on tablet and mobile. Very, very important. If you are creating websites that you also make the website good for mobile and tablet and we're going to customize the menu to change it from this design to something that looks like this. All right. I hope to see you in the next chapter. If you have any questions, just let me know and I'll see you in the next video. 21. Mobile and Tablet page design: Hey, everybody, welcome back to the next chapter in this chapter. We're gonna change the menu and we're gonna make our website responsive. And we will also created the other pages ever seeing right here. The other pages are not so hard. Esti fares home page, and we will create them super fast. I will show you the ways to make them superfast because on every website, your home page, it's probably the page you're going to spend the most time on. Because if you have the home bench is very easy to copy and based different styles and different sections onto other pages. And if you practice this, you can create websites really fast. Um, this can make you a lot of money if you sell websites. What we're gonna do first is we're going to fix our mobile and tablet motives. L. A mentor has a great feature for this, So if we go back to our page, they have, they have this button over here. It's called a responsive mode For the people that don't know what responsive is, It means that your page responses to the actual device that it's using. So a responsive website is a website that is responsive to do the screen. So, for example, if we click on mobile, we're gonna see that our page off course looks very different now. It's not good on some parts. Actually, on most parts, it's is good. Why? Well, because elemental is built with this feature in mind that with most of the things we're going to do, it will automatically create a kind of responsive page. For example, on Web this this section has four columns next to each other. If you put it a mobile, mod elements are automatically eyes like Oh, well, you're now mobile mode. Let's put those columns in this order. So that's what what's happening over here. That's why we don't have to change anything because there's all already looks good. But on this part, um, it's not good. Why? Well, because we have used a lot of bedding in disc Ahlam when we created it for wept. So I will show you what I mean. If we go to desktop and we click on the petting, we go to advanced. We can see there 700 panning over here. So now if you go back to Mobile, it's still going to give it that 700 batting, but on a mobile device, there's not even 700 pixels in with. So that's why it's not working right now. And this is not really great about Element or I think, but it doesn't say 700 here. It says nothing. So you think there is nothing inside here, but there is. There is still the 700 betting inside off this column that we're seeing right here, and I will show you if you unlinked this, you're going to see that the page will look good. So I'm gonna click it. And as you can see now is good, right? So deep if you change, if you create something on WEP and you change it to tablet or mobile mode, the bad things that you have set up and this is important to understand, the betting said you have set up Benning's and margins on Web will also be there on mobile and tablet. But you don't see them here in the menu. All right, this will save you a lot of headaches, so always just reset the betting. 2 to 0 if you create something on wept first and then go to mobile. Okay, I really wanted to stress out that point. Otherwise, your website is not gonna look it. So let's first fix those easy things. I'm gonna click on this one, too, and I'm gonna unlinked depending. And now it will go from left to right. And that looks good. We need to fix this part. And also, uh, this As you can see, the whole alliance section is now part off this section. That's not what we want. Um, also, the beddings over here are not really good. This looks actually pretty good. Um, and this also doesn't look very good. Oh, and the food, er also doesn't look very good. So we're gonna fix that. And also a very important thing that you need to do before you start editing the columns over here. If you think that you should have a little bit of betting on the left and on the right here , do not at betting inside of your column or inside over your layers to make it fit. Do not do that. Onley applied beddings to decides in your main section. Why? Well, otherwise you're betting will be on all individual columns and layers, and it will become a mess on Leah plight betting on remain big sections. And then, if you want to add extra pending for death specific column, then go into the column. But your main batting should be added with Indy main section. So we're gonna click on our first main setting, main section. Sorry, Gilligan. Advantaged. I'm gonna unlinked this one. Now it's gonna delete all the petting. So we also so we also don't have pending on the top. So let's just add some. For example, 40 or maybe 60. That should be enough for now and for the sites on mobile I always recommend on every page 15 left and 15 right. It will be a little bit of white space, but not too much that your contents will be cramped. So I think this is This is good for every page. So we're going to do that on a dissection to so click on your main section and go to advance. I'm gonna un link this. I'm gonna add 15 to d left and 15 to the right and you can also use 10 on mobile. But I always do 15 on tablets a sort of story. I always do 15 on mobile and so any on tablets. And I think this is one of those things that you shoot right down in your notes. If you're designing a page 15 on Mobile and 20 on Tablet, then and it always looks OK. So as we're seeing right here, we have added 15 to the sites. But now there's more betting on this inside, I think, because they're spending on this column. So we're gonna unlinked this one and see yes, this works. So now there's 15 on both sides on this. Looks good. Now, also, this whole part that looks good. But now this part is a mess. So what we want to do is now we want to use the Navigator because now there are so many buttons that's hard to click. So click on no click inside of elemental, right click and click on the navigator. Now open the navigator. And now we can easily select the columns that we need. So first, let's see where we are. I'm gonna click on this list. Okay, so we are inside off this intersection. The first column and the second scholar in the first column, There's all the text. And in the second column there are all the images. But on the images we have used the fly feature or the custom positioning feature. That's why we need to add betting on the inside off that column. Otherwise we will have a problem with disbarred over here with our client section. So we need a mobile. We need to tell it, like, how many room can those images do those images need? So I'm going to go to advanced. We're gonna unlinked this and can add a lot of betting to the top in the bottom. Something like 700. I mean, 202 100 at the bottom, maybe even more to 50 and 2 50 at the top. And now I'm going to drag the images up so it will look good because we have to custom positioning on those items. Let's see what images are actually visible. Click on this one. Go to advanced, go to Responsive. And we have not disabled this one so we can track it onto here. That looks good. They were disabled. This one go to advanced check. Responsive. No, we have not disabled and any image. Okay, so now what we want to do is we want to disable to images on this part, otherwise it will become too much. So how you do that is, um, first you're gonna choose what images you wants to appear. So I think I want these two images to appear. So let's just put this at the bottom. Put this over here. That's just give us some room to click. OK, so we're going to disable those two images on Mobil's or click on the actual image, go to responsive enough funds and click on height on Mobile. Now, you're not gonna see this in L. A mentor, but if you preview it on a mobile phone, you're gonna see that it works. So I suggest in this step that you're gonna take your iPhone or another phone on and you're going to go through your browser or you're gonna log in, you're gonna test the page. That's what I always do when designing a website, because I want to make sure that looks good. So now go. Also do the other image that you want. It is able go to responsive and click on height on mobile. And now if we position this one that is visible and we're going to click on update, click on preview changes make your screen very small. Scroll down. And as you can see now, only those two images are here but on chrome, like in a small window I'm doing right now, you're not going to see the actual design. So I suggest you just grab your phone and you just check how it how it looks on your mobile phone. But I think there is too little room at the bottom. So I'm gonna add more padding over there just to make sure. So I'm gonna click on the column again and maybe increased this 12 300 not 3300. And then I'm going to click on update, and this will be good. And now you're seeing why does, by Elemental doesn't recommend to use the custom positioning toe like we used in this part , because on responsive mode, it's It's just a pain in the ass, to be honest. So now we're gonna continue to decline sections, so click on the main section and I don't know what this margin on the right is here. But click on those vans and I'm going to reset, depending over here and reset. This, um maybe this is a buck, or this is because of those images. Yes. Okay. It was because of those images. Now it's sets due to right, click on the column, and we're gonna do the exact same Same thing. 15 pixels on the right and 15 pictures on the left. Unlinked hits and do that. And now we're going to see that we have more pending over here. That's because there's also pending on this column. So go to advance and unlinked it. There you go. And the extra betting that is over here, I don't really mind that, but I want some petting at the top. So I'm also at a 60 petting over here, go to the bottom and also as something like a 40 pat bedding or a 60 pay betting at the bottom. And now dissection also looks good. As you see, it's pretty fast. You don't have to design the whole website on mobile. It's just changing the bedding most of the times a little bit. So again, click on the main section. Go to advanced unlinked kit at 15 to the left and the right at 60 to the top 60 to the bottom. And then it looks like this that went, that one went really fast again. Testimonial section. Undying kits. 15 15 60 60 That looks good. Now they're spending on the left here. That's because of this column. Click on this one. Advanced on Link it. Now it looks like this image, this part off dis text. So now we need to at betting or margin at the bottom off every testimonial. And also there's a betting on the right here. We don't need that mobile. We edit that betting on the call them right. We edit depending on the column on Web. So we're going to click on the column because we need to reset that petting click on the unlinked and now detects will just go to the end off the off the column. And then we're gonna ah, you spending at the bottom. We can also use margin at this point of those reading matter, so I'm gonna add something like purity to the bottom. Maybe 40 uh, 30 is OK for now. So now and can copy to stall of this one, and I'm going to copy it to the other two like this. And now this part also looks goods. And now, for the last part, I think I'm just gonna hide those two images. This is a good enough culture action for this part To make it easy. I'm just gonna deactivate this. So click on the whole section, go to advance, go to responsive and go to height on desktop. Oh, I'm sorry. And go to a height on mobile, okay? And 40 food. Er, when I want to do is first I want to align all the text. So I'm gonna click on this one, click on this one and align them all in the middle and then also changed the bending over here. That's too much. So unlinked this one at 15 to the right and to the left. Always do that. Even on when the Texas. So sure, Because in the future, if you want to add a longer text or declined as a longer texts, it always looks good, right? So I'm going to click on the bottom at a spending over here something like 40 and something like 40. That should be good. So now let's grow up again and see if you have not not missed anything on. The only thing that I want to do is change the size off some off the titles because this one is just too big for mobile. So the beauty off this is that you can change the site only for mobile toe if you click on typography, you have those tree Aikens over here, and you can only change the size for mobile. So now if I make the size something like this, something like 42 I go back Teoh desktop, it's still gonna be 54 right? I'm gonna click a mobile, and now it's 42 so you can set different sizes for mobile. And what I also suggest that you make a note about is that you always use the same heading and body sizes on all pages. So decide when you are designing that this website always has 15 or 16 pixels off the main text in in size and that your titles, your big titles maybe are 52 you're smaller. Titles are charity. If you write that down, um, it's very easy, Teoh. Create the website and it's not gonna be a mess. Interns in terms of design. So now I know the big title is 42 at the subtitles. I want to make that even smaller. So I'm gonna go to Stell. I'm gonna may be used to something like a charity to that is better. And then the line height. I also want to change death for mobile and make it something yet 32 36. That is good. Okay, so now you want to copy the stele and base it, But that's not what you to do. Because there are also steles on ah wept that you can change. So you need to change this one time. And then if you create new pages, you're just gonna copy and based the whole section and then change that. But you need to do it one time to make sure that everything is good. So now, dirty to over here and the line hide. We don't need line height over here, but I'm just gonna put it in because then if we have another text as longer, it's already there. Same thing over here. Gonna style Click on typography pressed charity Teoh, go to pixels Dirty four I mean, 36. Um and that's it. Okay, so now I've changed all the title, So everything looks good. And now we have a pretty nice page. I'm gonna check on tablet. If everything looked good and off course, it doesn't look perfect, but it's almost already good of the text over here. Things one is not good. So I'm going to click on the column again. Unlinked this. And as I said before, we need to change d betting. So also, unlinked this and go to the right. That's 20 over here and a 20 over here. And as you see, this is a nice white space on the left and on the rights. And also at a betting to the top, maybe like, 80 and maybe even mawr or something like 120 because we need a menu over here in the future . The space over here is too long. So that is something you can change in layout, and you're gonna change the minimum heights to something that fits your design. So something like 370 and now I'm just gonna use the exact same technique for the other sections. So what I did over here is exactly the same. And it's Winnie to the left and 20 to the right. And I deleted the betting that was not necessary. And as you can see right here, this is not good. So we need to add a petting to the bottom. Something like this. And that looks good. Also over this section I at its 42 top, the bottom and the left and the right. And also now I see that I need to delete despairing over here. All right, that looks better. Now, on this section, what you're going to see is that this design on tablet doesn't really look perfect, because this is gonna be on two lines. So what, you don't want to do You want to go into the column over here? You want to go to advance and you want to set a custom padding over here. So I click on this one and now you're going to see that planning is gone. Click on the column, go to lay out, go to vertical alignments and go to middle. And that should work for now copy and paste that to the other one. Oh, now there's no pending at the at the top and the bottom. So we need to at that betting again, but only to the top in the bottom and nuts to all the sites. So at that over here, as you can see, this looks a lot better. All right. Also, there's too much betting over here. Why is that? Will not because of this 40 it's off course because of the minimum height, we cannot see it. But we can change it up here, so make it something like 270. So I'm just gonna do exactly the same for this parts. But on the last section, I, of course, did not at betting to the bottom because I want those images to be at the bottom off that section. So also for the food or what we're going to do is we're gonna delete this. That's 22 the right training to the left. I'm gonna act 60 and 60. All right, that looks good. So I think on tablet, I'm also gonna use the stacking feature that all the columns will be stepped upon each other. So I'm going to click on the column, and I want to make sure that it's always 100% with so column with I'm gonna put it on 100. So then I know it's always gonna be this full length. And then if I click on the text and a center, align it. I always know that it looks good, no matter how big the tablet is. So I'm going to use do. That's for these other parts, too. Put it on 100 not 1100 then align the text in the middle. Okay, I've done that now and now it's a little bit too big, so I'm gonna decrease depending on top on the bottom. It's just, you know, playing a little bit with the elements to make sure that it looked good. And if you practice there's more, you're gonna be faster waited. But now our whole home page looks pretty good. I can change the text on the titles on Tablet, for example, to make it even a little bit between mobile and tablet. I mean mobile and web if you want, But for now, I think this looks good Um, yeah. All right. So this was a little bit longer episode, but it's a very important one because everyone wants a responsive website. You can almost not deliver a website without it being responsive for mobile and tablet off course. So I hope you learn something new in this episode, and then I will see you in the next video where we're gonna change the top menu over here. That's now something that looks like this, and that's very pretty. All right. I was here in the next video. 22. Customizing the menu : Welcome back, everybody. In this episode, we're gonna change the menu. I want to show you this before we're going to create all the other pages because with the knowledge that we have learned already, you can create a pretty stunning page or website already. And maybe you just want to create a one page website. Debt could be enough. So I want to show you this before the course is over, but also at the end for people who really want to take it to the next level and really want to make money with this, I suggest that you wait and watch for my explanation off Elemental pro. Because if you're gonna work for clients, you want element or pro. But that's not what this for years about. Now we're gonna change the menu over here because this off course looks very ugly. So we're gonna click on customized and the design that we want to create is over here. It's a transparent menu. It looks really good. Yeah, So that's where we're gonna dio and again, we need to change this Indy team settings because we cannot do this with the free version off elemental or so I clicked on customized and here is the website. I'm gonna zoom out a little bit with comments and and then minus so I see what I'm doing. And actually to get this working the Onley, uh, bar that we need is this bar. So first, we're gonna delete this bar and this bar so it's curled down and go to general options. And its first thing that you want to do is go to general settings and this needs to be at 11. 40 because every elemental website by default has this with and you don't want the with off your menu at the top to be bigger than your actual content off the website. So make sure that this is on 11 40. That's important. Eso that's it for this part. Now go to page title the next one, and that's this one. Some website have it enabled. I just want to design something myself. So I just go to Stell and then click on Hidden, and then this whole bar will be hidden from the website. And also, if you scroll down the page, you're going to see a button over here. I think that's a very nice feature so you can scroll up to the page really fast. If you want to turn that off, its here, Over here, it's grow up button. So if you're gonna disable this, you're not going to see it. If your scroll down, So then you know where it is. And now we are done. Over here, we go back and we go to top bar because we also wanna delete that top bar, go to General and disable d enabled top bar. And as you can see, right now, it's disabled and there's already looks pretty good. Now go back, go back again and click on E d Header open a general. And now we are in the settings off this main header here we can set up the height so we can make it very big and the content will be centered. No matter how big you make it. For now, I'm just gonna put it at 80. Or maybe even bigger 90 death school on the stele. Does we want to use ISTEA? Transparent, Transparent. Still not every team has to this, but we are using Ocean WP right now. So this team has this option transparent and that is pretty cool because then your menu will be on top off the first section off every page. As you see right here. We don't see it really good right now because we need to change the colors and some settings. But this is the feature that I used to create de menu. Okay, so first we want to do is we're gonna disable this border bottom. It's over here. Had our border bottom disabled that first, we're gonna insert a logo, go back and go to logo, and then we're going to select a logo from our media library. Eso You can just insert a logo and click on skip cropping because I don't really see it on white on white. And if you wait a little bit, you're going to see that your logo is now in the website and this will be on every page. That's really great about this feature that dis manageable now pop up on every page, so I'm gonna make it a little bit bigger. I'm gonna put it on 84. I think that's enough. Otherwise it's going to become too big. So Dad looks good. It already has to school hover effects. Um, I don't even know where the settings off that are, but that looks good enough. Now go back and click on Menu Scroll all the way down. And here is the option for the search. Aiken. Now there's a search Aiken over here, but this website doesn't really need a search. So Glick on the disabled, and and then your search Aiken will be gone. Yes. So now we only have to style this text, and then we are done. All right, so we're gonna go back and we're going to go back, and we're going to click on typography because we need to go to the staining off the part, typography. And then we need to go to the main menu over here. The fund family that we want to use in my website is Mont Sarette. And it's in there. So I think this is just all the Google funds. So now we have the month right, found. Now I'm going to zoom in to do the normal level because I want to see the size off the actual text. So I'm not going to make it to big deformed. Wait. I wanted to be a little bit more fic Something like this. No, Something like 600. Yes. And the phone size? I want to increase that to you. Something like 15. 14. I'm gonna put it on 15 for now. Okay, so now it looks like this Pretty cool. So if you want to change the colors, the settings are actually in the header and then in the menu doesn't really make sense. But in this team, it's It's like this. So then if you scroll down, you're going to see that the normal linked collar is now on a dark color. So I'm gonna put that on white. As you can see right now, that looks a lot better. The link Gahler. I wanted to be that purple again. These are not the collars that we have set up in L. A mentor. Because this is the team settings are now you need to go back and get the caller off your actual logo. But I have a simple plug in for this so I can just use that Do get d goat. Very nice. And I'm gonna base that in here and now the harbor effect will be a color But what I did on my final website is I just make it white or make it a little bit gray. Very small detail. But I use an underlying effect that I think looks way cooler than that. Um so if you scroll up to de link effect now, you can click on Underline from left. And that's the effect that I used to create that underline effect. And as you can see, right here, it looks really good. And now we can change the color, do the actual color off my team, and this is what I did. And now we are done for weap. But we also need to change it for mobile on tablet. It's almost always the same as a mobile. So if you click on mobile and you're gonna fix this, it's going to be good. Now you can see that there's not a lot of bending over here. We cannot change this within the team standings down. We need to go back to L a mentor and give the upper section some more petting, so we will have enough room for our menu over here. But we will not do that right now. We're now we're now gonna fix the menu. It looked like this very, very boring. It doesn't really fit our team. So what we're gonna dio is we're gonna go back, we're gonna go back, and we're gonna go Teoh header, and then we're going to click on mobile menu. And then if we scroll down, it's now set up to the style off the CYP are. If we click on drop down, it's going to create a drop down menu. So this looks a lot better Display the menu Texas detects over here. That's not what I want. I only want the hamburger I again. And now it looks like this looks a lot better. You can even set up a custom hamburger. I can now is just aesthetic Aiken. It doesn't really change. So if you click on for example, Treaty X, that's pretty nice. Now you have this cool effect and it changes in an X or something like the Treaty X I. And then it would look like this in this team. There are a lot of effects from test. Looks pretty fun. I'm just going to keep it at this. Doesn't really matter. Uh, just though make it Tiu, Tiu to cheese. I think maybe this is a little bit too cheese, but it's fun. I mean, it's a designer's website, so you know, it's okay. We don't see any of the menu items because the text is white. I don't know why that is because the link color is here on black. Oh, now it changes. All right, so we want to detect to be just a dark color, something like this, and maybe the Harvard color Teoh be our, uh, deem color show. If you click on the item off course, there's not a hover effect on mobile. But if you click on it, you're going to see, like, a milli second. You're going to see the the collar. So that's good for now. We don't want to search bar, so let's see where we can. Yeah, we can disable it over here. Okay, so 90 menu looks good enough for this, And if you click on mobile, it's also gonna be good. But as you can see, the margin is not very good. So that's something we want to change. And also on the Web version. My Aiken's, as you can see, are not really spaced out in the way I want. I want a little bit more white space between the items. So that's the last thing that I want to change. If we go to header and then click on the menu and then Creek on left betting we can change this and said It's to 15 for example, or even something bigger. And that looks good. Let's just publish it for now. Click on the X and see how it looks. So I'm going to click on Common Zero. And as we can see right now, this looks very good. But on mobile, the margin over here was not very good. I'm going to go back to L. A mentor. Click on any mobile page and the margin off here is just too small. We need more space, so we just need to add more petting here to the top. So, for example, put it on one hunt out, not 1100 and click an update, and then it should be fine on Mobile. All right, so editing and menu indie customizer I don't like it. It's too complicated. So much menus you need to search for so That's one of the reasons why I use element of pro , because I just I just don't like going into the customizer. I don't want to use it. I just want to use element or it's much more easy. But that's just my little rents for creating something with free solver. And this course is about creating something which free software. So actually, we've created something that it's pretty. It's pretty nice for what you can do for free. Okay, so that's it for this episode. In the next video, we're going to create a other Bages, and we can do that really fast now because we have prepared everything in a really good way . All right, I will see you in the next video. 23. The portfolio page with portfolio items: Hey, and welcome back to this episode, And now we have prepared everything. So I want to show you how to create a deep portfolio page really fast. If we click on our portfolio right now, this is what we see. That's not really good. We don't even have a button to added this with L. A mentor. So we're gonna fix this because we want to make it look like this. If we come onto the page, there needs to be put faux dio items over here with a title, a button on just four portfolio items that can link Teoh a website that you have created. All right, so what we want to do is first, we need to make sure that we can edit this page with elemental off course. And then I'm gonna click this thing away on, and I'm gonna click another with elemental. And if we have clicked on that bottom one time, then we can click on the bottom on the button in the brief, You off the page. So now this is all we see. So first thing is, you click on settings in the corner and you changed the page layout to elemental full with and with element of full with you're gonna get the header and the food er that you have installed with the team or with elemental pro. So now we have this clean page, and on this step, I have my home page open, so I'm going to assume out a little bit. Um and the first thing that I want to do is create this Heather. It's actually pretty easy. What I want to do is I want to copy heading that we see up here. I'm gonna copy this header. I'm gonna go to my portfolio and I'm just gonna pace it. I'm not even gonna make a section. I'm just gonna make it and he's gonna copy everything to this new page. So that's really cool. The design off the final page. It looks like this and we only have a title. Let's copy that for now. So if we go to this page, we can delete this. We can delete this and we can delete this, and now we only need to do a line. This at the center. There is a lot of bedding here. That's what wants elite. So we go to the column advanced and we delete depending. That's over here we go to the text. We faced the content, and the only thing now that we need to do is change the size off the fund. And it's gonna be something like Ah, 40 to just make it look good. Something next fix 50. So 42 50 should look good in my final design. I have a lot of bending over here and over here. So that's what we're also gonna add. We're not gonna at that duty text layer, but in the column because everyone had more items within that column. They're depending already, is there. So we're going to go to the left at maybe 80 on the left and 80 on the right on. That's not enough. Let's say 141 140. That already looks a lot better. But we also want to do is make sure that the content is aligned in the middle. So we click on the whole section, so we need to change this to the middle. And now it looks like this. But there is this wave over here, so we need to have some more room at the bottom. So now we're gonna increase depending at the bottom to maybe 40 or 60. So it looks something like this and you want to keep it like this, that there's more room up here than there is up here because we have a transparent menu. So we we need room over here for our menu. Our first gonna change the video to an image, and then I will show you what I mean. So I'm going to click on a D section, go to style, and we're just gonna grab an image over here. So change video to a photo click on an image that you want to import, And the image of a use over here is me drinking coffee. So that's this image. Click on insert media position. I'm gonna put it on center center. I'm gonna click on update. I'm gonna pre few the changes. And as you can see, the menu is now up here, but there are double image is going on in the background. What is that? Well, that's another feature. Um, you're not going to see it in here because you have this menu open, but it's the repeat option. You almost never wanna put it at default. You always want to put it at no repeats for images on a white background and then put this on Gover because then it's going to stretch no matter how big the screen is, because some people have very big screens, and then your website still looks good. This is also a beginner mistake that new Web designers make day designed the website on their computer and then decent website to a client. And the client is like, Well, there are a lot off images repeated on the head of what's going on and the designers like, Well, it's not on my computer, but it's just not set up correctly. So that's what you're gonna do here. So if you have an image in a header like this boot to repeat on, no repeat because you don't want to images, but then make sure that the sizes cover so it will always cover the hole with off the page . So now if I click on update, we go back, we're going to see that it stretched out. It covers the whole atop off the website. That's what we want All right, now we're going to go on to the next section. So what part can we actually use to create Death section? Let's go to our results. And what is this is just a few columns. To be honest, it's not very spectacular. So I'm just gonna copy to Stell over here. Yeah, that's what I think. I'm gonna dio. I think I'm gonna use one of those images and also gonna use some titles over here. So you know what? Let's just use the testimonial section because there are already columns over here and there is a title. So we will copy in this whole section, go to our new page and just click based. And now we have this page. But this background is a little bit more grey than this one. So that's the first thing that I want to change. Go to the section, go to style to classic and go to deep Beck frowns. Great Gahler. All right, that's set up correctly. And now what you want to do is you want to prepare the columns for the design and that you have on a page. It looks like this You can create a main section for days and a main section for another row. That's what you can do. But it's better to have one main section for all of your portfolio items and then have intersections for your actual portfolio items because then you don't have to sell a lot of main sections. You only have to still one main section, and then you can duplicate the intersections if you have new portfolio items. So that's what I'm gonna dio. I'm gonna go back to my page and gonna use the delay out there were seeing over here. So I'm gonna delete one column because we only need Teoh inside of that column. We need a title, a subtitle and a button. So that's where we're gonna do inside of this column. We need a title. So grab the title. We need a subtitle like this that we want another color. So let's put it on another collar. Something like this. We want a button. So we're gonna grab a button, and with the button over here, that's look, that looks good. We're gonna delete our testimonial, and we're gonna add an image eso Now we have created the block, but before we're going to duplicate this block. Teoh the other parts off the page refers Gonna style it. So we make sure this is what we want. That's just first changed the title over here. I want to make this one a little bit smaller, so I'm gonna put it on 22 or 24. Something like this. And we're gonna put Daido Project. I don't know what the Texas that it will be putting here, and this will be a a short description about the projects. Okay, that's good enough for now. I'm gonna use an image to fill this area, and I've also prepared to those images. So this is what they look like. If you direct them into where press, you need to wait till they're uploaded and simply select the 1st 1 Or actually, this is the 1st 1 item number one inserts the media, and as you can see now, it this part looks pretty good. But it's center aligned, So align it to the left so you make sure it's aligned to detects. And the button over here and now what you want to do is go to Stell and put this on 100% so it fits the whole image. Otherwise you will have a few pixels on the site. OK, so now we already to duplicate this to the right, so I'm just gonna duplicate it like this. I'm gonna delete this one, and I'm gonna change depending from here to the left. So click on the column, Go to Advanced and Petesch 20 on the left site. So then we have a nice gap over here. Change this image, so click on it and go to item number two and imported like this. So now we have created our first intersection. And if we're going to duplicate this, it will be very close to this intersection. I will show you if you now click on duplicating in a section, it will duplicate vertically. So we're gonna see that it's very close to the other one. So what, you can dio you're gonna go to the upper one and you're gonna go to advance and you're gonna add ah, march into the bottom. We're a petting. Doesn't really matter for this part. So I'm gonna add 40 pixels to the bottom or maybe 60 something like this. Make sure it looks good. And now also, I want to add more betting over here. So that's what I will also do. You know what I'm gonna copy to self? This one and I'm gonna based it on the other one rights. And now there's enough room under our intersection. And if we have more portfolio items in the future, we can just click on an intersection, click and duplicate, and then we can have another section. I also want to show you a trick. If you only have three portfolio items, for example, what you can dio. If you delete this one, your column will be the whole with That's not what you want. So do not delete the column. Just delete everything in sight off the column. That's the most easy solution that I found. Teoh. Keep the design nice and clean. All right, so that's not what I want right now. So I'm going to duplicate it again. So it looks like this. Replace the images, and now we're almost done with this page. Let's just check what we have created some kind of clicking update. Click on pre few changes and as we can see, and it already has an animation with your school because we copied this column, of course, and this looks pretty good. Oh, I forgot to add a hover effect duty button before I duplicated it. So that's why you need to still everything before you started duplicating your content. Otherwise, you need to change it on every button. That's not a big deal on a page like this. It's four plates of, but you get the point. Now we need to do to morph things first. The design over here, it's overlapping the content over here. So you probably already know how we're going to do this. We're not going to change the main section. We're just gonna grab the intersection and use a minus margin so it will go up. So a minus marching at the top. That's what we want to use. So click on this intersection. Now it has 20. So you so type a minus. And then, for example, at a one so it will be minus 120 or 160 for example, maybe even 180. And now you want to use the zoomed in versions of press common zero. So you actually see what this is about. Maybe decrease the main section over here in height, so they will come a little bit more into the title. Something like this. Maybe increase it a little more. Maybe minus 200. Yes. Let's check how this looks. I'm gonna click an update, go back to my portfolio page, and this looks pretty good. Now, the last thing that we need to do is at the food or do this page and check out how to mobile design looks. So first, let's just check our mobile design and our template design gonna click on tablet. And as you can see, that doesn't This doesn't look really good. So I'm gonna change the intersection and gift e title some room. If you run link this one, it's gonna default back to our normal design. So now you're gonna add to the marching again and make it look good on a tablet. Something like this. Maybe you don't like the size of this title. You can click on the title then on the tablet mode, change the size off your text and also changed the line heights. So it looks good and always keep a space here for your menu. So on tablet, this looks pretty good. So maybe not the margin between those elements. So you know what? I'm gonna click on the intersection over here, and I'm going to give it a bottom margin, something like 40. And also on this one, go to advanced unlinked this one, go to the bottom and at 40 over here. So if you're going to duplicate this one in the future, it will have that same margin are right. This looks good on tablet mode. Now, go to mobile mode, and this doesn't look really good. Um, okay, let's just first, um, change D title over here. Click on the title, click on topography. Right. And now we have repeated two steps so many times, I think you start to understand what I'm doing here. It's just the same process over and over and over. There's a lot a lot of betting over here. So that's what we want to change. Go to advance. And this is not We don't want 100 over here. Maybe we want zero or 10 with Sweeney. Maybe we want zero. That's enough for this page. All right, Does that looks good. and also depending already is good. I think this is because this is a copy off something on our home page where we already fixed the betting off the column. So this already looks pretty good. The only thing that I want to change is the site of the title to click on the title, click on sale and decrease the size on Mobile and then copied Estelle and based it on all the other titles like this. All right. Also, I want a nice hover animation on the button. So click on the button, go to style, go to hover, and there's your harbor animation. I'm gonna put it on shrink. All right, copy this based its based it and based its Glicken update, and we're gonna see our results. All right, this looks just looks good. This looks good. The Marchionne's look good. The Harvard animation looks good. And now we only need to add city food at the bottom. So go back to your home page. Scroll down. Ga p the food er So the whole section the main section. Copy it. Go back to your portfolio. The elemental one. I'm gonna put it on desktop for now Scroll down. Click over here. Right Click and click based. And now you're done because the food is already designed for tablet and mobile. Of course. So if you click on update and you're gonna go back now, we also have a nice food or over here. Very simple. So that's it for the portfolio, Bates. You see how fast we have created a new page? I did this in one fio, right? A whole page in one video. And this is because we have prepared the home page in a very good way. So now the contact page is not gonna be hard, the above pages a little bit more complicated, but it's also not going to be hard. So I hope you also fuel little bit more confident. Now we're going a little faster hearing there. Um, but we're using the same techniques over and over and over to make you understand the technique. So I will see you in the next video, and then we're going to create the about page that looks like this pretty cool Has a column layout as thes school tap feature over here, an image gallery and those cool F A Q boxes that open. All right, I'll see you in the next video 24. The About page header with 3 section column: Hey, and welcome back in this video, we're going to create the about page. I think it's a very beautiful page. It starts out with the huge image header, and then there another image that's overlapping the whole page has this three column layout . This is a double column, and this is a single column. So it's one Teoh tree, and that makes it really easy to read, doesn't make the text to White on, and there are clear titles over here on the left, And there are some nice features that you can see over here like this. Clickable blocks an image gallery, but you can also use for photos and a F A Q section that you can open and close. And this also works perfectly on mobile. So that's the page they were going to create in this video. It has some new techniques that you want to learn, So let's just get started. I am here on my about page right now. I cannot even edited with elemental or so again, I'm gonna go to edit page, and then I'm gonna click on edit with Elemental, or I'm gonna click all those things away sometimes where press will give you a lot of those notifications and all the look and say, Hey, you want to Brad it by the pro version, you want to do destination that and I'm like, No, I want to build my website, so just click it away. It doesn't really matter for Trump Luckett bookings adults for, of course, But just read it and then, you know, So we're gonna click on edited elements or and, as always, we want to get rid of the team option. So what we're gonna do is we're gonna go to settings Bakley out an elemental fool with All right, now, we have a blank page. Let's look at our results and what I also did on the portfolio pitch. I look at a similar design. Maybe I've made something that already looks like I'm about to make. I think I'm just gonna use the portfolio page that would just create it because we need to create those columns anyway, So I'm just gonna copy a the heading from our portfolio page. Copy it, go to my about page and based it. So here's our final design. Let's first just start with something easy. D image. So we're gonna go to style, click on your image and then selected the image that we want for me. It's this image and that looks good and I want to start clean here. So first I'm going to clean up the design over here. I'm gonna just delete that and now it leaves one column and let's just look at our page. Um, we have two columns over here, So one column for this and one column for that, And then we have two more columns over here, so we can not just use a 12 tree because this layout is different and this layout. So I suggest that you create one intersection for dis and one intersection for dis, and then here will just be an empty column to make sure that this is a lines correctly. So that's where we're going to do. We're gonna go to my about page and we're gonna insert a intersection and make sure we have treat columns over here. So let's duplicate one more column, and now we have a treat Layout column gonna zoom out a little bit, and now, before we start duplicating off course for first kind of delete depending. So everything is aligned on our logo on all the other elements to go to advanced on the main column and unlinked this, then go to advance on this one and also unlinked that copy the sell off, this one in her column and then pasted onto the autobahns. You're not going to see anything because there are no content in it. But it's applied. So now we can duplicate this intersection, so we now have two rows. But as you can see, this is not actually two columns. It's just one column, so we need to delete one of thes. But now we have duplicated it, so we know where to align the other columns. If we delete this one, it's gonna go to the middle and never gonna track this back. Teoh make it the same as the other one, and it's probably a dirty tree pointed tree because that's wondered off 100 of course. So if we leave it like this, we have created two column layout that we want now into copy elements. So now we need to find something that looks similar like this. I think if I'm gonna go to my home page? Uh, yes. I'm just gonna copy. Distill. So copy. Does layer go back and based it in your first column? There you go. We're going to go back to my home page Also copied debt one. Go to the about page and based it. Let's look at our design. The purple one is above and it's bowler. So dreck it above. Make sure it's inside of the same column. Let's first change the style of the text. So click on topography goes to to wait and make it bolts just like that. Now there's too much basing. So we're gonna go to advanced odors already minus 20. That's weird. Maybe there's also settings on districts. Go to advanced. No. Okay, so we need to add some minus margin to make sure those texts are more close to each other. All right, did this Looks pretty good. I'm gonna delete the bottom marching. Also, we need dis text. Let's go to our home and see if we have something similar already. This looks pretty good. So I'm gonna copy this one. Go back to my about page and click based. Align it to the left within the cell boom and then place some Lauren Egyptian texts in it. That's also a tip. If you don't have a norm Ip Sum's text and you wanna have some Philip text because you don't have text yet for your website, you need to go Teoh a website like this. Loadem emption dot nl to get a sample tax like this. So I'm just gonna copy this, go back to my about page and click on my text, go to content and have feel it with some filler content. All right, that looks good. Now we're gonna go back, and we need to create this section. So is actually pretty simple. Go back. Copy this one. Actually, we need to make it purple eso we need We need to go to the text layer and make it light purple. That's the style that I have on display Age looks pretty nice, so I'm just gonna use that's tell. Copy this and base it over here and pasted over hair. And now we just need to add a title. So go back to the nine points, grabby heading and make sure it's insight off that column. Leave it Go to the style deck scholar. Make it white and we're almost done right now with this. Ah, protection. Let's see if the spacing is correct. No, it's not. It's maybe even a little bit bigger. So if you want to do that in a simple way, just go to H. Du or H tree or H one and make it a little bit bigger. That's decreased in minus margin over here. So go to advance funding this and at a minus two, the bottom something like minus 10. And that should work Fine. Now there's no marching between those two intersections, so I'm gonna click on. Doesn't really matter on this one, for example, and at a marching top at the top. So unlinked this and add something like 2040 years okay, for now to the top and copied this text because we also need it over here based out enough basis, del. I'm sorry. Based detects and then drag it on top. Okay, the last thing we need to do is add some spacing, do this whole section. So I'm gonna grab the main section, go to events, and we're gonna increase the batting at the bottom, maybe 160 also at the top, maybe 60. All right, let's save it and see what we have created. Brief you to changes. And as you can see, this looks pretty good. We only need to change the text and even at more spacing over here, because this right now, as a little less basing. But you get the point over here, you need to prepare your columns before you're gonna feel in the content. All right, so now we have prepared our upper section off the about page and the rest of the page. Now is gonna be very easy, because we have prepared de columns in a very simple way. So now we can easily at the other content over here. So I think we can finish the this page in one more video. Um, and then we can already continue to the contact page, and that's also pretty easy Page. And then we're almost done. We just need to add a little bit more details to the website, and then we're done. So it's pretty nice. All right. I will see you in the next video. 25. Finishing the About page: Welcome back. We are finishing the about page. What we have already created is this. Now we're gonna continue and create all the parts that you see over here. It looks really complicated, but it's pretty easy because elemental has this built in features. So what? I'm gonna dio I'm gonna go to my about page, actually the edit with elements or version. I'm going to zoom out again. And as you can see in the final design, the background Over here it looks white, but it's not quite It's that broken white, a little bit purple, grayish collar. So that's where we're gonna add Let's just first at our main section. So we're gonna grab our main section over here. We're going to give it a minimum height. This will be a very long section because we're gonna use this intersections feature to create all the sections that you see over here. Well, actually, it's just only tree were actually four sections because the image also is one section. So that's what we're going to do. Go back and fill the background off the new main section with that great collar, go to classic go to caller and then grab. That's great collar. It's F seven F seven F eight. All right, that looks good. Now these two look connected. So the first thing that I want to do is at the image over here, and the image over here has the same layout as this. But this part is just has no content. And here is the image. That's it. So we're gonna dio is gonna grab the upper intersection. So click on it, click on copy, go down. And based on that first intersection over here now the lead, all the content that's insight just right. Click and elites And we're gonna grab our image. So go to the image and grab the image Boom. Click on your image. Any image that I used over here is the photo about binge APEC click on it. And where then we're almost done home, and it's the same trick that I used on other pages. I'm just gonna grab the intersection and give it a minus margin so it will go outside off his main section. So we're gonna go to advanced unlinked this and we're gonna give it a minus margin. So, for example, minus 100 that's even to little's or minus 140. Something like this looks pretty good. Minus 150. Looks pretty good. And you know what? I'm going to give this whole image animation, because that always looks good. So I'm going to click on the column, go to advanced motion effects, and I'm gonna grab the fate in up. All right, that looks pretty nice. So let's just see what if we have created so far Glicken update Go to your pre few and boom there it iss looks pretty cool. All right. Next section Derris Also fairy little spacer at the bottom. So desperate first thing that I want to fix Gonna go to the main section Guilty, advanced. And we want more more space on the inside. So unlinked this and give it something like 80. So we have some Some room over here. Okay? Now, for the next part, what we're gonna do is we're gonna create his work flow section. So it's the same layout as this intersection, but has it idle, and then a text and then another block that we're gonna create. So go back. Grab the top intersection that we have already created copy is go down, and now it's very hard to paste over here. So what I suggest is that you click on the intersection that's above it and then click on based, because then it will be always based it under that intersection. And as we can see right now, we need First of all, we need spacing because that this doesn't look good. So I'm just gonna add some spacing on the top and the bottom off every intersection. So whenever we duplicate, it already already looks good. So we're gonna go to advance, and we're gonna give it a top and bottom spacing off, like 20 maybe 20. That's good. No, that's too little. Maybe 44th. This one. Yes. That looks better already. Okay, so 1st 4 we're gonna change the colors. Click on the text, go to style, go to the text color and give it a dark purple collar. I think this looks pretty nice. All right. And also for the title, click on the start off the title go to collar and then picked the white or Yeah, I think No, I mean white. It's almost black. This is dark purple. That looks good for distort tutorial. I'm not going to change the Texas very easy. As you know, you can just click on it, go to content, and you just change the text over here. I'm just going to show you how you can create the adapts over here, and it's it's very it's very easy is pretty cool that that's built in into the free version . You're gonna click on here, you're going to scroll down. And here is a feature called Taps. If you tracked that in, it already has the styling that we have prepared. And this is almost it. What you can do to to fill the steps with Mountain, you're gonna click on the content and then you're gonna go to tap and, for example, you're gonna type a title over here That's the title of your you're going to see here, and this is just a text on the inside. So if we just duplicated the text, for example, now we have already the different content over here looks really good. If you want more than two taps, what you're gonna do is you're gonna close this And here is a duplicate Aiken. So click on that. And then we have tap number freeze over example. We're going to give this a text design and also make that text a little different. And then we have treat depths over here. Let's look at our results by saving it and go back to our preview page. Right, Scroll down. And as you can see, we're gonna zoom in. Looks absolutely good and amazing. I haven't checked mobile, so that's what I'm gonna do before before I start duplicating this section. So we're gonna click on Responsive Mode. We're going to click on Mobile. I think it's already pretty nice. Yes, this feature looks pretty good. These images overlapping. That's not what we want. So we're gonna go to advanced unlinked this, and also this whole section needs to be bigger. So that's where I'm gonna fix. First, I'm gonna click on the main section, go to advanced and then at a petting to the top, something like 60 because we need room or even e 80 for the menu and on the bottom. We also need something like that. I think 80 should be fine. It's not really fine. We need even more. 140 How about that? That's a lot better. Also, I want more spacing between that. So what I'm gonna do is I'm gonna click on the column to advanced and at a top margin on that column only for mobile. So something like charity and that looks good. What you're gonna also do, by the way, that's also what I want to show is that you can change the wave on Mobil's who maybe you think this wave is too much a mobile. You can also change that. So you're gonna click on the main column, scroll down so you can see it. Click on style, Scroll down, Go to shape divider because that's where you set up the wave. This is the bottom shape divider. So click on the bottom and there it is. And now you can set your own settings for, um, the mobile version. So maybe make it a little bit less intense, and then you can also, if you want, overlap this image with this part, but then you're not going to see the wave. But if you want that, of course you're gonna add a minus margin something like this minus 120 then it will be overlapping. So now the mobile design looks pretty good. There is no margin in this part. So if we're going to duplicate this, you're going to see that. Oh, there is margin. Okay, that's perfect. I thought there was no margin, but now there there is. So that's pretty good. We're gonna check it on tablets before we're gonna move on and on. Tablet. It just looked the same as on on desktop. About The image is also overlapping detects over here. So that's what we're also gonna fix. Unlinked this. And as we can see, we need way more space in this part. So click on the main section, Guilt to advance, and we're going to give it a maybe 100 at the bottom. Is that enough? No, it's not even enough. We need more than that. 140 or even 150. You know what? 160. That should be enough. And then again, click on the intersection off the image and give it a minus margin, so it will be overlapping the content. And as you can see, I'm just playing around to make it to make it fit and also on the whole main intersection. We want our betting to be on the left and underwrite, so we always have some white space on the left on the right. So does where we're also going to set up before we're going to move on. So I'm going to click on this at Swinney. That's 20 over here Now. This is more than 20 because there's also betting in and that column again click on the click on the column and the leads that betting so it will be aligned a 20 pixels from the sites. All right, now we're going to create the last two sections, so we're gonna go back to desktop, zoom out a little bit. They were going to duplicate this whole intersection. Just duplicated dairy. Go already looks good. Go back to our main design and it's actually the same. Just another text and we replaced. This barks with Image Gallery. An image gallery is also a pretty nice feature with in L. A mentor. In the free version, you don't got a lot of options, but it's pretty good for a simple gallery. So I'm gonna delete the depth feature over here, go to the nine points scroll down And there it is. It's called basic gallery. So if you drag that in within that column and leave it now, you can select images that you want, So I've not inserted my logos yet. So if you go to softer I use I've inserted some logos that you can use within this test websites, and you're gonna see those check boxes over here. If you click it, it's not gonna selected for the gallery. So you can select multiple images in here for your gallery. If you If you click on creating a gallery, you're going to see all the images that will be important into the gallery as sort of a double check. You're gonna insert it and there you go. Now you're going to see that those images are cut off our crop. That's not what you want. So if you click on image size and you're going to give it a 300 by 300 then for some reason which I don't really understand, it will be all right. E didn't understand everything, guys. I'm more like a designer and then a developer, um, also in the final design. I've used a three column layout so you can set that up over here Columns. If you click on three, you're going to see that it's now a Doubletree column. Lee out. So that's it's 40 gallery option. You don't have a lot of options over here. You can set up a light box if you want. So if you have a lot of if you have a photo gallery, you can highlight a photo over here. Thes are BMG so to have transparency. But if you add photos over here, you're going to see this night Nice lightbox popping up. Ah, lot of clients will ask you to create a light box. So this is what you can do with the basic gallery feature. All right? And now, for the last part, we're going to create a f A Q. So again, I I think you already know what I'm gonna dio. I'm gonna copy dis in a section with a duplicate feature, and now I'm gonna delete it the image gallery, and I'm gonna insert a new feature. And that's called toggle or Accord Young. Uh, I don't really understand why they have those two features because they look so similar. I will show you if you start. Go. It looks like this. And if you use our court young, it looks like this. The only difference that I can see it is that they are Corcione. You can only open one tap and the other one will close automatically. And with the Targo you can just open multiple items. So I recommend for an F A Q like this that you used the toggle. So I'm gonna delete the accordion. For now, it's the same as for the tap feature. If you want to have more questions, you're just gonna duplicate it. And then you can open it and change the title title over here. And you can change the description over here. Also, the designer they use over here, it only has a line at the bottom. This looks very clean, so I will show you how to do that. If you're gonna go to stele, you can set up some setting here first of all, the border with that's the whiff of the border. I only used I think one pixel. The space between is the space between the different items. So it will only at batting on the top off every item as you can see. So if you also want to add betting on the on the bottom off all the items let's put this on 15. For now, you need to go to the title and then at a padding to the bottom. So if you click on this and you're gonna click on the bottom, you're gonna add betting to the bottom as you can see something like 20. And if you go back and I'm gonna increase the space between, go back to the title. Increase this. You can create a design that looks like the design that I have also the Aikin I've aligned that one to the right, so detects here, is aligned at the text, looks pretty nice. And also for the content you can set up depending over here. So if you wanted to be aligned at at ah, the column, you could just set this to zero and then at a bottom padding to give it some space towards a line. Something like this so lets you see what we have created. And right now I'm gonna click on update we're gonna go back to my about page. I'm going to zoom in two D normal level. I'm going to scroll down. And as you can see, taps over here are working. Um, the light boxes working. But I'm not really gonna enable that for this website. I mean, for this part, because not really relevant. And also, our toggle menu is working pretty nicely. I only want to add a little bit more spacing over here, and the last thing we're gonna do off course is copy our food. Er, so we're gonna copy is from the home page. Go back to the about page and then base it over here. And now if you save this page, you're done. As you can see, I'm using the same techniques over and over. And this page was created really fast. Just adding batting, duplicating things, working with columns. And that's how you design a website. Really fast. So now the last thing that we need to do is create the contact page as we're going to see right here. It's also a pretty easy page. It has a Google map which is always feature that your clients are gonna ask for almost always and also some social media icons that you can see over here. So that's it. I hope to see you in the next video. 26. The easy contact page: Hey, and welcome back in this video, we're gonna create the contact page right now. There's nothing on the contact page. And if we're going to look at our final design, I real refresh the page because then you will see the animations. So this is a animation from the left, and the map will come from the bottom. And then there is the text over here. Um, off course. We're gonna use the layout as we have already created on the about page so we can create this page really fast. I think this is gonna be the most easy page for you to create because we have prepared everything. And that's the beauty of elemental. Or if you have created a few pages and set up older betting and all of that is gonna be very easy, Teoh, build the other pages. So I'm gonna keep this open, and I'm going to go to the contact page and make sure we can Editors with l a mentor. So click on edit page and then click on an is with Allah Men's or So. Now, if you're gonna click on settings and you're gonna click on the full with we can work with the full page, and then we need a heading. That looks like this. Well, I think we already have a page that looks the same, which is off Kirsty portfolio page. So I'm going to start by copying a debt header, and I'm gonna base it over here first. I'm going to change the image, go to Stell, click on the image, and we're gonna change the photo. Okay? This is a photo off me looking into the future. So I have a text looking for a new website. I can help you. And that's also what you could do now, Vita. Way off course. Uh, advocacy. There is more petting on the sites over here, So off course, we're gonna add that first. So we're going to click on the column, and there is already a petting over here. We just need to increase it to maybe 180 for example, Or maybe even 200 Swen t. Yes, that looks a lot better. And now our heading is done. So we're gonna update it, and we're gonna open you pre few. And that looks good. Oh, we forgot the animations from going to click on the column, go to advance motion effects, and I want that one to come in from the left, fade in from the left Glicken update, and then the animation is at it. Okay, so now what do we need? We need a map. The map, this part off at this big section with one column. Then there's this intersection with two columns. And then there's this in a section with three columns where this one is empty. So off course, we're gonna go back to the about page because that's where our column layout is. I'm gonna zoom out a little bit, and I think I'm gonna use the image over here. I'm going to replace that with the map because it already has this animation, and it already has this minus margin, so it will be aligned to the top. But I'm not gonna copy this one because we need a main section first. So don't forget that. Always prepare your main section. First click on the main section, click and carpets and I were gonna copy all of this onto this new page. So go to the contact page, not to pre few. I'm sorry to the elemental one. Click on based over here. And then we have all the same content as the other page. So we're gonna delete those over here. Leave this one. Delete this one. And now we have to replace this one with the map. Thean Imation is on the column. As you can see over here in a Fonz. Yes. So we need to delete this column so it will be full with. And then we need to replace the image with the map. You cannot replace things like I'm saying, but you can just track in a map. So if you scroll down Harry Days Google Maps, make sure it's inside that same column which has that animation. And there it is. It's a Google map. Click on your image, right click and elites. So there's a Google map. If you're gonna click on the Google map, you can give it a height, so it will be bigger. So make it something like this. I put it on 480 now, and then you can put your location in. So for me, that's the city off Rotterdam, and you can put an address in here now able display city. But you can also just put in a street. So, for example, cool, single aim and this is what it will look like. It will give this pop up with the witty address. So if you have an office or you wanna put in your house or a business address, you can put that right here. Also, you can set up the zoom because some people want it to be zoomed in on our own, their streets. It depends on the kind of business, but you can set up to zoom right here. You cannot do a lot in here. You cannot change the style of to Google maps because this is a very basic Google map. But it just a job, right? So if you go to still, as you can see, you can not really do anything in here. So that's what you could do with the free version of Elementary. So now we need to create the other parts. I think this is already what we want over here. Yes, the only difference is detects. That's on this page. And now we need to create this page. Eso What we're gonna do is We're gonna look at our about page and see if we have something that looks similar. Um, I think it's gonna be disbarred. Only the collars are different. So look at this part. Yes, that's where we're gonna use. So I'm gonna grab debt. Intersection. Make sure you copied the intersection. Go back to your contact page, click on this intersection, and then baste it so it will be based it under the other intersection. Then we can change the colors over here. Or we can make it easy for ourselves And copy the layer over here based that one Over here . Delete this one. I'm gonna change one title and then duplicated, so I'm gonna change the color off this text to a dark purple. And then I'm going to duplicate this column and delete the last column. And then we have the same layout as you can see on this page. Oh, the only difference is the spacing between the title. So that's what I forgot to Dio. So we're gonna go to advanced off the title and delete the bottom spacing and now the duplicated again and delete the last one so we don't have to add it the other one. All right. So what kind of content that we have over here? This is just a phone number and an email, so that's pretty easy. I'm gonna click on this and change it, Teoh a phone number and that and then we have t social Aikens. Just go over here and type in social. You're going to get the Social Aiken's. And as I explained, what you can do is you can align it to the lefts. I'll show it again. You can make it square or round it. But what I always like to do is go to stele, and they're not used the official caller. But you see custom collar so you can make it more fit within your website. The secondary caller. It's the color off the actual Aiken. So if you make that the color of websites over example the purple now it looks very disgusting. So what you need to do is go to your primary color, select any color Doesn't matter. I I always big gray or something like that and then put capacity on zero. Now the Aikens are round what you need to do if you want to change the icons X click on the I can go over here and search for another Facebook. I can I think they have another facebook. Aiken, don't. Yes. If you click over here, you're going to see that there's another Facebook I can over here that looks a lot better. We don't want Google. Plus because nobody uses Google. Plus, so you can add something else like we're breasts. Or maybe your instagram your linked in. And then, of course, we wanted Align the Aikens Teoh the left side off that column so we can do that. We didn't. Estelle. If we go to betting, we're gonna dig set it to zero because it automatically has a betting you don't see it, but it's there. So you need to put that betting on zero. So make sure you see it zero over here and then increase the spacing between the Aiken's and the last thing you can do then is I can hover and add a nice animation. I always on Aikens use grow because that looks pretty cool. So the Aikens start growing. If you hover over him. You can also change the color if you want that for your Aiken's. And then of the last thing that I did is I changed the text over here. This is just a very simple text edit. So went to text, and I base it it over here. And then what I did is I copied the food or again went to my page and pasted it, and I saved. And now we're done. Almost. We need to add some more details, but the main part off the website is done. Look at this, guys, is what we have created in a few minutes, we're going to refresh this. It animates has a very cool animation. It has a map, and it has this contact section over here. I need some more spacing over here, but you get the point. And this is how you create a page like this. All right, so now we're finished with this chapter in the last chapter, I'm gonna show you how to set up a Aiken off your website because now it has. Justice is boring worlds. I can You can set up your own Aiken. As you can see over here, almost all websites have. That s so that's what I'm going to show. I'm going to show how you can design the inside of your WordPress. So if your client locked into your website or for yourself, you will have a nice experience and some more details to get the website life and ready. So I hope to see you in the next video. 27. Adding your Site/Fav Icon: Hey, everybody, welcome back to this last chapter in this chapter. We're gonna finish the website, and we're gonna put it life. But first we need to add a little bit more details like dif f I can and that you're going to see over here. This is called a Pfaff. Aiken is f a V that you can set up for for every website. For example, does Laura Ipsen website has this little Aiken, but our website doesn't have an Aiken. So it was actually pretty easy. We're gonna go to customize. We're gonna wait till it's loaded, and all we're gonna do is we're gonna go to site identity, and we're going to scroll down. And there it is a sight. Aiken, I think this is a is a better term for it. S o ever gonna click on select Aiken. I have prepared that fell into the folder logo so you can just try debt and uploaded to your repress. If you click on select, you're gonna click on skip cropping. You will see a pre few over there. And as you can see now, we are going to publish this and all of our pages. If we refresh it will have this, Aiken. So I'm gonna click away on this one, and as we can see right now, it has this I can if you refresh elemental or you're not always going to see it. But if you preview the page or you send the page to somebody else, you're going to see it. It's a very simple one. So what I suggest you do is do not use a huge logo, make a very small version off your logo or just a little Aiken, something that you can recognize if it's really small. So I'm not. I don't have a big logo, but I'm not even using this. And I made it a very small version off it like you're seeing over here. Also, don't use a very light collars in your FF I can. Otherwise you're not going to see it all browsers because different browsers look the same . But most browsers just have a a white or grayish background. So that's it. That's a lost made, probably the most easy video in this whole Siris. In the next video, I'm going to show you how you can install backups. Very important, because if if something goes wrong on your website and you don't have a backup while you need to start over and that's not what you want, so I will see you in the next video. 28. Installing automatic backups: all right. As I said in this video, we're gonna insult backups on our website. Um, there are different ways and plug ins to do your backups. The one that I always use is gold updraft blows. It has very good rating. So if you want to install that, you're gonna go to your dashboard, you're gonna click, um, plug ins and click on ads New. If you search for updrafts, you're going to see it over here. Updraft plus were plus WordPress. Becca plug in at two million active installs deaths a lot. That's a lot that's almost as popular as elementary itself. So it's a very famous Blufgan. If you're gonna click on install, you can activate it, and then it will give you this menu. You can just press here to start. It will go to settings, and you will see all the setting off your back up looking over here. Just click this away or end tour. We don't need to that. Okay, so you need to set this up. Some people think that if you install a backup looking, then it's done and your backups will be made. But that's not how it works. I even had it One time when I worked with the clients, they installed a backup licking and they fought. There were back up, but there were no Becker's. Because you need to set the blanket up. OK, so to make backup, just breast, you pick up. But and now, Um But of course, you need to say where you want to save two fell, and that's what you're gonna do in settings. Also, what's pretty nice is that you can put this on a regular frequency. So, for example, you can tell the system that it needs to create a backup every month, so that's pretty amazing. So I always on almost all website I do at least monthly and also for the database. So you need your fells and your nature database, and then you can say over here how much over the website versions you want to safe. So, for example, if you're going to save your backups in the trawl bucks, you don't want to save all the backups, because if your website worked last month, you don't need a backup off one year ago. But I usually save a six backups, so I'm gonna put this number on six and six. So then, six months off, my website will be back up. But you can also do it at 12 so your whole year will be back up. But it also depends on the size that you have in your Dropbox or your Google drive. Whatever it is, I always use Dropbox. The ways to connect those different features are different because the features are different. But I will show you how to do Dropbox. If you have drawbacks. I have a DROPBOX account. I pay $10 a month for Dropbox s. So I have one terabyte, and that's enough. But you can also set up a free Dropbox account for two gigabytes. I think that's free. But you can also click over here to email, and then they will send to back up to your email or to your FTP, which is the surface. If you understand what FDP's, you can set it up right here. But I always use Dropbox, but you can also use the Google drive. Google Drive, I think gives 15 gigabytes of free storage. But I'm gonna show you how to do withdraw. Boxer, you're gonna click on Dropbox make sure these one are a monthly. I'm gonna save six backups of six months and scroll down and just click on save changes. Um, then you're almost done. This is my password saver, by the way. So you don't get this window now you need to click on authority eyes access because she needs to give this block in authority to say things inside of your dropbox. So if you are already locked in into your your Dropbox, you're going to get this message and you're just gonna click on complete set up, and then it's done. But maybe if you don't have a drop box, you're not going to see that, Of course, So you can use one off the other methods to do your backups, and now it's done, and you can start a backup right now. So I'm gonna do that because I want a back up with this version off the website. So if I'm gonna click on back up, it's gonna load my backup. And this can take a well, depending on how big your website is, of course. But now it's saving all the fells into my dropbox, so I always have a version off my website when my website goes down. Oh, and also, if you don't have a love space of for example, you're gonna use Dropbox, right? And you only have two gigabytes in your Dropbox. What you can also do is just put this number at two. Because then if there are two backups and a new backup, it's edits the last back up while actually d all this backup will be deleted automatically from that Dropbox folder. So that's a method. If you don't really have an account and you don't want to pay for storage, I suggest just make a dropbox account. You're gonna have to gigabytes, I think, and just put this on one or two. So you always have one month or two months off back up. So I'm gonna wait, deal these done, and then it's gonna say it's done, and then it's all right. And that was it for dish video. In the next video, I will show you how to design your purpose. Beckoned. Um, like the logo that I have over here. That's pretty nice. And also my luck in experience as you're going to see right here I have my own logo. When I look in, that's pretty cool. So that's what I'm gonna show. And after that, we're gonna put the website life, So I will see you in the next video. 29. Making the Wordpress login experience nicer: Welcome back, everybody. In this video, I'm going to show you how to design your dashboard and you're looking experience. This can be nice for yourself or for your client. If you are delivering a website, it's a very simple Blufgan. And then you can have your local over here. And if you look in, so that's what I'm going to show you. If you go to plug ins and that at new, you're gonna go to White Space Label Space CMS, you need to at those spaces because otherwise you can cannot find it. At least I couldn't. So if you're gonna click on install and then activated, you're gonna use this booking. And this Blufgan doesn't really improve your website. But it's just a nice experience. And also, if you're working on a lot of websites for clients, is also nice that they're the logo off the company's is up here. And if you make another user for your client, they're also going to see the local. So it looks it looks more like you have really customize a WordPress dashboard for dare company. It looks really professional, and your clients are gonna love this. So what? You're gonna do is once it's installed, you're gonna go to settings. And here it is. It's under settings. So click on White Label CMS. It's going to ask a few questions about developers. Uh, we don't need that. She's gonna click on Skip. And now the first thing that I want to show you is the luck in feature because right now, if we look out, I'm gonna look out for a second. You're gonna see this boring were pressed logo. That's not what we want. So we're going to go back to settings White label CMS, click on Skip again and then go to locking. So the first thing that I want to do it's at a logging logo. So I'm gonna click on upload, and I'm gonna big a dark color. Of course. Where is my logo? Why do my Locos disappear? So I'm gonna upload my logo again because it has disappeared for some reason. And then I'm gonna click on, um, upload, and then I'm going to click on safe, and we're going to see if it works. So we're gonna look out and yes, it worked. And you can upload any logo. Of course. Here make sure you're going to use a PNG. So don't import a logo with a white background, because otherwise you're going to see a wide background. It's not a big deal, but this looks off course, nicer. So also, we're gonna at the logo up here, so go back to deploy gin in the settings and then and then under branding, you're gonna scroll down, not at me. And bar this is the admin bar, and this is the site menu. All right, So if you want to use a low, if you want to get a local up here, you need to go to site menu and you need to at a logo over here. But if you're just gonna add a logo like this or the white version, yes, you're gonna click safe. You're going to see that is gonna fill the hole with. So what I suggest you do is not use a logo that's just cropped on both sides, but you're gonna use a logo. I've already prepared that for you with a bit of spacing on the site, and then it will look a little bit more professional. But you can also just upload a local like this, but I always like to you at a little bit more white space here in that being G. I did that in photo shop. But you can do that in a lot of other tools like Baines or illustrator doesn't really matter. So now if we're going to click on safe, you're going to see that it looks really cool. You can also set up a background image That's also pretty cool about this, Blufgan. So I will also show you that if you go to background image, I'm not gonna do that for this website. But I will just show you if you're gonna click on this image, for example, you're gonna click on insert post, click on safe, then go back. Teoh your Le Guin screen. If you look out, you're gonna see that you're gonna have a background and sometimes is gonna look cool. But I don't really want to use that Some guns elite that for now. But there is one thing that I want to show you, and that's the collar off the log in button. You can change that over here, so we have this color off my logo. So if we're gonna pick that collar with our nice plug in. We're gonna grab the collar coat, and then if you scroll down, you can even set up the collar off your luck in button. And now it's just this blue collar. If you want to match the Brende, don't go to the background. Scholar form label color, no form, button color. Now we can paste in the color over here and also change the hover color. Just use the same settings. And then if we click on safe and we're gonna look out, you're going to see that we also have a purple bottom. But there is a blue shadow still, So that's what I need to delete. Otherwise, this doesn't look really good. I think I need to change the form. But in text collar, um, too white, for example, and also the hover to white. And if I now save it and I kind of look out, you're going to see that this caller matches our brand. Do you need it? No. Is it nice? Yes. So that's what I just wanted to show you. And I have not found a way by the way to change all the colors with Denver press. With this blood in, you are limited. But but it's nice. Okay, so now we have made the dashboard a little bit nicer. And in the next video, we're gonna put the website life. That's also pretty easy to do. And then as a bonus, I will show you what you can do with elemental pro. And if you're really serious about building websites for other people and you want to make money with that, are really suggest that you watch that bonus video because elemental pro is very, very, very powerful. All right, I will see you in the next video. 30. Putting the website live: Hey, everybody, welcome back. We're finally gonna put the website life. Let's just take a look what we have created because you can be proud if you have made it. So far into the course, we have created a very nice home page with a video background, a lot of cool animation. We have hover effects. We have created animated numbers and we have created a board faux dio section. I mean, it's pretty cool what we have created just in a few hours. All right, so I just wanted to take a look at what we have created so far. It's it's pretty nice. All right, So now we're gonna put this website life because now, if you're gonna search for the website in, uh, incognito, for example, it's still going to look like this because we have set this private site, Blufgan. So we're gonna disable that, and then we need to also set up the home page. So just go to your dashboard. We're gonna go to plug ins and then go to install plug installed plug ins, and then we're just gonna deactivate the might private sites. And now we need to check one more thing because sometimes another page is set up as your home page. So you need to go to settings and then read because these artists settings for how people can read your your block right, because wherever it is reading black blessed form and here you need to make sure that your home page is set to the home page that we have created because sometimes it's set up to a sample page, and then your homepage is not showing the home picture. You need to tell vour press like, Hey, this is the home page, all right, And then the last thing that you can do is save your changes over here and check if all of your pages are public. So go back and click on pages and then juice. Make sure that none of your pages are on private or that's a password. You can check that if you click on click quick edit and you can see that this base pages published. But even if it's at draft, for example, you're going to see it in this title. So I just wanted to show you like you can put it on draft, and then people cannot face it decide? So if you're testing with a page and you want to add another page but you don't want other people to see it, you're gonna put it on drafts, and then you just know that nobody can access that website. That's an important thing that I also want to show you. Or you can even set the whole base to private so nobody can access it. But on Lee, you all right? So we're gonna click an update. So we're now we're going to see an incognito if our website is working. And yes, now our website is life. Congratulations. This is always a nice moment that your whole website is life check. If all the other pages are working our portfolio pitches working, our about bitches working and our contact page is working, this is pretty cool. So now you have finished the main part off the course. But I want to give a small glimpse into the bonus episode because, for example, on a context page, your clients will often ask if you can set up a context form. A contact form is something you cannot deal with in the free version of L. A mentor and also Desportivo Dio Page. For example, your clients wants a website where they can. They can add to their portfolio items. Now it's only possible to add a new portfolio item if they go into the elemental editor. And you don't really want your clients to go into the editor because they can mess things up. So that's why you want dynamic features so they can at portfolio items or projects or block posts within the back end, for example, and also what I says with Heather and the food er, their not a lot of options on this is just a duplicate on every page. So I suggest that you watch the next bonus episode, where I'm going to show you all the features for element of proceed. If you really want to make money with a website selling selling websites to other companies or people, it's really worth watching that that episode because you really want to use element of pro . Trust me if you were gonna build websites for other people, so I hope to see you in the next video. If you're not gonna watch the next video and it just gonna build this website for yourself . Then I want to thank you for watching this whole course. If you can leave a re few police, let me know what you think about the course. And if you have other on me, other suggestions or you want me to make another course about another subject, please let me know. You can contact me personally at my instagram at Reno the boor. So I'll put that link down below. And I will also put dealing for elements or pro down bloke. So you can check that out for yourself if you don't have time anymore to watch the bonus episode. But I hope to see you in the next video. And if not, thank you so much. Yes, that was it for this chapter. And, uh, yeah, that's it. This is the end. I hope you liked it. And, um, yeah, yeah. I don't know what to say. OK, fight 31. BONUS: Why you want Elementor Pro: Hey, guys, welcome back to the bonus episode. If you've come this far into the course, you are seriously interested in L. A mentor. So I want to show you what the pro version has to offer. And this is what the living with pixels Brent is all about. It's about allowing you to create built and designed websites for other companies. So I'm going to show you why. I think it's an absolute must if you're gonna build websites for other people. So let's just get started. I'm gonna lock into this website, and I'm also locked into my other domain on this domain, which is an exact copy off the Web site. But it's a little different because this is the pro version. So on my personal web site 13 of the board outcome, the pro version off elemental isn't soul. And on the version that we used, the free version of Elemental is installed. The first thing that I want to show you what I think is an absolute must is the ability to add a context for Okay, so I'm here on the contact page in the elements or editor and right now this is the free version. There is no way to at a form. But on the pro version there is because if I type in form, you're going to get this option over here. And, for example, you can add a form in, uh, under here like this. And this is a nab salute must if we're building websites for other people because almost all clients want a contact form on the contact page. So this could also be the reason why you want elemental pro. Oh, by the way, the link to Element of Pro did page that we're going to look at it in this episode. But the link is below eso what you can do in this contact form, which it is, you can add questions you can really design the form how you want it. So, for example, you can add a question and you can, for example, at a fell upload feature so people can choose a fell and upload debt and send it to the actual email that you're going to set up also in this witches. So this region is one of the things that you definitely want. If you're well building websites. Another feature that you definitely want is the slider thes slider there to slider options in elements of pro. There's a normal slide that you're gonna use for your big header. Sh. And there's the image carousel. The image cover cell can be great to display logos, so in the free version, we only had the image gallery like we used on the about page, which looks like this. And there's not a lot of things that you can do here. But on the pro version, you can add a image carousel, so, for example, you can drag it in. And if you don't select a few logos, for example, something like this, you can have a minute's lighter four logos. And this is also feature that you're gonna use pretty often if you're building website. You can also do this for photos so you can create different kind of galleries, as you can see right here. So if a client wants to add a lot of photos to a page, this is a feature that you want, and the other feature is the slight, As I said. So maybe they want to add a slider to the websites, and it's just one of those features that, in my opinion, is an absolute must. But now, now it's going to get interesting, because if you're working with clients, you don't want to give them access to your editor, Theo Elementary editor, because if they can change the website, they can mess it up and then it's gonna be a problem, because are you gonna charge them again? So Elemental Pro has a great feature for this, and it's gold to the role manager. So I'm here on the pro website. If you don't go to elementary and roll manager, you can tell the system here that all the editors on this website can only edits the continent. If you access this and you're gonna add a user for your client and you're gonna make them an editor, they cannot change your design and drag things at in new elements or your design. I will stay the same and they can only add it detects and the images. So it is also, in my opinion, a very important feature. If you wanna work with clients also a great feature that I wanted to show you this custom funds. Of course, I showed you that Google phones in most cases is the perfect solution for most off the websites that you want. You have a lot of options here which are free and are already imported into elements. Or but it also happens that you're working with a client and they say, like, Hey, we have our own fault. Can you use that? If you're using a free version of elements of pro, that's not possible. But any pro version of elements. Or you can just download a phone from whatever website, and you can add a custom fund here, which you can then use on your pages. I've had this a few times, so also very, very handy feature. Okay, and now the main big reason why you want Elemental Pro it's because of their main team builder were press is a blocking platform. That's how it started. So what we just did with L. A mentor re edited the insight of a page right but weaken. We could not add it. The header and the food er we needed to go into the team settings to edit the heading, for example, but an element of pro You can design your own Hatter and food, er, the block, the web shop, everything about it. And this is a very fair, very important. If you have a client that has a block that has blocked Post, for example, or has a Web shop with a block, for example, a website can have, like, 20 or maybe 100 even Mawr block boasts. So your block boats will be right here. And for all the block boast that you're gonna add over here. You want, of course, the same design. You want the same layout for all of your block posts. So what elements are pro allows you is to create a single boast layout. This means that you can say this design needs to go for every block. Boast that the client is gonna add on the beckoned over here or you are gonna add it. And this is essential, of course, because if you have 100 block boats, for example, and you've just created all those block posts here with the pages option and the clients as like hey, I want Teoh half the title on top of the image, for example, you need to change 100 pages. So that's not what you want? You want three dynamic capabilities to say, like for all of the block boats or for all of my projects. I want this design. I will show you an example. I'm here on my pro Ah, domain name and I have created a my own tap over here. That's gold portfolio again. That's not on the free version. As you can see, we only have posts and pages. So now, on this website, I have portfolio over here. I created this step. And if I click on this portfolio, I have a few off my client projects already inside of here. And what I can do now is I can just click on ads new. I can give it a title off the project. I can add images and just at a little bit of text, as you can see right here and then if I click on publish, the design that I created for all of these pages will be the same. So, for example, I'm gonna click on this project, and as you can see right here, this is the page that I made. But I didn't make this page with the pages option I made this page with a custom post type . And then I said, For every project that is here, I want to the same layout. So also, for a project like this, for example, it has exactly the same layout, but only the images and the Texas is different. And if you have a block website, right, you have a claim that has a block. You also want to display all of those block posts on Una page and and when the client is gonna add a new block post, you want that new block post to be on top off the list. And this is what you can also do. An elemental pro. You can just insert this feature and then display the latest block post automatically. And, as I said before the header and a footer is also what you can now design in element of pro , so you don't have to touch the team settings anymore. You can just create your header inside of elemental pro. It's the same for your food, or you're just gonna insert a design. It's gonna be very easy. And if you're not really good a design, you can even pick one of their pre made header or food or templates, you could just insert them and edit them, so you already know that it looks good if you're not really into design. Speaking off design, you also get a lot off templates, a page template e pro templates that you can use for every page. This is true for the blocks that we have covered in previous episodes, so you will get a ton more block. So, for example, you are creating a about Paige. You just go into the pro blocks. There are 10 different designs for an about page you insert while you change it a little bit and you move on to the next page is a very fast workflow, so also a very valuable feature. If you want to build websites and you want to have a nice workflow now for the Web shops for Web shop, you can ask a lot of money because it's a little bit more complicated because of the payment system that is connected. But we're press has a free plug in that's called rumors, so you can create a Web shop pretty easily. Ah, but with elements or pro, you can design the product page and the archives page read in L. A Men's or So you can say OK, the title need to be here to buy. Better needs to be here. The image needs to be here, so you have full control over how your product page and you're our guys. Page so debates where all of your products are looks, and this is also very, very nice. And I think the features that we just talked about already most important, but what's also really nice is that you have MAWR features here. If you click on the nine dots, these already basic features that we already saw. But now they've added this pro section. We've already talked about a few off those, but also things like the animated headline. It's just a nice feature toe have that. It looks very, very professional. Things like the flip bark so you can add an image, and when people hover with their mouth over the image, it flips. Looks really cool. You can do a testimonial cargo cell. For now, we've just put tree testimonials in tree columns, but you can add a cover cell with this Richard. So if you insert that you can have more testimonials like here, and it automatically animates look really cool. You have a few design options, so this is also nice if you if you want to have a testimonial slider, uprising table. Also, for some websites that this is a must Facebook button Facebook Commons. This is also pretty cool to face the Facebook page. This is also a feature that a lot of clients want, so you can just drag in the Facebook Richard like this. And as you can see now, this is a fully functional Facebook, which it if you just put your own a user name over here and then it's inserted pretty cool . And then the last feature off the pro version That's absolutely an amazing feature is D template option. This is also a must. If you're working on a big website, I will show you one of the websites that I made for a client recently on. This is a block website. It's a very big, big block website. It's for a magazine. So, as you can see, if you click on a block post, for example, they have the same layout you can see because this is a very big block website. But that's not what I wanted to show you. What I wanted to show you is the templates feature. So this block is gray block that you see over here. Um, this is a template. I saved this whole block as a template on this website, and this means that I can display this block on a lot of different pages. So, for example, if I go to D drink US category over here, you're going to see this page, and the same block is over here. So if you have a block that you want on 10 pages, for example, and the client is going to say like, Hey, can you change this image? You don't want to go into 10 pages, so you just save one bit off the website as a template. And then you insert that template on all the pages that you want and what you can then do is you can go to your safe templates in the beckoned. And here it is. I've made more templates on this website, but this is the magazine sidebar. So if I want to edit the image, for example, on all the sideboard off all the pages. I just go into here. I just had it with elementary. I save it and it's safe. All the pages also very, very, very important feature. And then I want to show you two less features that I think are also pretty nice. And this is the pop up for Web shops. This is used quite often that when people move their mouse outside of the page, a pop up pops up and it's like, Hey, there's 10% discount or something like that so you can create a pop up and then say like, I want this pop up to display on all of my block post or only on the home page or on the whole website and I wanted to show up after 40 seconds, for example. So this is also a pretty powerful feature. And then the last fun feature that I want to show you is the emotion affect feature dismissive feature that you're gonna use on very creative website. Maybe if you're working one day for a client who has won something really creative, you can use thes motion effects. Teoh, make some parts move when you scroll to the page, or when you hover with your mouse over a certain area, something will happen. It's just a nice feature to have. It looks absolutely amazing. I've used it a few times, but not everybody wants offensive website like that, of course, but it's nice that it's there in the pro version. So now what you want to do is you want to go to the link below and you're going to see the page. And as you can see on this page, there are tree packages that you can choose from. The first package is for a single site license, So if you just want to test elemental or you can go for that first package, it's only $49. And if you don't like it, you can ask your money back because they have a 30 day money back guarantee for new customers. So all of the prices are per year. I have the most expensive baggage because 40 minute package, you only get three websites, or maybe if you just want to test it for one or two website, you can pick these middle package. But I just love element or so much, and I use it every day for a lot of projects. So that's why I have these big baggage. I think this is the best deal because you can use it on almost unlimited websites. I mean, 1000 websites. That's a lot. So you can activate this on your website and you can even charge your clients if you want, like $10 a month for 10 euros a month to use to suffer. Because this is a yearly price, right? And it's not that if you don't pay after a year that the website will go down, you just don't get the updates. But the website will work off course. Problems can occur, but because on a verbose website there are a lot off plug ins. So if you're serious about this off course than this, baggage is a great deal. But if you just want to test it and you want to test, if it's something for you, I suggest that you pick one off those packages and just see if it works for you. If you have any questions about elemental pro, let me know below. I'm happy to answer your questions because I understand that of course, If you're going to buy this, it's an investment. You need to think about it, but I think it's a great deal. If you know what you can ask for a website, you can ask hundreds thousands of dollars for every website that you deliver and with the speed that you can use elements or pro. It's absolutely unbelievable how much money you can make if you master this tool. So this is my perspective on why I think elemental pros and absolute must. If you're serious about building websites, it's the best on the market. I mean, there is a reason that this is the number one page builder in the world. OK, so again, if you liked this course, please leave a reef. You I would love to see what you fought about it. If you have any ideas, what I could improve or what my next course should be about, Maybe about elemental pro? Maybe that's a good idea. So, yeah, that's it. I hope to see you somewhere around on the Internet. You can follow my personal instagram if you want to. That's also down below, and I want to thank you so much for watching alright guys by