How to make a personal blog in Wordpress with Elementor Pro

1. How to make a personal blog in Wordpress with Elementor Pro: Hey, my name is Reno, and in this course I'm gonna show you how to build a fully customizable block on WordPress . That you can build with track and drop discourse is for people that want to learn how to build a block so you can start selling blocks to clients. But you can also follow this course. If you want to build your own block, I will show you how to create something unique where you can customize every element off the website. So this is for anybody. They want to have full control over all the elements off the website. So I believe that this is the best way to build website because you want to be able to make your own decisions on the website. It's building. So the problem is, in my opinion, with a lot of other courses, is that they will show you how to build a block with pre made templates or teams. But the chances that you're gonna change your website in the future are very high, so why not start with a method where you can change any part of the website back in the day ? This wasn't really possible to do on your own. But thankfully, now we have were pressed with the page builders, and they allow us to track and drop a website. And in that way we don't have to use any code. We can just use sliders and color pickers and things that anybody can use. So my name is Reno. I study to design Internet islands, where I learned how to design websites and APS and a few years ago I started my own Web design business, and I'm now selling websites to other clients. And I'm also teaching online when I really enjoy I'm getting a lot of positive reviews on my courses, and most of my courses get more than 4.5 out of five stars. So thank you. If you already left a positive review on one of my previous courses so little bit more about my work flow, I like to work as efficient as possible. So that means they were really gonna dive in the essentials over present, how to prepare a page properly. Because if you do this, the creation process of a bait will be so much faster. So the block that we're gonna build has a beautiful header. As you can see over here, it has three block boats that are featured a email sign up form block items that you can click on it as a sidebar, as you can see over here. And it has a beautiful food or that is connected to instagram. And what I also want to show you is the inside of a block post with a big title, a date and the categories that you've given to this block post. It has a big image. It has to block contents and there is that same sidebar again. And you can see related articles that half the same category and I will show you how to set up the beckoned of work press. You can create your posts easily from here, and editing a block post is also really easy. You can set up the title over here, the link over here, the block content and here are the categories you can set up a featured image, which is the thumbnail, and I will even show you how to optimize your block post for Google. And of course, his website is fully responsive. And like I said, you can fully customize the design of this block because we're gonna build every part together so you can easily turns from the website that we're gonna build from this design to distance sign with just a few clicks. So this is why using ver press with elements of pro is so powerful. And at the end of the course, I will also show you some tricks how to deliver a website if you're working for a client. So I think this is the complete package. So I'm really excited and pretty proud of the score. So I hope you were all so excited and I hope to see you inside of the course. 2. What we are going to build?: all right and welcome. Officially, welcome inside of the course you are now in the first episode where I'm going to show you in detail what we're actually gonna build so that you know what to expect. I will also give you a little bit of information on what you can expect in terms off chapters. And then you can move on to chapter two. Where you actually going to start with the first task? All right, so this is the website that we are going to build together, and we're gonna make every part of this website ourselves, but then in an easy way, because we're only gonna use direct and drop. All right, so let's just screw all toe the homepage in the first thing that you're actually seeing over here is a heather. It's a full with heather that automatically adjusts to your phone, for example, or for a tablet. So if you can see now, the text is gone, so you will still see the whole image, right? So the whole website is re sizable for tablet and for smartphone. So that's this first part. It's the heather. This is just a logo and image and This is a text, and no matter how big your screen ISS, the image will automatically skill. So that's pretty nice. And we have the menu over here with clickable menu items, a drop down and social media Aikens with a nice hover effects and the menu bar. And this bar is actually part of our heather template. That's one of the things that you're gonna learn into scores, how to create a header template. And wouldn't Heather template. You can tell the system like, Hey, I wanted this header template to display on all of our pages. But there's one thing that will automatically change. And that's this line under the menu, Aiken. So we're now on the home page, So I'm going to show you how you can build it, that when you go to another page, that it will automatically switch deadline so that the user knows what h hey is. And also, if you use your mouth, you can also see a little line. But indication now on the home page, you will have three off those blocks and these aren't it featured blocks and we're gonna build this to get ever gonna build one of those blocks and then we're gonna repeat this block three times and then the only thing you have to dio is say to each block post like, Hey, I want this block those to be on the top of my website and then it will automatically display over here at a maximum off treat block boasts. And then we have to email subscription for him, which you can also customize in the way you want. And you can connect this. Do a service like Milton, for example, if you don't know about what that is, don't worry to say females for your block if you are into email marketing. But you can also skip this part or even the elitist part if you want to, then we will have the main part of the website with the sidebar and this side bar. We're gonna build that once, and then I will show you how to display this whole sidebar on the different parts of your page. So first we have the image detects and this nice found over here. Then we have three other block boats where you can also choose which block boats you want to appear over here you can always change it whenever you want. You have a part for an ad, for example, and you have to ream or tapped, which you can link to other parts of your website. You can put anything in those blocks if you want to. So over here we have all of the block. Both and those block both link to the actual block items. So if you click on the read more, you will see that the website jumps to the domain name and then slash the title in a website euro. You cannot have spaces, so then it will automatically created these dashes. But this is super nice because you don't have to create is if you create a new block boats over here, it will automatically created this link, which looks really nice. You can also shorten it if you want to. Maybe you only want to this as the whole link. That's all possible. So as you can see, this is the block. Bowsher. If you have a full image, a big title, you have dates and you have the same site bar Over here. You have your whole block boats with content. Previous button a next button to go to other block post social sharing. Aikens and I will show you how to customise this design. Also at almost everything. It's fully customizable and again, this is the big difference between discourse and a lot of other courses on the Internet. I'm going to show you how to build efforting yourself, which gives you complete freedom to dio whatever you want in your website. That's what this course is also a little bit longer than most other courses that just imported templates. But it's a lot faster than a lot. Of course, is who will teach you how to create a website by yourself with goat because we're not gonna use code. We're only going to use the official builder and it that way we can build this website with in a few hours, and this course now is six hours. But there are also a lot of episodes that you could maybe skip right at the end. I'm not going to show you some things how to deliver a website to your client. But if you don't have a client than this course will be a lot shorter for you. So I am pretty sure if you just block out a day or you just do it in a few days that you will have a block running. Gonna give you all the fells that I work with so you can follow along with me. So that's great for the people that also want to have this block in their portfolio items. So maybe you want to start your own Web design business, and you also want to show people that you can build a block. That's what I do. That's why this website is on my sub domain instead of my real domain. I will also show you how to do that. But if you just want to have your own block, that's also possible. I will show you how to register your own domain name. So this is my website readings aboard dot com. But if you want healthy lifestyle, er blocked off, come or whatever your block name is, I will show you how to do that. So on the block, both space. You also have related articles which will only display articles that have to same category as the block boats that you're on right now. And then you have to food or over here with a really instagram integration. So if you click on one of those images, you will actually go to the instagram page, which is which is a really instagram page that I created for discourse. So this actually works, and then you also have a few menu items over here and the Social Aikens. The last thing that we're gonna build together is the contact page, which looks like this and asked his nice introductory text. And then it has a contact form that will automatically send an email to your email or another email that you want. So I'm going to show you how to add those fuels how to design this. And I think that that's the beauty about this course compared to other courses. I'm not just going to show you how to build this design. I like to design websites because I have a Web design business. I like to design websites in a way where I can customize everything. So so to demonstrate my point, I am here in my designs will. But if you don't have to have this design toe, you can just work with felt that I am going to share with you. But this is the website that we're gonna build. It looks like this, but with the techniques that I'm going to show you in this course, you can easily transformed his website and really easily. It's not just me saying it's easy to make it sound easy, but it's really easy to change this design to something like this, right? It still has kind of the same structure. Before example, Switching this bar to the top that's so easy inside of her press is just by tracking and drop, chasing the collars you can see here. I don't have a background image dese. Two images over here are just the same block that I used over here. But then it's just too. You can transform this to this in just a few clicks or, for example, your sign inform. From this to this, I'm gonna show you how to do this or, for example, for your block posts. Here you only have one column that is repeated for tickly, but in this block you will have a to grids. And that's the beauty off this course compared to a lot of other courses first of all, it's very fishable. We're not gonna use goat. And second of all, you can transform your block to any block that you want. So after this course, you will know how to build a block and how to transform it. So you can also start charging other people money to build a block. And that's where if a few hours I think so. I hope that you will block sometime in your agenda to make sure that you're gonna watch the episodes again. You can skip whatever you want if you already know certain parts. And also, if you miss something or you have a question, please just send me a TM on instagram, for example at living with pigs. Or just leave your question down here below and and I will try to answer them. So that's it for now. I'm gonna show you in the first next episode how to handle hosting and domain. So if you don't know but hosting and domain is yet, then that's perfect. If you already have a domain in a website, then you also might want to learn how you can set up a sub domain like I have over here and this way I could just have a lot of different websites under my official website that I can just build for free because you don't have to pay extra if you're going to use my technique . So that's it and I will see you in the next video. 3. Hosting and domain: THE BASICS: All right, guys, in this section, we're going to talk about how to handle hosting for yourself or for your clients, and how to insult her press on a domain or any sub domain if you already have a website. So let me explain. The difference is here. If you don't know what don't domain and hosting is very quick. A domain is just a euro. So, for example, I have my personal websites that that is my name dot com. So reading the board are calm and you can pick whatever name you want and then dot com or dot work. I recommend just big dot com because it looks professional. Eso no matter in what country you are. People know the dot com extension and dot com domain names on almost all providers cost around $15 a year, so that's not a really huge investment hosting on the other end and is a little bit more expensive, but it's still pretty cheap. It's a few dollars a month, and this is what you need to pay. If you want to have your website life, that's just economics off it. So this is also true if you're working for a client, you need to tell the client that there are monthly costs involved if they want to have their website life. Ah, what I do with my Glines is I charged them even Mawr for maintenance. But let's just first go over the basics. I've provided the link below two. Ah a My opinion, the best WordPress hosting there is it's fast is reliable and they have super super good support. And they are rated in most Facebook groups, asking number one ah hosting platform on. It's just super quick and easy set up if anybody can do this. So that's also one of the reasons why they are so popular. So it's got signed grounds. And if you go to the length and you will go to this page which is managed, were breast hosting and as you can see there, even recommended by were pressed themselves and by Yost who commerce. So I think there are the best in the world right now. Um so what they offer, as you can see right here is a cheap plan for just one website. I am on this plan because I have different websites, right, because I've website from a YouTube general, every website from my portfolio. So with this prize you will get unlimited websites. Eso If you already know that you want to have more than one website life, then this is a very good deal. And otherwise if you're just starting out or you're buying a website for your clients, that I recommend that you buy this domain One thing if you're working for a client and you're like, Oh, well, I can run all of my client websites on this I don't really, um at a fight you to do that because you just don't want to own the account for your client because maybe in five years from now they want to work with another designer or do they want to work with somebody else? And if you buy their hosting, you also managed their e mails which is come confidential information a lot off the times. So my advice. If you're working for clients, just always big display and burke lions, and if you also just want one of upset for yourself, so you just want to start your own block of your website, then this is also the best package for Now you will get, for example, free as a cell, which is this green secure batch. I want to know how you can call it the screen lock, which make sure that people don't get the SSL error in their screen. And it's also safer for your users. You will get a one click ver press insulation makes everything super easy. You can create a professional email address. So, for example, my domain name is reading the board dot com. So I have the email address info at Sabrina de boer dot com. Looks really professional. Ah, so that's what you're also getting for the price and you can get up to 10,000 visits a month, which is pretty high. So if you really get a lot of traffic on your block, well, then your block makes a lot of money. Probably. Otherwise, you shoot really monetize your block. Um, and then you need to move up to the to the bigger packages. But that's all you need to understand for now. So, yeah, what I do with my clients is that I charged them $20 a month to do maintenance, so I just big this plan and I installed a rep side and then I charge them $20 a month and for debt, I just update the plug ins every first day of the month. And I make a backup off the website, which is actually automated, and we're gonna show you how to do that. And in this way, I actually profit off this because you don't want to lose money when you're working with plans off course. So that's a little business trick that you can use. And if you just want to create a block for yourself, just expect, Do you have at least $10 per month off cost for your business as a blogger? And that's still a super cheap business to start because most businesses require a lot more cash in that, And it's not really that hard to make at least $10 from off from your block, right, so this is the first thing that you need to invest. So what I'm gonna show you first is how to get your own domain name and hosting. If you don't have that yet, after that, I'm going to show you how you can install a website on a sub domain and that is free. You don't have to pay for extra hosting or or a domain. So for me, for example, I'm gonna use this block website as a portfolio item. So I already have my own personal website on reading the board dot com by their ideas, websites also made with elemental or. But what I'm gonna do right now is I'm gonna install ver press on a free domain which is a sub domain, which I'm going to install a healthy block dot arena the board dot com. And this doesn't cost me anything. It is not perfect for your main website before portfolio items. It's super nice. So first I'm gonna show you how you can get your own domain name. So, for example, waiting to board dot com and then I'm going to show you how to how you can create a sub domain. So if you already have your own personal website, you can create a sub domain. You can also install over press on this sub domain and then you could build a whole website inside off your website and you can link that in your performing on show people like, Hey, this is also a website that I can create. So that's what we're gonna do in next video 4. Installing Wordpress on a new domain and hosting: Okay, So what we're gonna do right now is I'm gonna show you how you can get your own domain and install over press on that domain. So we're gonna go back to the link that I've provided below. And what you're going to do is you're gonna go to the startup plan and you're gonna click on, get a plan, and then you're going to go to the order page, and here you need to choose a domain. So, for example, if you want to have a block about health, you can type in healthy bloggers united. That's calm. I don't know if that's available. Bite away. But don't forget to big your extension. So dot com, for example, Here, Cassie. Surprising euro. So if you click on the link, you can see the price in your country. Um, that can be different, but I think it's probably similar to $14. Something like that. And if you click on proceed, you can see if this domain name is still available. So what? My advice for you is is that if you don't have your own personal name dot com that I should definitely buy it. Ah, for the simple reason that you don't want anybody else to have your personal name dot com, right? I mean, my name's renal uber. There could be more people that have that name, right? So Reno is an Italian named the Buller is a Dutch name. It's pretty unique, but a lot of people have a name that can be taken and especially when you're building a block. So, for example, if you if you have a really nice name, healthy bloggers United's, for example, you just want to have domain name so nobody else can buy it. Because if you have this May name in your accounts that nobody else can buy it, you can even sell it if you want Teoh in the future. So if you click on proceed right now, you can see if this domain name is still available if it's as congratulations than it is still available. So right now I'm buying healthy bloggers united dot com, and here you can feel in all your information. If you have a business, make sure that you feel in your text idea because then there will be no tax on the actual calculation. So let me fill these every quick, Okay? And then if you filled in your information and your credit card, you can pick a hosting plan. Right now they have a deal, which is, um, Onley $1 for three months, which is not a very good deal, because after the three months table, increase the price to $10. Eso I'm not really sure why they do this, because it might be, and it's not a very good deal, but they have very good deals, as I showed you on the hosting page and you can select those other deals over here. So if depicted, discount for 12 months, what you're going to see if that is that you will get this price for 12 months. So if you want to start your own block, you can You can give yourself 12 months to make at least $10 a month with your block. That's not a very hard thing to deal, but if you even will more discount and you're already noted you're serious about this or your client is serious about this. Then you can even get it already for three years, and it did. This come will be calculated for three years. A disadvantage of this is that you have to pay the big amount right now. So this is what if you're working for clients, asked reclined like, Hey, do you want to pay for one year for two years over three years? If you're building websites for yourself, then just decide. Like, how sure are you that you want this domain name and maybe you just want to have it for tree months or for six months again. You need to check what the current prices right now. Ah, but it's around this price. So if you're starting your own block, I would say 12 months. Give yourself 12 months After that, the price will increase. But by this time, your block will be a certain size if you, of course, keep boasting good content or your clients. So if your work of work line just say like, Hey, it's $10 a month and then you can have a discount for yourself, right? So you just build them $10 a month or you make them sit in front of the computer and you let them go through this whole process. That's also a possibility, of course. Eso As you can see, if you pick 12 months over here, you're gonna pay this for hosting. And then you also needs to pay for your dot com domain name. So they need a low price will be, ah, 70 tree euros and maybe in dollars it's a little bit different, but that surprised that I need to pay right now. This is just for the course. I'm not really gonna launched this web site, so I'm just gonna put it at three months because I already know that I'm gonna cancel this in three months because I'm just creating this for the course. It's on a real website for me, so just make your decision and then scroll down. And there's one more thing that I want to show you, and that is domain privacy. And this can be interesting for you if you are a influencer, for example, or you are a business owner and you don't want anybody to have your personal information because on the top of this page you've probably filled in your phone number, and there are certain tools on the Internet where other people can get personal information , or at least information about the domain owner. So if they want to get personal information, they can type in your domain at a tool, and then they will get some of the information that you filled in above. If you don't want that, then you need to check the main privacy. And then if people type in that name, and then they will just see the business information about site ground instead of your personal information at Teesside Crown site scanner. You don't really need that because I'm going to show you a lot of free tools that also can do this. So I'm gonna check this domain privacy because I am an influencer. And then I'm gonna confirm that I've read and agreed to decide front terms and I do not want to receive site Great news. But that's up to you, of course. So I'm gonna bay right now. All right, so now I fate and it says, thank you for bridges ing site, ground hosting services. Your turn section was complete. And now what we're gonna do is we're gonna go to the email that we filled in. Okay, so I get three emails from them. I'm gonna click on the first email, and now you need to confirm that it's you because somebody else can use your email address . So if you click on that link, you will go to a page, something like this. And if you don't scroll down and if you click on verify information, then D contact information is fair fight, and now you are. Okay, so go back to your email and opened the second email. And this is an important email, because here is your logging information. So what we're gonna do now is we're gonna go to this link, and now we need to lock in into our accounts with the new password that we create it and now is locking in. And now I'm in the new interface off site grounds. They've recently updated their whole interface looks really nice, and it's really simple to use eso. All you need to do right now is go to websites and here you can see your domain name. It says spending. So we're gonna click on complete, and here they're gonna ask if we're going to start a new website or we're gonna migrate a website from another hosting plan. This is a new websites. I'm gonna click on start a new website and here to have the auto insulted. This is super super easy eso he can instill over press with a few single clicks. So if we're gonna click on WordPress here, you need to sign up again. But this is not for side crown. So not for your hosting ago. But this is your ver press log. And so make sure that is a different password, but you can use the same email, so I'm gonna use the same email, and I'm gonna use the best regenerator, and then I'm gonna click Continue. And I don't want to up sell me as they were not going to click on at work. And I just click on finish and and now it will install over press automatically in the background. You don't have to do anything. And this is so much easier than it was before. A few years ago, before you had to do all kinds of manual things. And now he's just running in the background. Really nice experience. Okay, so now it's done. It says you're all sets and all we need to do right now is click on manage site and over happened now is that we will go to tools that site grand dot com and this is what see panel was before. Here you have different tools. So, for example, if you want to create your own email address like I told before professional email address , So for example, info it's healthy blockers united dot com You can do that over here really easy, and then you can add them to your outlook or to your Mac mill. As you can see right here in security, SSL is already installed. This is also recognize because back then you would have to do that manually. So what we can do right now is we can go to our website and lock in to our new website. So go to your new website and then type slash WP dash Atzmon. And if you're seeing this, that means that we're press is installed in the correct way. So now we're gonna look in with Deaver breast looking So the seconds passwords that we have created. So first looking with your email and your password and click on lugging and now it will show you the repressed our tickets from sight grounds, which we're not gonna use because we're going to start on a clean website. I just want the minimum off the minimum. So we're gonna click on exit at the bottom and now we're inside over press. As you can see, side Grant has already installed a few things which we're gonna delete. But But if you see this, that means that you have successfully installed over press on a new domain. So that is really nice. And in the next video, I will show you how you can create a sub domain. So what I have over here and that is completely free so you can have different websites under your main domain, but right now we're done for this video. 5. Installing Wordpress on a subdomain: in this episode, I want to show you how you can install ver press on the sub domain, which is completely free to do so if you already have your own domain name. So as I have for my website, I already have bought arena de boer dot com. So I don't want to buy a new domain and hosting every time I just wants to test with a website. So that's why I've created different sub domains. However, I can also show different websites for my portfolio, so I'm going to show you how you can do this. So if you're gonna go back to your site tools or to start site grander dot com, and you log in, you have something only the domain depth cult sub domains. And if you have a different hosting provider, maybe you are on the blue hose or host Gator or another hosting provider doesn't really matter. It's all the same. You just have to search in inside of C panel or inside over your admin panel to something called sub domains. Air is really easy inside ground. Just search for sub domains, and there's almost always an option to do this So right now I'm just gonna create a sub domain called Tess one. So then the website will be test one dot healthy blockers united dot com, and it's a separate website with a separate WordPress install completely free. So if I didn't click on create, then it's done. And so it was really nice. And here you can click on Install an Implication and here can really easily select ver press site. Currently super easy on this going unchecked, ever per starter. And here you can create a user, a password and your email. So that's the same as we have right here. Um, the user name is the email here, and you can choose a password over here. And then if you click on install and you go to your sub domains of test one, don't healthy. Bloggers doesn't united dot com slash WP admin like we've also done here. So this link, But then with death one in front of it, then you will also just have your normal WordPress lugging experience, which is completely free because you already have your main domain. So then you will get something like this looks a little bit different than site ground, but most providers just 1/2 the clean ver press install. Compared to this by probably gonna delete this assume, So don't worry about it if it looks a little bit different. So that's how you create a free sub domain for your portfolio, so you can link toe a website to a real website to show your potential clients what you can do. 6. Cleaning up + basic settings: All right. Welcome back in this video. Work on a clean up over press and set up some basic settings. Eso I'm here in sight of the new ver prize dashboard for discourse. I'm not gonna work on healthy bloggers united dot com but it's exactly the same for you. Doesn't really matter. But as you can see, there is a difference. Because if you have about your domain fear site ground, they have installed this dashboard, which you can delete. I always start with a clean ver pris install. So I'm going to show you how you can set up a clean ver press. So if you go to plug ins, don't worry about everything right now. Just just click compliments right now and click on a deactivate for the ver press starter. So just click on it and wait until it's loaded and then just deleted because we won't need that and then click. OK, And now if you go back to your dashboard, you will get a clean WordPress install like this, the other plucking that you saw. You can leave that I don't really use it, so you can also deactivated. So if you really want to have a clean ver press install. Then you can also delete that psych rant Optimizer. It's a performance optimizer but I use different optimizers from my website. My websites are always super fast If they're not too much images and videos, of course on the website. So this is how I always start. Just go back to the dashboard. Ever. Now I'm going to switch to my sub domain. All right, so this is where press a little bit about the basics. You got a top bar, inver press and you got a left bar. The left bar or the sidebar is where you spend most of your time. If you're working in the beckons as over example, if you create a home page and about based on the contact page, they will all be here in pages. So click on pages for now, you can see that we right now we have no Bages because this is a new website of course media. That is where all of your images your fios, your audio fells you're Aikens Everything that you upload that you want to use on the website is stored in your media library. You can also delete items out of here. It's very easy. You could also drag things from your finder or your Windows Explorer just on the screen to upload them to your website. And then you can use those images or does fells wherever you want. The boasts are gonna be very important for this website because we're going to create a block and both are your block boast. So if you go to the design that we're gonna build, all of these things are blocked both. So this is one block post. This is one block post, and you can find all of them in here show. In the future, you can just click on at new. You can add a new block post, give it a title, give it some content, and then if you end, if you publish that, then it will be automatically displayed on your home page like this, or does what we're gonna build in the futures are all of your posts are here. You can also set up categories which I will explain later, which we're gonna use for the menus of. For example, if you want to categorize your block, boast everything for breakfast for example, you can create a category right here and then inside of a block. But you can say like, Hey, this is a block. Boast that that has to get a caree lunch and home made, for example. So that is what that is. If you get Commons on your block, you can find them over here. Vertebrates already has a default Commons. I'm gonna show you that in a minute. But if you enable Commons on your WordPress block, then you will find them here for your first block website. I will not recommend Teoh except comments. So we're not gonna build that that in this website right now because it can become really Spammy. The only thing that you have to know right now is that you can set up menu items over here on their appearance. So all of the's menu items you can set them up on their appearance. Um, and blow gains is also an important section right now on this website. I also deactivated those twos. I'm gonna delete them, and I also have a clean ver pus install. But the public in section is where you insult all of your plug ins and If you don't know what the plug in is, a plug in is kind of like an app on your phones or you have a blinking for security. You have a Blufgan for displaying your block, both displaying your instagram different APS that you can use. You can download them somewhere bait. Most of them are free, and users are also very important enough right now. If you just have a personal upside, you just have one user, as I have right here. But if you work for a client, you can also add a user for your client so they can also Le Guin. Never give out your own password to your client always at a new user, because then you can lead them later or downgrade them because you already administrator. But you can also give people another rank, which is lower. So, for example, the editor roll, which is one rank below administrator and then they cannot install plug ins and things like that here with tools. I never used this, but there are some settings that we need to change, so let's go to settings first, and let's just click on general and change a few things over here and this is the name off your block. So if you visit your website, you're gonna see in your tap over here you're gonna see a name. So let's just visited websites for now and see what it is. So if you hover mature mouse over, it is my block, and you click on the visit sites that you will go to your website. But I also want to stay in this screens, or what I always dio is I right. Click and click on open in a new tab. You can also do that, by the way, by holding co months. If you're on a Mac or control, if you're on windows and it will open in a new tap, I will be doing that a lot in discourse because it's really nice to just have a few taps open instead of going back to dashboard all the times. So click on your new tap over here, and this is how the website looks right now. This is the basic defaults team for press, and there is one block Bosa's you can see. It's called hello World, and there is one Commons that was a common that we just saw. So this is my first block bows. And for the rest of it, this is just a basic team. Very simple. If you click on hello world, we will go to the block, poses your first block posts, and here you can see this basic Commons. We're gonna delete this, but all you have to know for now is that your block is called my block dash my ver press block, and that is what you can change over here. So we're gonna name this healthy lifestyle Er's that's the name of my block. And then here you can add attack line to something like, um, for people that love healthy foods Or this slogan, for example, for people who really care about healthy food. They care about healthy food, All right. If he knows girl down, you can set up a few things over here you instead of your own time zone. So I live in the Netherlands, so that's Amsterdam for me, and you can type in your city or find it time zone of your own country. And then you can set up the date and former, but it always leave this as it is. So the only things that I changed, it's tea time zone and the site title in the tack line, and that's it. And then you click on safe changes. And now, if you go back to your block and you click on Refresh, you're going to see that it changed. So here you can see it in the tap. We're gonna change all of this. So you need to care about this point is you care about. Is this so? As you can see now, the website is called healthy lifestyle er's and everybody will see this. Who visits the website? All right. And there's one more thing that we need to change. And that is in Paramount Ling's, because in para mailings you can set up how your link looks. So if we're gonna create a block, boast, you don't want the link to to look really Massey. So let's go to our website right now and click on our block post. And as you can see now, the link is my website slash and then question mark B is one. Well, that doesn't look really professional. So what I always do is I changed it to Post name. My advice is to only do this once, because otherwise it can really hurt your Seo. So how you're being found on Google, so set it up correctly from the beginning. So my advice to choose the post name because that looks really professional. So I will show you what I mean. I'm going to scroll down. I'm gonna save this. And now, if I go back to my block boats and I click on the refresh, you're going to see that this block poses now called the Tidal. So hello, Dash worlds. Because the space is not possible in a link, of course. So there's looks a lot more professional. So that's all you need to know. For the basic set up over breast soldiers go back to your dashboard, and now we're gonna install our first essential plug ins 7. Installing SSL + Security plugin: Okay, So in this video, we're gonna set up the security for the website. This is always the first thing that I do because you want to make sure that your website is secure so you won't get hacked. And it's also safe for your visitors. For example, if they fill out a contact for allowing website, you want that data to be safe because it's personal info. So we're gonna set a few things up. Click on this. Dismiss you won't really need. It s so what we're gonna do right now is you can click on plug ins and then click on add new. And this is where we're gonna ask most of our plug ins. Or first, we're going to start with the security. The first book in that I always install is S S l, which is that green lock that you see over here. This is how you can secure the personal information off your visitors when they feel out of form, for example. And it also looks really professional because if you don't have that, some people will get a SSL error in their screen. Well, actually a lot of people and doesn't really look professional, my sub domain. As you can see, I already have it for some reason. But on the new domain, it's not secure. But so if you have a new domain, it's probably not secure. So I'm going to show you how to do this. So if you type in SSL here in the search bar, you can see display Akin. It's really simple. SSL s. So this is the list of all the plug ins over process. And as you can see, this has four million installs, and that is a lot. I think I've never seen a block in the has more than five or six million insults. Maybe I'm wrong, but this is a really popular plugging, and also you can see the ratings over here is thing you know it's safe so you can click on insult now and then it's will install, and then you need to need to click on activate and then you need to click on Go ahead, activate SSL, and now it's as as is activated. You may be locked out, so you may need to lock in again. Um, but this is what you need to see. You can just click on the X over here and now you will have to screen lock over here. But if you have a different hosting provider, sometimes they don't install on SSL certificates right away. So if you're not hostess with site ground, maybe you need to look into your hosting and gowns and you need to search for the term SSL and then you need to install Let's encrypts like I showed you in the previous video on signed ground. It's already installed automatically. She can see right here on the SSL manager Les encrypts. That's the basic SSL version that you need. If you really can make this work, please contact your hosting provider because this is important because you don't want people to have that error message in their screen. I'm sorry I'm not a help that for every hosting provider. So I'm just showing you how to do it in sight. Ground. Um so, yeah, right now we have as a cell installed. So the next thing that I want to do is install a security plucking so we won't get hacked eso. What you're gonna do is you're gonna click on at new under the plug in tap again and now you're gonna type in. I seems that there is another famous security plug in which is called word Fence. But I found that that will slow down your website. And this one is also really popular. As you can see, almost one million downloads and this will keep your website fast on. And I have never been hacked on all of the websites that I made also on not on the websites of all of my clients. So I know this is a good good plug in so you can click on install and activate again. And now you need to go to the settings because we need to set up a few things here. And that is that we need to click on secure site over here and then it will just load. You can click on the redirect the normal Webster too hot Tip A s, which is the SSL. So that is what I should suggest. And also you can join the network brute force protection, which is kind of like a system where your website is part of a big network. And when they see a similar threat on another website, on your website, then they can solve the issue faster. So I also advise you to do this. Just put this at. No, because you don't want more emails and just click on Activate network brute force. You know, click on run secure side again because we've just done that, you can just click on close Now There's one more thing that I want to show you, and that is the notification center, because this plug in will send you a lot of emails, which is not what I like. It's very nice that they send you updates, but it's too much for me. Eso If you scroll down here, you can see that they sent a daily security digest so they will send you an email every day . And since I have worked for a lot of clients, this just got too much. So I always disable this, and I also disabled that because sometimes in the night, for example, some Google robots or some people try to hack your website and it happens like five times and then I wake up and I have five emails in my inbox of different websites, and that's just not really nice Oh, also unchecked this one. And this is just about the emails. It's not that deep plug in does not look out people. Um, it's just the notification. So that's what you set up here. If you click on safe settings right now, this is set up correctly in the next video. We're gonna insult to more plug ins, which will make your website a little bit faster and keeps the spam out. 8. Installing Antispam & Image compressor: All right. So the next blinking that we're gonna insult is an anti spam a plug in. So we're gonna go to plug ins again and click on add new and what you gonna type in is anti spam, And then it will load and you will see something with a B. Again. There are a lot of plug ins that offered this, but the best one that I found is on this Bambi as very simple, very light. And it's just good. So we're gonna install that, And this plug in will make sure that if you have a complex form, for example on your website that you won't receive a lot of spam because if you have a contact form on your website, then you can get a lot of spam emails, which is not what you want. So we're gonna activate this anti spam, and we don't have to set up the anti spam. Be as you can see in settings over here, they've already checked the most important things. You can check this and adjust it if you want to you. But this is good enough, and then the less plugging that we need is a new image compressor and an image compressor is very important, especially when you're working with clients, because if there's one thing that claims are not a really good at, it's not really caring about the size of the image in pixels, but also in megabytes. So what you want when another person upload or you upload a picture on your website, you want that image to compress. If I don't know what compression is really quick. Compression is when you have a photo, for example, that is five and be so. If you shoot a photo with your iPhone, for example, it's like five megabytes, but that is rue way, way, way too big for a website, because if you have five images on your home page, then if people visit your page, the website needs to load 25 megabytes of data, which is way too much. So that's why I make my images always really small. And there's an automatic book inference, which really nice. If you upload an image for your media, it will automatically compress. So what you need to type in here is very specific because there are also a lot of compressor plug ins As you can see, if you're typing compressor, you can see that there are a lot of it. But what you need to type in is Reese Mush it image optimizer. There's also a very famous image optimizer, but they will not stop sending you messages on that. You need their pro version, and this is just a really simple one. It's not really popular, but I found this, and it's just it just works is really nice. It's cause Reese much that its image optimizer So that is what you need to type Enzo Reese mush Thoughts. E i t. Space image Space Optimizers. Then you click on Install and Activate, and you don't have to set this up, but you can change in the compression rates. So if you now hover over media, you can see that there's a new tap over here called Reach Smush. That's I T. And if you don't click on the Reese much that I t. You can see that it will now automatically compress all of your images. The default value is 92. I often times make this even smaller when I know that I'm gonna upload a lot of images on a Web site. Even put it at 70 for example, Because, as you can see, right here, 100 is the best quality. So you really want to split into compress the images over this website? Since this is a block, I'm gonna put it at 70. So, devil, be enough, And then I'm going to click on safe changers. And now it's set up. So every diamond upload a new picture. It will now automatically compress the image to a lot smaller size. Okay, so that's it. In the next video, we're gonna install elemental or 9. Installing Elementor + Elementor Pro: So I'm here on the dashboard again, and now we're done with the basic set up. So our website is secure and everything we upload will be compressed. And now we're gonna install Elemental or so Now I want to show you another way to install plug ins. And Elemental pro requires you to insult publican in another way, which is fear, a download. So, um, what I want you to do right now is a click on the link below, which is the Donald Link for L. A mentors. If you go to that link, you will get a downloads, which is a zip fell and you can see Right now the zip fell is in my downloads folder and from the space you will get the latest version of elements. Or right now I'm recording this and it's 2.9 point seven. So what I'm gonna do is I'm gonna open my finder. So here have thes it fell in my finder. So now I'm gonna go back to her press and I'm gonna go to plug ins again. Click on your plug ins and click on add new again. And now we're not going to use the search field, but we're gonna click on upload, plug in, and here you can choose your zip fell. So what you can do is you can drag it onto the button, or you can just click here, choose foul. That's a safer way of doing it, and then selected is it that you want and then click on open, and then you can install the plug in from here. So click on install now and then it looks like is loading. I don't think this is very smart to time. Ever press, but it's already done. If it says Blufgan insults successfully, then you know it's done and then you can activate it. I don't know by day don't have a check box or something like this, but if it says this, then is done. So now you can click on Activate a plug in on the next play gin and I can just click this away doesn't really matter. The only thing that you have the check is that you see elemental over here. So if you see elemental here in your sidebar Dan, it's absolutely fine. And now we need to get elemental pro. So I've also provided a link down in the description and FIA that link you will go to the packages page off element or pro. And now over here, you need to choose your package. So this is how it it will add up to $10 a month. If you just have a personal website for this page, I want to explain a little bit because, of course, you want to justify your investment in this gorge. I'm using element or pro to build this website as you can, as you could see in the title. Um, Elemental Pro is a paid looking, but in my opinion, it's not very expensive because this price is per year. So if you just want to start your own block, as I said, you have to pay, like $4 a month for hosting and also $4 a month for this approximately. So if you devise 94 by 12 you can see that that's $4 a month. So you're hosting your domain and L a mentor combined approximately per month. Now, if you know that you are gonna use elemental for a lot of up sites, then do not buy this package but by dis baggage because, as you can see, you only get three websites for $99 a year. But here you can get 1000 websites and what I do. Like I said before, I charged my clients $20 a month. So $20 times 12 is already more than the yearly price, both elementary. So I judge my client's $20 a month for maintenance, so it just up update their plug ins. Very easy thing to do. You only have to have one client who already pay for your subscription. But if you have to clients you already make pretty nice profit. So if you have three clients that are paying you $20 a month, you are already making $500 per month profit on Lee off Element or pro. So that is pretty nice. So that's why I have invested in this package. But if you just want to have your own personal website, then this is the last thing that you need to buy. And let me be very clear. This is actually the last thing that it's bait in the score. So, um, these are the only two things that you did you need, and that's why it will add up to approximately $10 a month s. So what you need to do right now is you need to click on by and here you can putting your info if you want to, and then you can go to check out. And if you have checked out, you will get an email from them that looks like this. And in that email, you can go to your account and you can download t plug in. So you first have to pay, and then you can download to plug in, and your account will look something like this. So here you can download elemental pro. So if you click on the download T plug in, you will get the zip fell again. So I'm going to do that right now. Okay, so now it's done. I'm gonna go back to my dashboard, gonna go back to plug ins at new You need to click on upload, plug in, and now I'm gonna use a different method. I'm just gonna drag us from here on two D button and I'm gonna click on install now. I don't know if you can do that on Windows. By the way, just click on Choose Fell if you If that's not possible, um, and then click on Activate Blufgan. And now L. A mentor pro is almost done because you need to connect it and activate because it needs to know that it is you. So if you click on connecting, activate, then you can lock in which your account. If you don't see that option, you can also use your license keys or in your account. There's a license key I've blurred. That's right now, but that is my license key. And you can also use that to activate elemental pro. But here, I'm just going to use the simple tool that they have to connect your accounts and I'm gonna click on Activate. And now my account is activated. So now we're done with all the setting up and all the boring stuff. So in the next video, we're going to start with something fishable, which is designing our coming soon page, which is a really nice feature inside of elementary. So I hope to see you in the next video 10. Theme + Setting up a coming soon page: OK, guys, Now we're going to do something fun and that is setting up it coming soon bases. So now we're going to start building in L. A mentor. But first we need to do one more thing, and you only have to do this once. And that is picking a good team because right now the website has to default over pristine , which is not very customizable. We need something simple, something light. So we're gonna set this up ones never gonna create our coming soon page. So what I want you to do is go to appearance and go to teams. And I'm gonna give you the best free team that I found that it's very light and works great with elements. Or actually, it's built by the L A mentor team. If you search for element or over here in the teams, you will find hello l a mentor. And this is the quickest team available because it's super empty. There's nothing in this team that you can do because element or knows that you can build a whole website just with elements or an element or pro. And that's why they released the hollow team, which is, there's a super clean fast team because they know you won't have to go in the team settings anymore. Back in the day on purpose, you will download a team off a team forest, for example. That's a website and you would customize the team. But right now everything is drag and drop it element. Or so you won't need all of those teams settings. And most of these are just the old way of building websites. We are going to use direct and drop really easy. So just click on install on the Hello team and click on Activate, and now we're going to set up the coming soon page. Becoming soon. Page is always first page that I create because if a website is under construction, you don't want anybody to see that you're working on your pages. So, for it is website, we're going to create all of the's bages. But if you're still working on your pages, you don't want anybody to see it. So that's why I'm setting up a coming soon page and Elemental has a feature build in. That is really nice, because that will automatically send everybody two de coming soon paid. So no matter what they type in, for example, if they type in your website dot com slash about, they will always be redirected due to coming soon. Page s so I'm gonna show you how to do that. So if you hover over L a mentor and you go to tools now you can see a tap over here called maintenance modes. And we didn't maintenance mount. You can set up a coming soon template. The first we need to create a template. So we're just gonna set up a really simple template with a logo and a little bit of texts, and then everybody will be redirected to that page. So what we're gonna do right now is we don't have something to select, so we need to create a template. If you click on, create one, you will go to a new screen and you can just call this coming soon, and then you can click on publish. And now you will see this edit with elemental button. So if you click on edit it, l a mentor. Now we will go to the elemental editor and this is how the elementary editor looks in this single video. We're just going to focus on building the coming soon patient. I'm not gonna explain everything over here. Eso don't worry. We will cover everything that you need to know how to create a block. But right now, we're just gonna create a simple coming soon page so we can start building up our other Bages and I will explain all the details when we're building the home page. So right now all you need to do is go to settings over here because we want to remove this . We want a clean page and you can set that up on their page layout over here. So if you select elemental canvas, you can see that we will get a blank screen. So that's all you need to know. If you want to save your changes, you need to click on update. That is how elemental works. And if you want to see the final page, you can click on the I. So if you click on preview changes, that is actually a preview off the page. So if you want to go to the actual page that you need to go to the actual link. But all you need's an over now is that if you click update than all of your changes are saved on the life page. Okay, so how do we want our coming soon page to look like? But I just want to have a simple logos or the logo that I have on the website that you want to show that because that looks professional and then maybe a little bit of text that the website is coming soon, So that's what we're gonna deal. So I'm just gonna drag in an image so you can dragon an image right now, but I always recommend to first create a section. You can create a section over here with this plus and then you can create a section that has two columns tree for etcetera and sections are the horizontal parts off your website. So, for example, if I have to home page over here, this is a section also, this is a section right. Then we will create a section for this part and another section for dis Spartan. Then this is a columns, columns, or vertical. And this is also a column. And with in a column you can create section so it in this vertical column, we have one to tree four sections. So that is how that works. So again, horizontal rt sections and vertical already column. So right now, we just want one simple big page. So we're just gonna click on this and now we will get a column is very small, So if you want to give it some height, you can do that simply over here. If you go to height and you click on minimum Heights, you can set up the pixels over here. For now, let's just keep things really simple and just use this slider over here and make it as big as your screen. The number doesn't really matter. For now, we're just gonna keep things really basic for this template. And what we bonds right now is when you want to add an image, all of the elements that you want to add in the elemental editor, you can find them over here. So if you click on this, you can track in anything you want. So, in a title, an image video, a button. So right now, we only want an image and a little bit of text, so first, I'm gonna track in an image. You're just track one of those boxes and direct him inside off that call them, and now is really huge. I we're gonna make that smaller. So when first, we need to pick an image. So if you click on shoes image, you can upload an image. So if you have already uploaded images into your media library, then you can find them over here. But right now we're gonna upload something. So what I want you to do is go to your finder and go to D Exercise fell link that is down here below where f prepared all of the images that we're going to use for his website and have also inserted a logo. So this is a B and G. That's a transparent picture. Eso What you can do is just drag in its from your finer works the same on windows and then click on insert media. And now the logo is inserted on our page. Really simple. This is a way too big. You can see image size over here, but that is not the visual sight. That's the version that verbose uses in the beckons. I will show you. If you click on medium, it will stay the same because every image that you upload repress creates a few different versions of it to keep things fast. So if you already know that your image doesn't need to be that big, you can select a smaller version. For example, like this. Now it will decrease because otherwise it will become too on sharp. But this is not where you change the visual size, the visual size. You can change that over the styles. Every elemental element has three of those taps Gun 10 Stella and Advanced. We're not going to go into that in depth now, but all you need to know is that you can change the with over here like this. I don't recommend using deep percent, but you see pixels because then it will be easier for responsive mode. So just put it at 205 for example. Ah, maybe a little bit bigger. You can use the slider over here. You can type in a number or you can use your arrow keys move up and down. You can click on these little things over here to make it bigger and smaller. So that's all we need for the logo right now. And we also want a text, a single line of text. So we're gonna go back to the $9 I'm gonna drag in a text editor like this, and now you can see that you can place it above or under the logo. So we're now I'm gonna place it under the logo, and you can type in your text over here. You can also type in over here, but I don't recommend that because sometimes when you're typing team over example, your computer will remember to style it. You're typing in and it will affect the goat. So I always recommend just type in the text over here. That's the most safe way. And if you really want to make sure that there's no style, you can go to text over here. And if you just see Dex and not some weird goats, then you know that it's just a plain text, which is what you want. So right now I'm gonna tight type something like full website coming soon. And now, as you can see, the text is left aligned. So here with in Diestel, you can center this whole element onto this center show. If you click on center, you can see that it's now centered. The last thing that we need to check before we save it s t tablet and mobile mode. So we're gonna hover over this, which is the responsive mode. Click on it, go to tablet. And that looks actually pretty good. And then we're gonna go to Mobile and that also look good. Okay, that's nice. So we don't have to change anything for mobile and Tablet. And now just go back to death. Stop! Close this click on update. And now we have created D template so you can see that this page will reloads. And now this is our coming soon Template looks really nice, so we can go back to the tools right now. And now if we refresh this page, we can set up our coming soon, so we're gonna choose the mode which is coming soon. By the way, the difference between coming soon and maintenance is that we coming soon. Your website can still be indexed by Google so people can find his fear. Google, if you put it on maintenance month. It's actually the same because people will be redirected to do that template that we just created. But your reps I will not be indexed by ghoul so people will not find your website right now . I don't care that people find my websites. I'm gonna put it a coming soon on almost all cases. You just want to put it, put it at coming soon because ah, lot of people just want to be found on Google. So now we need to select a template that we've just created, which we called coming soon on. And then we click on safe changes. So now you can see this maintenance mode is on. So now we fully done with the website, we're gonna change this and we're gonna turn off the coming soon, and then our website will be life. If anybody goes to my website and even types in something like about, they will always be redirected to the coming soon page, which is what you want. So I hope that you enjoyed this episode and in the next episode, we're really going to start with our home page will explain what we're gonna do. So I'm really excited and I'll see you in the next video 11. Breaking up the Adobe Xd file: Welcome back in this new chapter, we're gonna build the actual block. So this is a very exciting chapter. I'm very excited for this. And as you can see, we have the four pages over here. By the way, this fell is an adobe eggs e fell, but you don't have toe Have this fell in order to follow the course, I have included it in the download folder, but you don't have to use it. You can just use the images. But I would use this design fell to see the sizes off the phones and the different collars . But we're going to rebuild everything in elementary. If you just follow what I put inside of l a mentor, then you're totally fine. But if you have adobe exceeding, you can open this fell if you want to. So now, in this first episode, I want to take a little bit of time to explain the basics off the functionality off a block because this will make it much easier for you to understand the big picture because a block is a very dynamic website. If you want to create a simple business website, you just have four pages and nothing ever changes on those pages. But in a block you have a lot of content that needs to be replaced by other content. So, for example, on the home page, this whole section ISTEA reasons posts. So if you create a new posts, you want that new post to be automatically on top. So that means that you need to tell this section inver process. If there is a new boast, you need to boot that goes on top or, for example, on a category page has a check box that is checked with breakfast. Then you need to display it on the breakfast page. What you also want is that if you create a new block post and you upload an image in your block pose, you want that same image to be displayed in this list. So that means that we need to have a lot of dynamic content and dynamic condom means content that is not on one place off your website. It's like the simple explanation off it, and we also need templates, and I don't mean designed templates, but l a mentor. Templates mean elements. So, for example, the header image over here we have the same header image on all of our pages. So that means that we need to tell Vour Press that we bond this image to be placed on top of all pages in our menu. We want the same menu on every page, but it has to have an active state because we want to know on what page we currently are. So that is everything for the header. This is also true. 40 footer. You want to create the food or ones and then you want to display that same food er on all of your pages. And if you make a change in your master template that you want that change to display on all of your pages. So that means that the food er is not part off the home page. It's something you create in another place in wordpress which an elementary is Kulti food or template. And then units are elementary that they need to show that food a template on every page. That's it. And also for this site panel. This site panel is also on this page and also on this page. And if you want to make a change, you don't want to change it on all of your pages where you have a site panel or a sidebar. You just want to change it involved. Place. So how does this look inside of er press? Well, let me show you a website off one of my clients. So this is a website of one of my clients and this is a magazine website, so it's kind of similar to a block. The technique is actually the same. So if you have this block post, for example, and you click this block post and you will see the same image over here and you don't want to upload this image two times so this image is automatically crops inside of a block boast by this one way to create it. But I'm going to show you how you can always have the same image ratio for every block boats because that looks a little bit nicer that on this website, But for this website, this works. So how does this look on the inside of her press? So, as you can see, I'm here inside of the website and I'm here inside of post. He's already block posts. And if my client as a new block post like this, and my client creates a title and he puts in all of the content. Then he can also put it in a category. So then it will be displayed within the category, and we also have that name. And if the client uploads an image right here, you want that image to be displayed on the displace, but also in the over few. So that means that we need to link deep, beckoned over, pressed to the front ends. And then the last thing that we need to do is create all of those separate blocks. So this is also called a template. So we need to create this block ones, and then we need to tell if there is a block post title you needed display that block post Idol here. If there is a category, you need to display that category over here, and the read more button automatically needs to link to the actual block post page. While the contact page is gonna be easy, it's just gonna be header of food er and some content in the middle. That will only be displayed on Mom Paige. So that's going to be really easy. But most off the block is very dynamic. So we will be using the team builder because he header and the food er and your block bows are all part off your team. We're going to create our own team. And this is why this website is so flexible. Because if you understand how to create these kinds of templates, you can design any kind of block website or magazine website that you want. So that's it for this first video. In the next video, we're gonna prepare all of the phones and off the collars because that's a very efficient way to work. So I will see you in the next video. 12. Preparing our style in the theme style: Okay, Welcome back in this video, broken and prepared the phones and all of the collars on. And we're gonna do that with a new feature instead of elemental. Called the Team Styler. I really loved his feature because it will allow you to change the style off your body phones, for example. So this font on your whole website if you use it in a correct way So this is really nice because sometimes your client will say, like, Oh, yeah, I don't like that title. Or could the title be a little bit bigger? And then you will have that title on, like, 300 places in your Web site. It's horrible. So you want to work with the team started because then you can control that's from one place. So what do we have in here in this website? Um, we have a big title. As you can see over here that's dirty to in size. We have a smaller title for our block post, which is 20. What do we have over here? This is also 20. This is also it's Winnie. But then we have a smaller one over here. That's 16. So that means that we have three title steles. We also have a body phone cell, which is this one for the long texts, which is 16. And it's Carla. That's what we also need to know again. You don't have to open this fell. You can just follow along what's right? What I do inside of L. A mentor. And then we have this creative found over here, but that will only be displayed on a few places, so I'm not gonna prepare that. But I will prepare our three main title styles and our body style because that is something that will be displayed on a lot of places. So let's just get started. I'm going to click on my ver press and I'm going to go to Bages over here, and we're gonna create one desk page where we can see all of the steles and late, maybe later, come back and see if this tells all nicely fit together. I already made a design right now, but sometimes that's a nice thing to have. So click on at New for a new page and just call this page, um, Maine style or something like that, or guidelines right now, I'm just gonna call it Main Star and I'm gonna click on Publish. It doesn't really matter because we have set up the coming soon base so everyone will be redirected to that page. So now we can just click on add it with L a mentor, and we can go to that page. So what we need to do now is we need to load in our titles, and we we want to load in our text and maybe even a button, because we have a button style over here that is pretty nice. So maybe we can use that because we will use this button on a few places. So let's just dragging a few titles. So a title inside off a goat is called a heading. It's really confusing because this part is called a head there, but a title is called a heading, so if you drag in a heading like this, you can change the text of the heading over here. I do not recommend type it change the text over here, but what you have to pay attention to is the HTML tag. But the only thing that you have to know about the HTML tack is that the age one is the biggest one, and the age six is the smallest one, So H stands for heading. So these are all the heading the titles, and DP is the normal body phones. So to give you a little bit more context back in the day when you would develop a website, you would use the age 12 h six as hierarchy on your page. So the main titles are to age 12 2nd biggest idols Art age do. But this is also important for your S e O. I am not an expert at ASIO, but I know that Google reads html tax. So for your block boats or D titles over a page is always the best to use in H one because that is the H Decter Google, based on most attention to this is not a course about Seo. But that's the background on why DSR here. So select the age one for now. And that's all we need. We need one big title, which is for us. It's gonna be this 1 32 with Mary better as the phoned, and we need also a smaller title So that's just click only $9 drag in another, heading under our main heading, which we're gonna put at h Do know drag in another heading. And we're gonna make our age three. That will beat the smaller version. But we're not going to change this stele yet. We're going to do that with the team style, but we're not done yet. We also need a block of Texaco Beckton nine dots and just drag in a block off text like this T text editor. It's cult. And here we go. We have a block of text now copy districts a few times because we need to see the line heights. I'm gonna copy all of that. Copy that a few times So we will see the spacing between the lines that's important and also am onto crab in a bun in like this. So this is all we need for now. So now we're gonna sell this with the team Styler show click updates for now because we're gonna save this. Do not click on the hamburger over here and here we can go to the team Styler. So the team Styler is the place where you can edit the steles if you're heading for the whole website so we cannot click our text. Right now, we cannot edit is right here. We need to edit it over here. So go to typography. And here you can see the body phone. So the body found is dis text. So what do we need for our body phones ball with? In this design, we have Carla as a phone. It's 16 and its regulars, so let's just create that right now. If you go to typography, you can change the fund family. It's called a family because of phones can have a lot of different versions. So if you see family somewhere, that means that you can change the phones. So click on that, and I'm going to select the fund that I want. And as you can see now, it's as Google because Carla's a Google found I always use Google phones because Google phones are free and they are automatically implemented inside of L. A mentor. So Dad is nice, and now for the size we need 16. If you change the text side over here, you can see that it will change. But as you can see the textile is not changed. S so what we need to do is we need to collect on updates for now. And it says in order for the team starting to affect all relevant elements elements please disable, default college and found from the Settings page because this will override the fund styles off your current steam. So if you have another team installed that I have, So that's why it's not working. So I'm gonna go to the team page. I'm gonna hold command so it will open in a new tab. So let's go to the settings and then disable defaults, phones and disabled default college. Now click on safe changers, go back to your page and click on reloads. And now you'll see that the fund has changed into Carla. So now we're not back into the team Editors. I'm gonna go back to the team, Styler, I should say not a team at other open typography again. And we also need to change the collar to the collar that I use for dis design for the body . Texas 717171 You can just type that in over here, starting with the hashtag or copy. It's from a designed to like I'm doing right now, and that will change the collar. Let's see if it works. Yes, As you can see, it worked. So I'm gonna base that color coat back again. And now that's all right. Now, the last thing that I want to do is set this one at zero s. So they will not be a lot of spacing beneath our text layer because normally there will be more spacing. So just set this at zero. Now, sometimes in our website, we also have a link like this. So we want that link to be the green that we want. And we also want to text to be underlying, so it looks like a link, which is also something we can do. So let's just grab power Green collar Coast for now. I'm gonna go back, and I'm gonna go to link and then set up the collar right here. Base that collar and then let's just click on the plus, because these are the default collars off elementary. We actually don't need to have one, so just let's just the lead, all of the default collars, so we will only have two collars that we were actually gonna use. I always leave black and white, but now we have saved the green. Let's also save the gray version the reviews for the body text. So now the link is green. It also happens in the bottom, but we will fix that soon. So if we have a text that has a link, we will see that able during green. And we also need to add the underline. So if you go to decoration, you can select underline. So in that way it will create an underline effect, not click outside of this. And now let's just change the edge one H two and h tree. So the collar for our block post is actually 121212 And that's also true for dese titles, so they all have to. Same caller Dad is nice, so the biggest one is dirty to then 20 and then 16 so dirty to 2016. So let's go to call our first Let's at the collar. 1212121 Let's attitude a panel now go to Typography Fund. It's called Merry Weather that looks good and dirty, too. Then there's one thing that we also need to add. And that is the line height. Because sometimes, as you can see, over here, we have two lines. So we also have to copy the line height. In this instance, it's 42. But if you have another found, you need to test that a little bit. So you need to make this text a lot longer, so you'll have to lines, and then you will need to check what looks good. So for now, I'm gonna put it at pixels, and we're gonna put that on 42. All right, So now I can go to H two industry and apply the same thing. Okay. And now the last thing that I need to change is the bottom, because the bottom now looks like this doesn't look really go to click on buttons and then we're gonna go to typography. Now let's take a look at our design. Our button has a different style than the normal heading. Text inside of the button is mantra yet, and the button is green and it's very sharp, so it doesn't have a rounded corners. So let's just create that right now. First go to the text collar and make them white. Then I'm gonna want to go to the background color and make that green. Now I want to go to the typography and selected the fund. Monse aretz now Decoration said that unknown because a button is also a link, so we need to set it at none. Now, the size over here was 12 but it has a lot of spacing. So when you said this at 12 then transform it into uppercase, so it will all be capitals and then we want a lot of letter spacing, so they use different numbers here than in Adobe X'd. So just designing a little bit on the I make sure it looks good enough that lives good. And now border radius, You're gonna unlinked this and that's it. If you put it a zero now you can see that the But it looks like this. Now the button over here has a little bit more spacing on the top and on the bottom, and that makes it look a little bit more clean. So that's what I also want to do. So I want to set up my own batting, so I'm gonna unlinked this. So now it will not have any betting. I'm gonna at my own margin and padding. So on the top in the bottom, I'm gonna use 10 and let's see what happens. But that's a little bit too small, So let's just try 15. For now. That looks better than what? About 25 25 over here. That looks kind of nice. And we won't use a lot of forms on the website only in two places, so you don't have to set this all up, so that's OK. And the last thing that I want to do is check if the font is actually the same. Because right here it looks like there is a lot more spacing going on. It also looks a little bit more light. So I just want to check if this is what I want. So I'm gonna go back to topography. Gonna go to Carla. Oh, I forgot the line height, as you can see. Okay, I'm gonna put this at 25 that already looked a lot better. Okay, so that's all I wanted to do for now. Also, if you already noticed. Your website has a background on all of your pages. You can set it up right here. But this is all I want to do right now is I'm gonna click on Update, gonna go back to the normal page. And now you will see if we drag in another button who will already have the exact Stell that we want some. This way, we can really fast build up our pages without having to go into the editor all the time. So let's just click on update. Let's go back to where Press. I'm gonna click over here and then exit to dashboard. And that's all I wanted to do for this video. Now, in the next video, we're gonna take preparations. Teoh, design the actual hatter that we're going to see over here. So I will see you in the next video. 13. The header: Welcome back in this video, we're gonna create the heather with the header template inside of Elemental. Or you can export this header as an image. But on mobile and tablet, you don't have a lot of space. So you want the image to be a little bit smaller. And that's why we need to separate the logo detects over here and the image eso that it will just to the screen off the device that that the person is fueling the website on So what I've done if you go to defined er we have two logo over here, which we have already uploaded, and we have to Heather image over here. So that is all we need for now, because this is a text that we're gonna create with elemental and also for dis little divider. So what I want you to do is go to over press right now we're gonna go back to the dashboard because we don't need this anymore and we're gonna go to templates. And now we will have the team builder over here, which is a part off element or pro. So now we can go to header over here, and we can create our header template again we will not create is on the home page Well, because we want this to be displayed on different Bages. That's why we created inside of the team builder to click on, add a new header and just give it a name. I always got a header fee one, something like that and then create template by your visitors will not see that name. So it doesn't really matter and then element or offers you a lot of templates which I don't use, because then you will have a lot of new cells in your website and our had a is pretty custom. So just click this one away and the first thing that you want to do is click on the plus and click on this 1st 1 because we only need the one column for this header. Now we won't just harder to have a little bit of height, so what you want to do is go to advanced and you want to explain with the padding. If you don't know what margin and patting is, margin is the outside often object and betting is the insight. So this is the space on the insight and is the space on the outside. So an example. If you have a bottom like this, if you want more space on the inside of the bottoms at batting, and then this will happen. If you want more space on the outside, then this will happen. And also this phone because you want more space on the outside. So if you're not familiar with it yet, it doesn't really matter. You will learn it by doing so. What I always do is I unlinked this because I want to set my own banning and margin and I want to add a little bit on the bottom, something like 80 and a little bit on the top. And now, as you can see, we have a little bit more space to work with, maybe even make it 100. And on the right and the left, we don't need any batting because this is a fool with header. Now let's just add in the image first, so if you go to stele, you can select a backgrounds, so we want an image. So that is under the tap classic, and now you can select an image over here. If you click over here, you can upload an image like we did with the logo. So grab your header image and just uploaded on the website and click on insert Media. Now, the image is absolutely massive. So we're going to change a few settings over here. First of all, the position Put that on center center, for example. If you have a photo that has a lot of room on the top, you want to put it at bottom center, for example. But for this image is perfectly aligned in the middle, so Dad will be fined attachments. You can leave that repeat, click on no, repeat, because you just want to display one image and the size we're going to set that Kaufer so it will automatically cover to screen, no matter how big your screen Iss So, for example, if we click this one away, you can see that it will be a little bit bigger. And actually, this is how your website looks. So if you think like oh, it looks great right here, just click this one away because this is how it really looks. So we actually need a little bit more spacing on the top and the bottom. So click on Advanced again. Let's add 20 on the top and on the bottom. And now click this one away, and that looks a little bit more like the design that we have over here. We maybe even need more space. But let's first at the logo in. So what you can do right now is click on the $9 at in the logo you can drag in the site logo. But I prefer to just upload a new image because sometimes that's sharper. I don't know really why? So if you just great grab an image and place it inside off your column, you can select your logo from here against. Click on hair flick on the logo. Click on insert. Now the logo is inserted. We don't need the biggest version, so make it a little bit smaller, maybe even 300. Now go to the stele and click on pixels. You can also use this percentage slider, but if you put it at Swinney and you forget to edit it on mobile, it will also be 20% on mobile. So if you put it on pixels that's a little bit safer. So that's what I always too. So let's just put it at 200 for now. Now, we also need to add in a little bit of text. So what we're gonna do is we're gonna go back and we're gonna grab the text editor. So grab one of your text editors and just direct them in over here. Now, we can change up this text. Now. I want to say something else. Sometimes where you copy attacks from an email or somewhere else detects can have steles applied to do it. So sometimes if you just copy it from somewhere else and you just base it over here, sometimes it has already is still applied, and then it will create a lot of code that you don't need. So if you want to be really safe, click on the text over here and based your text over here, Denko back to visual and add to the enters or ah, the boldness. If you want to you something like that with the bowled over here, because otherwise you will have a lot of goat in your text that you don't need. I'll show you what I mean, if you put this on both, for example, this is what actually happens on d beckons. It's on the visual side. It looks like this, but this is what really happens in gold. So now I'm good. Put his back. Check it again. All right, that's good. Now go do Stell. And we want to center line this like this Pretty easy. And now the last thing that we want to do is create this little line. There's little line is green. We've already saved this green, and it's two pixels in with Ah, this little line, you can easily create that with Dee Dee fighter. So if you just grab into fighter like this and you align it in the center, you can set up d with over here again. I like to use pixels instead of percentage. Put it on something like this. Go to the style. We're gonna set up the green collar and the whiff is gonna be too. All right, then, the gap. We want that to be a lot smaller because we wanted Teoh be very closely to text over here. So just put this gap at zero or to the lowest And then we also needs to make sure that this item will move more towards the text. Now, normal text boxes have a lot of spacing beneath it. So we need to make sure that there's negative spacing on the bottom off this text. So that means that every item under this tax will move up and it is example that means that this line will move up. So what we're gonna do is we're gonna go to advanced, and we want to do something on the outside. So we're gonna play with the margin. So unlinked this and now we want negative margin at the bottom. So if we add more space to the bottom now, items will move more far away. So if he at negative to the bottom so you can see minus tree now the items will start to move towards our texts. Now, take a look at your design. Look, if you're happy, that looks pretty nice. The logo is a little bit too small, so I'm gonna click on the logo. Gonna make that a little bit bigger, something like this. But now, as you can see, this whole box has become a lot bigger than will be started with. So let's closest for now, that's a little bit too big for my taste, and that is because we've put in the items. So if we click on this section again because we want to add it to sections or click on these six darts over here, these hundreds and 20 pictures on the top on the bottom are added above and beneath all of this content. So that's why we need to decrease it if we want to change that. So let's put it on 80 for now. And let's ah, closest to see how that looks. That looks pretty nice. Maybe it's a little bit too big. Let's just try 70. That looks pretty nice. So now we need to check it on mobile. So to go to tablet or mobile, motioning to click on the responsive mode and click on tablets, for example. And as you can see, this is already pretty nice, because we've worked very efficiently, and now if we go to mobile now, you can not really see the green parts in the pictures, and now we need to change up a few things. So first of all, if you click on the section unchecked the padding, So just uncheck it like this. Now we're gonna set up something different, something like 40 and 40. And we also want spacing on the left on the right because if this text gets too long, you don't want it to touch the borders. So let's just put 20 on the left and 20 on the right. All right, that looks a lot better. And now click on your logo. Make that a little bit smaller, fickle to style again. Come pick source, change up the logo a little bit, and now we still don't see a lot. So I'm gonna change it again. So click on the section. Let's just put this at 20 or 20. That looks a little bit better, but I'm still not hot. So sometimes it happens that on the mobile phone, images don't work that well. So what you can also do is hide certain elements to make sure there's room for other elements. So in this case, if you want to sacrifice the text and this little line to show more off the image, you can do that. So click on our text layer on the pencil, Go to advance, Scroll down, Go to responsive and just height This text a mobile Pretty easy. Now. Also, click on the line, do the same thing. Go to advanced, responsive and high Tous finger on mobile. And now we don't have a really good free few in here. Because when an element is hidden in L. A mentor, um, it will still show it, but it will show these lines, So that means that we cannot really check if our idea actually works. So at this moment, we need to grab power phone and take a look at how it looks on the phone. So as you can see on the phone that this looks a lot better. Maybe we need to add a little bit more padding on the top and on the bottom to make it fit a little bit nicer. But this is good enough for mobile. So that's all I'm going to do for now. I'm just going to go back to my desktop mode and now detects end line is visible again, and I'm gonna click on publish. And now we need to set up the conditions. Eso the conditions are the place where you tell Elemental where you want to display this item. Now we want this header to be displayed on the whole website. So we're just gonna click on at the condition and the standard condition is added on the entire side. Click on safe and close. And now if he click on, have a look, we can see the actual header. That looks pretty cool. And now, as you can see this automatically, adjust to the screen size. And now if you go to mobile, it starts to look like this Pretty nice and pretty cool. 14. The menu - creation: Welcome back in this video, we're gonna prepare the menu bar that is also barred off the header. So we're just gonna create this section and then also include that in our header template. But before we can do that, we first need to create dese pages because if we create a menu inside of elemental, we're not gonna type in these names by hand because these names needs to be actual pages. And that's why we're first we're going to create the pages, and then we're gonna load in the pages with the menu item inside of Elemental Pro. So let's go to our ver press is the result were here inside of the editor again. So I'm gonna leave the editor open because we will need this. So what I'm gonna do is I'm gonna click on the dashboard. I'm gonna hold commands or control to open it in a new tap, and then I'm gonna go to appearance and then menus on. I've already showed you a little bit in the basic episode, but on their appearances you can change up the menus. So here in menus, you can create different menus. Why can you create different menus. Well, because on some websites you have a different menu in your header than you have in your food. Er, for this design, I've just copy to the main header from above and put it in the food er, but a lot of times you will have a different footer menu four pages, like your privacy policy or terms and conditions. So this is what they call a menu, and then you need to assign pages to that menu. For now, we're just gonna create this upper menu. So let's just give it him name right now. My top menu. I always call that top main, so I know what menu it ISS. And then you can assign different pages. Right now, we don't have pages, so that's what we need to create first. So we're gonna create the menu for now so it will be saved. And now we're going to go to pages and here we're gonna create the pages that we want to add to our menu. So just click, add new. And first of all, we're gonna add to the home page. So adding home and then click on publish and that's it, Then go back to were Pre's. Then click on add new again An ad, for example, a category page. So breakfast could be one Breakfast will be pH and we're going to add another Get a ghareeb age something like fruits. Also gonna at the about page and the contact page for now. And I think I'm gonna have one more page that will be beneath this best list pose. I'm also going to show you how you can create a sub menu like this. So the best list is not a post, but that will be a drop down. So under this list, we need another page. So in my sidebar, I thought of a few ah, best pages. So, for example, best grapes. So let's just create a page right now that is called best grapes, and we will create that as a sub page. So we're gonna go back to our menus or go back to appearance and then to menu and then in our top menu. Now we can select all of the pages that we have just created. So the main cell based we don't want that, of course, to be in our menu. So we're gonna delete that. So now I just checked the boxes that you want to add to the menu. Sometimes when you don't see all of the pages here, you need to click on few all. And here are all of your pages. So of course we want the home. We're already half. That s so we won't be about best grapes, breakfast, contact, fruits and home again. No, we don't want the home. So let's just click on ads to menu. And now, if you want to change the order, you can just drag them. So click and drag and change the order. Such a contact page needs to be at the end. The best grapes need to be a number. Teoh breakfast about Okay, something like this. But now the best grapes. I want that to be a sub page. So we need to create this best list. One. This is not a page, but it needs to be visible. And that is where the custom links coming. So if you go to custom link, you can create a custom link, and we're just gonna leave this one blank and we're gonna type in the text best lists now. It will give me an error. So I need to feel in some things I'm gonna put in a hashtag, and then it will work, and I'm gonna click on ads to demand you. And now I'm gonna attract this at number two. I'm gonna grab the best grapes and put that a little bit to the right until it shifts. As you can see right here. Now we can save this menu. And now we can load in this menu from the elements or editor. So that's what we're gonna do in the next video. 15. The menu - Creating pages: in this video, we're gonna put all of our pages inside for menu. So let's go back to our Heather. If you've closest top for a reason Now you can go back to templates and then team builder. And from here, you can click on edit with elements or and I always open it it in new tap or holds commands and then click on it. So now we're in here, but we need to refresh this because we've grade all of our pages. So there's new data, so I'm just gonna click on the refresh. OK, so now let's look at the design. We need this nice collar in the background and there's also a new collar that we have. What is text over here, eh? So let's scroll down a little bit. So we want to add these collars to our palate. Let's first start with the background. So I'm gonna select my collar. You can select your collar. You can big any other collar. I suggest that you use a light one for the menu. So now just click on the plus and we're gonna create another section like this doesn't have to be very high. You were just gonna leave it. For now, click only stele and then go to blessing back from because we want the caller as the background. So now, based in your collar goat and also at this collar to our ballots, that's good enough. And then we want to add in our menu. So Elemental Pro has a nice feature for this, and it's called the Never menus. If you look over here, you can see the naff menu. If you can't find a witch it over here, you can just search it. But now I'm going to drag in the nerve menu like this, and now we need to select D menu and so angry if only one menu has been already selected. But as you can see right now, we have our menu. And now the only thing that we need to do is style it. So this is pretty nice already. It's not the green death we want, and the phone needs to be a little bit different. So we're gonna go to Stele and I'm gonna grab my collar, which is a dark green grayish collar which blends in really nice with this background. So I'm gonna paste my collar over here and also at that to the palate. That looks nice. And now I've used the same cell as in the button. So that's mantra. It's 14 and then a lot off spacing. So we're gonna go to typography again. And here you can change the found in the same way as we did in a team Styler. And we need to do this right now because the DNF menu is not a part of the team's Tyler's. And sometimes you have to go into the Styler again. We don't want this underline. So let's go to decoration and go to none. We wanted to be uppercase, and we want a lot more spacing between the actual characters. So we're gonna go to letter spacing and increase this a little bit, and also the phone is a little bit too thick, so we're gonna go to wait and put this at 300 now you can see it becomes a lot more cleaner . Looks really nice. So click outside of your topography, and now we also need to change a few things over here. First of all, if you want your menu to be exactly aligned at the outside of your our port. What you don't need to do is delete all of the horizontal padding, as you can see, because with the horizontal patting, it will make the clickable areas bigger. But what you can also do is put this zero and then at spacing in between and in this way, the line, the underlying will be as big as the actual item. And I think that looks a little bit better. So I used at most of the time. So give that a little bit of spacing something like 30. Now you have to re dept. Over here, which is normal, hover and active and active is the page where you are currently at so de pages active so in my design, and we want to have this green underlying on the page that we are at. So how you can do that is good, too active and the text color just needs to be the same. So we just can select same text collar but two pointer color. We wanted to be green, and we cannot see that over here because we're not actually on a page where in the header template but weekend set up the settings over here. So in our design, this is sizes to win a pointer with. I'm gonna put that at two. And right now we can only see the hover. So let's just also set up the hover over here so you can pick the same color and then for the Poynter Put that on green and now you can see that that looks already love more like our design. Now, the last thing that I want to do is make sure that this line eyes a line at the bottom off this whole box. What you also have to know is that every column in L A mentor already has a little bit of betting so space on the insight which you can delete. So this column, because the columns are for tickle and the sections are horizontal, so just call him over here has a little bit of spacing. That's why you see a little bit of space from here to here and from here to here, from the left to the right, which you cannot actually see right now. But there's a little bit of spacing over there so you can delete that it just click on the column and can then go to advanced and then just unlinked it. Now you can almost not see the actual line, but it is there. If you look closely, it's still there. So now we need to increase the size Steve vertical sides of our items. So we need to go back to our actual menu item because we're now inside of the column. So click on the pencil off our menu item. Now, go to vertical padding and increase this and now our whole menu becomes bigger. So let's put it on 20 for now, and now it will work. So let's just save it's run out and let's see what we've created so far. So I'm gonna click on update, and now I want to go back to wear press because I want to see how it looks on a page. So I'm gonna go back two pages and let's just few the home page for now. So I'm gonna open the home page in a new tap and let's see how that looks. So I'm going to click on the breakfast page, for example, on Let's see how that looks and that looks pretty good. You can see on the line over here. For some reason, our Aiken doesn't display and also this drop down is not perfect. So let's see what's wrong with our Aiken because that is a little bit weird. Let's click on our menu again. I'm here and content and then layout on. Let's change the submarine. You indicated to something different. Let's see if that works. Click on update, then go back to our breakfast page and refresh the page. And now it also doesn't work. Okay, don't worry about this. Now we're gonna fix this. So let's go back to the header and the last thing that I want to change his thesis up menu . So if we go back to our header and we go to Stella again, we can go to drop down and we didn't drop down. We can also set up different styles. So, for example, we can also set up our back runs collar like this. And now if he Harvard has the same background scholar. So for the text, we can also use that same collar and footed typography. We can also do the same. So, for example, Monsour It's 300 weights, uppercase and a little bit of letter spacing. And now the decoration on none. So in this way you can have the same style. Oh, now to hover doesn't look that good. So that's what you also can change. Over here is the same principle. Hover is when you mouse over something right, the background turns to another collar. That's not what you want. So how about we keep the back around the same? And the only thing that we're gonna do is change the caller to a lighter one? How does that look? But that looks a little bit nicer. As you can see, there's a smooth transition. This just looks pretty good. And by the way, I found the issue with the Eiken. It now works. Eso What you need to do if you want to fix your Aikins, is go back to dashboard on and then go to L A mentor and settings. But you need to accept ah phones Awesome. Four support and this was a no. So if you put this one on yes, and then save your changes and go back to your design, then you will finally see the I can. So you can also see, like, one of the other icons. But I think this icon looks pretty neat in this design, so I'm gonna keep it like this. So that's all I'm going to do for this episode and that in the next episode we're gonna create this menu, but then change it for mobile and tablet because this menu doesn't work yet. Mobile and tablet. So I will see you in the next video. 16. The menu - Mobile version: Welcome back in this video, we're gonna create the menu for mobile phones or for tablets. Okay, so now we're gonna go back to our header template and let's see how this looks on a mobile phone. So we're gonna go to Responsive Mode and click on Mobile. Now, our whole menu changes again. We checked the image part, so we don't have to check that anymore. And now we only have to worry about this part. So inside off the editor, you can actually open the menu like this, so that is pretty nice. And now it opens inside off the column, so the column actually becomes bigger. The menu that I use most off the time is another version. So if you go back to contents to make sure you are insight off the menu, then you go to mobile drop down and you click on full with. And now if you click it, the section doesn't become bigger, but it's just a but it will just overlap the other content on the page. And that looks a lot nicer. You will see that there is a little gap in here. So Dad is not really nice. So Let's just tell this a little bit. First, I'm going to click on my main section. I'm gonna give it a little bit of height, so we're gonna add some planning on the top on the bottom. So you know how it works. So maybe you've remembered how to work. You're gonna unlinked the batting and give it a little bit on the top and the bottom. So maybe five. That could be enough. And now it's still a little bit to the top. And that is because the content inside of every column is automatically our positions at the top. So if you want the content of a column to be positioned in the middle, you need to click on the column, then go to lay out, then go to for tickle position, which is Stop is actually defaulting and click on middle. And now you can see it's in the middle off that column now, we can also put it on the rights. I'm gonna click again, not on the column, but on the menu item, and then scroll down and click here on right now. You can see that is a line to the right. But we don't want it to be a liner to right completely. So then we need to go back to our section again, go to advance and also at a little bit of spacing on the left and the right, because that looks nice. And now I also want to change the icon. So we're gonna go back to our menu. I can again. Now. We're gonna go to Stell, scroll down toggle button, because this has got a toggle bottom because you toggle the drop down and here you can change the background. Caller. I don't want to use a background color, so I'm going to select a transparent scholar right now. It has no caller. It looks like it's transparent. So this is actually not a very good design. Georgia Elementary. They should actually have across or something like that over here. Just I don't know something else because it's not transparent. You need to actually grab the slider and then put it on transparent, and now you can see that it's fully transparent. So let's just change the color over here to also that dark ring that we have said that looks a little bit nicer. And now, if we open this, we cannot really see what's going on behind the button, but it looks pretty good, as you can see. And that's also one more thing that I want to show you. And that is that you can change a few settings on how this looks over here, so maybe you just want to add a little shadow on the bottom here. That's what I do on almost all websites. Because then, if the content beneath this man, you also has the scholar, it just blends into one big thing, which is not what you want in most cases, so you can add a big box shadow like this if you click on box shadow. This is way too intense, and it's also on the top over here, so you can put the for tickle position at a higher number so it will be placed at the bottom. Make sure you don't see it at the top and then just decrease the spread something like this , and also maybe make the blur lid a bit less intense. He need to play with this, and of course, you also need to change the color show, make it very, very solid. You don't want this to be very intense because it's just to separate the menu from the background. So something subtle like this And also you have your horizontal and vertical batting over here. I would only use t vertical batting because the horizontal petting you can change this. But you just wanted to be aligned at the alignment off your main column. So just leave it at this at nothing, and then you can change the vertical patting. I always make this a little bit bigger, so something like 15 depends on how much items items you have. Eso if you have a lot of items but it at swell, for example. But if you have a few menu items, this looks a little bit cleaner. So I'm gonna put it at this for now. And you also can change the distance because sometimes you will have a gap like this. You can adjust the distance like this. I'm gonna put it a 10 for now, Tilikum update. Then we're gonna go back to one of our pages, Click on Refresh. So let's see what happens when we skilled this up. We can see that we forgot the d tablet mode, so that is not good, but the mobile version looks pretty nice, but there still is a gap, so we need to change the gap. But it's better to check this on a mobile phone. So what I suggest you do again is go to your phone. So if you go to your mobile phone and you go to your website link and then slash WP dash Atzmon thing, you can lock in on that. You can go to a page and see how it looks. So as you can see on my mobile phone right here, this is how it looks. So as you can see, there's also a gap on my mobile phone. Doesn't look very pretty. So we're gonna go back to our design and decrease this to maybe five. Click on update, and as soon as it's updated, you can refresh your phone and check how that looks and that looks a little bit better. So on most websites, your menu item will be on the right. But for this design, we also need to add our social Aikens. So here I would suggest that you pick this menu item, then go back to content and then align it to deep right over here at mobile drop down. Okay, And now we need to check our tablet mode again. And after Deborah can at the Social Aikens. So let's go to the tablet mode. And this doesn't look very cute because we forgot to at the betting. So click on our main section, Go to advance again, unlinked this and again we're gonna add a few pixels at the top and a few pixels at the bottom and then also 20 on the left and 20 on the right. And now that that this doesn't look very good, but that's a book. If you reopen this, you can see that it's full with our Aiken is not in the middle, so I'm kind of click on the Add it. The column for tickle position. Put that on meal, and now it's middle aligned. Looks really nice. So let's go to our page again. Our breakfast page as an example. Refresh the page and then make your window a little bit smaller. And that lives good enough. And in the next episode, we're gonna add the Social Aiken student menu, so I will see you in the next video 17. The menu - Social icons: Hey, and welcome back in this video, we're gonna antisocial Aikens within the menu. Like I said, these icons are effect or death means that no matter how far you zoom in, it's gonna be sharp. And that is what you want. Now there are two ways to upload Aikens inside off elements, or I'm gonna show you the easiest way first, because elemental hasn't Aiken library built in. But you can also upload your own Aikens because sometimes you've created your own Aikens or your clients because sometimes your clients have a custom icons for their own company. So let's just first start with the easy method. So what I'm gonna do is I'm gonna go back to my header templates. Ah, here is the final. And here is my elemental version. I'm now in tablet mode, but I'm going to switch back to desktop because I always make the dust up version first. I'm going to zoom out a little bit by holding commands and then minus or on windows is control minus ongoing. Click that two times I was gonna go to 80% zoomed out so I can see a little bit more Now I have to say that this few is not the actual final fuse to If you want to know how it looks on the final website, you should always go back to hunt 100% zoom. And you can do that by comments zero or on a windows control zero and then clicking over here or as we did before, just go through the final with the I that you can see over here. So I just only used it zoomed out version Teoh actually build it and then I go back to D zoomed in version. Well, actually the 100% version. So now we have to start with our first column. So up until now we've only work with sections, So this is a section, and this is a section, and all sections are horizontal. So if we take a look at the design, this is a section because it's stacked horizontally. This is a section this whole block from here to here is one big section and then the food er is a section, but also incite off this sidebar. We have sections because this is a section that's on top of this section, and there's just a little bit of room between these sections, and you call these one intersections right? Because they're inside off this big section. That is how it works and columns are vertical. So this is all inside of a column, and this is inside of a column now on the contact page, for example. This is a column, and then this is a column. So that's all you need to know for now. So we're going to create our first column. Eso Let's go back and you can see the hover I can for to call them over. Here it is this I can you can edit the inside of a column. Now we've already changed, depending off the column, and now what we want to do is make another column. If you're going to start from scratch with a new section, you can do that over here. But right now we already have a section. So what you have to do then, is make a duplicate off the actual column that you already have So right, click and click on duplicate. Now you have two columns, an insight off this column. There is also the same content because we made a duplicate. So now we need to delete the counter that insider column. So just go to your menu, right, Because this is an element inside of the column. We're gonna right click and click on the leads. And now we can see that we haven't Empty column. Now, our menu doesn't look that well, so we can easily hover over here and then drag it like this because our Aikens are not that big and the 1,000,000 needs to look good. Now, this is not possible on tablet mode on tablet mode, you cannot drag columns. So here you need to work with the column with. But let's just first focus on the desktop for now. So what we're gonna do is we're gonna work with a new element and that is called So show Aikens. So we're just gonna directing defaults, social Aikens in hair. And now you can see that we have Facebook, twitter and YouTube already in the menu. And the first thing that we're gonna do is align it to the right And there are big boxes around those Aikins because we want something custom so you can change the style over here . Maybe you just want a perfect square or you want to circle for now. Just keep it at at one of the things Doesn't really matter, because we're gonna work with custom collars. Let's just leave this for analysis. First style it. So if you go to stele, you can set up the styling over here. Here you have the official collar. So this already actual official collars off Facebook, Twitter and YouTube. But in our design, we want all of our Aikens to be just one color. So how you can do that is first, of course, you will need the actual college you need. So I'm gonna copy the color code, and you can hear click on custom. So we're in Stell Aiken. Collar custom. The primary collars you can see if you change it is the background. We want a transparent background. So we're gonna decrease this 20? Well, actually, almost zero, because we need to change a little bit of spacing here, and we need to see what we're doing. So let's just keep it at this for now and then go to the secondary collar, click on the actual color that we bombed a fingers this goat Yes, I already added, It's to the palate. So now we have to Perfect collar. Now you can set up a few of sending over here. The batting is the space around the Eiken. So if you just direct that and put it at zero, you're going to see that there is no spacing around the Aikins, which is what you want. You want a little bit of space between the Aikens, so data see spacing over here. So that is how you can change that. I'm gonna leave it at 12 for example. And now I can just delete this and put it a transparent collar. You can also increase the size here. Maybe you want your icons to be a little bit bigger again. You can use your arrow keys to make it fit the design. I'm gonna put it at 30. For now, that looks good. And I we need to align it in the middle. Normally, what I would do is I would click on the column and I will go to for tickle alignment and then click on middle because then it will be aligned in the middle like we did over here. But with these Aiken's There is some space beneath the Aikens. I don't know why, but you have to delete them manually. So you need to go to advanced. And then we need to play with the margin because this is the space outside off the Aikens. So if you on link this value, you can change the bottom margin. So if you just use your arrow keys and your look at the Aikins, you can actually see that the bottom march in will disappear if we do it like this. So actually, it just adds 15 pixels. I don't know why, but it asked 15 pixels to the bottom. So now those pixels are gone, and this looks good. So now what you can do is change the actual platforms. So let's say that you want to change the Facebook. I can. You can just click on the icon and here you can see the ICANN library off elements or those icons are all factor here. You can see Facebook, but if you go to brands, you will have a whole list off the most famous social media platforms. So here you can search for Facebook and you can see different Aiken. So maybe you just want this, Aiken, where you want to? Single F. If you don't click on insert, you will have a different F Facebook. For now, we want Pinterest. So let's go to brands again and then type in interest and you can see that it already has deep interest, Aiken, which is perfect, because then we don't have to export it from a design toe like this and uploaded. So we're just gonna insert been dressed like this. Now we want Twitter, instagram and YouTube. YouTube is already there. So the last thing that we need to do is at instagram. So how you add something is by clicking on the duplicate Aiken over here. So if you click on duplicate I can you get another one, you can click on it and then go to the search again, click on brands and search for Instagram. And here you can see the official Aiken for instagram On a lot of websites, people used the wrong Aikens. It's actually not allowed to use a custom again. You have to duality the actual brand. Aiken's and elemental makes is really easy because all the official Aikens are already within the ICANN library off L. A mentor. But let's say that you want also add a custom, Aiken. So what you need then is an SPG Aiken. So if you're working with a client and they send you some Aikins in E p s, you will need a tool to convert that That is not what this course is about. You can do that with Adobe Illustrated, for example. But if you haven't, I can incite off Adobe XY. You can also export that to an SPG fell again. This course is not about they'll be XY But I know a lot of people work in a designed to like this. You can export it and a most design tools. You can do this and then you can select SPG over here. And if you don't have an SPG, I can You can also upload your SPG I can over here. So then you don't go to the Eiken Library, but you click on upload s SPG and then you need to enable it because SPG, for some reason, has a security risk. And I think this is because SPG is a web based Aiken. So it's based on code. And maybe hackers can use SPG to actually hurt your website. But if I'm exporting an SPG for myself, I know that the SPG is not hurtful. Of course, So I always just enabled is And now you can just upload your spg fells to the WordPress dashboard and then use that one note. If you use an SPG, I can You can not change the color. You have to export it in the exact color that you want as an SPG. But if you just used the elemental which it like this and you just use their Aiken library , you can change the color like we did over here. So now all we need to do is check our tablet and our mobile phone. So I'm gonna click on Tablet, and that already looks pretty good. But there are a few issues, and that is that it's divided on two lines. So now we need to work with the whiff off the column. So this column doesn't need a lot of with. So let's just put it on Swinney. And now it's still two rows because this one is still at 100. If it doesn't say anything it's just by default. It's 100 on tablet. So you need to put this on 80. And now you still don't see anything. And this is because we forgot to zoom in. So now we need to go back to the 100% version because we're now in it. He zoomed out first. Um, so I'm kind of press comment zero or on a Windows control zero, and then you will go back to the 100% few, and now you can see that it works and it looks absolutely good. So now we're gonna check mobile phones Clicker mobile. We need to adjust the whiff again. So I'm gonna put this at 20. And now you're gonna put this at 80 and now they're place perfectly. If you want, you can change the side of the Aikens because of mobile. You maybe want a little bit smaller, Aikens. Maybe something like this 24 instead of dirty, because that looks a little bit cleaner and the menu still is a full screen. So that just works perfectly. And these icons also worked perfectly. The last thing that I want to show you in this video is that you can add a nice little hover effect on these Aikens. So if you click on the Aikens against, I'm gonna click on the pencil. You can go to I can hover over here, and this is where you can you to choose a collar, which is very simple. So go to secondary collar and put it at light green, for example. So now you will see when you hover over the icann that it has a different color. This is a nice effect, but you can also do what I do most of the time is just put it at the same collar, but then use an animation. You can also do it both. But like, don't make it too, too cheesy, too cheap. Of course to then on Aikens, I always use grow because that loose slick very nice. And if you don't hover over the icon that you can see that looks very simple and subtle. I love this. So now if you click on update now, we're done. So let's go back to our test page, which is which is de fruits Page. We're gonna click on Refresh. You're going to see the social. I can spot up and it has these super nice effects. Oh, by the way, I forgot one thing. And that is to show you how you can add links. Studio social Aikens. It's very easy. Just click on the wichit, go to content and hearing Pinterest. You can place your link over here. Eso link this to your profile Buddha link over here and put a link over here. And that is how you link them to a platform. And if you don't want the website to open it in a new tap, which I do recommend with Social Media Aikens, uh, you need to uncheck this, but yeah, well, social media, because you want to keep people on your upside and have different taps open. I would just leave this as it is by default. Okay? That's all I wanted to show for now. Let's continue with the next video 18. The classic Editor & The homepage structure: Welcome back in this video we're gonna build the first part of our home page. So now we are done with the header template because we're still working inside of the Heather template. And this is not part of the homepage because we created this header template with the header template feature in L. A mentor. If you forgot what we did, we went to templates and then we went to the team builder and here we created a heather with the heather template. And here you can see the header. Do not confuse this with the actual pages. This is the part that we're gonna show on every website and it will automatically switch to the page that you're on. So right now we need to switch to debate editor because we're gonna build the home page and this had ever automatically be on top off all the pages and we click on. So now we're going to create this part from the featured image over here to the category taps over here because the food or we will also create that in a separate template, FIA de team builder feature because here you need to set up the food. Er so now we need to go to our pages and create the home page if we haven't already. So I'm gonna click on pages. And yes, we already created the home page. So now if we click on edits, we've seen this screen before, but this is the new editor over press. It's called Gutenberg, and they want you to have a super nice experience. Well, typing on block post. So there are no distractions. Everything is white. You can just fully focus on building a block post. And this idea is great. But to tell you the truth, this feature was not respected by the whole were pris community on I will show you why. Because the whole WordPress dashboard is very simple. You can see these blue titles. There's edits. For example, if you go to D menu, everything is structured and designed in the same way. But if you don't go added to a page, you have this whole menu and people were very confused by this. It has some benefits which I want to show you because they are important for a block. So the benefits off having this editor is that you can create all kinds off layouts within a block post. So what we're talking about right now is dispatch and actually Onley this part. So a normal block boats on a normal website is just an image than a little bit of text than an image than a little bit of text and then an image. But with the Gutenberg editor, you can create all kinds of things. So if you click on the plus over here, you can create even columns within a block. Boast. So, for example, you can put one image over here and one image over here. If you want that feature because you're building the block, then you should keep decoding. Burke editor. I do not like the Gutenberg editor as most people because it's really confusing, and I will show you the alternative in this video before we're going to create the home page. But you're going to sacrifice a few things. If you don't use the Gutenberg editor, you can also make a list in the old version. You can also add images, but you cannot, for example, create columns. So there are a few benefits off the Gutenberg editors. I'm not going to go into all the little details off Gutenberg because I know that most people will just create a block. That is just something simple like this. An image tax, an image, Tex. And maybe you just also want bullet points. And you can also do that in the old version. So let me show you the old version. So I'm here locked in on my own website on my portfolio website, and I will show you what the difference is if you click on edit over here, some in pages and I click on edit. As you can see, this looks a lot different than this, but people prefer to dis old layout. Ah, lot more and I will show you the numbers because it's actually amazing. So if we go back, Teoh our page and we're gonna click on the verbals logo, you can leave this edit and you can go to plug ins. We're going to click on ads new and with any plug in library, you don't even have to search because it already pops up. And if it doesn't pop up, just type it in here. Classic editor. It has five million active insoles. That is one off. The may be the most popular Blufgan within a year, so people really prefer the olds. Very structures were press layout for all of their pages and their block boasts. But if you really want to go creative with the block, you should stick with the old editor. It doesn't really matter for features, but I prefer to simple layout because this is also a course for beginners or intermediates , and it is just more confusing. So what I'm gonna do is I'm gonna click on Install the Classic editor on our website, and we're going to click on Activate and I were going to go back to our page. So click on pages, scroll down, click on add It's on their home And now we can see the old editor Pretty simple, the same layout as the rest of repressed. So now we're gonna open our home page for the first time. Retty, Elemental editor. So I'm gonna click on edit with L a mentor and now the page will open so you can see the did he header automatically pops up because we've set up the header template. So now this is the empty homepage in the new version of L. A mentor. You can also go back to the head of templates from here. I do not like that. I just always have them in different tabs. So I don't get confused. So you can see in your tap over here that you're on the home page. So we're on the home page. So what do we need on the home page? Well, on the home page, we need a few sections, and in those sections we need a few columns. So my recommendation always is to use as much main sections as possible. So if you can create a section for something horizontal, Kal, do it like this. Do not create one big section for this whole page and then use this as an intersection. This as an intersection and this intersection because there is a limit to how many intersections you can use if you can separate it into main sections. Do that. So we're going to create a section for dis for this and then for dis. And we didn't this big section, we're gonna have to columns and then within the sidebar column, we're gonna have intersections. So then we only have three layers to work for. If so, the main part is the main section that we have two columns in sight off the main section, and then we have inner sections inside of the right column. Okay, so let's create that now. So first, we're gonna create this section, and now you're thinking, Oh, so we need three columns over here? Well, no, because this is dynamic content and with dynamic content, we just need to create this block and then repeat it. And that is actually just one element. So let's maybe a little bit confusing for now, but just follow me. We're gonna create our first column and click on this one, so that will be for this section. Now we're going to create the email, sign up. So go back at another one one column like this one section with one column. And now we're going to create this section, which has two columns. So click on the days and now selected two columns. So now we have the basic structure for our whole home page. And now let's make this column a little bit smaller, so maybe put it around charity. That should be good for now, and we also want to delete this home tax because automatically displays is but an elemental . You can hide that by going to settings over here and then go to page layout and use elemental full with. And I also get a lot of questions about this. The full with is if you want to display the header and the food er on the page, which is true for the home page, and canvas is for the blank what we did on the coming soon page. So for all of your normal pages, which is not a coming soon place, you want to use the element of full with so click on element of full whiffed on the page will reloads and Audi home text is gone. So this is very important. Guys, do not just start and then later think about the columns. Look at your design and think about what do you need for your website before you're gonna put in all the elements? Because if you need to change this afterwards, it's gonna be a message. If you did not understand what I did with the columns over here, watched if you do you again I will explain a little bit more about this because that could be confusing. So what happened here is that I just made one main section for disbarred, and that is because we're going to use an element or pro, which is which is called posts and is one riches which can display three different block boats with in one wichit. I'll show that over here called Pose, and we're gonna use that in the future. Boast. So then it looks like it has three columns, but it's actually just one column on the home page, and then the block posts are repeated with in that same wichit. So I helped That cleared it up a little bit. For now, just save your page, and then we're gonna go to the next video. 19. The sidebar - Introduction section: Welcome back in this video. We're going to start with the sidebar and the cyber looks really complicated, but elementary is going to make it really easy for us. So don't worry. I have all the images prepared in the finder, so we're gonna need a few picture, for example, the profile picture right here. So let's just go to l. A mentor. I were still on the home page. If you have closed your home page, you can just go back to pages and then click on edit with L a mentor on the home page. So now we're here on the home page again, I'm going to zoom out a little bit, so I'm gonna use comment and then minus I'm gonna zoomed out at 80%. And you don't have to do this. By the way, if you have a bigger screen abba from my laptop, I have a dirty in screen. If you just have a big enough screen, you don't need to zoom out. Of course, I actually just need a bigger laptop. Um, but I know that a lot of people are still working on left. Okay, so now what do we need? We need a lot of things. First we need an image. Then we need a title. We need another title, a text and a fairer and another title. So let's just first create this first part. Okay, So what we're gonna do is we're gonna work with intersections. Why? Well, because you can save this as a template, because this sidebar is also displayed on all the other pages. And the last thing that you want is Teoh. Change something on one page, but then forgetting it on all the other pages, but you want is you want to save this one time at one place, and you want that template to be displayed on all of your pages. But L a mentor does not allow to save columns as a template. They only allow to save sections as a template, as you can see. So that is something that we have to work around. So I will show you how. Just click on the nine dots ever gonna drag in our first intersection and an intersection automatically has two columns, but we're gonna delete one of them because we don't need that. So two columns. As I said, just click on one off the columns, right click and click on the lead, and now we can save this as a template. In that way we can display it on all the different pages. So let's just put some content in. The first thing that we need is an image and then a text and then another text. So let's just first grabbing an image. Just grab it in and make sure it's not outside of that column, but inside of the intersection. Now selected the image that we have not applied jets or go to your finder, drag it onto our press and click on insert media that sits. Now you want to go to the nine dots again and dragon a heading, and we've already set up the headings. Make sure it's inside off that same column, right? Not outside of it. So like this. And then we need the age to because H tree is a little bit too small. But this of course, depends on your design. But for now I'm gonna use the h do. I'm gonna align it in the middle, change her name in this fields, and now I want to make two duplicates off this text, so just click on it. Make sure you are on the text layer and then click on duplicates and click on Duplicate again. Uh, this one. We're gonna change that into this version. And that is he 14 mantra. It's which were also used in the menu. Ah, Seth Lee, weak enough copied itself from here because this is a Neff menu. Which it Ah, But on normal text layer, you can copy this tale and then basis tell onto another layer. But now we need to created once. So as you saw is really easy to change the cells with the age do in the H tree. So what I actually want to do is now just a just a chief four through this tell that we have over here because this stele, we're also going to use that on different places. So it's so easy to just go in here and then change the cell. But if you already know that you're gonna use this still on a lot of different places, then why not use it again? Well, actually, this is a smaller version, but on most websites you use the same stele on a lot of places. This could be 14 on the actual website. Doesn't really matter, so I want to make it easy for myself. Just click on updates for now. Click on the hamburger over here and go to the team Styler. Now you can go and in typography and you can change the H four. But right now, none of our attacks is h four. So that was not really smart. I need to go back and change one text to the H four so I can actually see the change that I want. So gonna put it this at h four like this. Now I want to go back to the team, Styler, so I can see the actual changes. So open typography go to H four and now stale your text Over here it's months aretz. We're gonna use 14. We're gonna use the upper gays case version and it gonna has a lot off letter spacing Something like two in the color that we want East Green version. And now we can easily use this at at different places less now click on update for the team style or go back to your home page by clicking the X. And now every h four has that stelle. Now, if you also have a smaller version, you can also do that for on H five and then you have everything prepared for the future. Now, this little cell over here that doesn't appear on a lot of places. I'm gonna do that manually, so also should show you how to do it manually. But this phone is not a Google phone, so you can not find it within the family tap over here. So what you need to do is go to Google phones. And here we didn't Google phones. You can find a lot of different phones which are hand written. If you go to categories, you can see 100. And over here. So here you can find a fund that would fit your website and make it a little bit different than the version that I have. And you can even set up two properties. Maybe you want their phone to be a little bit more FIC, and here you can find the names. You don't have to download these because they are already inside of L. A mentor. That is what's so nice about element. Or you can also just type in the names over example. Our name is married. Dime. So now it's gonna preview the married I name and you can see what will work on your website . So let's say that you want this, Nico Ana. So then you go back. Teoh l a mentor and you just click on Ty Parker feet and you type in Nick Oona and there it is. That looks pretty nice. I'm gonna increase the size a little bit like this. Maybe put it on 24. That looks pretty cool. And now the last thing that we need is a box off text. So we're gonna grab the text editor and district also already be styled to make sure it's under the title over here. And then we also need to align this in the middle. So I'm gonna align this. I'm gonna make it a few words shorter. Um, because I wanted to have it on tree lines. I mean, the Texas, of course, fake. And now the last thing that I need to do for this part is decreased e spacing, because here it looks closer to each other. So how you can do that is by decreasing the space by decreasing the margin because there is space outside off this tax by defaulters already a little bit of space and elementary dust is to make it easy for you. But in these situations, you need to adjust. It s so if you want less spacing between those icons, you can do two things. You can decrease the top margin on this one or the bottom one on this one. So I will show you what I mean. Go to advance funding this so you can change them individually. Then go to the bottom over here and press minus stent, for example. And you can see now the clickable box becomes a little bit smaller and this is also a little bit too much. So I'm gonna put it at minus Fife like this. And we're also going to do death for districts. So go to advanced unlinked this one than usual Cherokee's and make it fits. And I'm gonna put that at minus 10 again. It makes it harder to click on the actual against. What you can also do is put this at minus Fife and then also go to your text layer go to advanced and then at a minus, march into the top over here at minus Fife. Now, the last thing that I need to do changed the text over here full time health blogger, and also decrease maybe this size under this on the dish box. I wanted the same thing at a minus margin. So the actual signature comes a little bit closer. Minus 10 minus five years. Use your eyes to make it a little bit nicer. There's also a little bit more spacing. Ah, buff D Texas. So what you can do now is at a little bit of spacing beneath the image or at some tops basing on the text. So just increase. There's a little bit as five to D top over here, and now we're going to click on Update and let's just check what we've created so far. So we're gonna go to an actual page. We're gonna click on comments zero again to to go to 100% zoom, and we're going to click on the homepage to see our progress. And now you can see that this sort of work, because we're press doesn't know that you want this as the home page we have just named at home. But for press doesn't know what page you want s the home page. So by default, where press will show the normal archive page for your block Both. So this is what you also need to set up If you want to have this as your home base, so let you do it a real quick so we can actually see what your home pages. So I'm gonna go back to the back on the vor press. You can also, by the way, do that by here by going to the dash. But over here and then if you scroll down to settings and then go to reading, you can set a specific page S t home page. This is however, pris should read your website so your home base displays your latest post. No, because we're gonna design that page by ourselves. We want the home page, which we've called home as the home page. If you scroll down now, click on safe and go back to this one. Click Refresh. Now we're going to see if the template that we made as he home page So this is the first part of our home page. We need to add a lot of spacing and a lot of things on top and over here. But this is actually the first part I'm pretty happy with. It looks pretty nice. So I will see you in the next video where we're going to continue with sidebar. 20. The sidebar - Personal favorites section: Hey, and welcome back in this video, we're gonna continue with sidebar right now we're done with this upper part, and now we're gonna fill in all off these parts. So what we're gonna do is we're going to go back to our home page for still in the elements or editor on the home page on I'm going to zoom out a little bit again to 80% again because my screen is too small. And now, before we move on, we first needs to make a few adjustments to deep, adding because what you also have to notice that element are automatically adds a little bit of betting. So banning was on the insight. So as you can see in this column, there is a little bit of space insight off this column there also a little bit of space insight off deck column. And if you don't pay attention to the default betting, that means that your design will not be as perfect as your actual design that you created in a design ful. Or maybe a design that somebody else has sent you. So how you can delete d dif opening inside of a column, maybe you already know what I'm gonna do, but just click on the column, go to advanced and unlinked this. So then it will be back at zero, because right now there is bending over here. You can see it, but it is. And then if I click this, you're going to see that it fills the whole act column. And this is also the same for this main column. Right? So this is a column in sight off the our intersection, which we're going to duplicate in a few seconds to create our seconds. Intersection was close, as for now, and this is the main column for this whole thing. So we're also gonna delete the petting here, So go to advance. Peculiar are on this column. And then, unlike this one, now you can see that that is perfectly aligned to the sites. Now they're still a little bit of petting on the top here. So between the top off this main column and at this intersection, they're still a little bit of space. And that is not because of the petting on this one, because we've just deleted that. But that is because of the top spacing on this intersection. So if you go to advanced and you unlinked this one, then you will see that that spacing will also disappear. But for now, it's better to leave that, because now we can see the actual column that is beneath it. There is a trick around this, but for now, I'm just gonna press common set or controls that's on your keyboard to go step back on. By the way, if that doesn't work, you can also go to history over here and then click one step back. These are the steps I always use common set on keyboard, but you can also go in here. So let's say it's very hard for you to click on the actual column that you want to click. Elements are also has a trick for that, and that is called the Navigator. For if you right click anywhere doesn't matter. You can see the Navigator, and the never Gator is kind of like your layers the same thing as in photo shop, so you can see we have a main section over here if we have three main sections on this page is for the top one for the email sign up. And for all of the content and an inside of it, we have one column, two columns, one intersection with one column inside of it. But if I did, I also already say that you always have to have one column inside of an instruction because an intersection kind of work without one column. That's why we have one column inside of this one and also inside of D stew over here. So that's all you have to understand for now. So now if we're going to duplicate this column, what will happen is that it will perfectly a line to the bottom off this one, I will show you what I mean. So if you right click duplicate, you will see that there's no space between those items. That's not what we want. So before you start duplicating at the intersections, my advice is to look at your design and see how much basing you actually need from this Section two, this section and on this website I've picked 60. So what you can do then is you can click on the intersection, go to advance and at batting to the bottom. Now, if we're gonna delete this We also will the leads the batting that you see over here, which I want to keep, because otherwise I cannot easily click this one. So we will need to add a few pixels on the top and a few pictures on the bottom. So I'm gonna unlinked this. It jumps up, gonna pressed end over here than this form becomes visible again. And I'm gonna put 60 at the bottom. So now you can see that the column has become bigger here again, I'm gonna delete it like this, not a column is aligned at the bottom off the text, and now there is more space beneath it. So now if you click on the inner section, right click, duplicate or control D you can see that there is spacing between those columns and of course, you can set up your own number there. So now what is the design? We have a favorite Spartan, and this is also dynamic content. So this is a block boat. This is a block boat, and this is a block post. We've not set up our block post yet, so we're gonna leave this fueled blank, but we will set up this part. So let's just first elite a few items. So I'm gonna delete the image just right, click and click on the leads. And now we need to insert a new title. So click on the nine dots and direct in a divider. You can use a divider to divide certain elements with a line or even just delete the whole line to give a little bit of space. But that is not what I recommend. Do not usti divided Richard just to give spacing two elements. Just use the marching bottom or merchant top on a item like we did before. But you can use this to fight a Richard to create a nice effect because you can add an element over here. So, for example, a text. So with this effects, if I click on it, you can add a divider insight off the tax. So if you put this at 100 this is this is a design that you see on a lot of blocks. So I've served for a lot of inspiration when I started this block, and you could see, for example, that this block over here also has this stele. So that's what you can create with elemental. So here you can change the colors and everything. Um, but if you want to have this effect, but you can change the text over here, my favorites, for example, and then if you go into the stele and then go to the text the tap, you can set the position to left, and in this way you can create a design like this. And now, if your text becomes longer, doesn't matter because it's set at 100% off the whiff. So my favorite block boasts, for example, that you can see. Then the light automatically adjusts my block. I'm gonna go of my personal favorites. Then I want to make my line. I want to make that delight green that we have already inserted into L. A mentor. So if you click on the collar into divider within the stalled up, you can set up to green over here and maybe increased with to something like two in my design. It's also, too, but you need to use your eyes because sometimes it looks a little bit different than your actual designs can. Now you can also change the text cell over here. So I have used the H two. We cannot select the H two off here, so we have to use the Addis feature. So it's it's 20 and is bolds and the colors almost black. All right, that looks pretty nice. Now I'm gonna delete this part. I'm gonna delete this title. We don't need to this and we don't need this. And the last thing that we need inside of this intersection is deposed Block. We don't have prepared to depose yet, as I said before, but we're gonna just leave it there. So then we're done, so just type in posts and heresy. Post block of elementos will just drag it in, and now it will automatically generated the default post by repressed. We're going to set this up later. For now. Just put this column at one so it doesn't look that up early. For now, this is what we're gonna change in the future Now, there's also a little bit of spacing between this text and this text. You can also set that up over here, been in content within the stele, and then you can change the gap over here. And this is the Gap beat suing this divider because it's actually a divider and the other elements. So no, they're still spacing insight off this column. So now we can easily duplicate this one and create another one. And in the next year, we're gonna finish dese two because thes air two are very similar. And then we're done with the site bar, so I will see you in the next video. 21. The sidebar - Ad & Explore pages: Welcome back in this video, we're gonna create the at section added, you're seeing over here and maybe also this down section in the sidebar. So let's go back to our element or home page. And we had already made a copy off the favorite boast bar. So if you haven't done that yet, just right, click and click on duplicates so you will get another intersection down here. And then the first thing that we're gonna do is change the name and foreign at you can do a few different things because sometimes you would just want to display an image. So let's say you work with a sponsor, and that sponsor says, Well, here's our at image. You should just place that. Then it's gonna be very simple. You just go to the $9 you drag an image, you make sure it's under the title like this. He deletes this part. You select an image as you want, so in the exercise fell, I've got, they felt add one which you can upload, and then you can link this whole image to a shirt and website. Because our most blocks these advertisements have affiliate links, for example, I don't have to explain. It's because the people that uses understand this, but you can have a lot of different things, but in most cases you on a link to another website and you can do that here by this linked up and then click on Custom Euro, and then you can paste a link over here to a shop. But you can also do is create your own kind of ad with elemental, of course, and use the textile and used to but in tool to create something like this. But if you haven't add, my recommendation is to use just one image on and then just linked that image to a website off the sponsor or the thing that you want. Maybe you want to promote an app, maybe another block eso. In this way, this whole image becomes clickable. But there's one thing that you have to know if you're gonna upload an image, because for some reason, if you name the image at Fordyce Mint, I will show you what I mean. It's very weird. Let's make a duplicate of this image, for example, and let's just upload this image, which is called advertisements version one. And as you can see now, they will not display the image so I can select this one. But I cannot select this one if I even click on it. It doesn't display. So do not name your images advertisements, but just name it asked, for example, and debt works. I don't know why they did that, but that is what I found out. And then there's one more thing that I want to show you, because sometimes you will have to use a custom coat to display an ass. So, for example, if you have bean signing up for Google ads and you want to place Google as on your website , you will probably need to insert a little bit of coat. Andi, even if you don't understand go. There's a very simple which is for this. It's called HTML, so if you type in HTML within the $9 you can drag in an HTML field and then you can base your coat and that you get from somebody else in here. And this is also a technique that you need to use sometimes four dose display ads on the site, so that's all you need to know. And now let's create our other ads, which are actually not really adds, but just categories, and you can do the same thing over here. Just export these big images with with the buttons included, and then just stick them on top of each other. But I want to show you also a different methods so versatile we're going to make a duplicate off this interesting box again, and we're gonna name this explore and now we're not gonna use the image fields. But we are going to use a few different intersections. So this is another way to create a design like this. So if you click on the box and you click on Duplicate, then we will have another intersection. But we don't need that much bottom spacing on this one because we wanted to be closer. So we will close his gap by the leading the bottom margin. We will also do that to the bottom one, but we will decrease it to something like 20. And now you want to delete the inside over here, and now we just have a single call them. And this is important because if you wanted this button to be a real button that has a hover animation, for example, right, So it changes when you hover with your mouse over the button. Then what you need to do is you need to set up this image as a background off that column, and then you can insert the button inside off the column. And then you just say to that column, Have a little bit of space. So betting on the inside, so does what I'm going to show you right now. So I have the site get hickory images over here. So what I want you to do is click on the column, then go to Stell because we're going to set up a background in the same way as we did on our main header. We're gonna go to classic, and now we can choose an image. And I'm gonna upload all of these three images at the same time because that's a little bit easier, because from here I can just select one image. Let's just first start with this one. Click on insert, and now you can see that it's inserted. We're going to do the same thing as on the heather Repeat said that on No repeat. And then Size said that uncover because we want to fool with off that image. And now, before we're gonna change the padding, so give it a little bit of room refers gonna drag in a button. So go to D $9 again and drag in a bottle. Make sure it's inside of the column and then release it. Now you're gonna line his button at the center. And if you want to change the color, you need to go to Stell because the default button is like this. So if you want to flip that around that you need to set the background color as white and the text scholar as green, and now you can see that we have a right button. Now, you can also set up the hover animation already over here and maybe put that on shrink, for example. So then, if you mows over, it's gonna shrink a little bit. And now we just need a little bit of spacing insight off this column, so go to advance and we're gonna add betting on the insight not on the right and on the left, because thes but in its center lines, but only on the top and the bottom. So let's just try 20 and 20 for example, that go back to the design. But we need more than that. So let's try 40 40 40. And that all already looks a lot better. Maybe even 50 and 50. That's a little bit too big. So I'm gonna leave it of 40 40 and Africa. One thing to do and that is that the image should be centered because right now, I don't know if you noticed. But if you increase this betting, you're going to see that able a line on the left. That's default. So we need to set up the image, asked the center. I forgot to do that. So let's go back to success style. Make sure you're on your column and then position center center. And then the image is centered and skilled up, and now you need to make sure that there is enough room beneath this inner column. So if we make a duplicate, it already has two space in there. We want Sonny. So let's see. Right now it has turned on the top and turned on the bottom. So let's delete the 10 on the top and put 20 at the bottom. And now we can start duplicate this one and duplicated again. And now you can just change the background over here to the other image. So click on the next column and then select another background image. Just like that. Very easy. Some like this one and selected the last background image like this boom. And now you have your tree image backgrounds set up. What's also an advantage of this method is that you can apply a overlay, so this image is very bright, has a lot off exposure. So now, because this is a column and reviews the elemental editor to create this, you can go to background overlay, go to classic and set up a black background. So click on black. Now you can see that you can play around with the saturation that you can play around with the opacity off this black layers. Or maybe make this one a little bit darker, so the button becomes more visible just like this on these two images, it looks good, so that's fine. Now you can also change the text inside of these buttons inside of content best grapes, for example, And then you can link to a specific base over here. So if we have a specific page, we can just type it in over here, and then it will automatically show up. That's super easy. If it doesn't pop up, then you need to go ver pres dashboard again. So, for example, you go to pages and then you need to copy the link of a page. How you can do that is by right clicking on view and then copy link address or just open the page in a new tap and copy the link like this. Then go back to L. A mentor and based the link over here. But it's much easier to just type it in the link, and then it will automatically pop up. It will generate a link for you writes, and I've changed the text inside of the buttons. It has this nice hover effect, but as you can see, there's a lot more spacing from here to the image, then from this section. So now I want to add a little bit off bottom spacing to this one, so I'm gonna go to advanced and maybe increased this by 20 for example. Now there's also one thing that we forgot, and that is that we have added 10 pixels on the top over here. But we've duplicated these intersections, and now every of our inner columns has 10 pixels off top margin, which is actually not what we want. So let's just delete that for now, because now we're done with this site panel, so we just want to align it perfectly to the top. So let's just start with the 1st 1 go to advance and the lead to top margin. There's not the most efficient way because I'm doing because now I need to click like 4 to 5 times. But now the design is perfect. So let's see what we've created so far. We're going to click on update. We're gonna go to one of our pages so you can go back to pages. By the way, if you have clothes, all of your tax, you can always go back to the dashboard by typing in your website and then slash WP dash at me. That is what you should type in, and then you will always go back to the dashboard and you can click on one of your pages. So let's go to our page is right now. And then let's just click on the home page and open a few over here. I'm gonna open it in a new tap, and now you can see that the site bar is here. There's no margin over here because we need to add a lot of elements on top off the side bar. So don't don't worry about that right now, but this looks good. This already is a block post at his link. But we need to change the whole styling of this. I mean, even more block posts. This is an image that can be linked. And these are actual real buttons that good work. And actually this one already links to a page. So now we're done with sidebar. But this sidebar now only shows up at the home page, and that is good. But now we want to save this whole part as a template because when we make a change in sidebar, we want to cyber to change on all of our pages, and that's where we're going to do in the next episode. 22. The sidebar - Making it a template: Welcome back in this video we're gonna transform our site battle or our sidebar into a template that we can reuse on all of our pages, a sort of when we make a change. We don't have to change it on a lot of places. So what I want you to do is go back to the home page with the elemental editor, Zoom out again a little bit, and now we need to save this whole part as a template. Ah, and this is not very easily possible. That's why it's a separate video. Because, like I said before, you cannot save this whole column as a template. So what we need to do is we need to save one off those intersections as a template and then at the other intersections in sight, off that template. So in that way, it is one template, but it has different intersections inside of Devon template. But we can import that one template on all of the pages. So what we're gonna do is we're gonna create this template. We make sure it's safe in the template section inside of L. A mentor. They were gonna delete everything from the home page, and they were gonna insert our own template with D template, which it that elemental pro offers. So that means that you don't go to the home page to master the master template off the sidebar. But you go to the template section inside of L. A mentor that's over here in Safed templates. So that's what we're gonna do. You gonna open this already? You can see that the coming soon template is also here. So what I'm gonna do is I'm gonna open the homepage again, and then we're going to click on the first in a section, right click, click on Safe as a template. And now we need to give it a name. So I'm going to give the name sidebar health and that's it. And we're gonna safe. And now don't click on anything like this. What you need to do is don't delete it yet, but we're gonna go to Safed templates. So again, if you don't have a new tap open, go to your website slash WB dash admin and then go to template safe templates. Now refresh this page and now you will see that's a new template is at its cyber health. But this template on Lee has to first intersection inside of it. So we need to go to the template. So we're gonna open that would elementos on holding command or control to open it in a new tab. And here you can see the inside off this template. This is not a super nice workflow, because in this template, the whiff is 100%. So you don't actually know how it looks on the front end. That's why we've designed it on the home page, because the whiff off this column is already here. So here we know that is good. And if we want to make a change now, we need to go to this template and then make a change over here than save it. Then go back to our home page, your final home, patiently elementary editor, and see the actual change. And this is not perfect, but but it's the way to go. There's also another way to do this, and that is to create a Colum just to see how it looks on this page and then the lead it and then save it, because otherwise you would have two columns let me show you what I mean. Let's first add all of the inner columns in the new template. So go to your home page. We're going to select the next in her column. Just copy it like this. Go to he go over here, click on the upper in a section right click, and then click on pace. And that means that it will be basted beneath this intersection. So if you scroll down now, you can see that is over here. So go back to the home page duties again for this one we only have to do is ones. So based that again. Now we have the at and we need to do that also for dose for over here. Okay, So knife basis, all off the elements. So let's just first save. It's for now. So now this template is Safed. And let's check that before we're gonna delete everything off the home page. So we're gonna go to cyber Health, click on view so the actual page and scroll and see if everything is on their first part, this party ad and tree of our columns. So that is perfect. So now we can go to the home page and I notice, is a little bit scary. But because of the lead, everything on the home page to make sure you are on the home page now delete everything like this guy. So now we have an empty column again. Now go to templates to search for the template, which it dragged that in inside of that column and now selected template that we've saved. We just called Sidebar Cyber Health Template, and now you can see that it's one big element. The outline now is orange, so you know it's a template, and you can edit this template if you click on edit and then it will go to dispatch. All right, well, actually, this elementary editor So now let's just refresh this page sidebar, and you want to know how it looks. What you can do is at a column, so if you're right, click on on the first column and click on at New Column. You have a new column on the right than drac it. So click drag and get it on to the left and make it the same size as it is on the home page . So I think that was like 70%. And now you can see how that looks. But you also have to do that for all these parts. So this is not a perfect workflow. So I hope elements are improves this in the future. Because right now, if you make a change over here, you need to go back to the home page to actually see how it looks in the final design. So I hope the day of justice. If you now click on update, you go back to the home page. We also click on safe. We click on the refresh. Now this is one big elements. So now we're done. And let's just check the home page real quick. So we're gonna go to the home page, click on Refresh and let's see how that looks. All right. It totally works. Everything works inside off the template, so I hope that was not too confusing. If you have any questions, please let me know. So now we're fully done with the sidebar. I'm really happy about it. And now let's continue with the other exciting parts of the home page and guys. The homepage is the most difficult Bartoli for done with the home base. All of the other pages are gonna be very easy. All right, I will see you in the next video. 23. Email sign up bar - Part 1: Hey, and welcome back in this video, we're gonna finish with the sign up bar for your email that you can see over here. Ali Sina bar is actually the last thing on this page. Debts not dynamic, because thes are blocked post and here are blocked post. And here are blocked posts. So if we're finished with this, we can actually start by building the block. So let's just create this sign up form because a lot off blocks, you will have to build a sign up form, which you need to connect to a soft virtual. For example, Mill chimp, because a lot of blocks needs to have a feature where people can sign up with your email and they will be added automatically to an email list. For this, you will need an email marketing software toe like male chimps. So if you don't know what that is, so this is one of the tools that a lot of companies used to get our e mails, so I will show you how you can do that. So whenever somebody types in their email on the clicking subscribe, there automatically edits Teoh, an email marketing suffer like milk in, for example, or the one that I like to use a personally is convert get because it is very easy again, This is a whole new market outside off the website building market. But you have to know how to connect a form because a lot of lines were asked you to do this . So let's just get started. We're gonna go back to our ver press, have a lot of taps open, so let's let's just close. If you over here the sidebar. Um, we actually need the home page. Okay, so you need to go to the home page, So go to your pages again and click on Edit Element. Or so this window will open. And what we're gonna do now is we're going to make sure that we have enough spacing inside off these columns, and we're gonna do now is we're gonna add spacing to the main sections, so we will have some by space around our objects. So let's just zoom out a little bit so it can better see what I'm doing on. Let's just start with the email sign up and before I'm actually gonna put in some items, I first I'm going to set up deep betting and margin because this will make it much easier if we're gonna convert it to a tablet and mobile mode. So what I'm gonna do, click on the main section over here, Click on Advanced and just the lead, all of the padding. That's the first thing that you need to do. And now we're gonna add our custom own betting. So let's just add 40 at the top and 40 at the bottom. And now you can see that we have a little bit of room outside off D column. So the column. We're going to give that the background scholar. So desist column and this whole section like the actual blue area that I'm selecting right now, that will be the betting off the main section. Right. So we have a section for the first part that is like this. That's a section for the first part. Then we will have a section for D sign up, which will have a little bit of betting over here and a little bit of banning over here. And then we have the whole big section which has betting on the top and also betting to the bottom. So we need to add this betting this betting, disputing this this and this. So let's just do that real quick. So let's first start with this one. You can see in my design over here that it has 60 big souls. I'm gonna at 60 pixels at the bottom. Um, and we're also having 60 pixels here, So we want dirty on the bottom off Desmond section and 30 on the top off this one. So then it will be 60 pixels, So I'm gonna add 30 at stop here. And now let's click on this section, go to advanced on link. This one. I don't have to adjust depending over here because I've already set 60 at the bottom here. So if you want to make things easier for yourself, you can also at 30 over here and at 30 at the bottom in this one. So then it will be the same on every column. That's actually a little bit easier now for this one at the bottom. But we need to do is add 100 pixels to the bottom because we need a little bit of space on the bottom over here. So now we set up the main parts. I'm also going to do this for a mobile click on Responsive and Click on Tablet Mode and a mobile. You want to have 20 pictures on the left and 20 pictures on the right, at least because that gives it a little bit of space on both sides. Because you don't want to your elements to touch the border over here. Also, add a little bit of space on the bottom and on the top for now, also at dirty and dirty. So we will have some space. We're also going to do this for mobile. So again, unlinked, it's 20 on the left, 20 on the right, dirty on the top, interior on the bottom. And trust me, this is much easier than doing it afterwards. So go back to desktop right now. And how about we make a duplicate off this one and we delete this one? So then we don't have to apply it on the top on because there's no content in this one, so it doesn't matter. Fetal leader. So let's delete this one and make a duplicate off to stop up one. So now we are ready 24. Email sign up bar - Part 2: so before we're gonna make any mistakes. Let's just drag in the post, Rich. It's to the top one just very easy like this. So we know that this will be the post block. Okay, so now we're going to start with our email sign up for So what do we need? We need two columns because this part is gonna be in a column, and this part is gonna be in a column. So I'm gonna make a duplicate off the column. But before I'm going to do that, I'm gonna delete the padding so it will be aligned at the actual edges off that column. So in the same way as we did over here and now we can add a background scholar. So let's go to classic over here. Let's go to caller and let's pick the background color that we want. Let's make a duplicate off this column because we need one column for this text and we need one column for districts. And this is also perfect because on mobile, then this column will be automatically stepped upon deck column. So that makes it perfect for mobile now dragging a heading because we need a normal heading , and we need a more normal text. So you already know what I'm gonna to dragging your heading like this. H two? That's perfect. And also dragging your text editor like this. All right. And now I want to set up my own custom bedding inside of this column. So that's what I'm gonna do. I'm gonna go to advanced, and we're gonna add some batting at the top. Just use your eyes for this and make sure it's pretty nice are under right. We also want a little bit of spacing, so make sure that the text doesn't touch the corner. So this looks pretty good again. You can see the spacing between this text and dis Tex is more than in my final design. So how you can do that with two methods, you can adjust the bottom with a minus over here. So for example, minus. Then that would do it. Or you would add a minus two d top on this one. Now I've added that detail header, and that looks good. Exchange the text. Okay. And now we need to add the form. So element of pro has a for midgets. It's very easy just drag in the form and is going to generate a standard contact from So we need to adjust this contact for to make it fit our design. First of all, you can delete the message and which can also do is to lead the name by clicking on the X. And now we only have tea email and we have the send button. In our design, we don't have a label so dist, ext. Oh, sorry. This text above the input field is called a label. So if you uncheck labels, you will only now have an email field and a button. Now we need to make sure that the input field and the bottom are next to each other. And how we're going to do that is by adjusting the column with. So this is the with off the import fields. So if you put this at 60 for example, and then you go to the button and you put that on 40 now you can see that they are next to each other, and that is what we want. Maybe this button is a little bit too big. I'm gonna try to deter t two and go back to my fields. I'm gonna put that on 66. But you can also make it smaller. If you want your input field to be smaller, just put this as 50 and I would also do the job. Now we need to adjust a few things. Let's first adjusted content. So if you want to change the text inside of the bottom, you need to go to submit button. And here is the text. So I'm gonna type in, subscribe and already has two. Stell, as we've set up with the team, started for that is nice. And you can also change the text inside of that input fields. If you click on email, it's called placeholder. So you can change it to your email, for example. You can also make this field to required, which is actually what you want for form like this. Now we're going to set up the styling so we only want an outline for this input fields. So how we're gonna achieve that is by go to style and then go to input fields. Here is the tap field. If you click on the fields, you can see topography while the topography is already good, but you want to go to background caller Right now, it's on white, so we want to set. That adds transparency 100% transparent. And now we only need to adjust the border collar to do green that we want now it's almost like our design. The only thing that's different is that this input field has rounded corners, as you can see here, over here. So how you going to do that is unlinked this one and now it's sharp. All right now, the last one got a need to do is click on the column and make sure the content is in the middle off that columns or go to vertical alignments off the column. Click. Oh, middle. Okay, so now it's in the middle, and what I also like to do is make the input feels a little bit bigger. You can do that by going to content, then go to import size and then set it on medium. Almost always said it on medium looks a little bit more luxurious, but you can also leave a default. Of course, click a medium for the button also, and this makes it really nice And of course, you can also just adjust the columns like this to change the design or at a little bit of spacing on the insight off this one. So, for example, something on the left 20 to make a little bit more room over here. And if you want to make this whole block bigger than, of course, you need to go back to the actual email input field and put it a bit this at 60 for example . So now we need to check the mobile before we're going to connect to form. So let's just click on tablets for now. And now the columns automatically stick upon a Jeter. Uh, this one looks actually pretty nice already, so we only need to change this one. So now let's just unlinked the panning over here that's at 40 pixels to the left, like we have over here, 40 pixels to the right, maybe also 40 to the bottom. And you can leave it like this if you want you. But if you want to make the impulse feel a little bit smaller and tablets, you can change the column with Onley for tablet fear this one. So if you want to put this at 50 He will also do that for your button so you can set this to 50%. And now it seems like that it doesn't work. But that is remember, because I'm zoomed in. So I'm gonna press common zero. And now you can see that this is how it really looks on a tablet. Um, I don't know about you, but this is a little bit too small, so I'm just gonna keep those at 100. And that will also be true for my email fuels. Yes, that's a little bit better. And now I also want to add a little bit off spacing to the top so that my form is aligned in the middle. Now what? You can see that the line height in this tax is not very good. This Texas really close to each other. So how you can fix that is go to your age, do go to style, then go to typography and then click online height and put it at 28 for example. So that looks already a little bit better Now. We need to adjust this for mobile phones, so click on Responsive mode and click on mobile, and now you can see that there's a little bit too much basing. So click on your columns again. Go to advanced unlinked this and create something that looks a little bit better. So maybe 20 on all sides is a little bit better for a mobile. Also do. That's for this one, right? But you want to delete it at the bottom because you don't want your firm to be too far away . And it's always nicer to have a little bit more space on the bottom then that you have on the left on the right. So you can also put this at 40 and then give this a bottom 40 batting so this looks a little bit more natural. Okay, so now we're done with styling off the form. So now we need to connect it to mail. Chimp 25. Email sign up bar - Email marketing software: and how you can do that is pretty easy. Just click on the form again and you go to action after submits. Elemental already has integrations built in with most off the famous email marketing provider. So the one that I talked about is conferred kit and milk him. So if you click on Mill Chimp, there will be a new box over here. You can collect that, and now milk chimp will start to search for your email list. But if you've not set up your A P I key in the integrations, then this will not work again. If you've never worked with email marketing, it's better for you to just skip on to the next video. But if you want to know how to connect meal chimp that you need to watch this ending. So right now, we don't have an integration with milk chimp. So if you comment, click on this link or control click. You can set up your integrations inside of L. A mentor here, so inside of settings were here inside of the top integration. You can scroll down, and here you can face the A P I key. So what you need is you need to look in to your email marketing suffer, and this is a an example of milk chimp. And then you need to search for an A p I key inside of milk. Champ, you just need to go to your accounts and then on their extras. You can find the A P. I key over here, and I'm not going to click on this because because it is my personal accounts. But if you have that a P I key, you can put that in right here. And don't forget to save your changes. And if you go back over here, you click on update and you click on the Refresh. You can select the email list over here under audience, and then at any time when somebody adds in their email, they will automatically be added to the list. So that is how that works. Now there are a few more options. For example, additional options. I sometimes change D custom messages. Thanks for most successfully successful. This formal sense successfully, it is not really affordable. It is a form technically, but you can also change the text over here when somebody subscribes to a ah you are subscribes to the lists or maybe changed is in another language. If you are making a website that is not English, So that's all I wanted to show for Now s. And I'm just going to click on update. We're gonna see how that looks on the actual home page. So I'm going to refresh my home page and let's see. All right, that looks pretty cool. And it also works on tablet and mobile. So that's it for this video. 26. Creating blogpost content and categories: Hey, and welcome back to his new chapter in this chapter. We're gonna finally start filling the block with riel block content. So right now the website looks like this. So let's just visit. We've created so far and we have our header. We have one block post, which is the default one. We have our site bar, and now and now we need to feel all of the block post content. So let's just get started. Your block boast Always. You can find all of your block boats over here at boasts, and right now you can only see the default block post. Let's feud up default block post by now. And because we have no styling, um, the block boats will just take on what we've set up in the team Styler. So it already has two collars and the phones, but this is a page we need to set up, and we need to create a lot more blocked pages. Eso Let's go back to our post and create a new post. And if you have not chosen Teoh, go with the classic editor, then you have more options here. But for discourse, we're going to keep the block. Very simple. What we're going to do right now is we're gonna create this block, boast So it has a title. It has a dates which you can change afterwards. By the way, it has a category one main image which is called the featured image inside of her press. Because this image will also appear on determine eels and in the block post content. So from here to here is what you put in over here and this featured image. You set that up over here to featured image d get hickory like this and a block post could have multiple categories if you want to. You can say that. Set that up over here right now. We don't have any Get a Caries yet, so that's what we also can create. But tonight, what night? What's nice about her presence that you can also create categories from within your block boasts. So when you come up with a new category, you can just do it over here. So let's now start with our first block boasts, which I'm gonna call the the Best soup for your healthy morning routine. Something like that. And now you can see, the purpose automatically generates a link that is also important to understand because sometimes you want to change the title afterwards. But then the link does not change. So let's say that you wanna change the title, Teoh the worst. And then the link will still stay the same. So you can also edit a link if you want to. You don't have to, but you can change the link over here. But just be aware that if you've already shared this link on your social media or on other websites, that then it will not automatically redirects. So think about your title and then changeling before you're going to publish it. And I don't mean publish over here book published on your social media, for example. So right now I'm just gonna bake the best soup I'm gonna like. Okay? And now we need to feel in some content. So I have a super nice groom. Plugging over here is called Laura. Ipsum and Aiken generate a fake decks over here. So if you also have Google chrome, you can generate a texts over example Tree paragraph stick. That is fine. A click copy and then I have a fake text. So if you don't have a fake text yet, and you want to have a fake text search for Lauren Epsom if you don't know what it is, it's kind of like a default text generator that every designer used when you don't have really content yet. So you can type in Laura MIPS, um, a generator on ghoul. Or you can download this plug in its cult Laura Ipsum generator. You can find it via the chrome extension story if you know where the chrome extension stories it's under here and then more tools than extensions. And if you click on the hamburger I can. Over here, you can open the Google Chrome Store, and here you can find a lot of different extensions for Google Chrome. I will put a link to the version that I have in a description off this video. So once you've copied alarm Egyptian texts and you've pasted into the content area, you can also add an image. So, for example, if you want to add an image between those two paragraphs, just make a little bit of room with a break and then click on at media and we're gonna upload our image. So I have to images that you can use in inside of your block post. They're called block boast, image to and block post image three. So I'm gonna upload them at the same time, and then I'm going to select one of them, which is this one inserted into the block post. It automatically inserted both off them, which I do not want. And now I have this one version so you can edit it if you want to and pick a bigger size. So, for example, the full size or the large size like this, so it will be as white as the actual content itself. So let's just take a look on how that looks. So we're going to click on published for now because again doesn't really matter, because we're on maintenance, moans, and then just click on our block posts. So comments hold command or control and then go to the block post so you can see that the title is in here. There's a bit of texts. Then there's our image, but it's still not fool with and in their subjects that you could see there's not a lot of space between districts in this image. So to add a little bit more space over here, you can just press, enter or break, and then click on update called Black, Back to your blood Boast, click on the refresh and now you can see that area is a little bit more space. And you can also do that on the bottom. Off the image, of course. So go over here and press enter. Click on update, go back and refresh it. And this is how you create a little bit of spacing around it. Now the image is still too small. But remember and in our final block, boast decide bar will also be here. So then this image is big enough. But if you want to, you can go back to click on edit and make it even bigger. Now let's add another image. So I'm gonna press enter at another image like this inserted into the block boats. Let's save it for now to see how small this is actually. So I'm going to refresh this. As you can see, this is a very small image, and sometimes you want that you can also aligned the image in the middle if you want to. We d stools over here like this, or even around the texts, which sometimes is also pretty nice. So let's just see how that looks gonna go back to my block. Boast after I clicked on update and now you can see that this also looks pretty nice so you can play around with how to block post looks and you can even add titles. So, for example, the morning the morning routine you could make that bold, for example, or you can make an H three and then click on update and see how dad looks. So, as you can see, you can design your block post with the options that you will have inside of the Ripper's editor. But again, if you use Gutenberg, you have more options than what we have available over here. But it is already pretty nice. So let's just add our featured image. I've prepared eight images for your fee. Just image there called Post one until Butch, both seven. Also seven. Not eight, and I'm gonna upload all of them and then pick the 1st 1 So let's elect our first boasts. Click on sets featured image. And now you can see that we have a featured image over here. Let's just also at a category so disposes about morning routine. So let's just add a category breakfast. All right? We're gonna inject the UN categorized averages going to click on update. Now go back one more time. To your block Post, click on the refresh. All right, That looks good. We have an image over here. Okay, so we're gonna we're gonna redesign this whole base. We're not going to use a default ver pris block boats like this. But all the content right now is as we wanted. The only thing that we've haven't set up manually is the date because it automatically picks up the date of today. So if you want to change the date, you can do that over here. Uh, or even quicker. If you are on all of your block boats or I clicked on all post, you can also click on quick edits and then change Did date over here, Teoh. Something difference of the month today, the year and then the time. And sometimes you just want to manipulate that. Okay, so I'm gonna click on update And now I want to make a lot of duplicates off this block bows because we need a lot of variations to test with our block posts. And this is not default. So we need to insult a plug in for that. So I'm gonna go to plug ins, I'm gonna click on at New, and I'm gonna type in duplicates and thes two. They work fine. My advice always. Just you just picked the one that has the most installs and the highest operating. So I'm just gonna click on this one. Click on Active, And it's a very simple Blufgan, and it allows you Teoh duplicated both. So if you go back to boats and click this one away, you can see that you have a new option over here. That's called Clone. So let's just try this for now. I'm gonna click on clone, and you can see that this is a new one because it's as draft. So if you click on edit, we can change the title. Something like this. Now he doesn't automatically change the link. So you could Skopje your title like this or right click and then copy. Then go over here and just press okay and ver press will automatically at D Dash is so the new link will be perfect. And we're also gonna set up another featured image. So click on the lead and selected the next one, which is number two. Click on sets featured image. And we're also gonna change the category dinner, for example, I'm gonna click on add new category and unchecked and breakfast. So now we have one block boasting dinner and one in breakfast and click on Publish and then go back to all of your posts. And you can also see the categories over here in this overview. So now I'm going to do this five more times. So we have seven block post prepared with a few different categories, and I will skip that part for you. I'm just going to make five more duplicates at five more images at a few, get agrees, and then I will be back. Okay, so now I'm done. I have seven block post and also this old default violence. So let's just delete that. I'm gonna click on trash and now we have seven block boasts, so let's go back to our home page we're gonna click on pages and open our home page. Which few? Let's just have a look on how our home page looks. So this is hardly home page looks right now. It automatically displaced six. Block goes over here and also six block pose over here. And we also don't have blocked Post in our main column yet. So we're gonna fix that later. Burt's first. I'm going to show you how you can transform the actual block boast pages. So let's just go to the next episode, and then we're gonna transform dis page into our own design. 27. Building the blogpost page: back eso Now we're going to create a template for our block Boasts Bages over all the block boat. So we need to transform this into something that looks like this. So we're gonna use the template that we've created before and they were gonna designed this whole page. So let's go to over press. I'm gonna go to the beck ends again. You can go. But it beckoned by hovering over here and then go to dashboard and then we're going not going to create it bait because it's a templates, because every block post has to look the same inside of that template. So we're going to go to templates and do team builder within the team builder. We're gonna build a single boast templates so you can find it on their shingle. And you're going to use a single templates, for example, for block bows. But also, for example, if you have a separate page for all of your offers on the block So let's say that you have four altered on the block anyone to have a separate page with same design but only the company to be different. You can also do that with a single templates. So let's just add our shingle template single, Select A both sides that we want because we only want this design for the block Boast. So deaths for all the boast and then you can give it the name. So we're gonna call this block, boast templates. That's it. Create the template. Now the element or editor will open. Okay, so you will give you a lot of options. But I'm gonna show you how you can design your own. Because if you click on one of these is gonna at all the styles off their block and then you need to change everything I do not recommend Teoh use this because then you need to change everything again. So I'm gonna click on the X over here. The headers automatically here. So now we want kind of the same design as part of our home page. So before we're gonna click and create all of our columns and everything again, let's first go back to the home page and just copy what we've already made. So I'm gonna go back Teoh my Bages overview, and then I'm gonna open the home page with Ella mentors and gonna comment. Click on Edit with L a mentor. And now we want to copy what we've already created. So we actually want this whole section, But before we're gonna copy it. We didn't make this section responsive yet, So that's what I'm first gonna do before I'm gonna copy it. Otherwise, I need to change it again on the other pages. So I'm gonna go to Responsive Mode, click on tablet mode. And as you can see for this part, we've already set up deep patting perfectly for tablet. But we forgot that for disbarred. So let's go to this main section before we're gonna copy to the other page on Ling. This value now at a little bit of spacing on the tops or something like dirty. So we have 60 from here to here also 60 at the bottom and then 20 on the left and 20 on the right. So we have some basing left and right. That looks a little bit better. I go to mobile and do the same thing. Unlinked It's dirty 60 20 and 20. All right, that looks perfect. Now we're gonna go back to desktop and never ready to copy this whole section to our new page, So click on updates for our home base. So we're now in the home page template. Click on your main section, right Click, click on copy. We're gonna go to our block, boast templates and just go over here with your mouse, right click and paste and boom. Now we have our template inside off this new block post templates. So that is nice. It doesn't display this text for some reason over here, but it is there, Trust me. So let's just first save a draft to make sure that we won't lose it. So not don't click on publish it, But click on the triangle over here and then click on safe drafts. We will not lose our work. Then in the design, we have our big title, which is an age one. We have to get agree, and we have to date. So we need to load that data in from all of the boats as we have created. So this is where the single tap comes in. So you only see this stat when you create a single template. So now we can drag in a post title, for example, first, I'm gonna make sure that I have no petting insight off this column. So I'm gonna unlinked this one. I also forgot that on the home, by the way. So let's just do that real quick. So we also will enough forget it on the home page, Just unlinked a petting. All right, so go back to over here, click on the nine dots, and we're gonna drag in the boast title. This is a dynamic feature. Normally, he would drag in a heading, but in this boat, you can just track in this dynamic content. So this is actually the same as this. But then it automatically generates de title. So let's just drag it in here and now you can see that it automatically prefer use one of our block boasts, If you want to pre few another block post. You can do that over here, so go to settings and pre few, and then you can select another block boats that you want. So maybe you just want to have the soup version right? Because title is a little bit longer. If you click on that and then click on a prat, apply and pre few you can see that we now have our new title, which is actually better, because you can see that the spacing between those lines is a little bit too narrow. So we also need to change that before we're going to save this. For all of our block boasts, of course, So this is a better preview example. So again you can also use to heading. But if you use the heading, you can add in your own texts. But this is where this button comes in. So it's called dynamic tax. And with the dynamic tech, you can drag in something from the back and over Pris. So, for example, you can track in the boast title, so dis rigid that we have imported which, which is the Edit post Idol. It's just actually a header. But then already with this dynamic feature applied and then an H one, that is what it is. So let's just use the default, which it? But I just wanted to show you how debt works. Now let's wrecking another dynamic feature, which is D category. Andy Category is a part of the Post Info because it is info about the post to drag in the post info for now and how you can see that it already generates a few dynamic fields. So if you create a block for a magazine, for example, you have different offers. Who write your block boats. You can display which user which were profuse er, as written. This block posts. We haven't governed that yet. But inver press you can add users so you can add of writers who write different block bows and then you can change the offer over here, which then you can display inside of your block posts We're not gonna do to have right now , so I'm gonna close off the offer also the time you can leave it like this. It's nice. Are most blocks You don't also want to display the time and sometimes you want to display the Commons. But if you don't have a lot of comments, that's not really good. So you can just also click the axe over here. Now it has this Aiken. So if you don't want this, I can You can delete that by clicking over here and then go to icon and then click on none actually like it for this block. So let's just leave it. And you can also upload your own custom. I can if you want to. You can choose something from the library or the SPG option, as I showed before. For now, I'm just gonna stick to the default one. You can also make this whole part a link, which is not what I want because you want people to read this block, both not go to anywhere else. So I'm gonna unlinked this and now D on the lane will go away now when he's need to stell this a little bit. Because in our block posts, Estelle is a little bit different. By the way, you can also change the date format. So maybe you want to first displayed a year, for example. But I like this already. Default one which is actually the same. And you can also add something like dates before the actual dynamic contents. But I'm also not going to do that because the Aiken is good enough. So let's go to stele for now. And in our design, you can see that it is italic. So if you want to change that they go to typography, then go to stele and click. Oblique Oblique is another word for italic now. We also want to display our category. We don't have a block for this, so what I want to do is now I want to use he heading type. So let's just drag in a heading. I just changed it to the age five or I should say, the H four, because that already has he still that we need 40 category. Click on dynamic tags, click on post terms, then click on post terms again. And here you can. You can select the category, so now you can see that it will show D category, which is is in. And if you have multiple categories, because I have that with a few block both. So let's go back to block post. For now. You consider, for example, the rice salad block post as dinner and home made. Then you can separate that with a comma. Or you can use a dash, for example, so you can display different Gatica result. I don't want it to be a link, so now this is perfect. So click outside of this box and now move things to the top. So drag it like this, make sure it's on the top. All right, that's fine. And now we need to drag in the content. So go back to the $9 just rack in the hole box of contents like this, and it will now automatically put in all the content of our block post. That is pretty nice now. There is no spacing between the columns, so let's just fix that click on the column because of Advanced. Go to the right side and add 40 for example. And now you can see that there is a little bit of spacing between the two columns. Now I want to do two more things, and that is at a next and previous button. So if you go back Sudeep $9 you can drag in deep post navigation, and this is pretty nice. It will display the next and the previous posts, but if you want to have to design that I have over here, you need to change a few settings. So let's just look at the design. This is an arrow, so let's just first changed the ever type Teoh, for example, a double arrow and I fused the long arrow. It's a little bit different, but there are a few options over here. I didn't find an option for a custom. Aiken. The one that is most close is Theo Long Arrow. I don't want to show deep post Idol. Let's just also delete the border next, and previous steaks are good. Now let's go to the stele. Just change up the style a little bit. I'm gonna put this at 14 and let's go to the decoration and delete the underlying which for some reason doesn't work. But let's just leave that right now. I have a potential solution for days in one of the next episode's and also at more letter spacing. Put that onto, like on the rest of the website. Go back, go to your arrow gift that also a collar, something that green. You can change the gap over here that you can change the size off the arrow. And I'm not really sure if I like this arrow over here. So you know what? I'm going to go back and I'm gonna choose another one. I think I like this one more. You can also add a hover effect if you want to. So maybe you want to have a darker color. When you hover over the icon like this, that could be nice. So this looks pretty good. And then the last thing that I want a social sharing Aikens because in my design, it looks like this. So how you can do that is going to the surge witches and type in share. And here you can see share buttons so direct that under the next every few buttons and you can also set up the different styles over here. These are the official callers. This looks absolutely good, I should say, but I like to keep things simple. So I'm just gonna put in the I can. But you can also get text, for example. But I like to use the Aikens, so I'm gonna put it at minimal. You can make them rounds or in a circle, and that is pretty nice for dis website. I think you can also a line that's to the left or the rights, and you can add the difference platforms so they have a few options over here. For example, what's up? You can also change the order over here by just dragging, which also doesn't work for some reason. So there's something wrong. I think I have a bug, but I think that that will be fixed when I when we save it. So you're going to go to the stele and change a lot of things I would set to row Gap on zero. So you don't have spacing beneath this because I want to set up my own margins and the columns gap is also important tennis. Fine. And then here, if you want to. This is also pretty nice. You could set up a custom collar Sodi primary caller. If you put that on green, then it will be in the sell off this block which looks a little bit nicer. And you can also add a hover collar. So maybe at the darker green color that is breeding nice orchards big this one and move it down a little bit. And I can also be pretty nice. It's very simple. And the last thing that we need to do is at this part related articles. So what I now need to do is add in a new title like this Not Oh, sorry. Not that both Seidel. But we need a normal heading because that tax doesn't need to change. An H Do is fine related articles. We need more spacing on the top, so go to advanced unlinked us one and at 20 or even 40 at the top. Now you want to go back to this one and at in boasts because we want a different boats here to display drag in the post from here again, we're gonna change how this looks. Columns said that everyone for now and don't worry about the design. But we want to display articles that also have tea, same category, and you can set that up Indy Creamery over here. So don't worry about all of this. Just go to the career E and then click on Related under Schorsch and in related, you want to go to term because we want Onley block pose with in the same category. And now it will Onley display block boasts that also have deep breakfast category. So that is all we need to do for now. So let's just click on publish and now we can set up the conditions it's automatically set up with the single block boasts a template, so you don't have to worry about that. Leave it at boasts. Click on safe and close. Now what we want to do is go back to our posts lists, and let's just preview one of our boasts. So we're gonna go to view go over here. Now you can see that we have to get agrees the title and related other block posts. But I forgot one thing and data see featured image. So let's go back one more time. Go up here and we want a featured image to be under D date. So last thing that we're gonna do is go to the $9 drag in the featured image right here. All right, that's perfect. And now, click on update. Go back to our block boasts, click on the refresh. And now we can see that the featured image is also here. Okay, we're getting close. Guys, Let's go to the next episode. 28. Building the latest post block: Okay, Welcome back in this video, we're gonna create our first dynamic loop and this is called a loop. You can also call it a block. But the idea is that you create one of thes and then you can say to wear press. I want this block to be repeated for, for example, six times on the home page here. My design, it's seven. So let's say we're gonna say six times or eight times on the home page, and I also want to be able to use this one on other pages and even in my block page and then the block page, it needs to be a maximum off tree and also on the block page. I want these articles to be related to the article that were on because this article has a category homemade. So that means that inver press we only want block posts here that also have to get a Cree home made. So So we're gonna build one of those blocks and we need another plug in for that. So let's go back to Wordpress and I'm gonna go back to the dashboards. And what you want to do is go to plug ins and then click on at New. And now we're going to search for another Blufgan that is called element or custom skin, because for some reason, L, a mentor does not have to feature yet elemental pro where you can create one of those loops . You only have a few options available, like we can see over here, and you can change a few things in here, but you cannot create your own block with your own design. So let's say that you want to change the position from read more from here to here. You can't do that an element of pro. So that's why we need elemental customs skin. And in this way we can create our own block so installed a plug in and activated. And now you will see that if you go to Template and then the team builder that we have a new option over here, which is called Loop. So we're gonna go to loop and we're gonna create our first loop. Now my advice is to use very clear names because we're going to create a few different loops. So this is a loop because it's repeated in this way and it's dynamic. This is a loop. It is just a smaller version. And we also have a loop over here, which is Onley displayed three times in a horizontal way. So let's just call this one block post landscape because it's kind of like landscape mode, and this is more like Portrait's, right, So we're gonna go. This block boasts landscape and them big because we also have a smaller version over here. So let's just go. That block boasts landscape big. All right, click on, create a templates. Okay, we're gonna click on the X because we want to create our own thing. And then what you want to do is create two columns because we're gonna place the image in one column and then also all of these elements. Let's zoom in the Littles. We can see the design. Okay, so click over here and click on two columns. Now, let's first trek in an image, so go to the nine dots, scroll down, drag in an image in the first column. All right. And now we need a dynamic image and we want this image to be the same image as this image, which is called the featured image, which we uploaded on every block boast. So we're gonna go to Dynamic over here instead of just using one. We want to load in the featured image off this specific block post. So go to dynamic. And there it is, featured image. And now it will give you an example. Posts. So this will not be the image for all the boats, but this is just an example. The example that he is showing here is actually the first block boasts. So let's go back. She can see this is the newest block boats. Actually, that's what it is. So that's why he's showing that example over here. So this will be the same if we drag in a title, for example. So let's also drank in a title. So post idol that drag it into this one. All right, that looks good. We're gonna put that on aged. Do okay. And what do we need more? We need to get agree, and we need to dis text, and this is a little bit complicated. So let's just first start with your read more and D category. Okay? So I'm gonna go back to D nine dots, Andy category. It's part off the post info. So we're going to drag in the boast info which it and blaze it above the title because that's also in our design. Okay, so now it will give you all the info that it has. A Ford is blocked, boasts, but now the only thing that we need is actually D terms because categories are part off terms. So if you click on terms, you can choose categories over here, and then it will display the categories which this block post has. Okay, so close this one. And now the leads off the opera moans with the X. Okay, we want to delete the Eiken so city Aiken to none. And you also don't want that to be a link. You can go to the texts and then change the text. So I'm gonna make that green, and I'm gonna give that the same styling as we have for the other texts. So that is an upper case, and the letter spacing is too. Okay, so now we have to same design. That looks good. And now we need to create the read more button. So do you read more button is actually a button, but we're gonna customize the bottom fields, and I don't see a lot of people do this, so that's pretty nice. It's pretty unique because you have to put in some effort to create a bond like that. So it is the default button. But if you're gonna put a big default button like this on all of your block bows, it just looks a little bit cheap and a little bit scream me, in my opinion. So that's why I want to show you how you can create a button like this looks a lot cleaner , and it's also fully clickable. Okay, so first, let's change the text over here to read more. Now the link. We also want that to be dynamic because it's different for every block post, and we wanted to link to the specific block post, and that is called depots euro, because it's the link for this specific post. If you click on this now, the bottom will automatically link do that specific block post. So that is pretty nice. So that's what we need to do over here. Now go to Stele and then in the typography. This is the default for the bottom. And we want to change that. If you go to transform. We don't want the upper case in here. We want the normal version. And also for the letter spacing. We just want that to be zero, so the text will be normal again. So I don't know if this phone just right. So let's also change the phones, all right? And the text inside of a butt. And I always make that 15 or 16. Okay, so now we're gonna change the button backgrounds. So if we unlinked the petting, then you will see that all the betting inside of the bottom will be gone. Now we need to add betting to the bottom. So let's say, 10 for example, Case and I have a little bit of spacing on the bottom. And now we need to add a stroke. But on Lee, a stroke at the bottom. And then we're gonna turn off that green. So then only the stroke will be physical. So if you go to a border type and then select solids concede that there's now a white solid Well, actually, you can see it because it's white on white. So if you change this to another color, you will see what I mean. Okay, so now we only want to display the down section. So then, if you unlinked this one now, the solid is zero pixels. You so you can see it if you go to the bottom and put that on one or two. You can see that now, on Lee, the border line is visible okays. But there's one problem and that is that spacing between this r and decide. So how you can fix that is go back Teoh contents. And if for some reason, you have to put this at zero because it automatically puts in some spacing for a potential Aiken hair which I do not understand because I've not selected and I can. But that is how it works. So if you put this at zero now, you will see that this works. Okay, so now we can go back to two collars and put the backgrounds collar on a transparent one like this. Now we can see the text. So let's check our design. We want a black tax or almost black, and then we bones deep border, which is actually just the bottom now to be green. And in this way, we have just created a custom bottom that just links to every block article. Okay, so this is pretty cool. Now, in this episode, I want to do one more thing, and that is changed the height off that image. Let's just click on publish for now because I want to show you what I mean. So we're gonna click on Publish. And now we want to set up the conditions for all of our block posts because this needs to work for all of our block boasts. And we will also do that, by the way, for dis loop and also for this loop and then with inde bows. Richard, we're actually gonna tell elemental which loop we want to show on what place. So that's why we will put this at all the block post. So if you put this at boasts now, it will display on all the block posts. Click, save and close. Now go back to your home page, click on refresh, and we still don't see anything. And that is because we've not Stolt Elementary where we want to display that one So now open the home page with element or which you can also do from here and let's see what we can do. So this is Barca still empty, So we're gonna import to deep both which it Because we want to display the post. Okay, Dragon in like this. Now put this at one because we want one column both per page six. That's good for now, We're not going to change this because we want to show our own made loop, which you can find under custom. So normally, you will only get these three options which are limited. But with our method, we can choose our own design. So now we can select our block bows, landscape big, which is this thing that we just have created. Okay, so now you can see that this works. But we need to change the settings again. Eso again? We need to put this at one. And now you can see that the design starts to come to life. We need to fix a few more things, as you can tell. But this is how you can create your own custom loop and then load in the custom loop with in the both switch it off element or pro. But then you also want to tell elements or what kind of block both you want to show here. And that is what you do in de Crear e. So we want to show all of the boasts. So, for example, you can also load in all of all of your pages here than in dynamically lows in the pages. But for this one, we wanted the Post, of course. And if we click on descending, that means that the newest block both will be on top if we click on a sending and the oldest black post will be on top. So, of course, for your home patients, do you want the newest wants to be on top and we don't want imagination at the end because we only won't want that on other pages because the home page needs to stay clean. Okay, so I'm gonna click an update, and now I want to go back to my home page. So I'm gonna go back to my home page, click on the refresh, and like I said, there's one more thing that I want to change in this episode. and that is that I want to change this size off the image in our exercise fells. I have given you images that have the exact same aspect ratio. But this is not always the case, especially when you're working with clients, because clients sometimes upload an image that has a different aspect ratio like this, and then you want the image to be cut off, so to be cropped at both sides. So your home page or the other pages still look nice. So you need to tell elemental or that you want to image to crop automatically. And that is what you can do if you click on this image and then image size custom because we want a custom size for our image. So let's say that we want to put this at 804 100. Click on, apply and see what happens now legacy that this is the aspect ratio. So if you put this at 500 for example, click on apply. This is kind of an aspect ratio that would be nice also for tablet and also for mobile. So I'm gonna leave it at this, and we need to fix a lot of things the pad ings, and we also need to load in the pre few text over here, so that's what we're gonna do in the next episode. 29. Preview text and responsiveness latest posts: Hey and welcome back. We're almost done with the block boasts loop with our first loop s. So we have it open here. So make sure you have this fellow open and your home page because we need to fix a few things. For example, mobile mode, responsive mode. But also, we need to fix the pre few texts and a pre few texts. But you can see in the design over here like this is golden excerpts or in except on a really know how to pronounce it. But I think it's got excerpt, and that is just a preview text for this whole block. And that is what you have to set up manually for each block post. Because the first few paragraphs off your block boast in most cases are not a good introduction for on your home Page writes to, You should see this as a way to promote your own block bow. So a little summary of Arctic and expect, or why this is so important. And that's why it needs to be a separate input fields. So I will show you how to do this. I'm gonna go to the beckoned over press so I'm gonna go to my dashboard and for each block boats we needs to go and click on edits. And now you can see the excerpt because normally it will be right here. But you can see revisions and you can see tax, for example. But we don't need that. You can change that up here in screen options. So then you will get this menu and you can turn on the exurb box like this. And then if you scroll down, you can see that this new box pops up. And let's just also take this opportunity to turn a few ones off that we don't need, for example, revisions. You can leave it on off course, but we're not really gonna use that tax. That's a little bit confusing because it's similar to categories. So let's turn that off for this block. So now if Reese close this we have, this is a little bit more clean, and we have to exert the box over here. So here you need to put in a little text. So let's just copy a small part up here, copy it and based it over here. So, uh, don't make this text too long. Because otherwise in your design, this'll one will be much longer than this one. For example, you want to keep your design consistence. So one long sentence for most block posts is enough. So I'm gonna click on update now, I'm gonna go back to my posts. And for these seven post, I'm also gonna put in the same excerpt text, and on a real block of force, you will needs Teoh have a difference decks for every block post. But this is just a preview for this course. So that's why I will feel all the block boats with the same excerpt text. Okay, so now I'm done with feeling all the texts. So if you take a look at this one, for example, you can also see that there is an excerpt text over here. So now we can load this in as a dynamic feature. So what I want you to do is go back to our block post landscape. Big loop. Ever gonna click on the refresh because there's new data in the back ends. So now we can go up here and select depots, exerts and then place it under your title Now you can see that we have a little preview, which is pretty nice. Okay, so now we need to fix two more things. And that is the alignments, some margins and beddings and also D responsive mode. So first of all, you can see there's automatically patting inside of the column. So let's just delete that. Go to advance again. Unlinked a batting Now the images full screen. Now go to this one to the same thing like this. But now, at betting to the left because we want to get a little bit off breathing room can put it maturity. I think that will be enough. And also for the title I saw on the final home page that this is a little bit too close. So I think that we need more line height on this text. We cannot see that right now, because this title was very short. So how you can preview another block boat is over here preview and then go to another one. So let's say so. I'm gonna go to all of my block post to check how it looks with a long title. So rice outlets that's a long title. So let's just search for debt. Rice salads. Okay, I'm gonna click on, apply and Preview. And now it will load in the new dynamic content. Okay, For some reason, that image doesn't display here, which is okay, but now we can change the line. Hide over here. So I'm gonna go to style again. Contact park Rafi, go to line height and then put this at 28. I think it is. Yes, that looks good. Also, I want these one to be closer to me. So what I'm gonna to now critical to advanced unlinked the margin because this is on the outside. Give this in negative top margin, for example minus 10 and also do that on the bottom. So then this text will be closer. OK, this looks pretty good. I also want to bring this on a little bit up, so I will also give a negative top margin on the read more button. Okay, so this looks pretty nice. So now Alexis, click on update go back to our home page. Well, not the elementary adults are pretty real home page, which is actually over here. I'm sorry. So click on refresh and see how that looks OK. That is pretty cool. Uh, this is pretty cool. We're always done. This is starting to look like a real block. Okay, So what you can also deal with in this element is change the spacing between D rose. So you don't do that over here. But you do that on the home page. So this is also the old design. So let's just click on refresh on the home page, scroll down, and now click over here. And if you go to stele, you can set up the rose gap for this block. I'm gonna put it at 40. And for some weird reason, they don't have the responsive most over here. So you need to set up one row gap for mobile tablet and desktop, and I do not understand five what? They've done this. But this is how it works for some reason. So we have to deal with this. Also, make sure that inside of this main column, you have to his rights batting over here because I don't know if we've already applied that , but I've also applied a right batting on this column. So then the block boasts will not touch the other column over here. So now I'm gonna put this at 40. But you will see if I change this to tablet mode that this design is not what we want. And even if we change this to a one column layout, it's probably still not probably one. So let's just test that for now. Gonna go to columns tablet mode. Put that on one. And as you can see now, the image becomes really small. But also, this text box becomes really long. So maybe on a mobile phone we want the design where the images full screen and then the text is under here, which is what it will happen by default on mobile phones. If you click on mobile phones, you will see the Now the image will be on top off that other column button tablet. That's not by default. So that's what we need to change. So for now, I'm just going to click on update. I want to go back to my block pose landscape, a big let's click on the tablet motors, and here you can see that the two columns are not 100% with, so that's what we need to change the den day will appear on top of each other. So let's go to the to the left column over here. Just click on it. Go to lay out boot this at 100 and also do that for the bottom column like this. Now, we also need to change the betting over here because we don't need batting over here. We need betting over here. So let's just change the real quick funding this at, like turkey or maybe 20 to the top. Okay, in here you can set up different batting to the bottom. So if you really don't like it, then that you have no control over the row hide between the block boats. You can also at batting inside off this one, and you can change. And here you have the ability to do it for all the tree platforms. So Dad is a trick if you want to work around death. Okay, so this looks good Now, also, let's check the mobile before we're gonna go back. And now it will automatically take the design that we have for tablets. So this is also pretty nice. Okay? There's one more thing that I want to do. And that is decreased the size between this and this because I think it's still too much. So let's go to our text over here. Unlinked this and maybe even boot minus 20 over here. Or maybe there's a little bit too much. So what about minus 15 and also at the bottom minus 10 or also maybe minus 15? Okay, so this looks kind of good. I want to go to desktop to and want to increase it. Also, a little bit up here, 15 and 15. Okay, lets no click on update. Go back to our home pitch elemental and click on the refresh. And now we're gonna check the tablet motors and the mobile moat to see if our design is good. Okay, Click on tablet motors. And this looks a little bit nicer on a tablet. Um, yeah, I like this. I like this a lot. OK, And now let's check the mobile version. Also, there's a nice padding on these main columns to death. Makes it nice. Okay, I like this. OK, so we're gonna go back to desktop mode so the mobile is fixed, and now we are done to copy this whole part to the other pages. So that's what we're gonna do in the next episode. 30. Related articles block: Okay. So welcome back in the previous episode, we have fixed this layout and this looks pretty cool and this automatically links to the block boast. But also inside of the block boats. We want to display other block posts and not with this design, but with our new design. And then we also Onley want to display block bows that have the category homemade or fruits , because otherwise it wouldn't be related. So let's just go in our single post template because we need to change the template, not the block post itself, but the template for all of our block Post, which is called Block boasts template. It's a single one that's important. Comments click on the APP on. So now we will go to the elements or editor. Okay, so if you scroll down, you will see it is related articles, and we also need to select a custom loop over here. But what we can also do is just copy what we already have on the home. So what about we just elite this whole part? Because we don't need it anymore? Now go to the home page, select the post which it right click copy go to the block post template left, click on your title and then right click paste. And now it's in here. But on this page we only want to display three related block posts. Okay, so let's just set that up. Roll down both per page. The tree. OK, and now we need it. Salomon's or what gonna flock boasts we want to show here and again. That's what we do in the query. So now we want to show posts, but we want to show related posts. So that is what you can set up over here. So click on related. And now we need to tell how these block posts are related to this page, and that is again by term because categories this part off the terms. So click on term click categories, and now you can see that it automatically loads in the new block boasts. For this example, you can see that it Onley displays to block boasts, and that is because we don't have enough block posts on this website yet that have similar tax to the block boats that we are currently on. So that is how you know that it works because this which it is set up for maximum off three . So now click on update. Go back to your watermelon example. Click on refresh scroll down. So now if you scroll down, we only need to c block boats that have fruits or homemade in the text. So scroll down. And as you can see, home aides, home aides, fruits, Right, Because this was home aids and fruits, and it only shows three block both. So if their arm or block bows that have t stacks now, it will only show these block pose at a maximum of tree. So here you can also set up the creamery to be ascending or descending. So that's the same thing as we did on the home. So now the newest one will be on top. Okay, so this is actually perfect. So now, with this same technique, we can super easily create a category page. So if we want to have a page for all of our breakfast post, we can create a reading one minute. Okay, let's just do that. So we're gonna go back to WordPress. We're gonna go to our pages and let's see what kind of category page we want to create right now. Oh, by the way, this is a spelling error. So let's fix that grapes. Would it be update? Let's just start with breakfast. Okay, So I'm gonna click on edit because there's no elements or editor yet because we have to click at it once, and then we need to click on Edit Element or before that bottom will show up on the pages. Overview. So now all we need to do is we need to go to the home page and we need to copy this whole section. Okay, let's just copy this one, because this template is also already in there. Let's go to the breakfast page. By the way, we don't want to show this title, So go to settings again, an element of fool with because we want a header and a footer to be displayed. Now we will just base this whole main section because it's the same page. You want a little bit more spacing on these kind of pages. So let's just fix that real quick, go to this one and put it on 60. And now we also want to have a big H one title at the top because that's a better indication that these are only articles with the tag breakfast. Okay, so direct. Let's just drag in a heading. Very easy boom like that. An H one breakfast articles, big title. Pretty nice. Maybe a little bit more spacing beneath the text to give it a little bit of white space. So I unlinked the margin and let's just add Swinney, for example, that you be good. And now we need to tell the creamery that we only want to display block boasts that have to attack breakfast. So go to Crary. You already know what we're gonna dio. We're not gonna go to related because there's on this page is nothing that can be related because this is an empty page. So now we will stay at boasts and now we will go to term, and now we need to tell exactly what category we want. So if we typing breakfast here that it will show breakfast, this is actually all we need to do because now we're done with this whole page. But there actually, one thing that we need to do and that is set up the pagination, um and That is what this is because if you have a really big block and you have not prepared to this than the block will only display the maximum amount that you've set up here. Six in this example. But then you cannot go further back. So this is where you set up deep pagination. For now. I only have tree blocked boats available on this block. So for now, I'm gonna put this at two. So we can actually so we can actually work with pages. Okay, so if you click on pagination, you can click on numbers previous, next and numbers plus previous next. In my design, I have previous the numbers and next Sadat is what you can sell right here. Okay, so this is really close. So let's just fix that real quick. Go to Stell. Imagination and a space between space between that is the space between the actual items. So for some of red reason, they also don't have a slider hair to increase the spacing from here to here. So then you have to go into typography, which is actually not perfect to do, but this is the only option that they have, and then increasing line height. So that is actually the the line height above and under this text. But is the only way that I found to fix this issue. Not perfect, but that's what we have to deal with. Okay, so now we also want to change the text because it has added these weird arrows which I do not like. So scroll down, go to pagination And here you can set up the texts. So the end lagu is are those weird things some just gonna delete that? Because I don't like that previous and next That should be enough also, I wanna the Leedy underline. So you already know what I'm gonna do? I'm gonna go to topography, go to Decoration and put that on none. And then it shoot work. But it doesn't work. So again, let's just leave that for now. I have a potential solution for this and one of the next upcoming episodes right now that just click on update and let's check the mobile and tablet version said That looks pretty good. We maybe want a little bit more spacing also in the top here, So maybe 60. That's just check mobile for Now let's also increase that. Maybe 60 is too much of Mobil's of 40 will be fine. Okay, so let's just click on update. Let's go to our website. This is our website. No, I've not opened the website and let's click on the breakfast page and let's see if that works. Okay? Breakfast articles, breakfast, breakfast, critical. But now the maximum amount of both is too, which is off course, a little bit too little. So I want to set this up at a six or eight. Because otherwise the page will be very long. So for this block, I'm gonna put it at eight, which is more on the home page. But this is an actual back category paid show. That is not a weird thing to do. I think so. We're gonna go back to the breakfast page, click on the refresh. So now a maximum off a block boasts will be displayed on this category page. And now you also know how to do that for this page, This space and this page, but you just have to do is copy this whole main section, change this title, then go into the career e pretty easy And the only thing that you have to change here is the category. Badged do fruits, for example. So this is how you create category pages, and that's it for this episode. We're getting pretty far already, so I will see you in the next video. 31. Personal favorites tiles - Creating: Hey and welcome back. In the last few episodes, we have created this block and then made a duplicate with its authority element or post witches. And now we're going to do the same, but with a smaller version that is deep personal Favorites section over here. So this is how it looks right now. My original design, which you have seen before, looks like this. But I realize that this is not a really smart design, because the title in a lot of block post is longer than one line. And then there's almost no room for the exert. And there is not an easy feature to only show a small part off the excerpt inside of elemental or so at changed is designed Teoh, the design that you see over here you. So you just see the title off the block boats and then a read more button. So sometimes when you're designing a website, you will realize that the things that you've designed, Luke cool. But they're not really practical. And this is what I also experience with my own design. So this is the block that we're gonna create, and it's gonna be very easy because It's just a smaller version vote we have designed over here. So before we're going to start, we just have to look at this to sign and we have to make a few calculations. So how big is this compared to this whole block? Because then we can set up the with off the columns because this will be one column, and then this will be one column with a little bit off insight, betting on the left, and you can calculate this with pixels off course. Ah, but I just like to design on the I because on the final website, it just needs to look nice. So I think this whole part is 33% and maybe this is sixties, so that just make it easy for ourselves. And, ah, Big 30 and then 74 disc column. So this is what I always do before us, the working element. I look at the design, and then I try to see the columns that I'm actually creating before I start creating it, and that will make our process easier. Okay, so let's now go to Wordpress. I'm here inside, off the dashboard. I still have a few taps open and one tap that we need to really open is this one. So if you have closure a tap, I'll show you how to get back to it, because we need to copy the inside. So we're gonna go to templates and then go to Team Builder. And that part is called a loop. So if you go to loop over here, we can see that this one is this one. So if you click on edit L a mentor, then your insight off this block. Now we want to create a new block. We want to create a new loop r