Transcripts
1. Elementor Introduction: hi and welcome to the designing with elementary section. Now, if you've been following along the course, you'll have learned how to set up a fully functional WORDPRESS website, installed all of the essential plug ins and also understood the psychology behind creating professional pages on your website. Now it's time to learn about l. A mentor. So what is L a mentor? L. A mentor is the most professional designer tools out there to make us go from Rukia designers to complete professionals. Let me show you what I mean. Now here are a couple of examples of people using elemental for their the sign along with the ocean WP WordPress theme. Right. So have a look at this beautiful site. Now the first thing we're gonna notice is that there is one big, wonderful picture around this whole area. Now we learned that this is called above the fold. We have the person's name here and then their slogan scrolling down. We're going to get a bunch more information about the website about the person. But the point here is that this is an elementary design. This is using the elementary tool and this is extremely professional looking because it is so clean. Now most designers a Web designers rather do use elemental for the designing because it is so easy. It is so fast, and you can create a fully functional, beautiful website in just a couple of hours. It's amazing no coding needed. So if we look at this website, we noticed that the theme is pretty much the same. We have one big, wonderful picture. There is a title here. There is a slogan here or rather, description. In this case, scrolling down would get a bunch off information. This could be anything that would be a sale stakes showcasing your product. Putting your email often it said Ra, and you'll remember that Pat Flynn did something similar with his design. Now this is so affected because you'll notice that there are section. We have one full screen section here, scrolling down. We have another section, another and then another, some being full screen but most covering the entire screen. Very professional. Now, if we have a look at this website, which is also using elemental with the ocean WP all of these examples are you'll notice that they are using a video in the background here. Now they're clearly conveying what they're all about. And then there is a call to action bottom called to action. Meaning you want people to click, care to get an email, Opt in to get your products to buy something. Whatever it is, the priority off your home page, Remember? Always set the priority would start here, the home pitch everything. Now these are my favorite type of home fish because they are so clean, their straight to the point. And this is what we're gonna aim for as well. When it comes to our decide scrolling down, you get to putting further information, still being very clean. Either using this sort of half screen or whole screen the sign right? And finally, this page having a similar design going on there, covering the entire screen right here. We craft starting the sign from Branson organizations stepped Creative Digital studio. Now, if I could weaken, get started. Remember, this is the start here. Button were actually being scrolled down here, so he's put all of this valuable information on the first page in one big long scroll, as you'll notice most people have. And then, of course, some social proof going on showcasing the clients. Now, this is just to show you that anyone can create these beautiful websites thanks to a tool such as L A mentor. So let's go more in depth to what elementary is now. L. A mentor is what is called a page builder. In other words, it helps you build pages like would you saw? And what does your website consist off? Well, basically different pages now. In the past, you needed coding skills in order to be able to create websites. Now WordPress simplified it. Ah, lot of plug ins came after that. Too simplified. And now we have l. A mentor to design to make it look beautiful. If you are like me, you'll know that I'm not a designer at all. I don't have a good eye for this time, but thanks to L. A mentor, everything becomes super easy. It's a very intuitive tool to use, and they also have another feature that really helps off. That is the ability to be able to design lime. Now you'll notice. In the previous lectures, when we were creating our pages that we created the page and then we went to the preview to see how it turned out. Now, with L. A mentor, you get to build the entire page alive. You get to see ask you, putting the different functions, different part different witches and see how it turns out. Live is an incredible feature, and it saves so much time and help through the intuitive designing now again. Because I am not a designer, I really appreciate that this elementary is filled with page templates. I really need them, and it makes my life so much Easter. I wouldn't design a logo, but still we have a great looking logo, and similarly, I wouldn't go ahead and design a page. But thanks to the templates, we can get really, really good looking pages and hence really good looking website, thanks to this tool. So in other words, if we learn to master these tools not only will be really proficient when it comes to building websites, but also designing those websites, whether that's for your business, being a freelancer, helping someone out building your own business could be anything as long as you need to build a website decided to look professional. Elementary is the tool now There's also a feature in elementary called Elementary Can Va. Basically, what it does is that it allows you to remove everything that is on this certain page, meaning the sidebar The Footer. If you would want to the logo than menu everything and just make it completely clean a Canada so that you're able to put, for example, a movie there or you could be putting a big picture there and then we could start the signing. But some may be a menu in the top, your logo, etcetera. But this feature makes it so easy, because if you can start from a clean slate with the elementary Canada, designing becomes so much easier. And here's the final crazy thing. It's actually free. There is a pro version, actually, I think there are two pro version. If you want to use it for several website that cost you, I believe $99 or $199 for one year off updates currently, but 90% of this is completely free, and 19% is gonna be more than we need for our purpose, right? And if you should, ever by any tools or any plug ins and In my opinion, if you're ever gonna buy a plug in is either gonna be for the protection of your website for the restoration and back up off your website on the elemental plugging to decide like a pro. But once again, you're gonna notice that we have basically everything in this page builder. And if you should ever need more, you have the budget for it. It's easy to upgrade and use those features for woo commercial. For example, if you want to create into a e commerce website, we're gonna talk more about that later, and I'll show you how to build an e commerce using comers. Okay, So if you are as excited as I am to start building up those pages that we have already prepared being our homepage being our start here page and of course being our resource is page, then let's get started going through elemental from the very beginning, all the way to getting the finished product. The finished thing, right? Let's get started seeing the next lecture
2. Elementor Settings: All right, guys, we're gonna learn everything about elementary, but to do that, it's a good idea to start from the very beginning. So let's start from the back end of our website and move over to Elemental here. Now, as with most plug ins, they're gonna be a couple off settings and different options that comes with it. So before we get started and start using it, we're gonna go ahead and shake through what all these means. And if we need to change anything, we're gonna go ahead and do that. Okay, So let's start off in settings in here now. The first thing we have in settings is where you want elementary to be applied, right? So right now we have it to the post types off post pages, and that's it. But we could also apply elementary to the male poet page or my library. But that's nothing they really need to think about now. I just want you to know that these options are in here. Should you want to customize the male poet page later on, for example, remember, you could create different pages there. The man is subscription page, etcetera. Then we also have disabled default colors. Now, this is if you wanna use the colors that comes with your themes primarily. Then you could check these to disable the elementaries default collars and use those instead and the same with the phones. You can disable the funds off elementary to use those from your theme. However, in the upcoming lectures, when we start designing our home page, we're actually gonna go through which collars and which funds to use for your business, depending on what you are doing with your website, what it is about and what feeling that you want to deliver the psychology off phones and collars. Really excited. I think you're gonna love that lecture, but for now, we're not gonna touch these, right? We're going to customize those later on. Then we also have the improve elementos setting, meaning if you want to help elementary by allowing them to track your usage. Now, this is an animus data that they collect to improve their plug in. And if you want to do that, you can doesn't really do much. I tend not to, because I don't want to have the load of myself. In other words, it might slow down things slightly. And I'm not really into doing that, even if it is for a good cause there. And then we move over to style. And in here we have the generic form style. We have the content with basically the style off your pages, this style I was gonna look how it's gonna fit with the spaces in between etcetera. Now, we don't really need to touch this right now because we're actually gonna mixture with this when we're in l. A mentor itself and in advance, we have things like CSS print method and for us mortal who are not into coding. We don't really have to bother about this at all. Switch to editor Loader mode. We're not gonna touch this either, because this is for troubleshooting and we're not gonna go into doing those sort of things . This is for advanced users. That is nothing that I do either using this plug him, and then we have something that's called editing handles, and this is actually a decently recent feature. Now, what this does is that it changes the editing blocks Now, I know we haven't started with elementary yet, but I just want to show you what this does. If we keep this on hide, that means that in order to customize a block we've been working with blocking Gutenberg. So it's gonna be familiar for you In order to customize a block, we get to right click on that block. Now, if we keep this to show, it's gonna use handle this standoff right clicking. And it looks like this. You go ahead, you activate this to show, and then, as you can see in the block, you get this kind of fold out where you can copy, you can edit, you can close it, etcetera. Now that is completely up to you, how you want to do it. But generally, whichever you start what you're gonna be comfortable with, I think that this feature is primarily because a lot of people who used elemental for a while they got uncomfortable with the right click option. But if you're just starting out with elemental, you're gonna be comfortable, most likely with which ever I actually like the right clicks. I'm gonna keep this to hide. So let's go down to roll manager now, just like it says Roll Manager is if you want to allow people to do certain editing in L. A mentor. Now, for example, if you want your editor to not have access to L. A mentor, you would go ahead and Kallick in here. Now. The different roles on your Web site is gonna be much more important to you Once your website starts to grow right and you can start the signing different roles to different people. You can have several authors if you have a blogger. For example, if you have contributors someone who takes here if you're a CEO, etcetera. Now, if you want to give access to certain content, you need to go pro. But what you can do is that you can limit people's access to what people can add it in L. A mentor, and you do that through Roll Manager. So let's move on to tools. Now in here is actually something you might come to use a couple of times, and that's the regenerate CSS Now, even though we don't really work much with CIA, says this is actually something that is said in the style, and this style is gonna be the will of your page. Maybe the fund the collars, etcetera. So whenever we are updating that and we noticed that the updates aren't actually taking place, then chances are that there is something wrong with the wrist bones. For example, Between elementary and the theme that we have, we have ocean WP. So if something is lagging or something is missing or were present doing some missed with L . A mentor, all we need to do is go back and click on regenerate files, and then we're gonna make sure that they sink and basically 99% of the time, that just makes it work, right? So whatever style change you have made, this gonna start working by them. Chances are we're gonna use these a couple of times as we build our website using L. A mentor, and then we have sink library, and the library is gonna be much more useful later on in the elementary section when we start using templates. So, for example, if you download a certain template or you save your own and you notice that that is not visible in your saved templates, all they need to do is go to elementary tools and click on sink library and most of the times that is gonna solve that problem, and then we have safe mode and the safe motives. If you want to troubleshoot any issues or anything special in elementary, this is an advanced feature. We're not going to use this so we don't really have to care about this. This is basically for the nerds. And even though I consider myself a huge nerd, I'm not knowledgeable enough to go into the coding and bits off the safe mode. So we're not gonna use that. We also have the debug bar now the debug. It's similar if you want to look for problems that said, we're not going to be using this either. So these are all advanced features that we don't need to build fantastic websites. So moving on to replace you or L. Now, if you've been following the course all along, first of all, that is awesome. Good job. Secondly, you'll remember when we downloaded a plug in to back up our website. When we backed up our website were able to migrate our website somewhere else, right? And what we can do then is that we can migrate that away and then also migrant our entire element or set up using this replace U R L Wright is gonna hold true as well. If you are changing the domain name to a new domain name, you're gonna have to replace this u R l two but again, just like it says there. You really should back up your database before you do anything like this, and thankfully, would do have our backup. And we know how to do the back up manually. So if you need to replace your old your el or your migrating, then go ahead and back up first and then use this right in your old your l and then you knew and click on replace euro, and then we move on to version control. So should they launch any new update with L A mentor, for example, and you notice that Hey, wait, These actually broke my website. That's very rare, But as with all plug ins, it could happen. But it's very, very rare. But you can do is go ahead and reinstall the old version that we know actually works. And of course, we have our website backed up, said it was gonna be any loss But this is where we go to the rollback version, the previous version to install the ones that has actually worked. So we can continue editing our website and continued progress in with our business, and we also have if you want to become a better tester, if you enable this one, then you'll have the opportunity to test new versions before they are released. If you're into that, that's absolutely not necessary adult at him to keep this on disabled. Then we have maintenance mode. So if you're upgrading your website or in this certain page, what you can do is that you can go and use a coming soon pace, for example, or a maintenance page. So people coming to your website there going to be seeing it coming soon, or a maintenance page allowing you to do what you need to do in your website. Okay, before you get everything published. So this could be great for any maintenance updates or just for this sign up days. If you just wanna put it down, update your website in peace and then release it with its new beautiful design. Okay, then we have who can access your website well, people logged in. Or if you want to set this as a custom, so only people with certain roles can actually logging. Once this system coming soon or maintenance, I prefer to just keep this in logged in. And then we have the templates. If you have created an uncertain template for when your website is down, you can use that. If you don't have one creative, we can create one right here. Now I tend to not do that either. If I ever put the website down, which I basically never, ever do, I would go ahead and use the maintenance part. Then we have system info. And in here there's just a bunch of technical jargon. It doesn't help us at all. It just looks like this. There's nothing off information that we can be using here, So we're not gonna spend any time here. We have a getting started tab here. A swell. That's really great, because L A mentor is basically unlimited in its potential for beautiful the science. And there's a lot of tips and tricks that you can be using from here. Now, you're not gonna need this too much because I'm actually gonna be your editorial, right? That's why you're here in this course to make beautiful the science and wonderful website. But to learn a lot of tips and tricks, they have some really handed tutorials in here. Can check this out and then get the full article. Now, if you need any help, you can click on, gets help here. They have great support to have a frequently asked questions in here can go ahead and check that out. There are tutorials, etcetera, really, really great. And then we have custom founds. Now this is a pro feature you need to bite in order to add your customer funds and custom funds means if there's any phone that you have downloaded or maybe even created yourself that you want to use to make your website even more unique. But there's a lot of fun, like a lot of phones in here already that we can use. And in the upcoming lecture in the psychology on, the different funds were gonna choose one that's gonna fit your business perfectly is we don't need to worry about this, and then we have the GoPro butts. And if you want to buy the upgraded version off elementary and off course. This can be a benefit if you use this for a while and you have multiple websites and you wanna used additional witches and use it across multiple platforms. But like I said in the previous lecture, this is not needed. You get basically everything for free zone open source, and we're gonna make Kick Ass website using the free version, right? You're most of the kids. You're not gonna need the pro version. But if there's anything you should by pro for a plug in, it's gonna be the anti virus or the backup or elemental probe, in my opinion. And then we have templates down here. Now we have our say that templates. So, for example, should I decide to make different pages for different courses, I might want to have the similar kind off page build. So what I could do is making certain page built and save that as he template and use it over and over is going to save a lot of time. And, of course, when we start downloading templates, which we're gonna go through later, that's gonna be put in here as well. The theme builder is a pro feature, so we don't have access to that. But it allows you to go into the integrated, for example, to edit your ah, header your food er in the l a mentor. But again, there's nothing that we need to do because we already know how to do that outside. And I'm gonna show you how to use the different features to make your website awesome. Without that, we have pop ups and pop ups we all know about. The pope's up on your screen. You want to do an email open, for example, or if there's something that you want to announce on your website, that's a pro feature. But honestly, this is quite sensitive. They can be used correctly, but they can also be very annoying. But that's nothing we need here. We can great new templates, and here we can put templates into categories, right? So those are the different settings in elementary, so we have gone through settings role managed to system in for all these important stuff and Sam plates, which we're going to go through Maurin death later on. What I want you to remember primarily is that if you go to L. A mentor and tools. We have the regenerate CSS. So if there is something that's not updating on your website, go tell a mentor tools and click on regenerate files. Most of the time, this is gonna solve the issue off your theme, not updating your style, not working as they should. Right now. Let's move on to the next lecture and start using elemental. This is really exciting, guys see in the next lecture.
3. Home Page Pre-Design: All right, guys, in this lecture, we're gonna go ahead and pre design our home page. Now, if you've been following along the course from the beginning and you've been following the same steps as me, you will just like me not have a home page right now because previously we turned our home page into a start here page. So what we're gonna do is go ahead and go to pages here and click on add New and actually create a home page that we can be using. So I'm just going to call this home, and then I'm going to click on publish and then publish, And then I'm going to go back to all pages. And if you scroll down right now, you'll see that the start here is our front patient on the front page and home page, those air kind of synonyms. So what you want to do is click on quick edit because this slug you remember what the slug is? That is what appears after your domain name. So the slug here is Robin and jesper dot com. Forward slash home. But this is very confusing for the search engines because we want to turn this into start here right now. The start here page should have start here. Acid slug makes a lot more sense for the search and ears and humans alike. Now, whenever you're writing slugs, you always want to use lower case letters, and you always want to use a dash when you're doing any space. So then we're gonna go ahead and click on update. And now let's have a look at our home. If weekly going quick edit, you're going to see that this leg is called home and then dashed you We just want this to be called home, and then we're gonna click on update. There we go. And now we're gonna go to settings and go to reading. And now we're gonna turn our homepage from start here into home and now click on save changes. So the home page is not set out currently in our menu, and that's exactly how we wanted. We want the home page to be the first page. They see that the editor, but you don't want it to be in the menu because we already have it in the logo. So what we're gonna do is make this into her home page Pre design it by removing all of the fluff that we don't need, and then we're gonna move on and make this really professional and beautiful using L a mentor. I mean, that's why we are in this section, right? So now we're gonna go up towards pages and click there and then we're gonna go to Hope, which is now a front page. Home is our home page. That's awesome. And now, guys, finally we get to click on this big blue button that has been staring us in the eyes for a while. That's is added with elemental. Okay, now, the second I click on this, that is gonna turn our home page into an elementary edited page, right and is also going to be opening the entire page from Gutenberg that we've been using before into the elementary editor. So this is how the elementary editor looks. You'll recognize a lot of the dragon drop features from Gutenberg, but also with this beautiful life edit. Now, don't worry about all of this. We're going to go through the dashboard in the next lecture. But now to continue with our pre the sign of the home page. What we're gonna do is go down here to settings, and that's going to bring up a couple of general settings for the home page, such as they want to change the title they want to change the status to. I want to add a featured image. We're not gonna do that right now, and then we can also hide the titles. Now if we look at the title right now, it says home and most of our pages has titled such course. Assistant title, of course, is about about blawg blood, etcetera for are designed to take the next level and looking really clean and really professional. We don't want to use titles anymore, right? I want to make the website as clean and straight to the point as possible, so we don't need to declare to the world that this is a home page. We just want to deliver the purpose off our website, the purpose off our home page and we spoke about earlier. So what we're gonna do is that we're actually going to go ahead, click back on settings here and we are going to click on Hide title now if this doesn't hide the title for you, then chances are that the theme that we're using it's not completely synchronizing with elemental right now. And that is because sometimes they have the different name in the codes. We don't need to know about that. We just need to know how to fix it. So if you click on here and it doesn't actually hide it, remember, this is a live preview. Then let me show you how to work around this and hide all all four titles because this is not working Ocean WP right now. So let's go ahead and hide all of our titles on all of our pages because we're not gonna use those anymore. So what we want to do is right. Click on our logo here and click on Open Link in New Tab. And then we're gonna go here and we're gonna go ahead and click on Customized. If you're at the back end of your website, you just go to appearance and then customize. And now we're gonna go ahead and go down to general options and page title. And here where it says style, we're actually going to go ahead and click from default to hidden. So what that is going to do once you click publisher is that is gonna hide the titles off all of your current and future pages. It's gonna save us a lot of trouble. So it's been published. All of the titles are gone with just slightly cleaned up our design. Awesome. So now we compress this one down and go back into L a mentor. Now all we need to do is go ahead and update this page. Click on leave, Paige, that's completely fine. And then the home title is gone. All of her titles are gone. Awesome. Now, if we go ahead and we go back into settings here now, this is the really important and interesting part. Right now we have something here that says page layout. Okay. And were they using this before? We've been using the elemental full with to remove the sidebar. And if you have been following along the course with us, I strongly recommend that you go ahead and you click on the l aumentar full with and we're gonna use. This is a pretty design before we start designing our home page. The reason for that is because I love this menu. I love that we have the logo here, and it's also the food er that's contained in here with our privacy policy in terms of conditions. Now, if you have just jump start the course and gone straight into L. A mentor, you have a website. But you don't have all of these features or you don't actually care about this feature. Whenever do everything you can use something called elementary canvas, and this is a feature that on a lot of website, I love to use this, especially to start with because look at this. It's a completely clean canvas, and we can start building up anything that we want in here. So depending on your design in your purpose, you can go ahead and choose if you want to use the elementary canvas with the elemental full with. But if you've been following along from the beginning, I recommend that you used to elemental full with. That's what I'm going to use, and that's what's gonna be the basis to start this signing our home page. So there we go. I'm just gonna go ahead and click on updates, and now we're all done who have pre designed or home page seeing the next lecture. Guys
4. Elementor Dashboard : All right, so let's learn a little bit more about elementary by going through the dashboard. But first things first. How do we get to L. A mentor from our WordPress from the back and off our website. Now, there are two ways to really enter the elementary editor here. The 1st 1 would be to start a from your dashboard, go to screen options and then activate the elemental or review. Now, remember, we click this away in a very much earlier lecture of the course. Now, from here, you're gonna be able to create new pages by just clicking here from here. You're going to notice that the patient we've been editing our home page, he actually says elementary down below here. And all we need to do is go ahead and click edit with L. A mentor, and we're gonna jump straight into l a mentor starting to edit that page. Okay, so here we are. Now, let's go through this dashboard over here, all of the different features. Now, if you've been following along from the beginning off these cores, then that's really awesome. Because then you will have learned how to use the Gutenberg Editor which also has to drag and drop function. You're going to recognize a lot of those features in here because if we look at these, we have the basic elements in here, which is the things like heading takes, editor image, video button, etcetera that you can just go ahead and click, drag it over here and drop, and we have a heading more about that in a little bit. But its various is everything. Here's Dragon drop. So what? We have all the basic elements going on here. And if we scroll down or just collapsed, this basic one, we have the general ones as well, which is things like Image Gallery. You can have a star rating image care so I can list alert short code Soundcloud sidebar. Read Mother's. There's a tone off functions in here is such an awesome tool. And if we collapse this one as well, we also have the WordPress widgets that we've been going through from the witches area earlier on. We can also just click, drag and drop like this very, very easy to build pages this way. Now, the next thing that we can do in here what you're going to notice is that if I open up the basic one and for example, I want to add a text editor in here, then all I'm gonna do is drag the text editor in here, and I'm going to get a piece of Texas just like the Gutenberg editor. And when this happens, that's gonna open the text editor right here. So and it takes someone to write and can just write that in here. I can go ahead and change the style, the alignment and everything. It's super similar to Gutenberg, and then we have advanced functions as well, which we're gonna go through later on. But everything is gonna work the same that when you pull it in here, you drag and drop it. You're gonna go into an editor where you can edit it's different functions. Now, if I want to go ahead and add more things, all I'm gonna do is click up here in the upper right corner with all of these squares, and I'm going to go right back in here. So let's say I wanted to add something else. Let's say I want to add this image. I'm just going to click on it and move it up and you can have recognized this. You can put it above, or you can put it below just like this. Now, if I put below is gonna end up right here, and if I want to delete this I'm gonna do is right. Click and click on delete. Now, remember, when we're in the settings earlier than the addict function would have been up over here if we added on the handlebar. But now we're gonna use the right click for this and just delete it so we can add on anything in here. And this is one square off itself where you can add a bunch of things. Bunch of videos, buttons, anything. You're gonna notice that we can drag on different witches or elements. They're basically synonyms in here. So in this way you can keep on different sections with different features. Right? So let's say that I wanted to add my own header in here. I can pull the things that I want to pull from here, dragged in here and create a header or un above the fold home pace. You remember what above the fold means which is everything. That's gonna be on your screen when you open the page. Then I could make this and next square down here. That could be the things where I put, for example below the full, the first screen below the fold, and we could do another and another. All of that is gonna make a lot more sense in a little bit. Now, if I want to collapse on entire square, all I need to do is go ahead and click on the delete up here. Boom! It's all gone now. The next thing that it's so amazing and so beautiful with this editor is this function. Notice the plus in here. If I click on this is gonna add in an entire new section, it's so easy to read it. So let's say that I would add in this we have four different sections going on in here. 1234 And then you can edit thes that within between them. For example, the height two column. Get the overflowing. Even the tag, which is really cool, because that means you could create your own header. And the search engines are gonna recognize it as a hitter because you changed html to header. In other words, Header is for search engines. S e o even more about that in the S e o section. Okay, so if we go back in here where we have all of our widgets, I could add in a heading into this one. Really good. Let's go back. I could add in a video into this one. Let's go back. I could add in a Google Maps into this one. The possibilities off editing are endless in here, and that is what makes it so amazing. That is why I love this. You can make such professional website easily. I mean in hours, once you learn this. So let's remove the entire square like that. There we go. Now, the next thing you can do is go ahead and click on here. And this is the next mind blowing thing here. We're going to get a bunch off templates. Now look at these. These are page templates, right? If you scroll down here and let's say Well, this one looks really good, all you need to do is click on it and you can expect inspected, See how it looks like scroll down with sea we have this nice, beautiful scenery, video scenery. They have this woman popping up. We have the box that takes and the button going on. Very simple, clean and beautiful scrolling down. We have these little fold in here where we can call. We have the number scrolling down below the fold going on. We have all of the features off the service, some pictures and then some more information. I really like it. So I'm gonna go ahead and click on insert and then we get this entire page. Look, it's so easy. I could just go ahead and write. Robin and Jesper start at editing tiny things, adding in our numbers, adding in our feature and honest in a couple of hours, I would be having a kick ass website. This is all thanks to elementary so easy to use. Now, let's just collapse all of this by clicking on the delete section here. We're just gonna delete everything inside this square or rather, in this case, it was just the video. And in this square, for example, they have divided it up, So this phone number is gonna be collapsed here. And if I hold her over I can see that this entire feature square it's gonna be deleted from this square. This divided up this on this. So it all depends on how you want to divide up all of your different witches and your own design, right? So everything I'm showing you here, we're going to go into more details about as we go through and build up our homepage. This is just to run through the dashboard and its many functions off How elemental works. Okay, so if we go down, we have some additional features like settings. Now, we touched on settings just earlier on in the lecture when we were doing our home patients setting or elementary full with in here, we can also change the style, meaning we can go ahead and click on background and add an image meaning we would be adding an image to this background going on in here. We can also use the Grady in meaning we can use colors and make a certain callers in this background. And the possibilities off editing are endless in here. And now if I go down, we also have navigator. Now, Navigator is gonna be something that, for example, Let's say I click up here, go back to witches and I add in the heading in here. Now we get to see the heading in our navigator. If I go back into the elements and I add in a butts and s well, let's put it down below. Here we can see that in the same column we have the heading and the bottom. Now, if I go back here and I add a video in a natter square, then we're going to see that this video is actually in a new section. Each of these squares are known as sections, right? So if I want quick access to them, I can just click on them and I can see the martyr. Similarly, if I click up in the upper left corner like this is gonna be marked in the navigator, and then let's just collapse each square, square or section doesn't matter what you call them and collapse this one as well and then going down. We also have history now histories of really useful feature, because it's gonna show was everything that we have been doing. So, for example, we just added the video. So if I click here. We get everything back from when we have the video. So if you're doing any mistakes along the way you're worried about Oh, how is this gonna look? Oh, did I go too far? Can I undo this? Yeah, you can. And that is the beautiful thing about this. Everything is saved in here, which is really Austin. We even have our template when we added that one in here. And of course, if you want to go to the latest, we just click on the top one and we come back. We also have revisions. Now, revisions is when we have been doing this Big changes that's been ought to say I have a one minute ago 13 minutes ago. I've been playing around a little with this and from the previews lecture that was filmed. So we also have those saving here can click on that I could apply and reload them. So there's never any worry about something going lost in the editing process because everything is saved down here. Going down. We also have responsive mode. This is really useful because as your editing live, which is amazing itself, you can go ahead and check out How is this gonna look in the tablet? How is this gonna look on the mobile? So you always get direct feedback. And we know that the majority of people on the Internet today are using their cell phone. So we need to make sure that everything is adapted to cell phones, right? If not, we're gonna meets out in a bunch of important traffic. So we're gonna make sure that we always keep an eye on these ones when we're doing our design and then we have preview changes. So whenever I do anything, let's go back to witches up here. And then let's add in. Let's set in this video, for example. Here it is. Now, if I want to see how this looks like, I could just click on preview changes, is gonna open up in new tab. We've seen this happen before, and it's gonna show me how it looks like right now. Okay, so this is how it looks like with the video. Now, if I want to further edit this section, I can just move my mouse overhead with this edit section and you're going to get another editing mode in here. And the beautiful thing with this is you can decide You wanna have the section boxed You wanna have it full with Do you wanna have any call in gaps? There's gonna be very important. We have different Call them Contin position, overflow html tag, structure everything. You can change the style, everything and that is off the section. If you want to add a section above, for example, just click on the plus and you're gonna add a section here that I recommend when we're doing the design and you're gonna notice us, we go that we keep each section for each content. So, for example, the first thing that we're gonna want to do it said the main purpose for our home page That's gonna be in one section That's gonna be the above the fooled section now down below . We might, for example, when I had an email, opt in my want to add a phone number or anything, maybe testimonials. Whatever it might be, there's gonna be below the full. The first thing that pops up when you scroll down that's gonna be in a new section in the new square. Okay. And to delete these All we need to do is click on the X here. It's gon gonna click on the X here. That one is gone as well and that covers all of these functions and all of the witches. Now we also have something called Global. Now, this is a pro features which would make your which is global. It's not important Just wanted to show you what this part is, but we're not going to use because it is a pro feature going down. Whenever you have done anything you're proud of, you can click on update and that is gonna update. We also have the same option. You could save it as a template which we were talking about earlier can go to template and then load that if you wanna have a certain template for certain pages and also just save draft and finally going up, we know we're going to get to the witches if we click here right, But if we click in here, we get a different pair off options going on. We get to set our default colors are default funds are default color picker, and then we have global settings, which is gonna be things like the default generic fund, the content with the widget space etcetera. Also, we have light box light. Booked is if you add a picture you click on the picture is gonna pop out so you can view the pictures more full screen. It's an amazing feature they have added in here Click here to go back. We have the dashboard settings, which is just this part that we have gone through earlier. We have the about elementary is gonna take you to their home page. We have the finder, which is really cool. If there's something certain that you want to find in this page, you can just search for it and then we can view the page or exit to dash. But which is the back end of your website? OK, guys, now in the next lecture, we're actually going to go ahead and decide the theme off our website, or rather, the feeling that we want to express. And we're gonna start off by deciding which default funds that we want to use for our headers for our sub headers. For the generic, you have riding the text. It said to decide on the feeling and to understand that if you're not a designer like I'm not a designer, chances are you are not. But there are designers out there who understands the psychology off the funds. So we have to match the psychology off the phone with the feeling that you want to deliver to your vistors. And I'm gonna show you exactly how to do that, because there's a lot of templates out there that the sites on which phone that expresses, which feeling So we're gonna look at what service do we have? What feeling do want express? So what phoned? Can we decide to express that feeling and which funds are gonna match with that? Then we're gonna go ahead and do the same for the colder theme off our website. There's a super exciting, such an integral on important part off designing your Web sites, etc. In the next lecture, guys
5. Set Global Values - Fonts: in this lecture, we're going to talk about setting global values. So what that is is basically setting certain values that l a mentor is going to be using over and over whenever you are designing any page. Okay, so we're going to start off with setting the global values for our funds. So while we are in elementary here, what we're gonna do is go to the opera left corner here, click there and then moved to default funds. We're gonna go through funds before colors because funds are so important when it comes to the expression itself off your business off the website for your restaurant, for your design or your blood, whatever it might be that you are creating right now. So we're gonna click on default fonts in here. So as you can see, we have four different types. We have a primary headline, secondary headline, a body text and accent takes. The first thing we're gonna do is that I'm going to put out four different examples here that's going to represent all of these four different types of text. Then I'm going to show you the psychology behind them and how you can find an expression that's going to fit your business and then also tools for finding proper pairings to each phone. Now, funds are actually quite on art. But for us who just want to have a really good representation off our website in business, we're gonna take the short cut and go for the templates. There's definitely the most effective thing we can do here. So primary headlines, second headline body takes accent takes We're gonna go ahead and go to which is not gonna put this out just to show you their differences. So this is going to be the heading, and this is going to be the secondary headline and this is going to be the body text gonna put it right below there. And I'm just going to go ahead and write. This is the body text hit a low. I'm gonna go ahead and center these as well, so they're easier to see. And then we're going to add the accent. Takes is gonna put that in the bottom right here. So there we go, and then we're gonna go back in here and go to default funds. This is where we set up our global values all I'm gonna do is open up these menus. There we go. And this is where it gets both tricky and interesting, because here is where we decide on our phones and like we're talking about, earlier funds are actually on art. So what we're gonna do is that we're going to use a guide from can vote dot com. Now, in this guy, they have a bunch off different templates. They have put up a list with different fund pairings that you can go ahead and see whatever John your business and your into check that out, look at their phone parents and just follow suit. And if everything doesn't exist on elementary, I'm gonna show you how to find alternative. Or if you just want to find your own alternatives anyway. So what I'm gonna do is I'm gonna scroll through this until I find something that I like in here and here. I have found this front page. Now we're designing our home page, front page, home page, that pretty much the same thing. And looking at this, I think it looks really nice. I'm really enjoying the open sensing here. If I scroll down a little bit. I get an explanation off how it works and then also a practical example. And I really, really enjoy this. So actually, I'm gonna go ahead and use this set up, OK, so first off we have the primary headline and that is the open Sounds extra bold. So I'm gonna go back and I'm gonna go ahead and I'm going to write open sounds now, notice they don't have the open sounds extra bold, but what I can do is change the weight because the weight is another word for bold. So I'm gonna go from 600 to 800 we can see how that changes that entire your headline right here. And it's starting to look a lot more like this one, and I'm really enjoying this Looks. So we're gonna keep this. Let's head back here. Default funds. So now we have said or primary headline. And what is a primary headline? Well, the primary headline is going to be when we go to our elements or widgets, and we use these sword off headings. If I click on this heading here, you can see that it can have the tag h one to age six Dave Span or P. Now it doesn't really matter which one you use. It's gonna matter more, won't get to the S e o section. What's important here is that it is the heading is going to be heading for whatever section that you are editing for whatever met such that you want to drive home, right? And if we go back in here and we go to the full phones, the secondary headline actually doesn't exist that much in L. A mentor. The second headline. It's primarily going to be on certain, Which is which is why I'm using this counter witches as an example. Because all of the different headlines in here, whether this h 2345 or six those are all counted its primary headlines. So the second headline, It's actually going to be used very, very rarely. It's just a good thing to know about, Okay, But now we could not find the Cooper Hewitt. So what I'm gonna do is that I'm going to go ahead and search for open sounds and try to match that by going to phone peridot. Si o no. All of this is going to be in the resource is so in here. What I'm gonna do is search for open sons just like that and then hit, enter and then down below, we can see a couple of different pairings going on. And the cool thing here is that you can just click on this takes and right in your own as well, just to see how it looks like. And then we just scroll down until we see something that we like. Okay, Now, I actually think that this one is really cool. Deliberate Baskerville. I'm really enjoying that one. So the liber bathroom, I'm actually gonna use that one. So we're gonna go back. I'm going to check it out here and search for lead Breath, Bhaskar! And there we go. There we have it. Liberate Baskerville. And then we have the headline. I extra think it looks really, really nice. Now, if we go to the body text, this is going to be most of the text that we ride on our website. They're gonna be global value. So whenever you're doing in a headline, you're going to get these values off these thick open sons that we have selected in here And whenever you're writing and it takes, you're gonna get this body take. So I want to choose really carefully and make sure that we do our pairings. Well, now let's go back to the can of a guide here they are recommending that we use PT sounds in here, so and I think it looks really good as well. It looks really great here, too. So I'm just gonna go ahead and search for P T sons. And there it is. We have it. So we're just going to see how these transforms. There we go. Might look like a minor difference. But when you start adding a lot of text, this is going to really add up. This is going to be basically 90% of the design off your website in the end, especially if you are blogging. Takes this everything sponsor really everything. So I'm really enjoying this part, and then I'm going to have an accent. Takes us well enough for the accent takes that is going to be on things such as the buttons such as different parts of your sidebar, etcetera. No, they don't actually have a recommendation for accent text in here So what we're gonna go ahead and do is go to fund pair again, and we're just going to continue scrolling until we find something that matches well with open sons. Because that is the headline that we are using. So let's move on the sea breeze Serif. I'm actually really enjoying especially ass. A button takes, like in this case. So breathe Serif. I'm gonna check that out and see how it looks like here. Freeze! There we go. I'm gonna click Kim, and they would go. Okay, I'm really enjoying this set up. So all I need to do now is quick and apply. And suddenly we have said our global values for our funds and this is going to completely decide how we express ourselves. Now, remember, in here you can go through and see what kind of funds did you want to have for technology, for example, what kind of feelings you wanna have for an art gallery for invitation and events? I mean, all of these phones, they're expressing different feelings. So it's social good idea to go with the phone parents that are recommended by professional designers. They're people doing research and studies in this. I recommend that we do what works. So we have set up our phones. If you want to check them out, Maurin Death, we can click on them. And then we can go, for example, to size and put this to large. We can even put it to XXL and see how it looks like. And I really enjoy this. Killeen. Look, I'm super happy about this choice. I think you should do the same. Check out the resource is go and find your genre Jordan ish. Find your pairings and then go to the upper lift in here. Go to default. Font was gonna be your global values. So these are always gonna be applied and then set these up. Hit, apply. And then we're gonna move on to the next lecture where we're going to do the same thing for the colors off Our website colors are also super important, as we can see this color, right? It is just not gonna do see in the next lecture. Guys,
6. Match Your Menu - Footer Fonts: All right, guys, before we go ahead and we decide in our color palette for our website, depending on which needs your in John and what service you're offering, etcetera, we're gonna go ahead and match the funds that we have just picked together with our menu and our food. Er Now, if you have opted for the elementary can va and you currently don't have a menu or a footer and you don't plan on using either one, you can go ahead and skip this lecture. But if you are, which I recommend that you do using the menu in the food or stick around and we're gonna go ahead and do this. Okay, So the first things that we want to check out is the names off these funds that we decided for the primary headlined The second Headline Body takes an accent text. Now, what we're going to want to match is the secondary headline that formed family to the top menu here. The main menu. Okay. And then we're gonna go ahead and match the body takes to the copyright text and also to the food our links for the privacy policy and terms and conditions Okay, So what we need to remember here is the second er headline and the body text. Okay, so for me, that's labour Baskerville, MPT Sands. So we're going to keep those in mind. What we can also do is go ahead and remove. All of these were going to remove this entire square, also known as a section. By clicking here, they would go gun. And whenever you do any change, just remember to click on update. There we go. So we're going to click on the upper left corner here and then click on Exit to Dashboard and this is gonna take us to the back end for website, and we're gonna go to appearance down here and click on Customize. And then we're gonna go to typography on the left dashboard, hear clicking there into that tab, and then we're gonna go ahead and click on main menu. That's the 1st 1 we're going to start with. They would go and then we're going to click on the phone family. Now, the main menu is this one. We're gonna click on the phone family, and I'm gonna search for lead brah. And they're this liberate Baskerville. So if you have a look at the main menu right here and look at when I'm clicking on the labour basketball, we can see the change that it makes. And I'm already a fan off this. I'm liking this big time, actually. So that changes our main menu. Now, if we can, we can also change the size like this. If you want to have it slightly bigger, we could make it even into 16. There we go. There. We have 16 actually really like it into Ford. Seen like that, you can also play with the letter spacing. But honestly, I wouldn't because that's gonna mess up the front itself. And then we're gonna go ahead and click on the back, and we're gonna go down to do where it says food or copyright. Okay, And the copyright this Actually this copyright takes that we wrote right here, and I'm going to search for P T. Sands. All indeed. Waas click on PT on my keyboard and he's gonna jump down to P T here and they would have PT Sands. So if you keep on eye on this piece of text and we can look at it, change and there we go. So not a major different, but it's gonna fit much better with the overall designing for Web site, especially as we start adding content to it. So what we also want to do here, it's play a little bit with this size, right? This is really small. Now, we might want to do this slightly bigger. I actually really enjoy Ford seeing here. There we go. Maybe 30. Yeah, Let's keep it a 13 looks really good. So 13 and size. I really like this design. And then we're gonna go ahead and go back and we're gonna change these ass. Well, so we just change the food or copyrights. We're gonna go back, scroll down to food or menu, and we're gonna change the phone. Family also to P T Sands. Okay, Now, have a look at this. Once again, we can see the difference. And there we go. Now, some people might offer to match their top menu, their main main new here with their footer. And you can absolutely do that. There's nothing wrong with that, but me personally, I prefer to match the copyright text together with the food or takes over all. I just think it makes for a nicer and cleaner design. And then I'm gonna change this size there. So it's going that 12. Let's see. Third scene 14. 14. Looks pretty good. We're gonna go yet. 13. I think it's really good. And then I'm gonna click on Publish, and that's gonna publish this one for the main menu, the corporate takes and the food or menu. So it's been published. It's been changed. Awesome guys, not with him. Match the phone on our website. We have set the global values, which means that when we start creating content, we start adding headers, bottoms, riding, takes that is all going to match with the phones that we have already chosen. So what, we're gonna go ahead and do next? It's going for the colors. Check out which color should is going to represent my business. What color palette is gonna fit with that? And that's at the global value for the colors, just like we did with the funds. See, in the next lecture, guys
7. Set Global Values - Colors: All right, guys, in this lecture, we're going to be talking about the colors. What they mean how to use them properly to represent your business and then off course, set our global values. Now, just like with the funds, we can make this as easy or s advanced that as we enjoy doing it right now, I opted for four phones. You will be fine with just two. If you don't want to go too deep into it and colors are similar, you don't have to go too deep into it. But I want to show you where you can find all of the resource is to make the exploration as deep as you would like to, because I find this to be a lot of fun. Now, the first thing we can have a look at is the meaning and symbolism off color. This is a great tutorial from Canada. I'm gonna put it in. The resource is now in here. They're gonna talk about what each color symbolizes. So what you might want to do is think about the colors you've been thinking about for your design. Check out what they symbolize. Have a look through editorial and see if this goes in line with your thoughts and ideas off your business. Now, for example, you might not want to have a company that sales make up, for example, and use primarily black and red as colors. Because these air really aggressive colors, You might want to go with softer colors in there. This is not set in stone. Now, remember this there are no right or wrong in here, but there are guidelines off what generally works better. Okay. And for me, I prefer to go by these guidelines, set it from the beginning so everything is put in place and then keep it simple throughout the design. Right now, the next thing we can do is to actually go ahead and generate our own color palette using canvas color palette generator. And that's what we're gonna go ahead and do. But first off, let's have a look at our current color palette. So if we go into elemental writer, I have set these back so that we can check out the different colors. Asked. They changed. You can do this too, if you want to, but this is not mandatory. This is just to show you what the difference is gonna make. So if we go to the menu button up here and then we move over to default colors, you're gonna notice that in here there are already default palettes. So if you just want to get right on with it, you can click on one of the palace here and you're gonna go ahead and get those palace right? You can see everything changes instantly, pick any palate you would like. Now I'm gonna click on discard here to go back to the original. That is currently set. So we have primary, secondary text and accent that we're gonna change the color off now. The first thing that I am going to do because I'm going to be basing the colors of this website off off the logo colors right is a really clever way off matching the design of your website. So what I'm gonna go ahead and do is use canvas Kohler generator that I just spoke about click on upload image, and then I'm going to scroll down and actually use this logo that we have created uploaded , and then I'm gonna get a color palette from that uploading which is going to look like this . Now all I need to do is scroll down. And as you can see in here, I'm gonna get this beautiful color palette based off of the logo that is in here. Okay, so what I'm gonna do is decide which one of these I want to use and where. And here are a couple of tips and tricks for the future design. Now, if we go back in here, you're gonna notice that the primary caller is going to be off things such as the header. It's also in the number Counter is going to be in the number itself, which is the primary symbol off that widget. So all of the big stuff, like headers like, for example, numbers in certain testimonials, etcetera. That's gonna be using this color. Similarly, that is going to be using that fund. We decided for the primary now secondary. Same as with the fund here. We have a secondary color that is being shown below the number in here. And the second er isn't very common when it comes to L. A mentor, but it still exists, right? Takes, That's gonna be the takes that we write in an accent that's gonna be on accessories stuff such as buttons and certainly East, and certainly just that comes with it. So what I'm gonna go ahead and do is actually set the primary into black. And the reason for this is because of that this science that we are going to make are going to contain Back cross. There's going to be a single color or a big picture. And for this, the easiest thing to do is to keep your headings and big takes in either white or black. So those are the two primary colors that I'm going to be using in the design for the headers. So what I'm gonna do is that I'm going to go back to the color palette and I'm going to click on copy right here because it's going to be coping the pitch black from the logo that we're using. Had I had a different shade of black, it would've picked that, and I would have used that instead to match with the logo. I'm gonna go back, click on primary here. I'm gonna remove this and then I'm just going to go ahead and paste that in and then I'm going to click it away like that and you can see it turns into pitch black along with the number. Now, I prefer to keep the colors really simple. So what I'm gonna do is I'm gonna go back and I'm gonna cook this great in here. I'm going to go back in here and I'm gonna keep the same gray for secondary like that and for the text just like that, because I don't want to play around with too many colors. Similarly with funds, I went for four. You can go with two. You can go with three. I prefer to keep a couple of more there, but it's completely up to you. I prefer to go simpler with the design colors. And then finally, the accent, We're just gonna be the button and those sort of widgets. I'm going to be using this sort of tomato color that it's taken straight from our logo because that's going to be a beautiful match throughout our website. So I'm gonna go ahead and I'm going to click on Accent here, remove this, paste it in, and there we go. I'm gonna click on apply. And now I'm going to click on update and we have chosen our colors. Super easy, Super nice. Now, later on, you can also notice that there are certain callers like the blue still popping up when I over my mouse over at the menu here. So that is what we're gonna take care of in the next lecture. Now, if you had any problems extracting a decent color palette from Canada's generator, what you can do is use these Kohler extractor in here is also in the resource is. All you need to do is upload the file scroll down, find it There we go like this, and then you hover your mouse over. And let's say I want extract this color. You can see the Suman to the right here. Wherever I hold my mouth, I'm gonna click on it and is going to give me the color code. I copy it. I pasted inherit elementary and you have it Super simple. Now, if you really enjoy this, you want to dive deeper into colors. I'm also going to go ahead and add these to the resource is no. This is a dove zone color palette. So what? You can do here is find your own collar that do you enjoy? For example, let's say, did you really enjoy this red? So what you're going to notice is that a lot of these they are moving in unison when you are moving this. So that means if you have a certain pastoral, all of the other ones, they're gonna become pastel ass. Well, so asked, you find a nice color that you like, for example, this red. The other colors are going to be matching up together with them. So if you really enjoy this and you want to go, the more advanced route you can go ahead and do this, find your own color palette. Then just copy paste the callers from down below here and finally, for your inspiration. This is also the resource is here. We're gonna have a couple of example websites of how they are using different collars in order to design their website. You can see a lot of people really bold with the callers in here mixing matching a lot. It's really exciting because this sign is so personal. You can design it the way you want to. I prefer to go a little bit more simplistic with the colors, but in the end, these aren't set in stone. Neither is the front. We can always go back, change the collars and change the global values any time we want throughout our design, right as we see fit. Now in the next lecture, guys, we're gonna move on and we're going to be changed in the colors off when we hover are mouse over here at the menu because they're still blue, and I want them to be in the same red as this one. So now in the next lecture, what we're gonna go ahead and do is change the color off. When we hover our mouths over at the menu here, you can see that it turns into a blue. I wanted to turn into the same red that we have in our logo and that we have set for our accent caller, right? The same goes with the further down here. You can see that turns into blue. I want to turn it into that red. So keep your website open or wherever that you have extracted your colors from so that we can use that color code. Of course, If you have your own course or different color codes, just go ahead and use those and this sign freely. This is how I do. It is supposed to be a step by step to help you, but you always have free hands in the end. That's what's so much fun with the design. As long as we're doing the important elements together, right, So seeing the next lecture, guys.
8. Match Your Menu - Footer Colors: Okay, guys. So in this lecture, we're gonna go ahead and match the color palette that we just did created or just copied into our main menu into our links and into our food. Er, right, Because you want to match everything. Right now, we have the color palette from the logo rights here. But when I hover my mouse over at the main menu, he turns into light blue. And this doesn't really match. We wanted to match the other colors like the button color, for example to give it a nicer overall decided way, way more professional. So what I'm gonna do first and foremost Eastern, I'm gonna click here, and I'm going to hyperlink this body so I can show you what the hover effect is and what the color is going to be If you don't know what a hover effect is, I'm gonna show you that in a second. I'm just gonna go ahead and click on insert link and write Google dots. Come. There we go. So now when I click on this is gonna take me to Google, but noticed that when I hover my mouse over at this link, it turns into a bluish color. This is called hover effect. When something changes the color or size, for example, when you hover over it, So we're gonna change that color as well. What we want to do now is that we want to go to the upper left corner, click your distant menu button and then click on default colors. And we just want to leave this up here so that we have quick access to the different colors . Then we're gonna click on this logo here, right click and click Gone open link in New tab. And from here, we're gonna go ahead and click on Customize, and then we're gonna go to general Options and left here. And then we're going to click on general styling to the left here. So this is where we style our colors. And in the first column up here, where we have primary hover primary and main border colors, this is where we can change this area. So the first thing we're gonna do is click on Primary Caller and go ahead and change this collar. Now, remember I told you about the over effect, so it makes sense to change the harbor effect color. You're gonna change this caller variety here, but for some reason, In Ocean WP, the primary color is going to be the Harvard color. So this encompasses both off these. I have no idea why they have done this in the design, but currently, this is how it works. So we're gonna follow those rules. So what we want to do is change this color this light, bluish color into this red collar. OK, so I'm going to click on this collar here, and then I'm gonna go back to elementary in the previous tab. I'm going to click on this red, hear the accent color, and then I'm just gonna go ahead and select this code. I'm going to cop it and then go back in here. I'm going to remove this code, and I'm going to paste this code in. Okay, So now look at what happens when I hover my mouse over at the menu, right? It changes into that very caller that we're using as a theme that is in our color palette. Now, if this doesn't change color instantly, just click it down like this, and then you can click it up again. This will usually set the caller, so this looks really good. But if we go down to the body color right here, we can see that this turns red as well, which is really nice. But it has a darker color because it is hyperlinked, right. We can also see the down here where it says what we have our cookie notice. This is gonna turn red. But the main color dates natural color is so dark that we can't even read this cookie notice. Similarly, we have weiter and this turns into red as well. So we can change all of these. Ask. We wish. Now what I'm going to want to change is actually this caller that it changes into because I don't want the hyperlinks to be in this sort of grayish color. So you hardly can tell that it is a hyperlink. I actually wanted to be in red. So what I'm gonna do, it's click this one down and then I'm gonna go down. We're gonna go through this in a second. Don't worry. I'm gonna go down. I'm gonna skip site background because we're gonna do that in l a mentor and I'm gonna go down to link color, right? So the first thing is, the caller itself is gonna be the natural color off. The link is going to go for all hyperlinks, including this That goes to our privacy policy. And what I like to do here is actually to go to color and use the very same color combination that I use for the logo, the accent collar, etcetera. And so I'm just gonna go ahead and remove it, paste it in, and there we have this nice red color. But the thing is, now when I hover my mouse over, nothing happens. Right then we kind of wanna have that pop effect like this one looks really nice that something happens when you hover over. It's very professional. So what I'm gonna do is go down to caller hover right here, and I'm going to insert the same caller here as well. But now I'm going to go down slightly in this so it gets a lighter shade off red and click it away like that. So look at this. Now you see how it sort of pops a little bit when I hover my mouse over, and that just means that when you hover your mouse over a link, something happens. And that is a very professional feeling to have similarly privacy policy. Put your mouse over. It lightens up. It's such a nice thing you're gonna notices. Hover Think is on most places on our website. So look at this. Okay. But, Tom, for example, if I hover my mouse over noticed it gets darker over a mouse over the privacy policy, it gets lighter. We get the feeling that something happens. Right then we have the privacy policy and the terms and conditions, and all we need to do is keep these asset is because, honestly, I think this looks really good. So this is now our primary color. I'm really happy about this. So what I'm gonna do is go ahead and click on Publish. Now, there's also something here called Main Border Caller. Now the main border call if it's actually this little line that separates the top menu itself. So if I would go into the main border color and I actually press this into white look in here. What happens? So I click on white and you can see that the border disappears and Now this melts into the website and this can be a nice advantage if it fits your design, right. You want to put a menu on your background, But if you want to keep you menu separate, you can go ahead and click it back by clicking on default here and you get this tiny little line that separates everything. Now, off course, I could go ahead and change this and get it into a red line as well. But in my opinion, this doesn't look as nice. I actually prefer like this gets a nice separation. What we also want to notice is that four our top menu that would not have pretty much edited completely as we want. There is something up here that says, Place your content here. Because of these, we get another main border caller up here. So what we're gonna do is actually go ahead and remove this so called top menu. This is called the top menu part so that this border color doesn't even exist. We're only gonna have the lower one right. Then we're gonna have this really nice effect when we actually scroll on our home page. Because right now, when we are white towards white, we have the white in the menu and we have white in the background. It still separates this border color, separates the menu from the background. We remove it, it doesn't separate. And I really like that. Look off the separation for the menu. So let's go ahead and remove this top menu space that we can make an even nicer fit for the menu here. Top menu, regular menu. So I'm gonna go ahead and click on publishers. Make sure that you always publish and save everything you do. And then I'm gonna click on back here, and then I'm gonna click on back once again, we're going to go down to where it says top bar, right? And then we're gonna go to general and then I'm gonna disabled this Hope bar, and you're gonna notice that this actually disappear. Some people call it the top menu. Some people call it the top bar, but it any rate you click in here to customization top are uncheck it, click on publish, and we have a much nicer look on our website and Onley one main border color. So we have the menu we have the top many or the Tope are all gone Guys. Great job. Let's move onto the next lecture. We have fitted everything. See there.
9. Anatomy Of Sections: Okay, guys, in this lecture, we're going to be learning about sections what they are and how to use them. So this part in L. A mentor is called a section, and I have previously been referring to these squares. So these squares are known as sections, and a section allows you to add a bunch off different columns in them so that you are able to design pretty much anything you want. So to break it down, the first thing we have that is the section part right that we can drag anything into. Now, inside of that section, we can create a column, and it's inside off this column that we are going to add in our element. If you remember on Element, it could be on image. It could be a header. It could be a video. It could be a text, basically a counter. Anything. It could be anything that is called on element. It could also be a widget off any sort, right to be anything. So in this example, I've added in a picture and notice, because I have one element. That picture is most likely going to cover up the entire column. If you wanted to. They're sizing is completely up to you, but the element covers that call him now. Columns are completely customizable. So if you wanted to, you could also be splitting that call him up into. So that means if you could completely change the output in what you are creating, for example, you are able to add in two elements instead. So rather than having one big picture, you could be putting one picture to the left. And then you could be adding a piece of text to the rights. Okay, so now we have a product to the left and we can have a description off the product to the right. And because of these columns, it's so easy to center them and make sure that everything is in the right place on our website. So if you wanted to add in something additional in here, we could make a call them inside off this column. I guess they call that column exception. Joking aside, it called him inside a column. So that would just mean that we add in another piece like this. Okay, so, to the right column, we have added in another call in where we can add one additional element and that could, for example, be a by now bottom. It could be anything we want to add in there. So whenever you're doing anything on your website inside of your section, you wanna have an idea off? How many columns am I going to need here? What is the outlook? What is to decide that I am going for Because pretty much the sky is the limit here, guys, because you might as well have had four columns. And inside of all of these columns, we could be adding reviews. For example, we could be adding in testimonials or a bunch of products because all of these columns are gonna hold elements. And what that elements is is completely up to you, which is why elemental is so easy to use. And once you understand the sections that call them somewhat elements to add, all of these really professional looking websites are suddenly very easy to recreate. Now, if we wanted to, all of these reviews or testimonials or products could go from 4 to 6 and were able to add elements into each off these and now suddenly we could be having a product display. Instead, the sky is the limited. Just know that inside off each section there's going to be columns. One called him several columns doesn't matter. But that's gonna be decided by how you want to be placing your elements. If you have a gallery, for example, you could have one column and just one big gallery, or you could have several columns and add in the picture manually. Let me show you a practical example. So if we have a look at Pat Flynn's website smart, passive income, we can see that he very similar to us Or rather, we very similarly to him have our menu up here, right? Same goes for us. We have our menu up here. Then he is an additional menu. But we're not gonna need that down below. Here he has his first section right. This is where we are going to be designing our home page for the first section, dragging everything in here now how big you want to make your sections? That's gonna be completely up to you. But in my opinion, the most practical solution and the way I'm going to be designing the whole page is going to be by dividing up the section, depending on what we're adding in. So for example, here we have the so called above the fold. If you remember, that's because this is the top layer that you're seeing on your screen. So in here he has added, obviously a background picture off himself that's completely white. There's a picture of him and his signature here to the right and to the left. In here he has added in a header. And brilliant, let me help you build a passive income driven online business down below. This is an additional header is just a smaller one. Maybe on H three over on h four. We're gonna go more in depth into what they are and what they mean later on in the course. But basically H one is the biggest. H six is the smallest. Hendrawan headed to head or three header for etcetera. And then he has added in a learn more button in here that has a hover over effect. And all of this now when we look at it, is actually very simple. But it's so effective and it is so beautiful. And this is his above the fold design. Okay, so I would put all of this into one section and then we could add in the columns, for example. We could have divided. They called him in to here where, as we have one background picture of him and then one white called him, or we could be having one big column where this is actually just one big picture. It all depends on the practicality on the picture, on the material, how you want to decide. It's Sarah. There's not really any right or wrong in here. We work with what we have, right, But then we want to add in a header, another head or any bottom so we can see that Perhaps in here we wanna have one big column . And here we wanna have three columns and we're gonna go more in depth into how this works in an upcoming lecture, because we're going to be designing our own homepage, and we're gonna have a similar look to this with a description with a nice big background picture and a button, because I absolutely love this. The sign So this could be one section scrolling down. We have the ass feature in the social proof and it says the New York Times, Forbes Lifehacker Inc. Pro blogger. And this is really nice because all you need to do is have this part as one section create a black background, and then you could add in a text or a very tiny Hedren here and right as featured in. And then you would just adding a picture here, a picture here, here, here and here and these could be columns. It's that simple. So that would be 12345 and six columns. It's that simple. And then just add them in along each other on a role like this. So there's a lot of different customer stations you can do. Or it could be one big section with one big calling with just a picture added into it. Scrolling down. We have the email often. Same thing. This could be one section in here, and then we have a header added down below. We have a smaller header and then we have the email open and then the bottom added, and this is all super simple by design. But the lovely thing is how professionally clean it looks now, if you wanted to, you could have this and this and this inside off the same section. In my opinion, that's not practical, but you can do it so there's not so much right or wrong in here. It's more about practicality and how you want to divide the different columns and the different elements that you work with. But now that we're starting to learn about the section about the columns about the elements , and we know that everything is just drag and drop and we have done the framework with the pre designed with the global values, things aren't really looking so difficult anymore, are they? So what we're gonna do is if we're gonna move on, continue learning and then start designing our own home page looking forward, today's guys follow along my step, and you're also going to be having an awesome home page in no time seeing the next lecture
10. Background Part 1: Alright, guys. So in this lecture, we're gonna go ahead and start designing the background for our home page. Now, before we go ahead and do that, we're gonna want to go to menu in here in l a mentor and check out our color picker. Now, the color picker is gonna be the default colors that you can choose from when you are designing. So we have already said our global values, which means that these are gonna be the primary values when we're, for example, adding in a headline war. When we're adding in a text, for example, a certain fund You remember that lecture, right? But here's a color picker. So when we are designing thes, they're gonna be the primary color for us to choose from. Now, what I want to do is actually add in some of our color palace in here, for example, I want to have the reddish instead of perhaps the blue, and I also want the lighter version off. Great. So I'm just gonna go back and go to default colors. Go to the grey in here. I'm gonna cope with this, and then I'm gonna go back, go to color picker and then replace one of these gray with that code in here like that. Okay, I'm gonna do the same for next. And I really recommend that you do the same as well to make sure that you have the color palette. Ask your default choice because you're going to notice us. We go, it's gonna be a lot of different. Possible customization is for us, and I'm going to remove this kind of bluish color we have here like that and paste it in and there we go. So now when I check out the color picker, I have added the pallets that I really wanna have in there. Okay, Might be more might be less for you. So let's get started editing our background for our home page. Now, before we get started, there are a couple of things that I want you to know about that's gonna decide which sort of background pictures that we will be using especially for you, since you're gonna have your own website with your own goals in your own genre, niches, products, etcetera. So that is if we look get Pat Flynn's website Smart passive income, which we have done a lot of times because it is that good. You're gonna notice that he has something that is called a fool with design. So that means that his image, his background image that happens to be white. Here it goes all the way out to the ends. If we scroll down, here's another widget down here using a black background color that goes all the way to the end. Now the content itself is box. You can see that this header is in line with this smaller header is in line with this button that is in line with this as featured in etcetera, etcetera that's called box content. But the background, the images here they are full with. Now, if we look at WP beginner dot com, for example, you're gonna notice that they have everything super boxed in here and they are not using the full with feature. So this is a completely different design. So that means that for our purpose, as we're gonna add in a big and nice background picture in here, we're gonna want it to be more Horace Santel in order to have this sort of full with look. And if we had on a look like this, for example, we might want to use something that is a bit more vertical. So this is the first thing that we want to know before we go ahead with our design. So these air both great examples as websites. Now, in order to find our background image unless you have your own, we're gonna go ahead and use picks obey because there's a bunch of beautiful, high resolution pictures in here that you can use free of charge, no attribution required. Of course, if you have your own, you can use that. And if you can't find what you're looking for, you can use shatter stock dot com. I'm gonna add that into resource is as well. But before we move on again, there a couple of things to think about here. We want to know about the focal point off our image. Okay, so if you are using a picture off yourself, you want to know that that picture off you is going to be slightly more centered, right? And the reason for that is when we start making it mobile and table responsive. Ah, lot of these sides are going to be disappearing from the picture. So if it is important that you are in the picture, you want to make sure that you have a clear focal point in that picture. Similar. If you have a product or something, or someone you representing Now I'm gonna go ahead and search for an image that is going to give a great feeling when they come to our website to the focal point will not be that important. But I say I'm gonna show you how to do the adapted and responsive versions. Okay, so the first thing I'm gonna do is search on image. Now, the key word here can be anything that fits me and Jesper. We're doing courses focusing on business and marketing. But really what they are doing, the benefits of those courses is actually to create freedom to give result and to inspire people. So I'm gonna use one of two key words here. There's gonna be freedom. I was gonna be inspiration that I want the feeling to be when they enter our website. So let's years inspiration here. I'm gonna write inspiration, and I'm just gonna go ahead and search there and then I'm gonna click on orientation and choose horizontal because we're going to use the full with option. And now, personally, for me, the pictures that I prefer and I look for, it's the kind of nature pictures they will go, nature and landscape gonna choose that. And then I'm just gonna go ahead and scroll down until I find something. Now, there are a couple of good options in here, but what I really actually like is this one, okay? And the reason that I like this one so much is because I can already see the outline that I'll be using so I could use a header here. I could use a text description here and a button somewhere around here. And because we often read from the left to the right, depending on where you are in the world, I prefer to put the content on the left. You could put it on the right or in the middle, for example. But with this guy to the right and the feeling this preacher produces, I really want to put it in this area. So I'm gonna go ahead and download it. You always want to make sure the license. Okay? No, attribution Great free for commercial use. Great, because this is commercial use. We're gonna go ahead and click on free download and make sure that you're not downloading the huge version. Because in a dream world, we don't want our website itself to be bigger than a couple of megabytes movement 345 megabytes. Because the bigger our website is, the more there is to load this loader loading time. Worst sdo worst user experience. So we're gonna go for this size rather than this size because look at the size difference that is huge. So and there's gonna be no loss of quality using this. So we're going to go for this quality and we're still gonna have Smush You've been following the course to help us. So I'm gonna go ahead and click on download right there and then I'm gonna go back. So in here, I'm gonna go to the elements. Now the first thing to notice is that there's nothing going on here. In order for me to get a section to work on, I actually need to use a digital elements and pull it out. Drop it. And now suddenly I have a section that goes around here. I have a column in here and inside. It's called him. I have the element and that is this text. No, we're not going to be working on the title in this lecture. That will be for upcoming lecture. Now, in order to get started. What we're gonna do is go to the middle here where it says and it's section and we're going to click on that one. And now we're able to edit this entire section. So the first thing that we're gonna want to do is move over to style. There's a lot of options in here. We're gonna go through them, but let's fill our purpose. First, we're gonna go to style and then background and then click on Normal because hover, remember this when you put your mouse over So we're gonna go to normal background type and we're going to click on Classic, and then I'm gonna click the plus there, and I'm just gonna go to upload files and I'm gonna select that file and upload it and there would go, It's uploaded. I'm gonna select it and click on insert media. So, looking to the left here, we can see that this is the image is really cool. I love the feeling it produces. But as you can tell, it's not really giving the results we're looking for, right? So the section right now it's just way too small. If I head down and I click on preview changes, we can see that pretty much two footer And these well are supposed background image are the same size. I don't think this would be fair to Well, I wouldn't be a proud website designer with this result. So what we're gonna do is that we're gonna head back to lay out, and we're gonna increase the size of the section so we can have This is a background image . In other words, the above the fold background, this sign. OK, so we're gonna go to height here where it lay out and then go to hide. And then we're gonna change from the fault to minimum height like that. And the benefit with this is that you get to choose the height yourself, OK? So as you can see, the more I scrolled the bigger or rather than more height we get now, the image still isn't sized but we're getting more height for the image to be in inside off this section. So I'm gonna go with now. I think there's a little big I'm gonna go with 700. Usually it's a good one. We can just go ahead and click on preview changes to see how it looks. We can see that it covers everything. Oh, so nicely, really loving this. Now we can tell that the resolution isn't the way it's supposed to be. So we're gonna go back and we're gonna change the resolution off it. We're gonna move over back to style in here, and then we're gonna go down to size, okay? And we're gonna go from default to cover, so see the difference that this one makes now The cover means that is gonna cover The image is going to cover the entire section right now. If we were using something else like contain, then the image would be containing itself, meaning it would keep its size. And perhaps it wouldn't be faded as well. It's like this. If I use it like that, you can see that it has is doubling itself down below head here because it's having a different for solution. So basically, whenever I add a background image, I always go with cover. Always, always. And we get a really nice look like that. I can move over down to preview changes, and we can see the things are really looking beautiful. I am loving this. Okay, so we actually have a nice beginning going on here. Now we're gonna move through a couple of different options. I'm gonna tell you what they are, and then we're gonna add some additional things to make this look even better.
11. Background Part 2: So if we started layout, there's a couple of options in here. We're gonna go through most of them because we're gonna use so many ask, we go anyway. And then this lecture would be 50 minutes instead of keeping it a little lower. Much lower. Hopefully. So the 1st 1 is a stretch section. Now, I don't keep this on because I prefer to set it myself. And why I'm gonna show you in a little bit moving down. We have the content with how we want the content to be. Either we could have it box. We could have it full with now. Remember I told you that both Pat Flynn and WP beginner they have their content box, meaning they leave a little space on the side. If we look at the preview, you can see that there is a space going on on this side right here. Right? So if I change this to fool with instead and I click can preview, you're going to see that this text is gonna jump all the weights. You the left here because it's no longer boxed. So what I prefer to do is use full sized background images but box my content. So I'm gonna keep this box to keep everything more in line and more professional. It is also gonna transfer much more for the responsiveness off tablets and cell phones. And then we have the call them gap. Wanna have any gaps in our columns? We might come to use this as we add in mawr columns and more elements. We also have the minimum height. We could have feet to screen. We could have the fault. Now the feet to screen usually doesn't work that well because it doesn't match. So I prefer to use the minimum height said it myself and then we can also click in here, right? So now I can also move down to the tablet version and see how the background is going to look. And this is why focal point is so important that I told you about because if, for example, this guy too right here was unimportant or an integral part of this design, then I would be quite disappointed to learn that he is not even included in the tablet version. So it's so important that you make sure that you know your focal point and make sure that you can center it more so we can adapt to the tablet version and to the cell phone version . But what we can also do here is make these more responsive by customizing them ourselves. Right now, you can see that if you want the full image, we don't get to cover the entire screen. So that's gonna be your own decision. How you want to design that? Maybe that's not important, but I actually prefer to cover the screen more. So I'm gonna go something like that. So it still looks better than the previous because they have almost far more assumed in. But it doesn't show everything, but with this one since the focal point, or the image is an important beyond the feeling that is completely okay. Now, we also have the cell phone going on here. You can see the tolerance. See, it's a is an air balloon. Not very impressive, honest reselling able in this right. But the image actually looks really beautiful, but I still want to change this up a little bit now. If I go ahead and I do it like this, you can see that the air balloon has a much less central role right now. You get this whole view and everything, you still get the feeling. So it's so important to make sure that everything looks good on the the tablet and on the cell phone. And we're gonna go and have a couple of these run throughs asked. We go right is such an important part of the design. So we have these and then we also have the column position. Now, remember, this is the column. This is the text. Let's move back to this stuff. There we go. So right now it's in the middle and we're gonna keep it there because we're not gonna be playing around with the title yet, But we can move it to the top is gonna bump right up there. We could move it to the bottom. We're gonna keep it in the middle now. We also have the content position right where we wanted to be. If this should be assumed in, for example, if you wanted to focus on the top middle bottom, etcetera to make sure that we set which are the priority, I generally leave this on fault. And then we have overflow and generally you're not going to be using the overflow. Now, the overflow is gonna be if you fix any using its so called fixed or absolute values. In other words, if you're gonna set, for example, a butts in here that's going to stay with you all the time, no matter how you move the screen or which platform you are on now, the problem with that is sometimes it kind of breaks the theme or the display. When any task is to call overflow, it can move outside of the content box, for example. So if you put this to hidden, there's usually gonna take care of that. But that is such an advanced feature that we're not gonna use this. I actually don't think generally contributes that much, Right. So then we're gonna go through style up here, and we already set our background. Now there are more types of background weekends we can use a greedy impact from. We could be playing around with the colors use ingredient colors, meaning that we use different colors to fade into each other and also interesting guys. We can add a background video like we saw in some off the templates earlier. Now it's super easy. Either we can go ahead and add in a video link or we go to our media library and we just grab the link from there. It really doesn't matter. And it works the exact same way as when we use the background picture, the difference being that we're gonna set a start time and on end time. And we can also have a background fall back. And as you can see, discovering which will replace the back from video on mobile and tablet devices generally because they can't handle the video, it's gonna language not gonna look good because the resolution doesn't feed in. You already saw what happened to the image, right? So it's gonna be a so called background fall back, and then we have the hover option is something interesting is gonna happen as we put our mouths over. So if you know how to add a background image is to really the same with a background video , you have to set the minimum height. You have to make sure that everything is contained. Everything looks good really the same and then grabbed a link from YouTube or from your media library. Okay? And that is the background. We're gonna go back to our classic in here, scrolling down. We have the position, right? We can decide. We want the position to be. When it comes to this, the section we could have its center center, center, bottom center. We can have it to the top rights, etcetera, etcetera. And this is gonna be important when it comes to your product display. When it comes to your, for example, person that you're representing here. Remember? I was talking about that earlier. So if you have, for example, a person here in the middle and you want that person to be in focus and when I had a little bit of text over what you could do is check out the mobile version. Just click on here, go in there. And then we could change this default display. Maybe go to this center center and you see, we get a completely different look, right? We could say that this one, it's looking much, much better already. We could have the bottom right, and then we get that guy or we could have the bottom left. The important part is we want to know our focal point. Okay? Because the focal point is gonna be where we set this position so that the product is always in focus regardless off the size of discreet. What device? They're using a tablet on their desktop on their cell phone. You know, maybe under oclock in the future. I don't know what it is, but we want to make sure that what we're aiming to show here is going to be showing okay. And if it doesn't matter, like in our case, we can keep it on default. But otherwise you really need to change these and match them in. And then we have the attachment. If you wanna have a scroll, we wanna have it fixed like it's gonna be still all the time. This is this is not gonna move like right. So if I scroll here, you see that we're actually scrolling inside of this image. But if I have it on scroll like this, you can see that we are the images being with the scroll, so to speak. And then we have a repeat version and we're not gonna have any use Self. We're gonna leave it on the fault. We have the size that we decided on the cover. We can also use it on contain or custom or order or default. But really, if you want to have a background image that covers everything, we're gonna go with cover and then we have the background Overly. This is such an amazing and interesting feature. Now, what we can do here is actually put on overlay over this entire background. So in other words, we can make sure that we are, for example, making a picture darker. We could make a picture lighter. We could even combine pictures. So we get this nice, fading effect or like we're going to do in this case, we're gonna put on overlay there's gonna match with our color palette from our logo. So check this out. We're going to go ahead with background type, and we're gonna go with classic and I'm not gonna add an image. I'm just gonna go with color here, and then I'm gonna select that Red witch is ours. And as you can tell, it makes the entire image red. But check this out. Now, if I move it all the way down, that means that nothing is added from please capacity. But if I add on a little bit, we can see that currently, the theme is quite blue. But if I add on a little bit like this, you can see the things were starting to turn a little bit more red. And that is such an amazing thing, because that is gonna fit with our theme. Right? So have a look at this. It looks so natural to meet list. And if I remove this filter now, this background overly, we can tell how dark and blew it is like black and blue. So all we need to do is just adding a slight capacity like that looks supernatural. And suddenly the website become so much more professional because we are matching it with our color palette is where the color pick it comes in handy as well, because we can just instantly go and grab our color that we picked from the logo. So this is really perfect. And that is the background overlay. You can also do with the hover if you want to, and there are more things you can do. You can use something that's called CSS Filters. We're not gonna use those kind off features in here. You can use a blend mode, which is gonna be like templates for different blends. We're not gonna use those either. Like, there's a lot of options in here. We have the borders and the borders is basically gonna be the borders around the section itself. So if I add a so called solid border like that and then I adding the with for 50 now these are all chained together. You can see I get this board or all around here and what I could do with that is I could change the color off. The border, for example, has put it in this blue. Now, this doesn't look very good. Maybe if you want to add some wallpaper effect some picture effect or something, But you just so you know that you can play around with this. You can also use the hover effects so that when you put your mouse over, you get this small. This tiny border kind of creates this three D effect, but we're gonna go through that later, so don't worry about it. We're not gonna really be using this. I just want you to know what they are, so you don't stress about them as we go. So we're not gonna be stressing about this one. I'm gonna remove this for rapacity. They would go and I'm gonna put this to none. There we go. We don't want any border going on. And with the border, we also have a shadow that we cannot. We're gonna close this one now that we have something that's called a shape divider. Now, the shape dividers really interesting because as we go, you're gonna notice that this can make your website really look professional and put a beautiful design. Ask you transition from one section from the above, the full to something below the fold. So, for example, we can go ahead and we could use clouds. And now we're using the top parts. As you can see, this many is melting into the clouds is melting into this section. It creates a really nice and beautiful Well, they call it a divider, and there's a lot of different things we can do with it. We can customize it like this. How much we want much want to sue, may not it. It's a lot of things we can do. We can change, too. Certain triangles, waves. There's a lot of different effects. We can add a certain color height. We can put in a flip on it, right? Invert, bring to front. It's a lot of things we can do, and similarly, we can do the same on the bottom. And if you don't want any, all you need to do is click unknown and you won't have any. Sometimes with L. A mentor. For some reason, the shape divider gets looked up like this. Now all you need to do is click on update to make sure that you have all of your changes saved, and then you update the page and you're going to see that this divider that you removed is actually gonna be gone. So there it is. It's completely gone. So I'm going to do is click in here and go up and ended the section up here so continuing in the style we have gone through the shape divide. And finally we have the typography and we don't need to touch the typography because we already set our global values for those right, so does nothing. We need to do in here. And finally we have the advanced features you can do a lot of things like you can add in certain emotion affects you can add in responsiveness to hide on certain platforms like you can hide certain things on your cell phones, how certain things with a tablet in order to make the design look better. But we're gonna go through those ass. We go closer in the advanced section. So right now I'm super happy about the background. I think it looks really nice, clean and professional. And if we go down and we click on preview changes right there, we can see that this is currently what we have added to our website, and I'm really happy about that. This is gonna be phenomenal and noticed this reddish overlay going on to really liking this . So let's move on to the next lecture and start editing our headline. Right. Which is gonna be this one? See your there, guys
12. Title: All right, guys, saying this lecture, We're gonna go and set the heading off for website order. Rather the title that we want to beat showing here. So if we look at our logo, it says Robin and Jesper courses to change your life so that we don't want to use that courses to change your life. Slogan again. Rather, we want to be more descriptive off. What the courses is about. What we are offering that issue, Nique. So let me show you an example here. Now, if we go to Pat Flee and his work is that a smart passive income dot com? We can see that he writes. Let me help you build a passive income driven online business. So that is what he is offering. He is offering to help. You lost me to build a passive income driven online business straight to the punch. We know what we're getting here. That's the sort of description that we're looking for in our heading, right? If you go to wordpress beginner as well, it says Beginner's Guide for WordPress. Start your WordPress Blawg in minutes. This is really impressive. And this is really good, because I know what I'm getting. I know what the website is about. There's no confusion. So this is exactly what we're looking for. So what? I'm gonna go ahead and do here, and I think you should follow suit with your website and with your own title is to click on this header here. And then we're gonna change the takes and I'm gonna write something like business made Easy . Let us show you how. And now we can see that everything here is written in a row, right? Because we only have one column and they call them. It's really wise. Everything. All of the text goes out long like this. But I'm actually going to separate this so that we get this piece of text down below if it looks good. But at least for now, that's what I want to do. But that takes itself. Is business made easy letters show you how so? What we are promising here is that we want to make sure the business the business that we're offering here is easy Business made easy. Let us show you house. We're offering to help them making business easy. And I think a lot of people out there kind of feel like business is tricky. Business is hard and we pride ourselves asked teachers to making complex things simple. And I really hope you guys feel the same. So we have our slogan which says Courses to change your life rights. We already know it's about courses Robin and Jesper. And then we have business made easy letters show you how, which is a really cool the title or description off what we're doing. Trying to summarize that all in one. So let's start editing this a little bit, right? So the first thing that I'm gonna want to do is make this bigger. So I'm gonna clicking on the fold and I'm gonna click on X l to make this way. Way bigger. There we go. This is looking much better already. And then when it comes to HTML tag, I'm gonna keep this on age two. And the reason for that is if you keep it on H one, which is naturally bigger, that's gonna mess up the search engine because the search engine is looking for a description off your website from H one. That's why I want to keep most of the content on age to okay, we're going to go through this morning s CEO section. So you want to keep it to age two to age six? I'm gonna leave this on age two and I'm gonna have the alignment to the left for now. This might change as we go. There's no preparation here in how I'm gonna make this title. This is the signing ass we go, which is probably what you're gonna do with your website as well or with more website that may come your way. So this is very educational. And then we might paste in a link here if we want to link to something. But we're not gonna do that. We just wanted to be descriptive. Let's move over to style up here Now appear in style. We're gonna do something important. We're gonna change the takes color now, As you can see, we have a rather dark background, okay? And we also have these red back front overlay, which is beautiful, but the black takes just isn't working out. And this is why I'm so happy that we selected are color palette. Because what I'm gonna do is go ahead and click here and then I'm gonna select white. Now, check this out. This pope's guys, this is looking so much better. And this is why the global values are great and we they're gonna come in really handy when we're editing. But we're going to be changing things along the way as well. So as we can see, this white takes it looks beautiful in and make things pop big time. I'm really liking this. If we go to typography in here, we're not gonna change the phone. That, I mean, that is that it's set already. But we can't further change the size like this if we would want to. I'm gonna go with something like this. I wanted rather big, right? The weight. That's gonna be the boldness we've already set that I'm not gonna use it. But the transform is actually really important, at least in this case, because I want to use this in upper case letters. So look at this title and asa use upper case letters. You can see that this pope's much more. This is much more off a title right now off a proper header. You could also be using something as like lower case or capitalized normal default. But I really enjoy using it with the upper case. We have style. If you want to use it in italic, for example, you want to use in an oblique There's a lot of different options we can use in the normal. I just keep it on the phone because the default is general is the normal. I don't want to do anything with this. I like this rather stable style going on right here. Then we can decorate it with a line. But we're not going to do that. We're not gonna make it fluffy, right? I like it clean. We can go ahead and change the line length here. As you can see, we're affecting the call them going on. I'm just gonna hit common set to reset it around, do it and then we can play with the letter spacing. But honestly, that usually destroys the font or we're not gonna play with that either. I'm gonna click on command and said for undue There goes I'm gonna press this one down. I'm really liking this so far. And then we can also add in a shadow shoot. We want to do that now. I'm generally not a big fan off playing with shadows and playing with this sort of effects . If I like what I see, which I do right now. So I'm actually not gonna do anything with this. If you want to play with Shadow, you can go ahead and add a color can be a darker color. Could be a color palette. And then just go ahead and play with the blurred, the horizontal, the vertical. And you're gonna notice the change just that it makes in the background right here. You can see it going on and said it as you want. I'm going to click on back to default because I don't want to use it at all that we have the blend mode and the blend mode is gonna be like templates and we're not gonna be using in the temple is going on because we have already said or on color, right. If I you scream, for example, that's gonna add a certain effect for use difference, that's gonna add a certain effect, I'm going to keep it on normal, and then we can move on to advanced in him. This is where things start to get a little bit interesting because in here we can change the margins, as we saw earlier as well. So if I said the margins to 50 I get to expand this entire column. So you get a bit more options, not only off how and where you are putting the takes, but also for the other columns are around. So we're going to be playing with this one. We're finishing these homepage up a little bit more towards the end. How we wanted to look like and then we have the padding is that we can change as well, which has a similar effect. We also have the said index CSS CSS class and this is all for the coding. We're not going to be using any of these. And in here we have things such as motion effects and motion effects. They can be handed, as you can see, if I could weaken, fade in here, for example, we're going to get a certain effect on this sticks. So if I click on fading down, we're gonna get a certain effects. If I go down and previewed, we can see what's gonna happen when the site loads. So this is the previous and this is where we are right now. And this is how the text pops in. Now, what I don't like with this is that it kind of takes away from the user experience. In my opinion, if it fits with your design, absolutely use it. I mean, you can make some really impressive stuff with this, but I prefer them or clean. Look, you want to go into the website, you wanna grab the information you're looking for? You wanna have a nice experience and then move on with your life generally, And most of the time, these effects are gonna take up space. So I'm not gonna play with them here because I'm liking this clean look and I don't feel like they're gonna contribute. Don't limit yourself. Play with them as much as you want. You're gonna have an eye for this. Most definitely. So I'm gonna click down motion to fix that. We also have background. And remember, now we're working with this column. So any background, for example, background color that I'm adding. There's gonna be inside of this column. So this is the section This section is really big right now. We made it huge. And inside the section, we have the background image and insight off these section. We have the call them. We have gone through this before and inside of this column. I can change the color. So look at this, for example. Now I made the color the background color off the calling Black looks terrible. I'm gonna click on clear, and I'm not going to use that. But I want to show you that you can. So the Harbury effect. It's also very interesting because if I use the harbor effect, for example, and I go in and I add a color, let's say that I'm gonna add a grayish color like that, something like this. So now what? I hover my mouse over. You can see that we get these effect going on, and this doesn't look two nights right now, but you can actually make things look really nice. Especially later on in the courts. When we start adding in into the courses section and you hover your mouse over, you wanna have this hover effect because it makes everything look so much more professional . But we're not gonna use it for the home page on this section on this place. So I'm gonna click, unclear, gonna click this one down and I'm gonna collapse the background that we have Border and borders just like before. You can change the borders by first selecting one like this solid we can add in a number and then you get a border around the column. Where's before? We got a border around the section because we were editing in the section, but we're not going to be using that one here. I'm gonna press this one into non s Well, but the border is very similar like that. Then we have custom positioning, and right now we're using default, right? We could do something like full with, like, I've shown you the difference with full with. It's gonna take up much more space and make things very different. But we can also use the positioning, right? So the position could be something called absolute. Now, if I used, it is as absolute. I'm able to actually drag it and drop it around like this, and that means that it's going to be staying there on the screen. The problem with these would playing with this kind of absolute and fixed that is that these are usually not gonna be very responsive. So I prefer to just keep it at the fault and not play with the custom positioning because it messed this up. The responsiveness for the tablet, for cell phone and for your website at times. But there's also with the overflow function is going to keep this from messing up too much . Generally, I recommend to keep it simple and allow elemental and allow your theme to make it good inside of the borders. That is so we're gonna collapse custom position and then we have responsive and responsive part is really interesting because if we look right now and we know that we are editing this column right with this element. So if I click for example on hide on laptop here and I click this to hide and now I preview the changes, you're going to see that this text is going to disappear, right? So it doesn't actually superior in the editor, but it disappears for the final change in the preview mode, and I can do the same on the tablets. So if I use a tablet and I go down to responsible and I go to tablet. This isn't going to be showing for those with a tablet, but is going to show for those with a mobile. You don't see this in elemental, but that's gonna be the effect when people are entering the website from the cell phone or tablet like we did in a preview. Now, the interesting thing, the really good thing with this is that you can edit things for a much cleaner display, right? So if I don't like this takes, I don't want this takes to show on the cell phone. I could just click on hide on Mobile and then this is not going to show for people who enter the website on their cell phone. But if you enter it on the tablet or if you entered on the desktop, it will show the really, really bad part with this, though, is that this is still going to load, right? And the problem with that is, is that instead of making some customization to make it look good, we just remove it. Overall, it's just gonna hide it loaded, but not show it, which means that it is going to slow your website down if you use this function a lot. So if you add in a huge nice image, for example, for desktop on Lee and then you click on Heightened Tablet and Mobile, that means that they will still load on the Talbot and on the mobile. And that's going to slow the loading time down even though it's not showing. So use these really sparingly, okay? And then finally, we have the custom. See, it says, but that is a pro feature, and we're not gonna be using that anyhow. So if we go back to content, have we go back to desktop mode, we can see that this is what it looks like right now. So if I want to have this jump down, I just need to click in here and it jumps down by itself. So if I want this takes to jump down, I just need to click in here and hit enter, right. So if I hit enter, you can see that I'm able to make spaces like this. But I don't want to have this little space that I actually made in here. So we're gonna do that once again and I'm gonna hit in Enter here and now we get a much nicer look. So you don't want to hit enter in here the way I did. That's a rookie mistake from typing too fast. You want to go ahead and hit enter inside the box to make it jump down one part. So this is looking really good. I'm liking this now. I don't like the ideal position for this. If you go ahead and we could come preview changes, for example, we can see that is going to be displaying somewhere in the middle Business made easy. Let us show you how I wanted to be higher up. I wanted to be somewhere around here. But in order to get that, we have to do one off the following things. We need to go to elements and we could use something like a spacer. If I add a space or down below here, I can change the size of that spacer and I can pope it up into the position that I want. But the thing is that we're going to be adding more things in there. We're going to be adding things like we might want to use a subheading, we might We're gonna want to use a description, and we're gonna want to use a so called call to action bottom. And all of these things are going to be changed in the positions off these, for example, off this heading off the description off the subheading, etcetera. So I'm gonna leave this here for now. And then as we go along, I'm gonna continue switching the positions and adding in elements such asked the spacer to make them into this place that I want them to be. But once again, guys, this is how it looks like right now, all of the customization that we really needed to make here was to make the text white is to make a space in the text and then make sure that there is a good takes going on in here because I'm gonna put this up into up here something, and then I'm gonna have the description and I'm gonna have a call to action bottom. And I might even increase the size of this. We will see as we go, how it fits with the rest off the design. But this is what I've settled for so far. I hope you know how to create the title nicely by now. And as always, if you have any questions, go ahead and talk with us. Will be in the Q and A and one final reminder. Don't do the way I did and hit space in here. You want to click here and you want to hit space in here, right? That's how you jump down properly. Sorry about that. So, guys, I'll see you in the next lecture.
13. Description: Okay, guys. So in this lecture, we're gonna go ahead and set our description. Now, a description is gonna be the piece of text that is underneath the title or the header. You can use those interchangeably. What do you call it? A heading or a title. Now, if we go and check up Pat Flynn once again, we can see this. His description here is introducing himself, and he's telling us exactly what he's going to be doing. I made to show you through my own experiments. Exactly what could stop trading time for money and start building a based in that works for you. I'm here to show you how it works. Now. This fits so well. Also that he says Hi, I'm Pat Flynn because he does have a picture off himself. Now what we want to do is explain more in depth, what we're about and what we're doing. But at the same time, we have a limited amount of space. He's already using quite a bit of space or quite a bit of text. And we don't expect everyone to be reading this because of the attention spot. So I recommended we short in this down slightly and then we'll leave a little bit to be discovered. For example, he's writing. I'm here to show you how it works. That makes me want to press the button that says learn more, right. In the next lecture, we're gonna create our own button with a call to action. See, ta. Now the learn more. Here is the call to action because you inspired, but it takes You want to learn more. So what we're gonna go ahead and do is go to our website that we're creating and just have a quick look right now it looks like this, and we're gonna put the text down below here. Now, as we keep building and adding more things we're gonna add about tennis. Well, this is going to change position, which is perfect, because I want this slightly higher. But we're gonna do some adjustments, ask for go, and I'll show you how that works. So we're gonna go in here and I'm gonna click and drag the text editor and then you can see where the blue line is That showed where it's going to be put. So I'm gonna put it right below down here. Okay, so now we have this piece of text going on. Now, I have actually pre written something here. So all I'm gonna do is right. Click and click on paste and I have Britain. Are you looking to build or expand your business but don't know where to start? And letters show you how literally. And the point here is that the sort, of course, is that we're doing This sort of tutorials that we are offering are going to be on screen and we show everyone what we're doing step by step exactly the way we're doing right now. So this is so much easier to learn and understand because you see what I'm doing and I'm showing you how it works. And hopefully you also feel that this is really simple to learn from. At least this is how I learned the best. So this text, it's pretty riddle because otherwise they'd be here all day. I'm not that spontaneously creative, and we're gonna use it, but we're gonna change it up now. The first thing we're looking at here is that we're using our default color, which is great and does a fine caller, but not on this background. So I'm gonna go ahead and go to style right away. I'm gonna go to text Color, and I'm gonna change it up to whites. I'm just gonna click on white here and there we go already. It's starting to pope so much more Now, I'm also gonna go down to typography to start changing things up like this size and everything. So what I'm gonna do is pull on the size here and just make it big. You're not that big. Make it bigger. Maybe something like around four They were going to start at 40. 38 they would go. And I also want some spaces in between here. So I'm gonna have these put up in sentences. I'm gonna click care and hit, Enter and he's gonna jump down, and I'm going to remove this space. They would go, and I'm going to be doing the same thing here. I'm gonna click enter there and then I'm going to remove that little space. Okay, so right now it looks like this. Now, this is a bit too big for my taste. I'm gonna decrease the size. Let's go to maybe something like that. I think 23. I think that looks really good, but I am not appreciating the space in between here, right? I wanted to be much more collective, so I'm going to go down to the line height and I'm just gonna start playing around with these and I'm gonna have it something. Mawr. There we go. I think that looks really good and natural. Right. So I'm gonna click this down, and then I'm gonna hate preview changes, and we're going to see what's happening here. So they're ago. I think it looks much better already. However, I think it's a little bit too small. So I'm gonna go ahead and change that up. I'm gonna go in here going to typography, and I'm going to be increasing the size maybe 28. 27. Okay, I'm gonna hit preview changes once again. OK, so it's looking quite good. Now, I enjoy this because it is readable, which is really important. However, I would like actually a little bit more space. And I would like to make the size off this title bigger in comparison. So I'm gonna go ahead, go back going to typography and increase the line height Okay? Something like that. There we go. There we go. I think that looks really nice. I'm going to go ahead and click on the title here, and then I'm gonna move to style typography. And I'm going to slightly increase this to, let's say, 45. There we go. Gonna click back on this one. And now I'm gonna heat preview changes to let you see what happens. Business made easy. Let us show you. How are you looking to build or expand your business, but don't know where to start? Let us show you. Literally perfect. Really liking this. I'm gonna do one more decrease in size in here there and then finally preview against. So this is the designing process. It's gonna be this little tweaks in the little tweaks there until you're happy with what you're seeing. So I'm really enjoying this. Actually, I think this got quite perfect. Now, what I'm not enjoying is how the title is going straight into the moon right here. Okay. So what we can do is actually changed up the positioning off the background. Now, remember, we're gonna add another thing down here. That is the call to action bottom, right? We were gonna write something, like, learn more or start here, something like that. But we're gonna link that bottom to the start here, page, which we're gonna build out later. You're following along. Right? So we're explaining up here. Business made easy letters. Show you how, Right. So how are they gonna show us? We're explaining that we're all about making business into something easy. And we want to show you how we do that and that. Are you looking to build or expand your business? Well, if you are you at the right place, right? That's pretty much the underlying saying. But dont know where to start. Let us show you how literally. Really good. It's an incentive is targeting the right people. And then we're gonna have the learn more. But for the background right now, even though we might have to microchips, I want to show you how you can along the way. Micra. Just these things. They look really good. So what I'm gonna do is go to L. A mentor home here, and I'm gonna go back and click on the edit section. And then where we have style, I'm going to go down to position, You see where it is? Default. And I'm just gonna try on Let's try center center and see what happens. You're going to see that The background, the picture itself. It changes a little bit because it's changing the focal point in the background image. So I'm gonna go ahead and click on preview changes and look at the easy part there and see how it moves. And now we have the moon that has moved upright business made easy. Let us show you. How are you looking to Bill to expand your business? I don't know where to start. Let us show you how literally. So I am loving this. I'm absolutely loving it. We're fitting all of the text inside off the air balloon and under the moon, and this is gonna pop up again. But then we're just gonna micro at just the background to make everything look nice. So in the next lecture, guys, we're gonna build that will start here or learn more butts in depending on what you are interested in. But this is how I build out the title, the description and then a call to action about it. And then we have this background right? There are more options. We can play within here when it comes to the style off the description. But personally, I think that when you nail the size and when you nail the letter spacing and we're not gonna play around in a decoration weight or anything, then you're all good to go right. It looks perfect. No need to make it more complicated than it needs to be. Let's move on to the next lecture. Great job.
14. CTA Button: All right, so in this lecture, we're gonna go ahead and create our call to action Bottom. So in other words, we know if we have done so far, we have set the title business made easy. Let us show you how. Then we have made a description that goes, Are you ready to build or expand your business but don't know where to start? Let us show you how literally. Now we want to allow them to take some sort of action right now for this takes a an action button that says, for example, learn more would make the most sense for your service. Perhaps you're offering a free consulting, It might say claim the offer. Word might say contact us, or it might say subscribe. Now they call to action is going to depend on first and foremost your service. But also, of course, what you are writing about the service, What you're offering on your front page. Now, the idea here is to explain what we're all about, what we do, what we have to offer and then create this call to action button that is gonna take them to start here now. We might as well have called this start here, but I want them to have the ability to learn more, which offer something different than the start here. Even though it is the same thing, right? Because they're interested and they want to learn more. Start here. That means more of a taking on action. They're starting something, but learn more. That's still just out of interest in curiosity. So it's easier for them to press that bottom generally. So we're gonna go ahead and create the button, and it couldn't be simpler. Guys, all you need to do is go ahead and click your words his button, and we're gonna drag it and put it down below. Here and now we have our bottom. So let's start editing this so it looks good and it fits the theme. Now it already does, because it has the accent color that we have set for it, which goes perfectly with our theme, so that's really handy. But I still want to change this one up right now. The first option we have up here is the type. Now we don't have to concern ourselves with that because we have already set the colors and matched it and everything. But in here we do have some interesting templates, if you will. That's gonna allow you for, for example, the green for success. Warning these air juice, you know, recommended callers for that sort of feeling or danger, which is the darker form off red. Now we're gonna go with default, which is the color that we send our color palette with our global values because it fits the themes really nicely. So we're not gonna play around with this, But the text, Of course we are gonna play around with We're not gonna have a text that says click care. Now I'm gonna use learn more for these takes. But once again, the text you choose is going to depend on what you are riding. Generally, I prefer to write Learn more rather than start here, especially if I have a start here. Bottom up here because I find that it's generally easier for people to click on, learn more rather than start here. Okay, Now, the next thing we have this link off course, we want the button to do something. So the idea is that for them to learn more, we're gonna go ahead and funnel them into our start here. Page. Okay, so what we're gonna do is that we're going to go up here to start here, right? Click and then select copy link. And then we're just gonna click here, remove this sign right, click and paste it in. OK, so now if I go ahead and I could weaken preview changes and then I go to learn more and I click there is gonna take me to the start here site you can see. I mean already. If you are comparing this design with what we're doing now, it's a whole new level, thanks to l a mentor. But anyway, this is where we're gonna funnel them. And, of course, we're going to change. This s well, we're going to redesign this using elementary. But now we have set the purpose for our buttons. So let's click back here. So now we know that if they could weaken, learn more, they're gonna be taken to the start here page, which is different from this home page that we have. And we've gone through what they do, how they work. It said, I hope you remember. So the next thing we can do is change the alignment. I actually prefer to have it in line like this. So if you see we have the title, that's perfectly in line with the description. That's perfectly in line with the button, and I prefer to keep it like this. I really like this clean in line look. So for now, we're gonna keep that, and then we can change this size and I prefer to go with a medium size because I just think that it Popes a little bit more. If we see the difference from here to here. I just think it has a nicer looking. I prefer a little more sites. It just fits him better. And then we're gonna go down. We have something. We're that's cool. I can We can change the icon to anything. We can have the address book look, we can have the Let's say they have muscle logo. If you would like to this hilarious that the Amazon loggers in here, I mean, basically anything apple. Even there's a lot of I comes in here to choose from, but honestly, not for this sort of button. I really don't recommend it if you're selling something on Amazon. Of course, it might be cool to add that sort of button for purchasing that. And then you could have an affiliate link, etcetera. But not for this. I don't recommend that. And then we have about an I D. But we're not gonna give it any idea. We don't need to do that. Going over to style a couple of things that I want to change with this. And the first isn't typography, and we can see that it says learn more. I want this to be in all capital, and I want to make that takes a little bit thicker, a little bit fatter. So I'm gonna go down. And the first thing we have here is family. And remember, we already center global values. We already have our fun. I'm super happy with that. I think it looks great. And then we have size, and we already said it to medium. But if you want to have a more in depth look and be more precise, you can just set it in here. But medium is about third scene 14 summers. I'm gonna set it to 14 like that. Now, the wait is the thickness off the text. I'm gonna set it too bold and you can see that it gets a little bit thicker. And I really like that. And then I'm gonna click on Transform, and I'm gonna use the upper case letters. And basically, I always use upper case letters on all off my buttons. I just think it looks so much better. I think it Popes much more, and I really like that. I'm not gonna do anything in the style. I'm not gonna do anything in the decoration, and then we have the line height. I'm not gonna touch that. As you can see, it is going to change the box like this a little bit, but we're not gonna be messing around with that. We're gonna change it in different ways using the margins, and that's in a little bit. Then we have the letter spacing and again be careful with this because it messes up the front. I'm not gonna touch it. So there we go. I'm really happy about that. What we also can do now and this is exciting. I really love this is to use the harbor effect, because if we preview the changes that would just have done. We can see that it actually looks really nice. I'm enjoying this. Look big time, Okay? But nothing is happening when I'm hovering my mouse over. And for me, when there's something going on when I hover my mouse over that actually implies a lot of quality and professionalism and also his highlights satisfying. It means something can happen when I click there. Therefore, I'm much more likely to click. Kind of symbolizes, Hey, click me really effective way to get people to click on it And also for the design. I think it looks great. So we're gonna go back, and we're gonna make sure that when you hover over it, something happens. So the first thing you want to do is look on, hover and then we're gonna go down to words Is hover animation right in here? There's a bunch of different animations. And if you click on it, for example, Bob and I hover my mouse over, You can see what it does, right? You can see what the animation is. Skew. I click on it or I'm sorry. I hover my mouse over it. You can see what happens Now, when it comes to buttons, there's only one Onley, one animation that I every use and that is the grow animation. And it looks like this and I really enjoy this. I think it gives it such a professional pop effect. And to be honest, I don't think any off these effects. Look that good, unless you have a really nice team that goes hand in hand with it. I mean, all of these effects are subject to how you use it in your design. But generally I only go with the grow effect. Now, this looks really nice. If we go ahead and we preview these changes and I hover my mouse over like this, it gets this really nice pop effect. I love that, actually. So this is awesome. I'm liking this big big time Now. I actually would like something else to happen to you. So when I hover my mouse over, I would like it to pop and also looked like I am selecting something. You probably know what I mean. Like like when you're selecting something, you can see that it changes color like this or this or this, or if you are working with any files or any maps. If you click on it, it gets selected. So I want to kind of give that selected ethic when I hover my mouse over here. And the way that I'm going to do that is go ahead and change the background color so that it gets a little bit lighter when I hover. My mouse over is a subtle change, but it does a big impact. It packs a punch. Definitely. So what we're gonna do is click on background color, and here is where we can make it a little lighter. Now you can see that the color that we're using, it's not actually in here. So what we're gonna do is go to the upper left here and we're gonna go to default colors. And I'm going to click on this, read that I'm enjoying so much and I'm gonna go ahead and I'm going to copy this color code . And then I'm just gonna go down and click on this button. There we go. And now I get right back in here. I'm gonna click on hover once again, and then I'm going to click on background color. Okay, so all I need to do now is click in here, paste it in hit center, and there we go. So what I'm gonna do is just pull this down slightly. Nothing too crazy. And I wanted to go, you know, super light and, you know, flash my entire computer screen or go white or anything. I just wanted to have a slightly lighter color. So, like that. So if I hover my mouse over, it looks like this. I'm really liking that. So let's check it out in the preview. So I'm gonna hover my mouse over, and we can see that it gets a nice light color. Now, to me, that's actually a little bit too light still. So I'm gonna go ahead and I'm going to just increase this a little bit. They would go. I'm gonna click come preview once again and hover my mouse over. And, yeah, I'm liking this. So as you can see, the effect is quite subtle, but still packs a punch. It really feels like I'm selecting this right now, so I'm really enjoying this effect. Okay, so I'm gonna keep that You don't have to if you don't like it, but this is how I like to decide. I like to have the growth effects on the buttons and also have this increase in lightness. So it looks like I'm selecting. I think it looks really good. Okay, so we have that. Now we're over here at the border. Okay, So there are two things that I want to do with this. Bottom number one is that I want to round out these edges a little bit more, and I also want to give it a more wide look. And in order to give it a wider look, I'm going to decrease the space on the top and on the bottom and keep this kind of thickness on this side. Okay, so the first thing I'm gonna do is go down to border. So if I increase this, this is going to be increasing the borders around his, so it rounds out the edges. Check this. If I click on these, you can see that the borders are changing around this widget. Okay, around this element is getting really round. I think this is very excessive for for this design. I'm going for something saddle like, and then I keep just five Let's go ahead. And Previ that this is before and this is after a subtly thick. But I think it looks really nice. You can see that there is a rounding in the corner, so I really enjoy that. So the next thing I'm gonna do is give it that bit off a wider feel. OK, so I'm gonna go ahead and increase this. So if I'm playing around with this, you can tell that it's for right now it's changing the entire elements, right? All the entire padding around the text right here and they're all synchronized. The left, the right, the up and the bottom. Now what I'm going to need to do is click on this that says link values together. So then I can on link them and I'm going to change the top 2 15 right? And I'm going to change the bottom two 15 as well. So I'm gonna go ahead and preview these changes and see where we get on. You can see that the books changes size. We have shrunk a bit here, but even more so here and here. So I'm really liking this more saddle look, but still wider. Look off the button. And if I hover over, you get this nice popping effect. I'm really liking this. So by going down to 20 on these, we also decrease the padding. But I really like that effect. Now, if you want to have the button that looks similarly and this is decently universal. A lot of people like to have a button is about this size. And with approximately this patting, all they need to do is go ahead and keep the padding for the top and the bottom at 15 right and left at 20. I really enjoy those values. OK, so we're not gonna play with the border type. Nothing we need to do there in the advanced section this is going to be playing with the entire section, okay? And there's nothing that we really want to do in there Now, for example, if I start increasing this, you can see that I'm increasing the section size and similarly, if I go down to background and I give it a color in here, for example, I click on color. That's gonna be the color off this section, and we're not gonna want to play with that. We're just gonna want to fix the but and make it pope like this. Make it look good. And we're not gonna adding any effects for it either. Okay, so let's hit preview changes one more time and check it out. And here we are. If I hover my mouse over, look at this button. And if I click on it, I'm going to be taken to the start here. Page, I'm really happy about this. Guys, I think it's starting to look really awesome. To be honest, I'm proud of this. So what I could also do now is have a little look around. For example, do I like that The why goes into the moon so much? It's all off the text. Readable. For example, Are you looking to build or expand your business find? Because white goes well in this background, this part goes well too. And this part goes well too. But if this would have been a little lower and getting to this yellow over here, this would not be quite as readable. Okay, So for example, if I wanted to change around, if I wanted to move around this text bit a little bit Well, I would need to do is go to elements in here and add something called a spacer. Now, check this out. If I add the spacer in here, this is just gonna take up space. That's all it does. It takes up space in the section and it pushes this down. So check this out. Them to preview. We have it here and now it gets pushed down here. You can see that this is looking quite nice as well, but I like to have that takes a little bit higher up. So I might Houston's. But I might do something like real micromanagement. Something like four, for example, So that the why slightly lower from the moon. I'm gonna just preview these changes there. It looks like they're looks really good, but we can see that the literally here right now, it's not as readable. We might do this ridiculous micromanagement, and I just a one again. This is the sign purposes. This is what do you prefer we're gonna check it out on. Actually, it's still a little bit low, so I'm just gonna go ahead, right, click on it and click on delete. There we go. I'm going to preview the changes. And yes, this is looking really good. So I'm not gonna be using a spacer here, But you might want to do that in order to fit your design in order to make sure that all of this looks good towards your background. Right? So, guys, if I could I would high five you. I will. Anyway, great job. We made it this far. I'm really happy about this. We can actually leave. This asset is right now and move on to the next section. We just finished editing the above the fold section. Really good job. Now, if you have any questions whatsoever police ask them in the Q and A. We will answer them within 24 hours. Let's move on to the next lecture. Great job. See, there
15. Add Testimonial: All right. So have finished editing the above the fold section on our home page. How exciting is that? Now we're gonna go ahead and proceed with adding content for our below the fold sections on our home page right now if you've been following along the course from earlier on, there was a lecture when we were checking out other successful website checking out their home page and taking notes. Right. You still have those notes? Well, I do whether there are on paper for you or digitally like I wrote it. I mean, this looks terrible, but it's very effective and one thing that I wrote in here was So show proved right. They need for social proof so that visitors can trust you and know that what you have to offer is off value is the same thing. When it comes to Facebook pages that more likes, the more likely we are to trust them or instagram or any platform websites. They function similarly. It's just that you don't really see how many visitors they have. We're gonna need to add this form off social proof so people can trust us, OK? And of course, you get away with more. If you have a really big name, are really big brand. But we don't not big enough. You need to have a huge and even then still want the proof. So what we're gonna do is actually go ahead and add in a testimonial right below the fold here. So what we will have done by now is shown on what we are about and guided them to further content on a website which we are going to edit in the They were in the start here section , but we want to introduce them to even more things on our website and build its social proof . Eventually we're going to do things like Adam E. Mail open, etcetera, etcetera. So let's start adding the social proof, inform off a testimonial, and that's actually super easy to do. All we need to do is scroll down here to the lift, find the testimonial. We're gonna go ahead and grab it and then release it and they will have a beautiful testimonial templates set up already. I mean, honestly, it's ridiculous how simple it is with elementary. I love this program. So we're going to start setting this up bit by bit, and we're gonna do it together. Now. The first part is the text itself and the text. I'm gonna use a review from one off our students, right. So I've already took in the liberty of going ahead and cope it that takes from are you dima course? So I'm just gonna go and paste that in. And the wonderful thing is that this is actually a really review. This is not faked in any way. And it has some really beautiful and kind of words that says this is the best and most complete online course on how to grow your online business with drop shipping. I made over $1200 within the first week off sales. All thanks to open Jeffers Monster class. Now, this is social proof, if anything, right. So this is really good material to be working with, and this is gonna be so much trust for our website for our courses, which we're going to introduce them to etcetera. This is a wonderful review to use. So what, we're gonna go ahead and do now is once we have added in the content in here, we're gonna go down and choose the image and the image is gonna be off the reviewer. Now, I've already spoken with this student and I'm allowed to use his picture. He actually sent me a picture, so I'm gonna go ahead and grab that and set that one up. So I'm gonna go to upload files. I'm gonna go to select files and then I'm gonna click rights here. There we go. Now you'll notice that this file is actually quite big. It's one megabyte and you can see that the pixels are huge is over 3000 by over 2300 we're only gonna use this for really, really small sites. So adding in this huge picture that has this big loading time, that just doesn't make sense, even though it's a really cool picture. So what we're gonna go ahead and do is actually change the image size to thumbnail on. What that is gonna do is that the loading time is going to be severely decreased. The size of the picture is going to be serial decreased. And yet there's gonna be no loss of quote because we're using such a small picture, right? So that is all set up. What we're gonna go ahead and do now is just check it out, check it out in the preview and see how it looks right now. So we're going to scroll down and we can see. Okay, here we have the text. Here we have the picture. I think it looks really nice. And his name isn't John. Don't is not a designer, but we're gonna go ahead and change that. But so far, everything, Lou, should these loading superfast And we are really looking for that. So we're gonna set up his name. You work Emeric, son. And the title. And what I'm gonna do here is right, Founder gonna do a comma mark, and then I'm gonna write his website, which is key video store dot com. Okay, He's the founder off this wonderful store selling bohemian items, But I'm not gonna write the w w w took make it into a link. And I'm also not going to write his link in here, even if you could. The problem is that if people click on this link, they're going to be detracted from your website. Now you could add in the link as an outbound ling. So you help other with there s CEO, but I don't recommend it. I recommend your low people to focus on your website. But should you decide to add this link, go to options and click on open in new window. This is very, very important to make sure that they will still be on your website. But we're not going to add in the Lincoln here. We're just gonna add in the title right founder and then add in the website so that we are still referring there. But we're not linking there, okay? And then scrolling down. We have the image position, which is aside. It could also be on top. So we get it like this. But I don't really like that. I like that. It's safe space when it's on the side like this. And I think it looks really professional. So that is it for the content right now we're gonna move over to style. There's a couple of things that I really want to change her now. The first thing I want to talk about is the current outlook here. Now we can see that here we're having a darker background with white text. Okay, so the kind of style that I'm going for here, it's a contrast. Now I'm gonna prefer to have a white background and then have a darker text. And I really like the signing, the sort of styles on website when you have a certain callers on the top, and then you contrast with the first next section on the bottom with the below the fold. So we're gonna go ahead and do that right now to now for the content. I actually want to change things up a little bit. First of all, I don't like this takes color. I'm gonna go in here and I'm just gonna select. There we go. A darker gray. I think that takes Popes out a lot more. Then we're gonna go to typography. I'm not gonna play around with the front. I think the font is perfect. I will, however, play around a little with the size. Gonna make it a little bit bigger. There we go. Let's go with 21. I think this is looking really good, so it pops a little bit more. I think that looks really nice now. The weight. I'm not gonna play with. I'm pretty sure that 500 is to default. If I click on it, nothing happens. Right? But 600 is just gonna make it too thick. We see it almost becomes the ball like this. So we're not gonna play with this. We're also not going to transform into an upper case or anything like that. But we are gonna make it italic because look at this. That really changes the entire outlook off the text. Now, whenever I'm adding in testimonies, I always always put them in italic. I just think it's such an important part of the design kind of makes that takes Pope. And also, people generally expect this sort of italic when it comes to someone else's words, right, because it makes it takes pope in on other ways. We have our own design, and then there's this sudden italic coming from someone else. Think it looks really, really nice. We're not gonna do any decoration. We're not gonna play with the line height or letter spacing. We're gonna press this down like this. Then we're gonna move over to the image Now the image size, I think looks really good, but we could be playing around with it a little bit if we wanted to. I'm gonna put it at 50. I think 50. It's a really good size. We're not gonna have any border. And you will know that the border rages, even though it doesn't show her it's already set him. Because if I said this to zero, you're gonna notice that it becomes a square just like the original picture is. But if I put this to 50 he's gonna have this beautiful round because it changes the border . Now we're gonna talk more about the borders in a little bit. Okay? So we're gonna collapse image, then we're gonna go to name. Now. I want to change this up a little bit, too. When it comes to the name, I actually like it. I'm gonna put it to pitch black, even though this doesn't make any difference there. I see. So I'm actually really happy with that for now. But this underneath there, I'm not really digging that. I think it's two lights. I'm gonna go with text color. I'm gonna go ahead and make that darker. And there we go. Think it looks so much better already. So now we have matched the cooler for this text underneath and this one. So let's go ahead and check it out in the preview mode. So there we go. So far, so good dry. Think it looks really nice. Now there's one thing that I'm really not digging in here, and this is gonna be such an important aspect when it comes to designing your Web site, and that is the space between the sections. Now you can see that already. From here. There's a little bit of white popping in down below that there's hardly any space between the white and the text, so there's not really much of an outlook. It's like you have this beautiful image here, the beautiful background that takes the message, and then it gets directly into this. This is so condensed now, I wanted to be more spacious. I want to create more space between these ones and for the coming sections, so we're gonna talk a little bit more about how to do that. So, in order to do this, what we're gonna do is that we're gonna go ahead and click on Edit Section for this part right there and then we're not going to change anything here. We still want the content of the box. We don't have to stretch the section because the section is actually already stretched out here by default on the theme. If we had a theme that we're boxing itself like this, we could stretch it all the way. But as you can see, it already does. So we don't need to use the stretch section. So what we're gonna do is we're gonna move over to advance, and I'm gonna show you the difference between margin and padding what they are, how to use them and what they mean. Now, in order to display this much easier, I'm gonna go ahead and make the background off this section Black. This is only for demonstration purposes. That this time we're gonna use is gonna be white. But I'm gonna go to style background classic changed the color to pitch black. There we go. And then I'm gonna go to advanced. Okay, So let's start talking about margins and padding. So with margins, But we're looking for here is that by increased in the margin, we are increasing the space between this section and this section. I remember in this section we have a column. You can see that light blue here. That is the column and the other dotted line up here. That is the section. And then inside the column we have the element, right? We've gone through this before in the anatomy lecture. Now, if I put 50 on this, you're gonna notice that we're actually moving this section away from this section and in between him, we get white, we get pure white. So if I go ahead and I preview the changes here, we're having this sort of space in between. And while I want this space, I still wanted to be in the same sword off color, right? And this is why I changed it to black, because if I changed it to what, you were gonna notice this difference. So what we're actually looking to do is move the elements the content away from this section. We're not actually looking to move the section away from the section and the way to do that , it's actually by going back, we're going to reset these and increasing the padding. So what padding does is that it increases the space between the column and this section. Right? So if I put 15 here, you're gonna notice that here we still have the section The section is still connected to the previous section. Nothing has happened, but the column, this is the column around here, they call them, has moved away from this section. And because we have Joe someone collar for our entire section, that means that we get to keep that caller. So now if I go ahead and preview the changes, we can see that the caller is actually the same. These sections are still connected. But now we have this nice, beautiful space in between here that we are looking for. So I'm really appreciating this design and this is gonna be so important when we are working with this kind of different colors in the section. So once again, just to recap by increasing the margin, you increase the distance between the different sections. OK, By increasing the padding, you are increasing the distance between the column and this section. And that's gonna be the column or columns that you are currently editing. Remember, we're clicked on edit section, so I hope this is really clear and makes a lot of sense. Margin is for section and section padding is for called him and sexual rights. So let's go ahead and go to style and remove this collar because we're not going to be using that one. And we're gonna go ahead and make it into why. There we go. It's a really nice luke, too. So let's go ahead and preview these changes. So there we go. I think this is starting to look much better already. I'm really liking this space in between. Also notice right now it's gonna be different depending on the resolution on your screen, of course. But for me, I have a little bit off a white stripe down here. And even if I scroll down a little, it's still white. And then comes this wonderful text and then we have the picture. We have the name and we have the information going on in here. This is just one section and there's gonna be more, more. So we have, like, this scrolling home page. But this space there is oh so important. So what we're gonna go ahead and do next is actually to leave it like this now I'm happy with the editing of the section. There's nothing more that I want to change here. But what I want to do is actually change this up and emphasize some of these words. I think they fall a little bit flat. So I'm gonna go ahead and click in here to get back into the editing off the elements off the text. I'm gonna move to content. And now, guys is gonna be the first time that we actually write our own cone. That don't panic. It's super easy. And this is pretty much as far as we're gonna go with coding. So what I'm gonna do in here is actually make some off the words bold, right? So what I'm gonna do is choose a couple of words. Let's see if we go back to the website in here and scroll down. We can see. Here we go. We have the $1200 within the first week off sales. I'm gonna make this part bold. It also looks so nice because it starts on the first line here right on the second line. But I'm also gonna go ahead and do ease bold in this 100% satisfaction guaranteed. I mean, honestly, this guy, he is promoting our course so well with these wonderful words. So we're gonna go ahead and emphasize the most important words Say, which is also gonna make this section stick out more. So let's start in here. I'm gonna click here with my mouth. So I am selected there. Then I'm gonna go ahead and make this sign, OK? Now, if you don't know what this sign is, it looks like this this sort of sign it is the sign that is right below a on the key word and to the left off said, OK, so we're gonna make this kind of sign and then I'm gonna write a B. There we go. And then I'm gonna hold shift, and then I'm gonna click on that sign again. So it's almost like we're putting a wall inside of this sign. I noticed that everything is getting bold right now. Everything after this is getting bold. So what we're gonna do is find a place to stop the bold within the first week off sales. There we go. So I'm going to stop the bolt here so all I'm gonna do is create this sign again, do a forward slash and then write a B and then shift and click on that sign against. So that stops the bolding. So now we can see we have this sort of bold on Lee on this part where it says $1200 within the first week off sales, and then we're gonna go ahead and do the same at 100% satisfaction guaranteed. There we go. I'm gonna write B on. As you can see, everything is getting bold, but I'm gonna end it right here for slash beat. There we go. So this is looking really nice right now. It's popping a little bit more. We're gonna go ahead and preview these changes. And if you think that that is complicated don't worry. I'm gonna go ahead and set the code out in. The resource is you can just go ahead and grab a copy pasted, and I'm gonna show you where to write your text. You can use that any time. Okay, Scrolling down. It currently looks like this. This is the best and most complete online course about how to growing online business with drop shipping. Really nice. I mean, over $1200 within the first week off sales we got this. Bolding looks really nice. All thanks to Robyn Ingest Spurs monster classes The practical step as step by step court And it's very easy to follow. Anyone can do this. Bold earning 100% satisfaction guaranteed. You're Kim Erickson, founder kid, you store dot com Awesome. Awesome. Awesome. I'm loving this section. So so far, I'm happy about everything with it. And I am gonna be satisfied with this now as we go along and we continue to be louder side with my two cent weeks here in their own different things. But right now I am loving this. And, as always, don't forget that when you are done, when you're happy with it, click on update. Make sure that you are always saving your work and that you're always keeping things up to date. Even if you are only saving the draft right. Always keep things safe. So that is how you create a testimonial on your home page. Now, if this is the plan for yours as well, go ahead and follow suit. Otherwise we're gonna continue on the course and you design your website the way that's gonna apply to you. See in the next lecture, guys.
16. Add Email Opt-In Version 1/2: All right, So in this lecture, we're gonna go ahead and create an e mail, often section and off course. There are countless amounts of the science you could do for your email open section. However, I'm going to be showing you two different versions. And in this lecture, we're gonna go through the first, and this version is going to be the full cover version, just like we did up above. In the above, the full design we're covering pretty much the entire screen were offering. It takes an explanation and then a bottom. Now we're gonna do a similar design here for the email Upton, where we're gonna use pretty much the entire screen, and then we're going to offer them something and then have a call to action and then adder our email hoped Inform. Okay, so let's go ahead and start this design. So the first thing that I'm gonna do is go ahead and click on the plus here because for this design, I'm going to add two columns and the reason for that is because in here I am actually going to be adding the elements and the way that I'm going to be doing that is by using first a header, I'm going to be describing the offer that I have, which in this case, is going to be digital marketing hacks. Course. So we're going to be offering a free coupon so that they can get our took 10 digital marketing hack scores four free. If they sign up to our email list now, you always want to have something to offer to give them a reason to sign up, Right? So that's gonna be the first thing now down below. There is going to be a text, writes a text that explains what is in here and what they're going to be getting and down below. There is going to be the email often, and we're gonna go ahead and use male poet for this right? But before we go ahead and add male poet, I know there's a lot of things going on, but it will all make sense in a second now before we go ahead and add are male poet in here ? We're gonna go ahead and create a male poet form. If you've been following along the courts. You know that this is an essential part designing the four making it look good. Okay, so let's go ahead and do that. So now the first thing we're gonna go ahead and do is go down to male poet and then go to list. Now, remember, we have different lists in male port for different reasons. For example, we have the common subscribers list. We have the sidebar list, and now we're gonna go ahead and do a home page. Digital mark getting hacks list. There we go. And the point of this is so that when people sign up here, we can go ahead and make it sequence to make sure that they get the code and the link to our digital marketing hacks course. Right. So when they sign up here, they get added to this list that we can automate that process. And if you haven't, go ahead and check out the mail poet lecture later up in the course. Because we go through how to do all of that in there, and then I'm just gonna write. Include did so Mark getting hacks, course plus link. And this is just for my own. I so I can remember what's included in him what I'm going to be doing. And then I'm gonna click on Save. And now I'm going to go up two forms up here, and then I'm gonna click on Add new, and I'm going to be calling this home page page. Digital marketing hacks. There we go. And I'm going to select the list, which is going to be the home pages of marketing hacks list just like that. Okay, so now we're gonna go ahead and this sign this one, and the first thing I'm gonna do is go to Fields and I'm going to add in first name and put it up above there. I want this to be really simple, right? So I'm going to click on edit display, and I'm going to have the display label put inside to save space. And I also think it's a much nicer design. So instead of having first name appear, it's going to appear inside here, and the first name is not going to be mandatory. So look at that looks really nice. And then the email I'm going to have the label put inside. And, of course, email is always mandatory, but the first name is not. And then I'm gonna go ahead and edit the label for the subscribe button. I'm gonna write something like send me the hacks, something like that, and click on Done. There we go. And now I'm gonna go ahead and click on Save, so it's saved. So let's go back to L. A mentor in here. Now, what I'm gonna do is go ahead and click on this one and drag it in down below. There we go. So now I have added the three different elements and this is not the form gonna be using. I'm gonna change, too. Home pistons don't marketing hacks form looks a little bit different. It much cleaner has a lot less stuff on it. There we go. They would have sent me the hacks about. That looks really nice. And I'm going to remove the title, actually, and the reason for that is all of the text that we're gonna add in here we are going to be doing ourselves because it looks much nicer that way. So here we are. Now it's time to start this signing this. Okay, But before we start designing this, we're going to go ahead and add in our background picture. So just like above here, Remember, we went ahead and we found this picture. We made this section really big, and then we added in the different elements and would designed them together so that they look really nice and clean now. Similarly, because this has this sort of display and we're gonna have it alongside. Hey, we're gonna have want a focal point off something in the middle here, right? Because we're going to be spending all off our content to the left. This is why I have created two columns to keep all of this to the left. And then I'm gonna have a nice background picture with something is going on, too in the middle and slightly to the right. And the other email often is going have a slightly different disciple follow along here is gonna look really, really nice. So, guys, do you remember how to do this? Right? I'm gonna go ahead and go to edit section and I'm gonna go to style in here and now it's time to actually find a background image. So picks obey our good old friend. We're gonna go ahead and find a really nice background image that we can use. So this time, remember, previously I had two words I was thinking about. The net was inspiration and freedom. And I'm actually going to go ahead and search for freedom this time because that's such a powerful word of such a powerful feeling you want to give away and then I'm gonna change things up a little and going to there we go orientation. I'm gonna put it on horizontal. And then I'm also gonna make sure that the size is at least 1900 times 1000 because he wanted to make sure that it gets really wide, right. I mean, the demands air high when we're having this sort of full picture so that it fits properly, and then I'm also gonna change the category, and I'm going to put it to people because they actually want the person in here to make it a little bit more interesting. So we see a couple of different pictures in here, and there's a lot of different things you can do. So here, for example, what I could do is used this picture and then put all of the content in here right you see , there's this nice open space and then there's something going on to the left because we have two columns and we're only gonna feel one column. I could do something similar in here. Something is similar in here, though. It's a little crowded and something similar here. And here you get the point. But what really stands out for me is this one, because she is placed to the middle slightly to the right. There's a lot of space in here for the text and honestly, this to me this is a really nice freedom picture. So I'm really loving this. I'm gonna go ahead and download it. So I'm gonna click on free download here, and I'm gonna go with this one. You always want to make sure that the pictures below one megabyte this different place and I'm gonna click on download and look at this Free for commercial use no attribution required. It's perfect. And then I'm gonna go back to L. A. Mentzer. I'm gonna click in here. I'm gonna go ahead and select the file. Here it is, and I'm gonna click on Choose And here we have it and it's been optimized already, So that is really nice. And I'm going to click on insert media rights. So, like we can see, there is not a lot going on right now. There's a couple of things we're going to want to do. Number one is that we are going to want to expand this whole area. Right? So we're gonna go on layout, we're gonna set it to minimum heights, and then I'm gonna go ahead and write in 700 because I remember that that is a really good number. So there we go. It's covering a big part of the screen looking nice, but the image isn't really fitting, is it? So we're gonna go to style, and then we're gonna go to size, and we're gonna go to cover. So there we go. This looks really nice. Actually, this is perfect. This is just what I wanted. We can see that she's taking up this space, and in here we can be putting our content and all of our stuff, so that is really, really nice. So I'm loving this so far. There's a couple of things I want to do because, as we can see, there's a lot of dark going on here. There's a lot of red. This is white. I love the contrast, but this is still a little bride sticking out. So I'm gonna go to background overlay. I'm gonna go ahead and go to the Classic in here, and I'm going to click on color and then I'm just gonna pick a color. So I get the red. This doesn't have to be exact. You could adding the color code in here, but this doesn't have to be that precise. I just wanted to be they would go a little bit more red, and then I'm gonna change the capacity so we can see that the picture is turning slightly more red. There we go on really liking this. So check out the difference between this is a super light, and this this is a little bit more red going on, giving it more contrast. I am loving this. This is fitting perfectly with our reddish theme. Thank you. So this is perfect. Let's check it out and see how it looks like right now, I'm gonna go ahead and click on preview changes. So scrolling down, we can see that this is actually really nice, but she's not really fitting in here the way that I would like her to. So I'm gonna go back in here and I'm gonna be its style. And then I'm gonna go down to position, and I'm gonna try out some different positions for her. So the 1st 1 I'm gonna try is center center, Okay? And then I'm gonna kill you. Can preview changes and see how that changes things up. Scrolling down. Okay, Much, much better. Super happy with that. To be honest, this is looking really nice. It's cutting off for food here a little bit, but actually, I think I can live with that. We could just go ahead and change the layout a little bit. Maybe increased the high tears. So we get a little bit more off for maybe go to 750 in this case. Go ahead and click. Comm preview changes scroll down and here we go. Yes, definitely. I am loving this. This is super super nice
17. Add Email Opt-In Version 2/2: Okay, so let's start editing the other elements. I'm gonna go ahead and start with the header. I'm gonna click here, and then I'm gonna write get digital marketing hacks for free like that because this is what we are offering for our call to action. Right? So if they sign up, they're gonna get our digital marketing hacks course for free, and we're gonna be getting their email address, So I want to change this up a little bit. I'm not super happy with this right now. I'm gonna go ahead and go to style. I'm gonna go to typography, and first thing I'm gonna do is play around a little with size, so I'm not gonna be shy here. Let's do something like that. Get digital marketing hacks for free. I think it's looking good, but I actually want to remove this exclamation mark. There we go. I was looking much better, and then I'm going to go ahead and transformed them to upper case. I almost always do upper case. When it comes to these sort of headlines, get digital marketing hacks for free. Let's go ahead and preview the changes. So this is looking really good right, Get digital marketing hacks for free. However, I would like to pop the four down here so that they are together. And there is actually quite easy way to do that. We could just go ahead and pull this in ever so slightly and frankly, comm preview changes and chances are that in this size, it's going to be have jumped down, and it has, Right, So there's a bit less space going towards her. She covers more off the screen, but we can have this pop even more so I'm really liking this now. I'm gonna settle with this because I'm super happy, but I think it looks really good. I'm gonna move on to this one. And I have to say that so far, this light gray color hasn't really worked out that well. So what I'm gonna do is that I'm gonna go to the menu back here. I'm going to go to default colors and I'm going to go to the text color and I'm gonna make it into this darker takes color like that and click on. Apply right. Because we have already used the darker takes color as well in here. So it's not gonna be changing anything up, so I'm liking this much, much more. And then I'm gonna go ahead and click here and start editing. Now, I have already pre reading a text. I'm just gonna go ahead and paste that in here because, guys, I'm not that created that I can write this on the spot, but here we have the text it says Get the latest hacks for digital marketing. Facebook, YouTube, instagram, AdWords, LinkedIn, Quora and S e O plus the content creation machine. $99 of value for free. Sign up, down below, and we'll have it sent to you. Really nice. So let's play around a little bit with this style. The first thing that I want to do is, of course, increased the size. There we go. You wanna have it readable rights. So let's try this out and hit preview, and then we're gonna scroll down and check it out. Get the latest hack producer market of Facebook YouTube in stem. There we go. It's looking quite nice. Now, I would actually like this to pop a little bit more. So what I'm gonna do is increase the size even more so so I'm gonna go back to typography, and it's currently 22. Let's go with 24 see what happens and preview the changes. So here we have it. It's looking much better already. Now we can see that because of this collar here, this is actually melting in a little bit too much for my taste. So I'm gonna go ahead and pope that color a little bit more. Now, I'm gonna go to text color, and I'm going to be clicking on this default. Greater we have and just make it slightly more gray. Right? I'm gonna even move this more towards the black area. You can see they're starting to pop a little bit more. There we go. So I'm gonna go ahead and hit preview once again, scroll down. And this is much easier to read, isn't it? I'm really liking this big big fan off it. So here we have it right now. And here you write the first name here, you write the email and then they hit. Send me the hacks and it's going to be sent. Actually, I think this is looking really nice. I am super happy with this now. I do want to show you something that you can add in. Additionally, if you would like to now I'm actually happy with this. The way it's looking, I think it looks nice having them in a row like this. But what you could do is first and foremost, you could put this emails that it comes to the right here. You could also go ahead and make the background into these inputs white. Okay, so I'm gonna go ahead and show you how to do that. And to do that, we need to go to male poet in here. Okay? We're going to go down to words this styles and there's a big bunch of code here. Don't worry about it. I'm going to guide you through this. It's actually super easy. And in here and this is gonna be in the resource is I do have a piece of code that we're going to be using. So as you can see a part of this, I have underlined, and this underlying code, that is the code that I want you to copy. Okay. So I'm gonna go ahead and copy this entire part the rest of this part that is just to show you that this already exists. This already exists, and this already exist. Now, what I want you to do is add in the underlying part inside off this already. Okay, so we're gonna go ahead and search for male poet. Underlined paragraph. And then where it says line dash height 20 PX. We're gonna be pasting this piece of code in underneath there, So let's go ahead and do that Now. We're gonna go ahead and serve from male poet Underlying paragraph. Here it is. In the vertes up, you could see it says line Dash high 20 PX. Okay, so what I'm gonna do is click here to the end. I'm going to hit enter. So we get a new line in here and I'm going to paste this code in right on. Also going to just click there and make sure that these are in line. There we go. So what we have added now is a piece of code. We have changed the background color and also the display, right? So if I go ahead and I click on save here right now and then we go back to our website and we update it and scrolling down, we can see that now. First of all, the input boxes have changed positions. So we have the first name here we have the email to the right. We have the butts and underneath, and they have also turned white, right? So if this does not feeding with your background, having the transparent as they are, you can add in this piece of code. Also add in this piece of code in order to move them like this. And there are additional things that you can do Coding is actually surprisingly simple. So, for example, we see the male poet text area here it says, with 200 pixels. If I would go ahead and remove those and write 250 hit save and then we go back and I update this page, we're going to see that they are now longer. So there are a lot of things you can do even without understanding code, right? But the main thing is just to go ahead and use this code, cope with this piece and put it in under dash paragraph and then below line dash high 20 pixels, just the way I did. And you're gonna get this beautiful. Nice display, right? People can sign up, and then it's gonna be off course after you to go to male poet, set up the sequence and make sure that whatever it is that you are offering, they are going to be getting okay, So I am super happy with this. I think it looks really, really nice. And as we can see right now, the sections air really melting in. Well, we have this sword off contrast going on. So here we have a red theme. We have this nice white going straight to the point going down, we have the contrast off white background, a darker text. And then comes this beautiful part. I'm really enjoying our design guys. Now, in the next lecture, I'm gonna go ahead and show you another email, often the sign that it's super popular today. Okay, So in order to do that, I'm actually going to want to save this down, but I'm going to remove it for demonstration purposes. So what I'm gonna do is right. Click in here and then go ahead and click on Save as Template. And then I'm going to write email up in full section so I know what it is. And then I'm gonna hit save. So now it's saved in here. I can click this one down, and without getting a heart attack, I can actually go ahead and click this one away. Now I want to make you aware of a couple of things before we move on. And the 1st 1 is that if you decide to adding any text in here, which we can do by going to fields and using an accustomed takes just like we did when we had the G d. P R label, right, it's not mandatory now because we have the cookies in the privacy policy. But if you are going to go ahead and adding in your own texting here, it's going to be turning completely white and mess with the design because of the code. We added, If you want adding in a g d. P r tex, I strongly recommend that you go ahead and you use a text editor element. Put it in down below and write it like that instead. That's not gonna miss with it. Now, Elementary actually has a super easy to use form widget, but that is for the pro version. But as you might have noticed elementary superstrong, it might be worthwhile to invest in it if you aren't that interested in it. But for now, we're going to go ahead and use this because it's more than enough. Let's move on and do the next version. Guys, I'm gonna click this one away. They would go see you in the next lecture.
18. Email Opt-In Option 2: So in this lecture, I'm going to show you another version that you can do for your email. Often design. Now, again, there are countless off the science out there, but the previous design was a more full section design. This one is going to be a smaller section. Designed is gonna be more straight to the point. And these kind of opens have become really popular lately. This kind of opening the science that is. So let me show you exactly how these looking how I do them. And then you can decide if you want to use version one or version two for your own home page building. Right? So we're gonna get started here, and I'm going to start with pulling down a heading down here. There we go. And then I'm going to write, get the soap. 10 digital marketing hacks like that. I'm gonna go ahead and center it, and then I'm gonna move over to style because I want this both in uppercase letter. But also Biggers, I'm gonna transform a to upper case like that and then we're gonna increase the size. I'm not gonna be shy with this. They go something like that. Okay, so we have this part. I'm really happy with this. And now we're gonna go ahead and put in the email. Upton. Right. So we're gonna scroll down until we find wordpress. I'm gonna open this one up, and here we have mail Poet 34 Can I grab it? And I'm gonna put it right down below here, down below the header. Okay. And then I'm gonna change to the one we used in the previous lecture. So we have this kind of longer version off it, like that looking really nice. Now, the thing is, there's not a lot of options going on in here with the male poet widget right now. If you were using the pro version off L a mentor, you could just be using the elemental form. You could be adding these manually. You could be adding the butts on manually. It would be much quicker and simpler, and you would just hook it up to male gym. But because we're not using the pro version, we're gonna work around that. So if we have a look at how this looks right now, I'm gonna preview the changes and I'm going to scroll down. We can see that it's all to the left right here. Now, if I want this more center, there are a couple of ways we can do this on. No. One of the ways would be, for example, that I could go to advanced for this column and I could change the margin, right? So that would be the margin from the left. I'm gonna on link. And I could write, for example, 50 or apartment more like 200 there ago. And then I could preview the changes and scroll down, and it would be much more center. So this is actually looking really nice, right? That's one off the ways to do it. Now, the problem with that is gonna be when we look at the Responsive Motor, we go to the tablet version. We can see that we have this really odd looking space here, right? If you go to the mobile version, well, he's just chaos, to be honest. But we could also just go ahead and start adapting and customizing it for mobile and for tablet. Specifically, we're gonna have to do that anyway. But I'm gonna offer you on additional and very effective way to center your content. So check this out. That all I'm gonna do is I'm gonna keep it a desktop rights here, and I'm actually going to go ahead and remove this section. I'm just going to right click and go down to delete. Right? So I'm gonna go to inner section, right? And I'm gonna pull that right below the header. So what the inner section does is that it allows you to add more columns, right? And it allows you to add more columns inside off this section right here. Otherwise you'd have to make a new section. But we want to keep everything in one section so we can make a nice background image for that entire section. Makes us so we have two columns right now. I'm gonna right click, and I'm going to click on Add New Column and guess what we're gonna put in the middle here . You guessed that we're gonna put in the oped, informs I'm gonna go to elements. Scroll down, male poet. 34 And I'm just gonna go ahead and add that one in the middle. Right there. There we go. So it's looking like this now and we're gonna go to our own so we can see how it really looks like. There we go. Now, remember, we have the long version and we want to keep the long version. So that just means that this is too crammed up now. It's so customizable and so easy in elementary because you can go to the wall right here and then you can just move it to the left like this Very, very easy to design like this. And I'm gonna go on a limb, period, say that maybe want to go with 15%. Let's do it like that. 15%. And I'm gonna hit 15% here too. Let's go Here, There we go. There we go. 15. 15. And now I'm gonna go ahead and preview the changes, see how it looks and scroll down. And it's completely centered. I love that now. I don't love this, so we're gonna go ahead and remove it, but I love how centered it is. So we're gonna go back and I'm gonna remove that like that they would go. And now if you go ahead and look at the responsible and look at the tablet version for example, we can see that this is perfectly center. It's looking really good. And if we look at the mobile, well, might be a little bit work to be done here Still, but it still looks really, really nice. I am appreciating this design, so I'm happy about that. This is looking really good. Now, what we're gonna do is go ahead and add a background in here. We have done this before. This is nothing new. So we're gonna go to edit section here, and then we're gonna go to style, and we're gonna go to background type, click on Classic, and here we're gonna add an image. So to do that, we need to find an image, right? So picks obey our good old friend. We're gonna find something in here. And because this section is more straight to the point, I'm going to go with a more abstract picture, right, because it's just a row. You don't want to picture to matter that much, necessarily. At least not with this design. So I'm gonna go ahead and write digital in here, and then I'm gonna set the orientation for horizontal, and then I'm just going to start scrolling down here and see what we can find. And, you know, the thing that pops out to me immediately is actually this one, because this is just such an abstract nonsense bill, and that's gonna work perfectly as a background. So I'm gonna go ahead and click on this one, and I'm gonna download. It's really small, too. That's nice. So we're gonna download and try this one out, head back to L. A mentor, Click on the plus their own image. And then I'm gonna head to upload files and then select files. And there it is. I'm gonna click on choose and then insert media and here we go. OK, so not that exciting right now. And the first thing we're gonna do as we always do is we're gonna choose the cover option, and I mean, it's quite cramped up, and that makes sense that it is because we haven't really changed the padding is yet. So we're gonna go ahead over to advanced, and then we're gonna go to padding right here, and we're gonna set it to 50 looking much better. Let's even go with 17 this time. There we go. And then we're gonna go ahead and preview the changes. Just see how it looks like right now scrolling down. Okay, This is actually looking really, really nice. Now, there's a couple of things that I actually want to do. I want to make the background a little darker. I think the color should too aggressive. I want to change the color off the header. Actually, whites I can see looks for the nice hair, and we're gonna take it from there. I'm gonna start with that. So I'm going to go over to the editing the section again, and then I'm gonna go to style, and then I'm gonna go to background overlay, okay? And then I'm gonna click on classic and now color. And I'm gonna use black like this because they wanted to give a darker colors. I'm just gonna go ahead and make it darker like this. There's something like that. Old is a bit dark, isn't it? Something like that. Oh, that's really nice. I'm liking that. Okay, so it's much, much darker. And now I'm gonna go to the header by just clicking on it. Click on text color here, and let's make it white. OK, really appreciating this design, and then we're gonna preview the changes. So from this into this, Okay, I like this. Now there's a bit too much air and too much space is I'm gonna change the position off the background image in here, so let's go ahead and do that right away. So I'm gonna go to editing the section once again, and I'm gonna go to lay out, and I'm gonna go to style in here and then the position I'm going to try Center center. It usually goes really well with the center center one, and I'm gonna eat preview changes. Oh, I'm really loving this. So this is exactly what I'm talking about with this kind of abstract background that doesn't really mean anything, doesn't grabbed attention. But it gives a nice feeling because this is the important part, right? Get the top 10 digital marketing hacks. First name email, send me the hacks. It straight to the point shows what you want to and has a beautiful design. And this design also goes hand in hand with what we're offering here, which is hacks, right? So I'm really appreciating this. The kind of contrast in red white and having the complete clean white going on with the black text and then over into this one. So really, really nice. I love this design, but I actually think that a full section is gonna fit much better off to this one. So what I'm gonna do, because I really love this one. He said, I'm going to go ahead and right click in here. I'm gonna click on save as templates and I'm gonna write email, opt in smaller sections like that, and I'm gonna click on Save. There we go. So it is saved. I can click this one down, and I can remove this one right now without getting a heart attack. Okay. And now I'm gonna go ahead and click on Addie templates. I'm gonna go to my template, and I'm gonna add in the email open full section by clicking on inserts. Yes, when I import everything and then we get this one back. I really appreciate this design. Oh, and sometimes while importing the templates, we get the sidebar back. I don't know why that is, but all we need to do is go down to set things down here and then go down to page layout and go with the elemental full with. If you were using canvas off course, you go with canvas, but we're using full with. So we're just gonna select that one and everything changes back just like that. So let's hit the preview and make sure that everything is looking nice and beautiful scrolling down. And there we are. I am loving this. So what we're gonna do is actually used the second version off the email off thing that we just created for another page, Most likely the star tear Patron. Gonna want to put in another email often. So I'm really, really happy about these guys. Great job. If you've been following along and then decide which sort of decide you're gonna want for your website And you can, of course, have both because you're gonna want to have this email often more than once. But most of the time, you don't want to have the same design repeated over and over. So if you have any questions, will be in the Q and A. See you in the next lecture
19. Showcase Section Part 1: All right, so in this lecture, we're gonna go ahead and create our showcase section. And what a showcase section is is basically gonna be a section where you showcase some offers that you have on your website. Now for us, that's going to be a couple off our best selling courses right now. For you, that could be a certain offered that you have with your service. It could be certain products, etcetera, etcetera. Now we're gonna go more in depth on how to sell products in the Wu calmer section where we're gonna learn how to make your website into an e commerce site. But for now, we're gonna create our showcase section, and I'm gonna show you how I am going to create this one. So the idea is that the first thing I want to do is to create a heading. So I'm just gonna drag and drop that one in here, and then I'm gonna write in the heading best selling courses like that. I'm gonna center it and then I'm gonna move over to style and I'm going to increase the size. Let's go with Yeah, let's say let's go with 50. I think that looks good. And then I'm gonna go ahead and make these into uppercase letters. That looks much better already. Okay, so this is the basics looking really good. Now what I want to do is show cased three off our best selling courses in there. So what I'm gonna need are three columns, right? But I'm also going to want to have a nice background or a single color. We'll see as we go on with the designing here what I'm gonna choose. But that means that I'm going to have to use one of these intersections instead off clicking here. Because if I click here, I'm going to get a new section, and then it's gonna be harder to use the same background or the same caller. Remember, we've gone through these earlier, so I'm gonna go ahead and drag in the inner section and put it down below under best selling courses just like that. So now we get to columns and I want 1/3. So all I'm gonna do is right. Click and then add new column. And there we go. Ok, so for this, the element that I'm going to be using is actually a new one and it is called on image box . Okay. And the reason for that is simple. You're going to see exactly why I'll be using it now. If I drag it and drop it in here, you're going to see that this has the perfect design to be showcasing a product offer service, whatever it might be because you get to add in a picture off it in here, write a heading and then a description I love this set of. I think it's absolutely awesome. So I'm gonna go ahead and start editing this, But before I do that, I'm actually gonna drag into more. So let's do one more here and then go ahead and do one more here. There we go. Let's start designing. So the 1st 1 in here, we're gonna go ahead and add in our image, right? So I'm gonna click in here, and I have taken the liberty off, adding I course picture in here beforehand already. I had to search to find that one, but the 1st 1 is actually gonna be our digital marketing course. So I'm going to be inserting that one in here. There we go. And then I'm going to write complete digital marketing, Okay? And then I'm going to be adding in a texting here, a descriptions. I'm gonna write something like, Are you looking to x expand your business with art? Complete digital marketing course. You get over 40 hours off quality teaching something like that. Now, this is just something that I'm writing on imports. You're gonna want to take a little bit more time making a little bit more effective in relating to your customer and really get the message across. But for this demonstration, we're gonna keep that. I'm actually quite happy with that. And the next thing that we can do is go ahead and a link it in here to whatever it is that we are offering now, would it be some certain product in here? For example, what I could do is go ahead and move up to courses in here. I could right click copy this link, and then I could just add it in here, right? Pace that link in there. So when they click here, they are going to be taken to the courses section. Or we could go ahead for our own case for example and link it directly to our you do meet course. Right? So then we're going to be following people, too. Are you to me Course where we're actually selling it. So that's gonna be where we put the link, and then we have the image position. We can change this up when a different display. But I really like the top, the middle position, like this. Okay, so let's move over to style now, something that I'm really a fan off is actually increasing the size like this. So I wanted to really be popping out like this. I think it looks really nice. And I'm not going to be playing with the spacing. Like, I think it looks good at 15 by default. We also have our hover animation. We could use grow for this, but I'm actually not going to be using that because I have a different design right now, at least in mind, and we'll see how this turns out. Okay? And then we could also add in the hover effects. Now, before we do that, I actually want to extend and put all of these out just so I can get a glimpse of how this is going to look. So I'm gonna go ahead and click in here. I'm going to be choosing my image. And in here I'm gonna put the Shopify logo. There we go. And in here, I'm going to do the same thing. But I'm gonna put the Amazon logo. Cities are all different courses like this. Now, this is something really, really cool, guys. And keep this in mind when you are designing, because it's gonna save a lot a lot of time. So I have already done some designing in there. For example, I've increased it with off the image. Now, if I want to copy all of these styles in here to these all I need to do is right. Click here and click on Coping. And then I go in here and I right click and I click on paced style over here and you see that they are going to adapt to that coping style right away. It's such a timesaver. I love that function. Okay? And then we would go ahead and we would edit these as well. Shopify, drop ship being this, write it like that on here. We're gonna write Amazon f B a. There we go. Now, of course, we're gonna want a description as well. But I'm just gonna save that for now, is to save a little bit of time. So let's see what we have right now. I'm gonna preview the changes. Okay, so this is how it's looking right now. No one really important aspect when it comes to this signing and when you're doing columns like this is to make sure that you have the equal amount off text in your lines. So if you have your head or you wanted to be in a single row, similar and similar and down below we have the description on three rows. 123 And we want to keep it like that because if we have a four rows while the others have three, this entire row is going to be displaced, so this is gonna be a little bit lower or higher than the rest, and it's just going to mess up the entire design. So that's a strong tip to keep these in line when you are designing columns and rows like this. Okay, so I'm quite happy about this now. I want to go ahead and make a little bit more space. Now, you remember we spoke about this earlier. For example, we have some space in between this and this section. We have some space in between these sections, and I want to do the same thing here as well. So I'm gonna go in up here and edit this section. I'm gonna go to advanced. So I'm gonna go ahead and go into margin, and I'm gonna put this, let's say at 70 and see how this turns out. So we get a little bit more space here. We also have a little bit of more space down below. Okay, I think it looks quite nice right now. There's a lot of space going on in between here. There we go. Now, I also want some space in between these columns, that is the courses and the header itself. So what I'm gonna do is go ahead and click up here to edit this certain call him this one column, and I'm gonna go to advanced up here, and then I'm gonna sit departing to let's say 50 right? And I'm gonna do the same for this column. I'm gonna click up here, go to advanced. Set the padding to 50 similar here, click up their advanced and set the padding to 50. So now we can see that there's a bit more space overall there, some padding him between the header. And there's also some padding in between the courses themselves. So let's check them out, and then we scroll down and this is already starting to look much, much better. I am appreciating this nice clean look right now we can also see that there are more Rose going on in here that's gonna messed up the design a little bit. I'm gonna want to add some additional texting here. I'm gonna go ahead and do that for now, even though this is a demonstration. So I'm gonna click on here, and I'm going to go to content and I'm gonna write Take your business to the next level, and then let's go ahead and preview the changes and see how it looks gonna scroll down. And there we go. So there's 444 There we go. Looks much better already. Okay, so the next thing that I want to do here is actually to add buttons on here. Okay, So if I would have said a link, for example, the link that I cooked it earlier like this, we can see that the image gets clickable and the header, but the text does not get clickable. And the good news is that there's a lot of space to click in here, especially since we made the image larger. But we also want to be super duper clear here, and that's why we want to put buttons down below, right? So we're gonna go ahead and do that. And there's actually a really nice thing you can do when we have come this far in the course, right? And that is that we can scroll all the way up and use this nice button that we already spend time to end the sign we can cope it, and then we can scroll down. We can click in here, and we can actually go ahead and paste it in. And that is incredible. Now realize that is gonna have all of the settings off the button that we use before. That means that is gonna say, learn more is gonna have this link, etcetera, etcetera. But we're just gonna go ahead and remove that link. We're gonna go ahead and set in this link here as well, right? And then we're gonna go to link options and we're gonna click on open in new Window, because when you click here, you don't want people to actually leave this page, right? You want them to stay here while going to your courses? So then you can have mawr good stuff while they're scrolling down. So we're gonna have this open in new window, okay? And we're gonna have the same for this one so that when they click in here, you go to options. This is gonna be open in New Window asked. Well, so we're gonna go ahead and set these ones up as well with the no following gonna go to link options. They can open in new window there, click on open in New Window. And there we go. Now you probably notice that there's a lot of things just popping up as I go with the designing. And this is just the way the signing looks like. You get the ideas, you cover those things, you get new ideas, you add them, you try things out This is very intuitive, This science. I don't know how this is gonna end up, but I have a really good feeling because I have a basic outline with this going on, I have a header. I want to have these three columns with the courses and then I want the bottoms. Okay, so there will go. No, I also want to send to this so it looks much, much better. And then I'm quite happy with this. What I'm gonna do is I'm going to cover this and I'm gonna put it here as well. I'm gonna pace that one in, and I'm going to paste that one in looks really, really nice. So so far, I'm actually really happy about this. Now I want to do one more thing, and that is actually to add a not another butts and down below here. And this is gonna be a view. All courses bottom. So I want them to have the ability to see that these are our best selling courses that we're offering. You can learn more about them and then also view all of course, it down here to see more courses we have over 20 now realize that this doesn't have to be learned more. This could be, for example, contact me. This could be by now. This could be anything. No matter how you choose to showcase it. Now for me, I'm gonna use to learn more because we're gonna have this sent later on to you. To me, right? So I'm gonna go ahead and grab the link on you to me and juice connect them in here. And that way they get to go into the landing page of you to me and learn more there. Now, if you have everything on your side, you could have a by now, they could buy the product, or you could send them to another page. So here we have this, but, um, I'm gonna go ahead and center it like that, and I'm gonna go ahead and make it large. I wanted to be bigger than the others, okay? And I also want the text to be view all courses they would go, and I'm gonna go to style, and then I'm gonna go to typography because I wanted to be an upper case. Just like that. Looks really nice on. I wanted to have the hover effects. I'm gonna go ahead and copper this one, and I'm going to paste the style. Okay, so now it actually got the same size as well, But we can go ahead and go back to style, go to typography and just increase the style like this. We also made it a little bit longer because we grabbed all of the style of the previous one . But actually, I really enjoyed that look. So we're gonna keep that look. Now, one thing that I do want to do is make this a little bit rounder. Okay? So I'm gonna go with the border and actually set up these borders to, like, let's say, 20 and the borders. As you can see, that's gonna make the edges rounder. I'm gonna go with 30. There we go. Let's have a look at our current design. You probably noticing. Asked ago that you are recognizing more and more options and as long as you know the basic options and functions, the this sign options are endless. It's really nice. So let's scroll down and check it out. I'm really enjoying this now. I would like a little bit more space in between here. So we're gonna go ahead and take care of that. I'm gonna go down. I'm gonna click care, go to advance, and then I'm gonna put some padding in here. So let's put like, it's between C or something. Maybe even third. You know, living on the edge. 30. Let's let's try that one out. Single likely comm preview again. Scroll down. And yes, I'm liking this much, much more. Okay, guys. So this is looking really good. Now, there's a couple off more things that I would like to do in here, right? And the first thing would be that I would like something to happen when I move my mouse over here. So right now it's quite playing is quite boring. There's some actions on the bottoms. We can see that right now. I would like more things to be happening. So what I'm gonna do is that I'm going to go to l. A mentor like this, and I'm going to start adding editing the backgrounds for these columns because I don't want the pope. I want all of these two have on action when you hover your mouse over. So what? I'm gonna go ahead and do next is make sure that there is some action going on when I hover my mouse over like this make the whole website a little bit more interesting and a bit more satisfying to hover the mouse over. So what I'm gonna do is actually click on the column up here. So we start editing this one column, remember? We have 123 different columns going on here. I'm gonna go to advanced, and then I'm gonna go to style, right? And in style, we have backgrounds. I'm gonna move over to hover and end this hover. We're gonna go to classic and then color. Now, here we get to play around a little bit with the color. So if I just choose these great and I check it out Well, this looks quite dreadful. To be honest, I'm not enjoying this at all. I don't like this. So if we put on Green, what is looking a bit nicer? We could do this. It's looking okay, you know, we can do the light degree now. This is actually looking pretty good. I am enjoying the effects of this. So this is quite nice. Now, if I go ahead and I choose this and would just preview the changes to see how it looks. And then we scroll down. We get this nice green effect when we are hovering over hand that is actually looking quite good. I am enjoying this. So what I'm gonna do is actually go ahead and keep this nice green color going on because it's looking really, really nice with these effects. Now we could use our classical red as well. I don't have the color combination here, but usually when you have so much red, you can see that it's gonna mess up the great color off the description. And also, it's not very inviting when you're offering a product and you're putting this big rid behind their now, Red looks much better at the buttons like this generally. So this light green that is so much more inviting. So that's exactly what we're going to be going for really enjoying this design. So all I need to do here is go ahead and click on copy and then right click and paste style , right click and paste style. And look at this now there Is that some effects going on. We go ahead and weekly come preview changes scroll down and we can see that there is some stuff going on right here. I am really enjoying this. Really, Really good. So, guys, this waas part one Now in the next lecture, part two, we're actually gonna go ahead and change the color, the background, hated three color or to a background. We're gonna try some different options out and see where we land. And then I'm gonna go ahead and make sure that the buttons fit with the color theme that we choose. And we're going to complete this and make the entire section look really, really good. Okay, guys, see you in the next lecture for part two.
20. Showcase Section Part 2: All right, guys. Welcome back. So we're gonna go ahead and continue with this design. It's very intuitive. It's very exciting. We're going to see where this lands up. Okay, so what I want to do right now, it's start to play around a little bit with the background right here, right? So in order to do that, we're gonna go ahead and actually choose a background on picks a day that is going to be white, right? Because we can see right now that white actually works really, really well right now I'm really enjoying this white back from, but we're gonna go ahead and use some sort of background picture just to see how it works. Now, remember earlier on, we actually set the margins with the editing here when we edited the section. That's gonna be a problem if we said a background color, a certain color or a background image, right? Because it's only going to be covering this section area. This is going to be left whites. That doesn't look very good. So we're gonna go back here in preparation for using a background image. We're going to click on edit section. We're gonna go and remove the margin because we can't really have the margin then and then we're gonna put some padding. And here we have two options. Either we could go and set some padding like this, and that's gonna make these even longer and more narrow this way. Or we could go ahead and un shamed them and Onley put 70 on the top. So we get this space that we originally had right now what? I'm gonna go ahead and use actual link these together so that they all get shamed like this and we get a big padding effect because we're patting the section were patted, the columns, etcetera. So let's go ahead and see what that looks like, because that's gonna make these longer when we're showcasing the products themselves so scrolling down, we can see that they look quite a bit different by now. And I'm really appreciating this design. It's looking much more solid, much more narrow. I think it looks really good. I'm going to keep this. I'm really enjoying it. There's more space to the size, but that just gives a longer, more elegant to me effect. So let's go ahead and find a background picture now because we know that the background is gonna be quite large, right? And we also know that the white color is something that fits really good. We're gonna go ahead and use some sort of inspiring picture we're gonna use toward freedom again because I find that that gives some really good results. But we're also going to go and change the orientation to horizontal. We're gonna set the size so that it is at least 1900 to 1000 right? So that it's gonna be big, A nice, good quality and everything. And if it is to small, this usually gonna be blurry and not fit, and it just doesn't look good. And this is the interesting next option. We can go to color in here and click on white. Right? So if we do that in clicking what? We're only going to get this nice picture with a white background. So let's think of our focal point right now. So, with our turn to sign, we have these three columns going on. So we look at our website, they are actually covering the middle off the image right there, very center. They're very much in the middle. And that means that we can't have stuff going on in the middle because then everything is just gonna look chaotic. So what we need to do is look for something that has an open, nice image. So this, for example, would not work. This one wouldn't work, and not even this one would work because they would be covering up the bird. We're gonna look for something that has more space. This would be a nice picture of you put stuff to the right. You can see the potential in this sort of pictures. Now, here's actually something where we're really talking. Guys, look at this beautiful picture. The Onley thing going on is this. I think it's a kid swinging on the swing down to the right, and that is beautiful because we can put especially with all the padding we have done, we can put everything so centered in here if we get to put our material here and this is not gonna cover anything, so I'm gonna try this subject. Likely going free download, remember? Well, under one megabytes, this checks out, we're gonna download it, and then we're gonna go back and we are going to go and edit the section here. That is no optimized. There's no margins in between here, and we're going to go over to style. We're gonna go to background, keep it normal, Quicken Classic, and then click on Image. Now we're gonna upload that file select file. And here it is. I'm just going to click on choose and then click on insert media. Okay, so this is what we are getting right now, So there's not that it doesn't really look that good. Well, it looks decent, the nice, but we only have these clouds in the background. And that is not why we got this picture. So what I'm gonna do, it's click on size. We always do this and then click uncover. So this is looking much, much, much better. I am appreciating this Now. We're gonna go ahead and click on the preview to make sure that nothing really collapses with the kid so that things doesn't that they don't collapse into each other, cover some text or something like that scrolling down. We can see that this is actually looking perfect. Wow, look at this. Guys is looking really really nice. So I'm really, really liking this design. So for now, the thing that I actually want to go ahead and change is that there is red bottoms going on here right now, and that's really good, but because we're using the green like this, I would like to also put this green into the view All the courses, okay, because that's going to give it a different effect. That's gonna also make it stand out from the order buttons. So we're gonna go ahead and do that. I'm gonna click on this button right here. They would go and then I'm gonna go over to style. I'm gonna go to background color and I'm gonna set the background color to this darker green right here. There we go. Gonna be happy with that. And then I'm gonna click on Hover because now when I hover my mouse over, it still turns like threat. And that's not really nice. So I'm gonna change the hover click on this and taken into delight Green. There we go. So now when I hover, my mouse over it pops up like this and it also gets a little bit lighter. Really, really nice. So let's go ahead and preview the changes scrolling down. Okay, this is looking nice, guys. Now, there's actually one more thing that I would like to do here, and that is to make these pope out a little bit more. Now, I really enjoyed the look. I love this fact that we have the kid down here and everything is just feeding so nice, to be honest, but I would still like to change this up a little bit by making them pop. And the way that we're gonna do it is is to actually make the background off these images white. So let's go back to the drawing table. Click here, and I'm going to click on the column. Editor writes here, and then I'm gonna go to style, right? I'm gonna go to background type, and I'm gonna select the caller and click on white. There we go. So what I'm gonna do is actually you do the same thing for this. Call them. I'm gonna click their go to style background type color said it to white. Similarly, here click on this one. There we go up there. Click on this one. Go to style set the background type of classic color and white. All right, there we go. And then I'm gonna click, um, preview changes, and we're going to see how this turns out. Scrolling down. Okay, So what I am loving is the white Okay, the white looks, super duper NYSE. What I am not loving right now is the fact that these are all pieced together. I would like some space in between these, so we're gonna go ahead and take care of that. So to do that, I am going to go ahead and click on this column and edit it. I'm going to go to advanced, and we can see that it already has the padding. Right? But if I put some margin on here like, let's say 25 we can see that it starts to pop out a little bit. We can even go, you know, go a bit while let's put it to 30. There we go on and we can do the same here as well. Let's go to this one. Go to advanced. Go to margin. Put it to 30. Go to this one. But you call them Advanced Margin 30. Now it gets even longer. And I love that nice long display. So we're gonna check it out right now scrolling down And there we go. Guys, I think this looks actually super nice. Now we see the despair insee also with the difference in text Ling So you're gonna have to be really wary off making sure that the text are asked long. Now, that's a little bit off on art, but it is Oh, so important. Now we do have a couple of new problems, if you will going on right here, the number one would be We have to change this text. So that's the first thing we're gonna do. But I also look, the kid is covered. That's not nice, But let's first go ahead and change this text back. So I'm gonna click in here. That's gonna and then go to content. I'm just gonna go ahead and remove these and see if this works out. Scroll down and there we go Now they're actually pretty much yet they're completely, even awesome. Now there's also a problem, of course, because these header is a little bit long, but right now they're decently. Even we can make this nicer once I start working and actually putting a proper description on these as well. So, as you can see, what we have here right now is that we have designed our showcase page where we have our best selling courses and that for you could be anything. It could be your services. It could be certain products could be certain offerings. Whatever that do you have that you want to showcase. And we are displaying our courses. We have this nice hovering effect of green. When I hover over, we have this nice pope effect that the bottom off, all of them. And we also have this big, nice view, all the courses. But I'm going on right here now. The only thing that would be left for me to edit here right now would be to edit the description off these ones to go ahead and grab the links and just click on this one and set the link down here with those links. Set that link, then go ahead to the learn more button and set that link as well, right? And then I would set the link to view all courses to the course section. So guys This is how you can showcase something on your website, especially using multiple columns. Right? So great job in making it this far. Remember, when it comes to this sign, it is endless. And one final thing to remember that when you are making space up here, you can use margins. If you're using a white background and you want to keep it white than all this, fine. But you need to use the padding when you're keeping a background like this or if you're changing the color off the background. Otherwise you're gonna get this space in between like this. And that just doesn't look nice at also, remember, that margin is on Lee to make space. And it's not good if you're gonna keep back running there. So I'm super happy about this, guys. See you in the next lecture.
21. Sticky Menu: All right, guys, in this lecture, we're gonna learn how to make our menu sticky. In other words, we're gonna make our menu stick to the screen even though we're scrolling on our website. So if we look at how it looks like right now, if I scroll down, the menu disappears. Right, because it's on Lee up here right now. And if I scroll down, gone like magic now, what we want to do is that we want to make this stick, right. So when we're scrolling, it's still gonna be up here. They're still gonna have access to the start here to the course of section. Everything is gonna help with the navigation. Looks very professional. So what we are going to do is that we are gonna go back, go to the menu here, and then we're gonna go exit to dashboard. This is actually not something that we're gonna be doing an elementary, but it's gonna be part of for elementary d sign that we have created so far. So we're gonna go ahead and go straight into plug ins here and click on add New. We are gonna use a plug in for this and It's a really light with plugging asked. Well, and then we're gonna search for sticky menu like that. And then you're gonna get every sold down here that says my sticky menu. You can search for this right away, too. It's all one word, my sticky menu. So even though it's untested with this version, I know that it works. It's quite a simple plug in lightweight, but it does the job really well. So I love this one. I'm gonna go ahead and click on Install now and then I'm gonna click on Activate. All right, so it's installed. It's ready to go, but we're still going to go down and go into the settings right down here. So for some of you, this is actually going to start working right away. But for some other of us, we're gonna have to do a little bit more editing before we get it to work. And that is because of this so called stick it class. Now we have a menu or header element, usually called the Nab Bardem Navigational bar. But not everything has to this names. If you're using a theme like we are, for example, that has a different name. This isn't going to be working by default, but if you're using another theme, it just might. So what we can do is actually go ahead and go in here and update this website and just see if it works. I'm gonna go ahead and scroll down and we can see nothing happens. So it's not working. So what we need to do is change this sticky class, right? We want the I. D. Name off this section. So this once we get the name off this one, we're gonna put the name in here, and then that is going to be sticking on the screen as we scroll. So in order to get that, all we need to do is right. Click in here and click on Inspect Element. Now, if you don't have this inspect element and you're using a Mac, all you need to do is go up here in safari and then go to preferences and then move over to advanced and cliquish says show, develop menu in menu bar, and I believe for windows it's very similar. You just go to your preferences or settings, you go to advance that you should have a similar. I think you might be able to use if 12 as well. But otherwise it should be in the options section like this. And once you have this all activated, all you need to do is right. Click here and click on inspect elements. So this is where we have it. Dave, underline i d equals site header Inner. So this is actually the name that we are going to be inserted in there. So it's site, dash, header, dash inner. We're gonna go back, and then we're gonna do a hashtag mark site, dash, header, dash inner. They would go, and I'm going to click on save changes just to see that this is actually working. Otherwise, this is gonna be a terrible lecture, right? And then I'm gonna go back here and I can click this one down. I'm gonna update the sites, and now I'm gonna try scrolling down, and there it is. So it works. It works clearly, but as we can see, there's a couple of issues. First of all, it looks horrible. And there to reason for that one is the opacity we can see through it. We're not gonna want that with this design, of course, you might want another design, and also we can see that there's a different color on the logo. So what we're gonna do is that we're going to go back in here, and then we are gonna head over to style, right? And the first thing we're gonna do is change the opacity here. 200. That means there's gonna be no see through. And then we're gonna go to selects color, and we're just going to click on whites. It's just gonna be completely white. There we go. And then we're gonna scroll down and click on save changes and let's go back here and update this site and see what happens and scroll down and we can see it looks much, much better, doesn't it? So I'm really enjoying this design now. There's actually one problem with this one, and that is, as you can see, there is no border in between here, so this is completely white, and we also have a completely white background on what I mean Would a border between the menu and the content here is that there is no line going here. So, as an example, If we go to mail chimp, for example, we can see that they are using a menu. Appears well and this is completely white and this backgrounds completely white. But there is a border here that separates the menu from the content from the background. And I really appreciate this border. It really shows that here's the menu, and here is what you are checking out and reading. So I'm gonna want to use that border as well. And now, in order to make both my life and of course, your life much easier, especially your life guys, I've actually gone ahead and grab a code for that. And that code, in my opinion, does look a bit cooler than this border because this is a simple border, and I prefer to have actually a shadow border. So it looks like the menu is on top off the website. I'm gonna show you what I mean with this. So we're gonna go back to style and in here we have some CSS, and we don't have to worry about coding ourselves, but we can use other people's code who are much better at this, and I'm not a programmer and chances are you might not be. The other people are, and we can learn from them. So this code in here this is gonna be in the resource is you can just go ahead and grab that one. All you need to do is select all of these. Right click, click on copy. Then we're gonna go back. We're gonna go in and I'm gonna hit Enter. So I go down below and I'm going to just paste this information right in here, okay? Just like that. And then I'm gonna go ahead and click on save changes like that. And as we can see right now, there's no border in between here in between the white. So when I update this, there should be a nice shadow behind a look at that. This is looking really nice. Now. I really love this. Look, it honestly looks like the menu is on top off the website. It's an awesome look, in my opinion. So now when I have this white against white, we can see that there is a clear separation, a very clear border like this, right? So if there are additional things that you want to edit in here There are more things that we can do. For example, rather than using a slight effect, we can use a fade effect. Now, the slide effect works like this, that when I scroll down from here, you see that it disappears. But then it pops up right back when we have scrolled down far enough. Now, if we don't want to use the slide, we can actually use a fade like this. I can go ahead and save those changes and I can show you how the fate looks and I'm gonna update this as well. So now, scrolling down, we can see that there is a fade that happens. But the fate, it's actually so fast right here. So we're not getting much of an effect. Doesn't look that good at all. We're gonna have to go ahead and go to style and then stick it. Transition time. We can go ahead and move that up to let's put it to two seconds and then click on save changes. Go back, update this site. And now when I scroll down, you can see that there is a fade happening. But you might also notice something else writes here this logo is really sticking out. Right? So now when I scroll down to the white, we can see that there is a beautiful border here off the shadow. But there is something here that's not quite right, right? The border is being broken. And that is because when we made our logo, we actually used a completely white background. And because of this, this white background is interfering with the border. So what we're gonna do is that we're gonna go ahead and remove the white on the bottom off our logo here and make sure that this border looks fine. Now, if you don't have a hint of o c d like I apparently do, you might define with this. But in my opinion, this is what separates you and gives you a really professional decide when everything is just spot on and flawless. And here we can see a minor flaw. And that adds up guys. So what? I'm gonna go ahead and do. It's actually changed back to the slide, and I'm gonna go and change back to the transition time off 0.3. Now, as you can tell, there's a lot of things that you can change in here and you can just play around with these options yourself, for example. You can disable it small screens and large screens. You can also decide when you want it to be visible. For example, you wanted to be invisible when you scroll down and Onley pop up when you scroll up. There's a lot of different options in here. Also, if you go to advanced, you can decide to disable this at certain pages. But once again, we're gonna hit back here and we are gonna make sure that this broken border is repairs. There is a completely beautiful borderline here that it looks flawless and 15 with our design. So what we're gonna go ahead and do is go to a website called Luna Pic. Now, Luna pic, It's really great because they allow you to make your certain pictures transparent. And this website is gonna be in the resource is as well. So what? I'm gonna go ahead and do. It's actually upload the logo that we have There we are, and I'm gonna click on Choose. And here is our logo now, honestly, because the link the U. R L in the resource is is already set up for a transparent background. All you need to do is upload your logo the way that I did and then click on the background like this, and then it's all gonna disappear. Now you can see that there's a little white in here, a little white there in the bees in these, but it doesn't matter. Honestly, The Onley part that we really needed to remove and make transparent was this part right, Because we're gonna use to design with the white menu and eight white logo, so it's completely find that there is some whites still left in here. So what we're gonna do is actually scroll down and click on save here, and then we're gonna go back in here, and then we are going to go to appearance that we are, and we're gonna creek on customize like that. And in order for you to see the difference, I'm gonna go ahead and scroll down to the white again. Here we are. We can see this little breakage in here, so all I'm gonna do is click up here on this. But, um, we're going to get to the customization hitter part, and I'm gonna click on change logo. I'm gonna go to upload files, and I'm going to select that file. They were is usually called image. Edit something and then click on shoes and then select. And there we are. This is a perfect crop in my opinion. And then click on crop image. And already, now we can see the difference in here, right? So we can see that there is no line that is breaking here. We have a perfect shadow border going on, and it looks absolutely flawless. Now, if we go ahead and we compared to this we conceded here, there's still the breakage, right? We haven't updated this site. There's still the breakage compared to this. There is no break it. So this might look like a minor detail, but honestly does so, so, so much. So I'm gonna go ahead and click. Come published. Now, guys, remember when we actually did the logo earlier? You have the option to, for example, sign up m bist off at Canada. If you register there, you can download transparent logos. And if you're gonna take your website and your best into the next level, that might just be worth it. You can also go to fiber and ask someone to design you a really nice looking logo. And then you're gonna get that logo in a transparent background as well, so you can use it anywhere. But if you are going to go with the same route that we have, you need to make sure that the design here, for example, if we were going with black or purple or whatever that it was the same color in the logo that we were using on Canada, all you need to do is actually match the hex codes like we have done throughout this design . So here we are, guys, I'm really, really appreciating this home page right now. And there's still a 1,000,000 things that you could add Shoot you want to. But right now I believe that you understand how to create a nice looking home page, knowing the next lecture we're gonna go through and make sure that we have completed the mission off for home page so that we have nailed the psychology behind it and the reason to even have it to see in the next lecture. Guys
22. Home Page Design Analysis: All right, guys, we have done a beautiful job on the home page so far. Now, you might remember from on earlier section that we went through the purpose, the psychology and basically the reasoning behind the home page. Now, in this lecture, we're gonna go ahead and make sure that we are walking the talk, right. We're gonna make sure that everything fits in and that we have followed all of the steps. So So if you remember, there was a lot of different points, right? If we had men, you're not defining its purpose. That less is more delivering content and navigating to the content page. Let's go through them one by one and make sure that we have nailed them. The 1st 1 Do we want the homepage on the menu or not? Now, in our design, we decided not to opt for that. Right, Because we already have the homepage on the logo. So we're not gonna set any home in here, even though there might be some visitor that don't actually know that you can click on this , But still, the home page is not the main patron that most important pages are actually the start here Page and the course page, right? Because to start here, page is what's gonna warm them up towards everything that's going to make sure that they understand what we're all about and basically showed them that they're here with a problem and we are the solution. Then we can offer them. The course is that we have and help them out. They get their problems. So and of course we get a sale. That's a win win situation. So basically, to make it a timeline here, first we have the home page, which sends them to the start here that most likely eventually is going to send them to the courses. Right. So there's gonna be no need to put the home page in the menu, at very least, not in this design. So we decided not to use a menus, a weakened mark that out. Now the next point was to define its purpose. Now our purpose with the homepage is to introduce them to our concept, show them what we're all about, and then offer a learn more or start here button. They're basically the same thing for us so that we can make them go from. I wonder how they can help me to Ah, hot. This is my solution. That is the main purpose off our homepage. And of course, some people are still going to go ahead and scroll down. So the first thing that we have added in here is social proof, and this is huge. Now they understand that this is no joke, right? You could even add in more testimonies if you'd like to. But I think this is so thorough that I'm more than happy with this one. And then we've gone through, were actually offering them something here, Right? So if there scrolling down, they're still not sure if they're going to stay. If they're gonna leave, then there is something actually for them in here. Especially when you see that there's a $99 value and they can get it for free and off course chance to start because they're here. They're interested in digital marketing. They have an issue with it. And here you can get the latest hacks for to pull your forward, get you ahead of competition. It's a really clever design. And then finally, when they are warmed up enough, we have our best selling courses right here. So there is a higher kidder. It's a thought behind how we are doing this. So in other words, we have defined the purpose very well that we want to explain what we're doing and then send them to the started to make the audience even warmer. That was the purpose. Here wasn't a restaurant. Maybe you wanted to display the menu and have them order something. If it was a gallery website, for example, for a photo shoot. Maybe you're a model and you want to showcase than the purpose would be to show instantly showcase what you have to offer. That was not our purpose. So we can mark this one out as well, and then we have less. It's more which was to design that we were going for, because it's very popular and super affected to remove all of the clutter. And in my opinion, this is the definition. Off less is more. We have a beautiful background giving a feeling we have a header here that goes straight to the point Business made easy. Let us show you how and then we're connecting. Are you looking to build or expand your business but don't know where to start. Let us show you how literally. And then they learn more. So we're telling them to hate. You have an issue with the business. You want to start your business, we make it easy. Let us show you how we make it easy and we can help you. Super clean scrolling down here is a social proof very clean. Here we have an email. Often we have all of this free space. We have this offering here. This the first name, There's an email. Send me the hacks. It's all also clean. And then we have our courses. Just three. Check out one of these three. You can click, come to learn more or view. All of the course is awesome. In my opinion, this is a very clean the sign. And I'm very happy about this one. So yes, less is more. And I think in this case we did less and we got more from it. So let's mark this one out as well. And then next up, we have to deliver content and indeed delivering content. We are right. So the idea for the learn more so actually send them through her and deliver content for them to make them into a warmer audience. When I introduced what we're all about and how we consoled their problem and the only way to really solve their problem is by delivering the content, delivering solutions or suggestions to solutions that's gonna sold the problems that they have scrolling down off course. We're also delivering a completely free course with the email office. We are taking full advantage off the home page and further down were even delivering these courses or rather showcasing these courses that Hey, this is actually what we have got here. Now, if you're looking to really get into digital marketing, check this South or viewing to Shopify. Drop shipping, Amazon FB, etcetera, etcetera. We are delivering content guys, so definitely check on that and then finally navigate to content page. And this is what I've been talking about all the time, right? So we have the learn more here that's going to navigate to the start here patient. That's where we're gonna have a bunch of different content and scrolling all the way down all of these air going to deliver to content page now, currently I have these set ups. These actually take them straight to you to me, right? If they click here or here, they're gonna be taken to Are you timid? Page, where we have our complete digital marketing course similar with Shopify an Amazon and then with the view, all courses This is going to go ahead and be linked to our courses. Page right, so that they can see all of our courses going on there, and those courses is going to be linked to you to me. So we are most definitely navigating them to the content pages. So let's check mark this one as well. Now, guys, really good job again. There's an endless amount of things that you can do on your home pitch. We've been showcasing different things that you can do to manually customize your home page using different backgrounds, different features using different widgets elements, etcetera. Now, in the next section, we're gonna go ahead and make sure that our website is optimized before we move on. In other words, we want to make sure that it loads quickly because trust me, if your website is loading slower than in two seconds, I think the statistics say there's like 30 or 40% of the people are gonna leave and that is huge guys 30 or 40% of the people. And I think if it's even slower, that's gonna be even mawr who leaves. So even if you have the most beautiful website in the world, what's the point? If no one is going to stick around to check it out? So in the next section, we're going to make sure that everything is optimized. Everything is loading quickly. Everything is still looking really good. And then we're gonna continue by doing and designing our courses page or start here page about page, etcetera, etcetera. And I'm gonna show you how to effectively used the templates that are already in elementary because now you know how to actually use the different features off L. A mentor. So we can just go ahead and edit and customize the templates that are already in here. Great job, if you have any questions, will be in the Q and A, as always see in the next lecture and in the next section
Robin & Jesper ✓, Teaches Digital Marketing & Social Media
