Transcripts
1. Introduction: Welcome to the course and my name is David and I'm going to walk you through step one to step done, how to create a website with elemental. This course is perfect for anybody who's looking for a crash course into how elements were works. So you can learn and understand and go forward and create any type of website you want. We're going to be using the free version of elements or as well as the hello theme. And these two things work really well together to make creating a website quick and easy. The only design a limitation in this course is that because we're using the free version of elements or you can't adjust and edit the blog grow section as well as individual blog posts of your website. So if blogging is important to you, I definitely suggest upgrading to elements are pro, but if you're a creative person who's looking to create, say, an online portfolio or maybe you're a small business and you're cool with designing a small ten to say 30 page website. And you're okay with designing each page individually. This course is for you. The resources and tools are going to be using in this course are named sheep as our domain name registrar, blue host as our shared hosting account. Then we're going to install WordPress in design or website. So if you've been looking to get started with elementary, This course is for you. Click that next video and I'll see you on the inside.
2. Website Overview - What We will be Making: Okay, so in this tutorial, I'm going to be instructing you on how to use elements or to design each of the three sections of your website. So elements or bricks or website up into the heterosexual than the body and the footer. And I'm going to show you how to edit each one using just elements or the free version. There's nothing additional pay for. I'm going to show you how to add this nice header, how to add buttons, how to make the button be and anchor links, you click it, it takes you somewhere on the site. How do you add this nice hero image in the background with a text overlay and, and how to make it so the image stays put as the website moves. How to add different blocks and different design ideas. I had to add an emo opt-in form at the bottom. How to adjust and edit your footer, how to add social media links, Google Analytics, and some thoughts on a blogging as it relates to mentors. So anyways, let's begin.
3. Get Your Domain and Hosting: Welcome to name2.com. So named cheap is a domain name register. That means this is a place where you can go and register domain names. So to get started is very simply just type in the domain name that you want to register and click the search icon. Now the reason I recommend named cheap is because they have the lowest prices around for registering a domain name. So just go ahead and put in the domain name that you want. Click the search icon. And then on the next page, it's going to tell you whether or not the domain name is available to register. And so this one is, so let's just go ahead and add it to our cart. Now if the domain is not available, you have to come up with something else. Now, let's go ahead and check outs. And there we go. So now Randy checkout page right here in so the domain name registration, you can register for one year up to ten years in advance. You can set on auto renew if you want. So after it, like when the domain name is ready to be renewed and if you have auto nuance, it will just charge your credit card again. So it's totally up to you and you get who is guard for free and this keeps your contact information private because part of ICANN rules when registering a domain name is that you have to provide accurate contact information. And so who is God keeps all that information private and you get a completely for free. So anyways, just go ahead and confirm your order and you'll have to create a Name Cheap account. And that's it. After you get your domain name, you are going to need a shared hosting account. So what a hosting account is, it's just a server that's on 24-7. So your website is available 247. It's just a requirement of having a website. And so I personally like to recommend blows. Blows is the number-one recommended web host by WordPress. So to get started is very simply just come here and click on this button that says Get Started, super-duper simple. Ok, so now right here they have a bunch of different plants. So they have basic Plus Choice post impro. So Pro is for large established websites that get AY traffic you don't need probe. Basic is pretty good, but you only can have one website on the account which is very, very limiting. So the ones I like and like in recommend would be the plus and the choice plus plan. I personally liked each choice plus plane because this plan is powerful enough to allow you to grow a high traffic website. But again, it depends on your needs. So if you're just like a small business and you just need to get a website up and running. I would say the plus or basic, or find a person who is probably the plus because you get multiple websites, but it's totally up to, you know, if you're someone who wants to like maybe build a high traffic blog, then I'd prefer you go with choice plus, but again, it's your decision. So I'm gonna go with choice plus, and all you have to do is click on select. Ok, so now in this speech, you can create a new domain name or use a domain name you own. So if you go with create a new domain name, this is going to register a domain name through blows, which I don't recommend because whereas named sheet was 888 year blows charges 1799 a year for domain name. So that's why we're using name cheat because it's just cheaper. So we're going to use a domain name you own, okay, so put in the domain that you just registered at, named sheep right in here. Okay, so once you do that, go ahead and click on Next. And here we go. So this is just an account information, okay, so I'm not going to insult your intelligence and walk you through how to pay for something online. Just fill in your account information, OK, go away and fill in your account information and the package information right here. So you can choose 12 months, 24 or 36 months. Personally out probably go with the 2024 month price plan. If you're, if you're wanting to build a blog because usually takes two years to build up a high traffic blog. And then you can make a decision whether or not you want to say glucose or not. Again, this is totally up to you. Now, we come down here, Package extras, site lack. We don't need sight lock. And then right down here we have payment information, and that's it. And so go ahead and click this little checkmark that you agreed to be hoses terms and then click the green Submit button and you're good to go. Welcome to blues.com. So after you submit payment, you're going to be presented with some sort of like onboarding process. You can just skip through everything and this is going to be your dashboard. Now, up top here is your website. You may be noticing something like temporary box 1234. The reason that's popping up is because you have to set name servers that need cheap to be pointing to your blue hose account. It sounds way more complicated, but I'm going to show you how to set everything up.
4. Install WordPress: Now you have your domain name at a domain name registrar and you have a shared hosting account with blue is. So how do you connect the two? It's a very simple process. You just have to change the name servers at named sheep to be pointing to your hosting account at Blue Host. Now that sounds way more complicated than it is, but it's a very quick and easy thing to do. It takes about five minutes and I'm going to show you how it's done right now. Let's setup name servers. So every single web hosts will send you a welcome email when you buy a hosting package and blows is no different. So you should have something that's you'd say, well come to blows and then your domain name that you use as the primary domain name on the account. And so here we go. So I've chose plus web hosting. So as we scroll down here, right here, you're in your dashboard, I should say this a temporary box, whatever what we have to set up the name servers. So for blues, the name servers are very simple to MS1 blows in NF2 glucose. And so all you have to do is just highlight this and then copy and paste it into your name cheap account. So you have to login to name cheap and go into your domain name list and click on the Manage button for the domain name that you want to edit. Then you want to just come down here where it says name servers. Now, right now, yours should say Name Cheap of basic DNS, which you need to do is come down here and select custom DNS. Then all you have to do is type in and S1 blows and NST blues.com, and that's it. And then make sure that you click this tiny little green checkmark. And so once you click that little green checkmark is going to come up saying effects may take 40 hours. Personally, I've never seen a take 48 hours. It's usually like ten minutes. So maybe take a break, get a cup of coffee, come back in five or ten minutes, and everything should be propagating correctly. So you should be seeing your domain name over here. But anyways, that is how you adjust name servers. Now it send to launch WordPress. So once you sit up name servers and give it like five, maybe ten minutes max, this should propagate as appropriate and you should be able to see your domain here. So I'll have to do is kind of like just a launch your site and blues will install WordPress for you and everything. But I don't recommend doing that because I want to have control over like my username, my password, recovery email, all those little details I want to have control over. So I'm gonna go ahead and click this and I'm going to delete the site. Yes, delete to say it's OK because we're going to be installing everything from scratch. So with my site's boom, click Add site. Okay, so now we have WordPress and we have blue whose builder? So I have another tutorial video on the BU who's built if you want to check out, but we're going to be using WordPress. So quick, use WordPress. All right, so now we have to create a new WordPress site. So ST name, the ST name should be the name of the website. So I'm going to be using my name, so I'll be just put that in right here. Now, site tagline, you can just put in anything. So hello world. Now you can always change these things later once you're logged into WordPress. Don't worry too much about it. Now the important thing is to click the advanced Deborah here. Now email address, this is going to be the recovery email. So if you ever forget your password, you know what, IMO, it's going to go to you. And then your Wordpress admin username and admin password, which I personally like to set myself. I don't want to have Blows just automatically generate me up a username and password. So anyways, I'm just gonna put in my email. Okay, there we go. And admin username, okay, and WordPress password. Okay, and so now we're good to go, go ahead and click Next. Okay, so now you can install blue or you can start on WordPress on a directory. I don't recommend that. We want to install it on what's known as the root domain name. So Wordpress installed on the entire domain name, not only unlike say slash blog for example. Anyway, so just leave this blank. Now, helpful free plugins. We can just uncheck all of these because we don't need it. Next, goats, you click Next. And WordPress has been successfully installed. Yeah, it's really that simple. So go ahead and click on log into WordPress. Welcome to WordPress. So this is your WordPress dashboard and you are now logged into your website. So let me go ahead and log out. Now, whenever you want to log into your website, you just have to go to the domain name slash WP admin, and that's it. And then you'll be presented with the screen. And all you have to do is put in the username that you just created, in the password that you just created. And that's how you log into your website every single time.
5. Backend Settings and Design Preparation: Perma links in settings. So now that we have a Wordpress installed on our website, there's just a couple of boring technical things that we do on the backend. So I'll make, I'll keep this brief and we'll get right to the point. So the first thing I want you to do is to navigate to your permalink section, okay? And so permanent can be found under Settings and then permalink, okay? And so permanent nx means like the permanent link for your webpages. So, and this is particularly important if you're going to be blogging. And so you can, here's where you can change the URL structure of your blog. So you have plein, day and name, month and name, numeric, etc. Now the best structure is really depends on what you're doing. And so like month in name or date, That's good. If you have a news oriented website, if you don't have a news oriented website using dates to terrible idea. Next we have post-natal. Post name is good to. I mean, this is ideal if you're going to have like 50 blogposts maybe. But in general, I recommend doing something like slash blog slash post name if you're going to be blogging because this gives a nice site architecture, but it's totally up to you out either good Post Name or custom structure. Now you could also include categories within this. So for example, I could just keep going with adding category, okay? And so we have blog category, post name. That's ideal if you're going to be building out like a really massive website that's going to have like thousands of pages and you grab multiple categories. For most people, that's pretty excessive. So I would just do something where it's like post name, custom structure. Click here slash blog slash post name, and just leave it at that. Okay, so now the next thing I want you to do is navigate to where it says users in all users now right here is where you have your different users for your website. So right now we have one account which is the administrator. But if you ever want to add new users, you can just click this button and this is Add New. And so right here within WordPress, you have a bunch of different roles you can subscribe to people. So for example, like say you bring on someone who's just going to be an author and all their, their jobs only to publish content. You can just create a new route, new role in call author, okay? And that's it. That's kinda like what you'd want to do if you're going to be bringing on writers, et cetera. Now I just want to bring up another little thing too. So if we notice right here, this is the username. Let's go ahead and click Edit. And so right in here, this is where you can set a display name publicly as something else. So for example, if I don't want this David 99, I just wanna say I just want to be David. I don't need the 99, Just put the nickname there and then you can select name there. And so display name publicly as your name, for example. So you'd want to do this because you've seen like on blog posts at the very bottom poses written by David or whatever you don't want to say admin or something ran like that, you want to have it like actually be a name. So right here, we have the biographical information. This is the paragraph that will be coming up within your blog post. So for example, if David is a web designer and SEO expert, bla bla bla desert. That's where this has populated from. And then right here you have your profile picture. And so you can change your profile picture on gravity. And so let's just open gravity. And so what gravity is, it's just a service where you can associate a picture with an email. So that's where this is being populated from. And then right down here is where you can set a new password for your account so you know your WordPress login password. If you want to change it, you can just change it right in here. And that is it. The elite themes and plug-ins. So with any WordPress installation, you just get a bunch of themes and plug-ins already preinstalled. So we're just gonna go ahead and delete some stuff that we don't need on our website. So anyways, the first tab I want you to navigate to is your Theme tab. So again, you have to go to appearance and then themes. Now, these are your WordPress themes up top here you can search for different deems or you can add new themes as you want. And so for example, we come over here to Wordpress.org themes. This is where we can come and install a brand new themes. So you just come over here and search for deem. So the thing that we're going to be using is the hello theme from elements or so just type in hello, literally just, just called hello. And right here, so it's hello elements are. So let's go ahead and click on install. Alright, so now it's been officially installed and we can just go ahead and click on activate. Alright, fantastic. So now the Luthien is activated and we can go ahead and delete all these other default themes. Okay, so again, we have the 201720182020 theme. I have two tours actually on each one of these teams join, check them out if you want to learn how to design with them. But for this tutorial, we're going to be using element or in the hello theme. So anyways, let's go ahead and delete this. So we click this, then we click down here at the red button that says delete, click OK. And there you go. Do that for each of these themes. And there we go. So now we have our theme installed. Now let's navigate over to plug in. So you go to plugins, installed plugins. Once a plugin. Plugin is like an additional little piece of software that's I can add on to WordPress a add some sort of functionality. So we are definitely going to be installing quite a few plugins with elements or book. Right now we have a bunch of I just default plugins we don't need. So Kismet isn't anti-spam plugin. I recommend activating and using this. If you're going to be blogging, if you're not going to be blogging, then you can just go ahead and delete this. Next we have blue, so we don't need this blue as plugin installed, we can just click on deactivate. And we want to go ahead and click on delete. Next is creative mail by constant contexts, so we don't need this installed. Go ahead and click on delete. And alas is hello dollies a hello dolly just leaves I quotes within your WordPress dashboard. It's not particularly helpful was to just go ahead and delete that. Okay, and last is jetpack has, so jetpack brings a lot of like WordPress.com features onto your WordPress.org installation with your Blue Host account. So thing that I like most about jetpack with regards to blogging is that like you can add related posts or you know what I mean? Like you come to the bottom of a blog post and you see like squares relate linking to other blog posts. That's one thing I like about jetpack and they'll supervise analytics, et cetera. Totally up to you whether or not you want to keep it or not. I'm going to keep it for now because I find jetpack really helpful, but it's totally up to you. But anyways, that is all you have to do with regards to what things you have to delete in what default plugins that came with your WordPress installation that I want you to delete, and that's it. Now it's time to install the elements, your plug-in as well as a few other essential plugins I recommend. So let's get to it. So to install plugins is very simple with WordPress, you just navigate over here where it says plugins and we just go to add new, okay. And, and now under here we want to search for plugins and we went type in Lehman, and there we go. And so you can download and install elements or on your WordPress installation completely for free right here. Oh, mentor website builder. Click on install now. And then click Activate. Ok. So now you're going to be presented with this welcome screen because you just installed elements or now this is the first essential plugin that we need. We're going to install two more that are really helpful. So again, we want to navigate back to plugins and you want to go to add new. So we'll click on the Add New icon of top there. Now, first plug in, I want you to install is the Yost SEO plugin. So what a CEO does, it just allows you to have a little bit more control of your on-page SEO description. Okay, so go ahead and install and click on activate. So what I mean by that, let's just do a quick search, would say creative pro. So we do that for example, we see like this a little description right there and like this title right there, all this is powered by Yost. Like with Yost, You have the little specific control of your site where you can make set things up like this is called your meta description. This is your title for the page SEO was you have all the little detail control over the on-page SEO, so it's very helpful, useful plug-in, definitely recommend installing it as we're getting ready to get everything setup for the tutorial anyways, let's continue. So one more plugin. So again, go to add new. And the next plugin is called smush it. There we go. Ok, now go ahead and search. Okay, so right here, this one's smushed lazy load images, optimizing compress images. Let's go ahead and install this. Now, this plugin is very important because it optimizes any type of image upwards your WordPress installation. And you're like, well, why is that important? Well, it's because you're going to have a lot of images, okay? And so like when you click and open a website, what the server is doing, it's loading all these images. So it has to load this image and this image and its background image, whatever we add to our site so you wanna make sure everything's optimized so everything loads quickly and that's what smoosh it does, helps optimize your website for speed, so your website loads more quickly. Now, one additional plugin I also recommend installing after the tutorial is called total cash. Okay, TO total cash, there we go. Okay, so this plugin is important because it sets up a cash W3 Total cache sets up a cash heroic. What's that? Well, it just means like your web, it's going to save a version of your website on someone's web browsers awake when they revisit your website, loads way more fast and provides a better user experience. Google likes it because your loads more quickly. Now I recommend installing this after the tutorial because it's going to be a little bit annoying editing the site constantly with a cached version and then you have to like reload the page, et cetera. So it's best just to install it on your website, get it done. And then once it's like mostly done dengue, go ahead, install it W3 Total cash. But oddly, this uninstalled for now. As we're just in the process of designing our website, but I just want to mention this B. So you're aware that this is another essential plugin that you should have on your WordPress installation. I would send to set a homepage in a blog post page. So what am I talking about? So if you visit a WordPress powered website, website great pro.com, this is a page, this is just one page that has a custom design. And then because WordPress is more of a blogging tool, they also require you to set a page to be the blog post page. So this is a great product, calm slash blog. This is like the blog post layout. Okay? And so if we take a look at our website with the hello theme from elements or looks fantastic. Okay, this needs a lot of work, but this is our archive page, so that your archive page is this. Ok. So elements or for whatever reason they call it a blog roll, they call it the archive page. So we don't want to edit the archive page and want to make a homepage. Okay? And so to do that, we need to create two pages. So anyways, let's come down to settings, will come down to reading. Let's open it up. Alright, so here your homepage displays a static page. Okay, and so the homepage now we have the sample page. So we actually have to go in and create a dedicated homepage and a dedicated blog post page. Okay, and then set it here. So anyways, let's go ahead and do that. Click on pages. Alright, so go ahead and click on Add New. And now I'm going to create a page and call it the homepage. Alright, so home page. There you go. Okay, so in the next thing what you do is come down here, okay, and because we install the US as CEO right here, you can give a page description, okay, so for example, the homepage, it should be the site title, page separator, then a keyword description. Okay, so I'll just go ahead and delete that. Ok, so it should be the website. I'll just say website name, page separator, key, word, description. Ok. So this depends on whatever say you're, you're building. Okay? And that's it. And so the meta-description, again, as I said earlier, that's like the little paragraph that pops up underneath here. Definitely put something in here that explains what your website is about. And then go ahead and click on publish and then publish again. And there you go. So now you've just created your first page. So click on the WordPress icon. Okay, now add new. Now we need to just do that one more time and we need to create a blog post page. And I'm just going to call this block, okay? Now if we come down here and make sure to check the Euro description so it's domain name.com slash blog. So again, you should have already set up your permit wing. So it should say like the page title blog. If it says like number something, make sure to set your permalink. And I want you to do the same thing again, come down here because we installed Joe's SEO. Now you have a little bit more control over the search description for your blog page. So if you just take a quick look like with Lipset create bro, I call it the website create, probe loud case studies, tutorials, and making money on the line. So you can just set something right here. So the the whatever I'll just call it the travel blog. Okay. Whatever it is. Okay. So give it a description page separator, and then your site title, whatever, and then go right in here, meta-description, scribe your blog in a few sentences. Go ahead and click on publish and publish again. Alright, so now we have those two pages. Click the WordPress icon, go to settings, go to reading. I'll write a static page, homepage. I want to be the homepage, post page. I wanted to be the blog page. Alright, so right here, blog pages show at most ten posts, woods that talking about, that just means right here. Okay, so how many blog posts do you want it to show? Okay. So you can set it right there. I typically go with nine because the way I like to design a blog is like by this three by three grid. So it's totally up to you, but that's what that's what this is talking about right here. And then each post and feed includes a full-text summary. So this is RSS, this is kind of a data technology that nobody really uses anymore and search engine visibility. So here make sure that this is not clicked because we want our website to be indexed. Anyways, go ahead and click on save changes. And that's it. Ok, so now you've just said homepage. So let's just go ahead and take a look at our website now. Oh, wow, so beautiful. So now we're, now we're finally ready to begin the process of designing our site with elements or end the hello theme.
6. Manual Header Design: Okay, so we finally have our websites set up. We have the hello elements or theme installed, we have the element or page Golding plugin installed. Now we're ready to design our websites. So I just want to create a quick introduction. Just explained to you how elements are work so you can conceptually understand what we're doing because it does work a little bit differently than other WordPress themes. Now elements or breaks your website up into three sections. You have your header, your body in your footer. So your header is where the logos in the menu. Then you have your body where you can put in elements or blocks, whatever you wanna call it. And then the footer is where you'd like your privacy policy Terms of Use, disclaimer disclosures, all that legally stuff goes. So we're going to be designing each section one by one. We're going to be starting at the header. Then we're going to move into the body. Then I'm going to show you how to design the footer. So if you're ready, let's continue hiding the page title with elements or so. The very, very first thing that we need to do is we need to get rid of the page title. Why? Well, if you take a look at like a homepage, do you see anywhere where it says homepage? No. Well, I can tell you that because I create this website like the homepage for website great bro is actually called homepage, okay. But I have it hidden from the actual page itself so it can add in my own titles as I see fit. And you can do the exact same thing with elements or so. Anyways, you just wanna click on edit page, come over here. Now it's time to edit with elements or so this is WordPress is editor, okay, this is called the Gutenberg editor. Now if you click this button where it says the edit with elements or what's happening now is element or is taking over the complete design of the website. Okay, so now we can start designing with elemental, but you just drag and drop things into place as we see fit. But right here it still says homepage and say, how do you get rid of this? Like you delete? No, you have to have a page title. You can't delete it. If you if you deleted it will just say, let's just say like No page or something. So the idea is very simple, but it's again, kinda confusing. So within elements or you want to come down here where it says this little gear icon right here, that's your settings. Okay, you want to click on that? The title is Homepage, status is published. We want to hide the title. Okay. We want to hide the title. There we go. And there you go. It's literally that simple. Okay? And then go ahead and click on Update, okay, and that's it. That's all you have to do to hide page titles. Let's edit the header of our website. So the header is this top section, right up top here. And so there's two ways to do it. There's the manual way and then there's the way where you can just download a template quickly and easily. I'm going to show you how both work. Now I'm just creating this section because I know people are going to be like click on the customize and they'd be like wher, where's the header? I don't get it like okay, you have to install a plugin, okay, it's X out of that. Alright, so we want to come over here and you want to navigate to where it says plugins, and then you want to add a new plugin. And so what we want to add is like elements are headers and footers block something like that. So anyways, it's good to men. Tour header was put that in. Now the correct Plugins should come up. Okay, boom, right there. Elements are header, footer and block templates. So. What this plug-in does, particularly with the hello theme, is it allows us to edit the header and the footer of our website. So go ahead and click on activate. Alright, fantastic. So now we can navigate to appearance, and now we have an option called header, header, footer and blocks. All right, there we go. So over here is where we can now sets a header. So we'll just go ahead and trash. That's okay. So to begin designing a header, you just go here and click on add new, okay? And now this is where you can edit a header with elements or so we can select the type of template that we're creating. So we have header before the header, footer custom block. Okay, so like would they mean like before the footer? So let me just open this up right here. Before to before the footer. It wouldn't mean this section right top here. Now the reason why you would want to edit like before the footer is because sometimes you'd want like a message like this or you wanna have an email opt-in form, whatever. That's kinda like the section that you'd use there. Now we're designing the header, okay? And now we want to display on. So here you have a ton of options with element two. Elements are, is fantastic in the sense that it gives you this type of like really specific control. So you can have it, you can have your header display on your entire website, on, only on the 404 page, on specific post, whatever. For most people watching this, like you just want everything to be displayed on the entire website, okay? And that's it. And so user_roles right that top here. So this, what this does is that sets who can edit the header. Okay, so you know, if you have a team of people come in logging into your website, you want to have this set to limit people who have access to specific things. For most people watching this, you're probably just a guy or girl editing or website. So it's not really that important. Now to edit the actual header will just give it the cyto actually. We'll just call it this header manual. Okay, whatever. Just click on Edit header or edit. What elements are our rate. So now elements or should load. And this is an, okay now what you're looking at right here is not a page on your website. What you're designing here is your designing a header section for your website, okay? And so you can do it manually. So, you know, if we take a look at a header, how should a header be? Wait, oh, you know, you have your logo over here and then you have the menu over here, right? So that's kinda how you want to totally up to you how ever you want to design your header. But I would do something like that. So we want to click on the plus sign, add new section. What kinda way out to be one? Well, I kind of want this kind of whale right where the logos account will be smaller and found the left and the menus on the right. Just go ahead and do that. Alright, so now up top here is where our logo is, okay, or where a menu is. So up top there, we want to add in a logo so we can type in something like logo, okay? And then we have these sites logo. We can just drag that, drop, drag and drop that in there. Okay, now you're just gonna have this generic box. Why? Well, that's because we need to actually create a header and upload it to the sites. Okay, so we want to just to edit and upload an image. Do you have to click on this little pencil icon right there. Got it. Okay, let's click on that. Alright, now we want to go to style over here. And underneath this or sorry, we wanted stay under content. Okay, so now we have custom image. Yes, there we go. That's what I mean, that element that has a lot of controls. There we go. So now we can choose the image that we want to upload. So we actually have to create a logo. I'm going to show you that in a bit later in the tutorial. But if you have a local ready, all you have to do is click on Choose image. You can drag and drop it into the space and it should populate the logo as appropriate. And you can set the image size, the alignment caption out, probably that off, et cetera. All right, now we want to add an element to this over here, so we click on this. So what do we want to add? We want to add in a menu so you can just type in like menu. Alright, so you know, you have a bunch of different things over here. I recommend the navigation menu. Drag and drop that right there. Okay, so nothing should be in here because we don't have any menus on our sites. And so there are no menus in your site. So we have to go to the menu screen and create one. So let's go ahead and do that. So creating a menu for your website, it's very easy. You have to go to appearance and then you want to go to menus. Let's open this up. Alright, so let's just take a quick look. Now, typically most websites have two menus. You have your main navigation menu at the top and then at the bottom you typically can have a footer menu. So we're going to do that. So right now we're editing the Header Menu. And so now we need to create a new menu. And so right now we have the homepage, sample page, et cetera. And so I kind of want to have I want to delete this, okay, so I don't really need the homepage link in the menu, so we could maybe just call this home, rename it. Okay, so it says home. And we have the blog. Okay, that looks nice. And then we have sample page, which just like a default pj at game with WordPress installation. So we can go ahead and remove that. And we'll just leave it right there. So we'll call this instead of many one, we'll call this main, main menu. You can call it whatever you want. And so anyways, let's go ahead and create menu. Okay, very good. And so display location, this will be our primary menu, so we'll go ahead and click on Save. Ok, so now within this menu have edit menus and you have managed locations. Okay? And so right now we have a primary him because we only have one we only have one menu location designed so far on our website, which is this one we just created. Okay, and so now we have the main menu that's up there. Okay, so let me go ahead and reload this. And we'll start from scratch. Alright, so again, let's click on the plus sign. Boom, right there. Now will go here. Let's type in the logo again, site logo, drag and drop that right there. All right, so now we'll click on this and we'll go to Menu and navigation menu right there. Okay, so now we have our menu populating this section right at the top there. Okay? And it's really that simple. Okay, so anyways to begin editing, you always wanna make sure to click on the little pencil icon because this at it's the, what's the items within this section right top there. Alright, so now we take a look. We have content style and advanced, so we come over to style, for example, we have horizontal padding so we can change the width, okay, into space between. We have vertical padding if we want to move the menu down. So say if you had like a bigger logo and you wanted to move the menu down just a little bit. You can do that space between, okay, can kind of play around with this on your own. So text color is over here. Now we want to make this black. We can go ahead and do that. Let's make it stand out a little bit more. And so that is it. And so you have a bunch of different options. So Wink hover effect and so for example, like link hover for example, like when I mouse over the link, yeah, it should do something. So typically we can have an underlying overland double line framed, whatever. So, you know, maybe we'll have underlying. Okay. And so like when I mouse over it, underlines does something to kind of give an indication that it can be clicked on, et cetera. Okay, so that's that's really it. So we can come down here and then you trigger an icon. So over top here we can change additional items for the menu. Alright, so anyways, let's go to advanced. So over here we have different margins. So margins like, you know, just, you can just play around with this as you see fit. So it does the same thing where, you know, it gives space between up or down. So, you know, and elsewhere have padding right up, top there. So what padding does is it gives this whole, entire element is a little bit more space. That makes any sense. Alright, so motion effects is really helpful because motion effects you can have entrance animation. So if we want to have it fade in, for example, the site loads, the menu fades in like that, et cetera. Ok, so anyways, just navigate back to content. Alright, so now we come over here, main menu. Alright, woo, woo. Okay, now we come down to, well, there we go. Now. Alright. So under content layout, this is where you can change the whale. And so for example, it's horizontal. We want a horizontal, but maybe we want it off on the right like that. Okay, maybe we don't want it on the left, whatever we want it centered like that. This is kind of like where you can kind of change things like that. Okay? And then like the breakpoint, like what is the break point? So Breakpoint means like when does this become a mobile menu? Okay. So you can change this to whatever you whatever you see fit. I personally would just leave it as is. So let me just open up Lake website create pro.com just to show you this. So like for example, if this is the menu, right? And so if I go to Inspect and now look at that, it's a hamburger menu. Okay, why does it do that? Well, that's because everything's compressed and that's the breakpoints. So that's what this means right here, that breakpoint. So when someone does on a tablet, will this be a hamburger menu or display like this? That's going to help you make that decision. Okay? And so that's really, it's, it's really that simple. Okay, so it's, could be a little bit confusing, but it's not too, it's not too complicated. Okay, so you just gotta create a menu in your WordPress dashboard over here. Make sure this is the menu that you want. So I call this main menu. I literally just named this main menu. You can name it whatever you want, you want Nina, ABC123 menu. Go right ahead and just call it whatever you want. Now under the content, you want to pay attention to layout, because layout is where you can change the layout of the menu items, whether left or right. Typically output everything on the rate. And we come over to style. And style is where you can change specific elements of the menu, like the color, any type of animations, underlining, et cetera. And it's really that simple. So anyways, let's go ahead and create a logo.
7. Design a Logo: Let's design a logo, so I definitely recommend you stick to simple, elegant looking logos. You don't need some big complicated, difficult to read Vogue. I mean, we can just take a look at a website. Great protocol. It's, it's such a simple logo. It's literally tax with the capitalised pro words. So it's not that you don't, don't worry about having some overly complicated and even look at the global for Canva, it's literally a circle with the word Canva. Logos today should be simple. So you have a lot of different options with editing a logo. I have other videos on how to use this website logo maker. But once I really like is actually Canvas, so let's just go ahead and get started. So I want you to type in YouTube thumbnail, okay? And this is going to be our blank canvas to create a logo for o, right? So there we go. So now we just navigate to texts and I just want to create texts. Okay, so I'm just gonna call this my name because the name of the website. Okay. And we'll put that in a second. Okay. And we'll move that over there. There we go. It's gotta fix that. Ok. So let me go ahead and fix this. So I will just make this we'll make this 150. There we go. Put that right there. And I want to make this 150 as well. So I'm paying attention to this number up top there, so we'll just scale this up to 150. Alright, so now the Canva helps you align everything up quickly and easily. There you go. So let me just move this over, give this some space. Alright, so now we just have to design this. So let me go ahead here in, I think I'll make this Poppins late. And I think I'll make this one. I'll just do pop in sport, totally up to you, whatever you want to add. And so keep it like that. I think that looks nice and simple and elegant, but you can add more to it if you want. So for example, if you wanted to add in an element, OK, and I wanted to, I want like maybe a globe for whatever reason. I can put a globe here. And I could make this position is backwards behind everything. Okay, so you can just come in here and add in elements as you want. I'm going to leave, it's simple, but again, to add elements, you come over to position here. You can move things forward and backward, okay? And so you can play around with things in an ad, things as you want, as you think they look good. So let me just go ahead and delete that. But it's really that simple. Now in terms of editing the actual texts, you have a lot of, you actually have a lot of different options. So it's really nice. So you can come over here to effects. And so effects you can add in like a whipped or drop shadow or none, or a glitch and have it look weird like that. You can also come over here too. Right here, this drop-down right here, we can have the wetter and the line height. So for example, if I want the spacing of the letters to be a little bit bigger, I can come over here and maybe maybe we'll make this five. Okay? And what we'd like that now come over here. We can do the same thing and we're just eyeball it wherever you think looks good. So maybe that's too much mood. Do would you like just a little bit like maybe again, we'll do five. There we go. I think that looks nice. Okay, so now we have our logo setup. So just go ahead and download. Now, typically for websites, I definitely recommend you download things as a PNG. But because this is our logo, we want it to be high-quality and crisp and sharp. And also it's not gonna be that big of an image. Pngs. Okay, so go ahead and download the file. Okay, so now the file should be successfully downloaded. I'll get that out of the way. Alright, so drag and drop that right there. Okay, so now we need to edit this open is up and I'm going to open with Office picture manager. And you can use whatever photo editor you want. The only thing that we need to do. Only thing we need to do is just crop oldest whitespace. We don't need all the sway space, bone like that. Bring it up from the bottom right there. Ok. and in from the right just a little bit. There we go. And in from the left, there we go. Okay, next can edit pictures and then you just want to resize the image. So we don't need this big, massive image. We can resize this down to something like five hundred and four hundred fifty, three hundred, something like that. Not too big, not too small. So we bring this down to outdo 50, five. Okay. Alright, so that's looking good. And we'll click Yes, I see that as is. Alright. Now that has, now as you can see the way it looks on my desktop, that has a white background, but look, this one doesn't. So how do you do that? Well, there's a lot of tutorial videos on how to remove backgrounds from images. But honestly, you can just use a website that's super simple. It's called moved dot jpg. And you just come here and you can upload an image and it automatically uses machine learning to remove the white background from any image that you upload or actually just removes the background from any image. So you can just use this, you can use this website if removing the background is important to you. So like why would you want a transparent logo? The only time you'd want to transplant logo is if you think that your header is going to be a covered background, you're going to be playing around with different colors. You want change it, whatever. But if you're not going to be doing, I've, you know, for sure Armour sent that your header is going to be white and just leave it white. Okay, anyways, so now we have our image. So we want to go ahead and call our image something logical, lake like, like logo, you know, something like that. So we know what it is. Okay, so now we're back into our elements are, and now we can upload our image. Okay, so again, we have to go to site logo. Again, you have to click on custom image, and then again, you have to click on Choose image. Okay? And so now we can just drag and drop or image into place. Alright, and so there we go. So now we come down here we have the alt text. And so the alt text we should put in logo. Okay, so that describes the image. Now right here, we can go ahead and insert media. Alright, and so there is our logo looking good. So right down here we can change the size as well. So for example, it's 300 by 300, but you notice that it's not as crisp and sharp and so you definitely just want to leave it on full personally, okay? Because full will have the image look its best. And so honestly, you're going to have to probably play around with the size of the logo. What I mean is I come in here open with, then literally edit the size of the logo to the size that you think will express where it's crisp and sharp, etcetera. Ok, so that's what you need to play around because if you come over here and adjust the image size as appropriate, it's gonna just make it look like not crisp and sharp. Okay, that's the only way I can describe it like that. That's just looks a little bit blurry. So I like leaving everything on full. Ok. So everything's nice and sharp and looks fantastic. Okay, and so in general, that's all you have to do to edit the logo with elements are so you have to install the headers, headers, and footers plug-in it. And now you have access to just add blocks as you see fits to create your logo. Okay, and one last thing is like, I always get asked is how do I change the font size of the menu? So it can be very frustrating with elements or because you're clicking the icon here, you're coming into content style advance. I don't see anything that chunk changes the size. Well, the reason is because that's what you want to edit is the topography. Okay. And the topography option is not. Here. We have to do is click on the hamburger menu. Now here are your site settings themed older user preferences. So you want to go into the Site Settings. Once they're thanks, you have to go to topography. Now what you want to edit is you want to edit links, okay, so we now we have to come down here. And so I don't see size. Well that's because you have to click the pencil icon. Now we come down here to topography. Now here we can change it to something else. So for example, my logo is pop-in, so maybe make the menu Poppins. Okay, there we go. And next I want to maybe make the font size a little bit bigger. Okay, so maybe to match the logo a little bit more, we can do, we can do like a big bold design like that. Maybe like, maybe like that's okay. Come down here that letter space and spread it out just a little bit. Okay, so let's go ahead and click on Update. Okay, and so let's go back to the letter, and there you go. Okay, so if you want to know how to adjust the menu items at the top, that's going to help you do it. You have to go into typography and that's where you can kind of adjust the size, letter space and as well as the font family with 0s. Okay, so once your menu is done, just double-check and make sure you have it activated at the top. Okay, so right now at the menu's not activated. So let's come down here. So this is the header that we just created. So make sure that you come down here, select the option header, display on entire website. There we go and go ahead and click on update. And so that saves the header that we just created as the header of our websites will reload the sate. And there you go. So there's our header, okay? And creating a header is that easy with elemental.
8. Envato Elements Header: So we just design the header section manually, but is there a way we can just do it quickly and easily by just uploading a template. And the answer is yes, absolutely. So one of the cool things about elementary is that there's a lot of third party developers out there who make a lot of really useful plugins that allow you to create like your header and footer quickly and easily at the click of a button. So one header designer that I really like is a plugin called vital elements. So let's go ahead and install it. So we go back to Plugins and let's go to add new. Okay, so do you want to type in and Vo2? The immense. There you go. So invite, Oh, if you don't know, they're the company behind theme forest. So beam force is this webs area here, there, one of the most popular WordPress theme developers in the world, actually they're not themed of Oprah, but their marketplace for WordPress themes and they offer a lot of other random things are really helpful like audio, video, graphics, etc. So then U is they have a plugin that's really great and vital elements photo and elements are at Templates. Go ahead and install that. And click on activate. Ok, so now that it's ready to go, so let's go back to our homepage and let's go ahead and click on edit with elements who are. Now one thing you're gonna notice that's been added is invite. Oh, oh, there we go. So there's little green icon is leafing. See this is how elements are normally looks now that we have the elements plugin, that we have this loaded, now we want to adjust the header so we have to go in and go back to our section where we can edit the header. So what's back out of this and back out of this, and back out of this. Okay, so again, go to Appearance and go to header and footer. There we go. So header and footer is let me just go ahead and delete this one. Okay, so let's go ahead and add new. All right, so I'm just going to call this and vaso header. There we go. And now what we're going to edit with elements or so let's go ahead and click that. Ok. So all we have to do is click on this icon right here, and up pops in vadose. So we want to navigate over to where it says free blocks. Now what blocked we want? Well, we're installing a header, so we want the header block. And right here you have a bunch of free header blocks. You can just click and install right here. And that's how easy it is. It's really nice. And so they have a lot of different options for a really gave you want like a black logo right there, blue. You can, obviously you can just upload this and adjust as you want. I'm gonna go with this one right here that has a nice button. So let's go ahead and insert template. And so now it's going to import the template. And wonderful. So now we have a couple of different elements right here, we have a button over there. We have a section for the menu. We have the website name and we have this icon. So if you want to just have a text-based logo, here you go. So you can just come jumping here and adjust as needed. If you want to update this image and make it your own image, you can go ahead and do that. Personally, I'm just going to delete this entire section. And the thing that I want to add would be like a logo. Okay, so logo, site, logo, drag and drop that in there. And we want a custom image. Yep. And I want to choose the image. Great. And so I'm going to upload a version of my logo that I made a little bit smaller. So this one's like 350 pixels. Let's go ahead and insert media. And that looks fantastic. Okay, so we don't want it medium, we want it on full. And there we go. Okay, so that is that for the logo. Now, let's go ahead and click on the plus sign over here. And what we want to add is the menu. And so navigation menu, drag and drop that in there. Okay, great. And so let's go to layouts. And I want that off on the right side. Now again, I've just previously showed you link on how to adjust the size. So like, I think that looks a little big. I'd rather make that a little bit smaller. So again, we're gonna go and take care of that. So anyways, let's go to publish. And there we go. Alright, so let's have a look. Our right, that looks great, so it looks good. But I'd rather have the, these menu items kinda match the syntax a little bit better. So let's go ahead and edit with elements or. And again, I just showed you guys how to adjust the menu so we have to jump back into the typography. So let's go ahead and do that. Okay, so let me click the hamburger menu and go to S8 settings. And we go to typography. There we go. Let's come down to the link. That's quick topography again. Let's make the font size a little bit smaller, Something like that. Yeah, that looks, that looks great. So it kinda matches the button a little bit better. And I really like that so we can just leave that as is. I think it looks really nice. And so I'm gonna go ahead and click on update. And there you go. So you can easily update this section just by using an VO2 elements. So now we have a bunch of different elements up top here. So let me just back out of this. Okay, so now for this specific button, if you want to adjust it again, like always, click the pencil icon. We click the pencil icon. Here are your options for the button. And so here you can change the type, okay, default intro success warning, danger. So we just want default, the text, you just change the text. So it's a click here, ok, like or like whatever. Courses where you just say something like that, a wink. We can have this link to a page or we can make an on-page anchor link, which I'll get to later in the video. You can change the alignment right here and you can change this how the size of the button. So if you want small, extra small, whatever you can just quickly and change it there. I can spacing. Okay. How big do you want it? And so, you know, you can just that there. Let's jump into styling against a changes how the button actually looks. Personally, I really liked the way that looks like I mouse over it becomes black, but again, you can just change it as you want. So we have the text color, so that changes the text. Border type is solid, so that means the border of the bind is a black line. Again, if you want to change that to double, you can just select wherever you want. And then that's it. And then you have box shadow and you can add padding, whatever you want. And so that is how you update the header section.
9. Create a Favicon: How to add a favicon at to your website that's powered by elements or so. You're maybe wondering, what's a favicon of habit cons a little icon in the tab up top there. So you definitely want to create something that's brand double for your website. Because like when people visit your website on say like their iPhone and most recently visited site, you want icon associated with your website. It's also just a hygiene thing where just a small little detail that you don't notice, but when it's not there, you do notice it. And so right now our favicon is just the WordPress icon. So let's go ahead and change that. So you want to click on the hamburger menu right there. And then he went to navigate over to where it says Site Settings. Okay? Now we want to find something that says like site's identity right underneath these settings. So let's go ahead and click on that. Alright, so here you have your site name in your site description. So you can change that as you want from right here, but I will just leave it. And so we have the site logo, but we already have that up top there so you don't need to adjust anything in here. The only thing we need to adjust is these sites, favicon. And so how do you create a favicon? Now? It's up to you. You have to create your own image. You have to create your own image that's associated with your brand. And so personally what I have is I have this little image I'm going to use. I have it has a habit as a PNG with a transparent background. Again, you can just use remove beat to remove that Bg to remove the background from any image. So we'll just use your favorite picture editor, maybe make a circle, have some type of design. It doesn't need to be anything complicated and just create something. Okay, so let's go ahead and choose image. And I'm just going to drag and drop that into place. Okay, that looks good. And we're gonna go to insert media. And let's click on update. Okay, and let's go back to the editor. Alright, so let's, let's go back to exit dashboard. And let's see. Ah, very good, so perfect. So as you can see, our favicon has been updated to something a little bit more breakable, and it's that simple.
10. 10 Hero Image and Your Call to Action: Now it's time to add a big, gorgeous hero image with a call to action to our website. So I'm already assuming that you kind of played around with your header section. Okay, so I went ahead and made my logo a little bit smaller, change the color over here. You don't just adjust as you see fit when you're ready. Now you want to just add in a hero image. So what are we talking about here? Images like something like this. Okay, a big or just image that takes the top section of the website, a call to action that tells people what the website is about, et cetera. So how do we do that? Very, very simple. So the first thing is you need to source in image. So I definitely would recommend maybe check out like something like on Splash.com. And you want to find a bunch of images that you think would look fantastic. These are completely free to use. You don't have to worry about any type of attribution or whatever. And so, but just one caveat is just to make sure to resize the image as appropriate. So for example, like this is like a 1500 by 1500 image. Faster download this, it would be like 6 thousand by 6 thousand pixels, which is a huge image. And you reasonably, you want the smallest possible is because you want people to open up the website and have everything load really fast. And so you can't do that if you have some massive image. So anyways, let's go to edit with elements or because we're going to be editing the homepage. Okay, now this is, there we go. So k, So let's begin editing our page. So the first thing that we need is we need a heading. Ok. Why heading? Well, that's what these sentences are right here. Like this plane will promote profit websites made easy. These are headings, okay? Then this is like body text. And so let's add a heading. Boom, there we go. Okay, so right up top here you can add in your call to action. So this sentence structure right here should be something like a call to action that tells people where they are, what's going on, what the websites about don't make it long and wordy quick and to the point, maybe a subheading If you want, et cetera. So I'm just gonna put in something. Find your edge comma and Joey, life. There we go. Okay, now the next thing I want you to do is to navigate to where it says HTML tag, you want changes from H2, H1, H1. While one means that this is the page title. Okay? And so for example, like this, the blog post, this is your H1 tag. The H1 tag is the title of your blog post. This is H2. H2 is a sub-heading of H1, et cetera. And so that's why we want this to be the one because it's the title of the page. Now I don't want to off to the left, I wanted sensors, so just go here to alignment and click center. There you go. It's that simple. Now you can click on style. And again, the style tab is exact, which think it's where you change the style of the text. So we click this and we navigate that to black or whatever, whatever color you want it to be. And now over here you can kinda change the topography as you want, okay, it's whatever you want. So like for example, I'm going to use Poppins. We'll just change it to that's okay. We can change the way transformed style declaration. You can come in here and play around with this. If you want to revert anything, you can just click back to default to start over. If you've made a mistake. It's really that simple. Again, then text shadow, okay? If you want to have a text shadow, you don't want to have text shadow, that sort of thing. So when we click on it, revert to default. I'll just leave it like that. Okay? And so I think that looks really nice. Now, how do we add an image and say, I don't see an option to add an image anywhere. It's a content and style, no advance tab, right? Yep. Nope. Alright, well the thing is with elements or is like you're editing the heading, your editing with the element inside this blue box. But now we need to actually edit the blue box. So we have to click this little section right there and see how this changes to edit the section, if I click the pencil icon. Now, editing the heading, we wanna edit the section, simple as that. Okay, so now we need to have what we have are whale option in our structure option. And so layout changes the way that anything is laid out within this section. But we have to add style to it, which is our image. You click that. Now we have background, okay, so we have background, overlay, border shaped, divider, et cetera. Click on Background normal. Ok, so then you have classic gradient video in slideshow. So you want to add a video, you can do that from here. But personally, I definitely would recommend going with classic. Alright, so that's classic. I'm going to choose an image. Now I'm going to choose an image I've already uploaded. So here we go. This is my background image. Again, you can use something like on splashes, source your own image, whatever. Just resize it. Okay, this is like one thousand, eight hundred and one thousand two hundred. It's big, but it's not too big. Ok, so now we've just successfully added an image. Okay? And that looks terrible. Like why is it so small? You have to add padding to, okay. So you have to add space to it. So padding is the phrase you used to describe the space between elements. So for example, this is a text sentence here. This has a lot of padding above this text and a little bit below it. So kinda pushes everything away in, separates everything out. If you don't have any padding, everything gun gets compressed together. So that's where you wanna go to layout. Ok. So you won't go to layout. Now you want to come here to heights. And we want something that can maybe like fit to screen, okay, that looks nice, or maybe minimum heights. And when you click on minimum heights right here, you'll get this little dial right here. And so I really like this because it's just very easy and intuitive for beginners. We can kind of just play around with the way that this looks okay. So it's totally up to you. So what another thing I like about mentors said this, he says Fit to screen. And so that's going to fit to the screen no matter what device the person is on there on a mobile device is going to fit it to automatically to their phone, et cetera. I'm just gonna do this and minimum height because obviously, you know, the way I like to design sites, I don't want this image to be supermassive him. I don't just want a little bit, little bit like lunch, some little little bit of white space underneath. And there you go. So I really liked the way that looks. Okay. And so let's come back here to the texts, Okay, and so I'm going to come back here to this x num editing the heading style. Alright, so now I can come over here and we can come to the content. And so we have default in size. Maybe I want to make this a bigger. We'll do like extra large. Yep, that looks much better. Alright, so now it's a little bit difficult to read, so style and so black. Let's do white or something, let's do a different color. Alright, so I may need to add in an overlay on this image, okay? Because like, oh, well, I can't really see the text on this. So let me go back here. Let's go back to style. Okay, now we can play around with the background image. So you have your position there. Now, your position there, you got to minimize this and make sure that the image is fitting correctly. Okay? And so we can change different things like center, center OKC. I kinda like that because maybe the text would look a little bit more clear and easy to read if I made it white over this section of the image. You know, if you have top sensor right there, that looks nice. Okay, so I can keep it like that if I wants. All right, so now we have the attachment. So here we can have scroll or fixed, okay? And so if you just play around with this, so scroll, okay, that means the image stays put. If we come to fixed, that means the image stays fixed, it behind it and then, you know, kinda gives that nice little feature of the image moving behind. And I kinda like the way that, that's working. So I think I'm going to keep it as fixed. Alright, so now we want to come down here to where it says background overlay. So what's an overlay? One? Overlays like adding color to an image. Why would you want to do that? Well, for example, I want to use white text on this image. Can you read White? Can you read white on the specific image? Not really because this is a black and white image. So I had to make it dark blues of the text pops and stands out. So we don't want, maybe if you want, if you have to do this, you can come over here and do that. So background overlay, kind of click on Classic period opacity, okay? So you can kind of change things as needed right there. Okay, so let's come over here to background. Alright, so now we have a bunch of different, alright, actually, let's go back to the background overlay. Alright. So we have color. I'm gonna click on Color. There we go. So now if I want to change this to something else, like maybe black a little bit like there we go. Just like maybe it make it a little bit darker, totally up to you. So I'm not going to add any type of OEM, kind of kinda leave it the way it is. Ok, next thing that we can add is kind of like a shaped divider. So become over here it's two shaped divider. And now here we have top and bottom, so we come over here to type. And then you have a bunch of different types of shapes that you can add in. So for example, triangle. Now this is selected for the top. That looks kinda weird. So we'll get rid of that. Kit will click on none. Let's go to bottom. Okay, so now I can come down here and go to triangle right there. Okay? So that looks pretty good. So we can invert this right here, okay, you just click on this one to invert it as you want. And so I think that looks kind of nice like that. Again, you can just kind of play around with this as you see fit, ok, so you can just come in here, pick a bunch of different ones. And so like my, one of my favorite ones is like I personally like the opacity one, and I personally like the triangle one, okay? Because the triangle one kinda points down, points the user down to a new section right here. So I'm gonna kinda leave it like that. Okay? And so that's kind of basically all you have to do to add specific elements in added hero image with text, with the text overlay. And it's really that simple. How to add a button to our call to action at the top. Okay, so I know a lot of you are going to want to add a button. I'm personally not going add up on book. Let me just show you how it's done. Alright, so right now I'm editing the heading and you're like, how do I get back to the blocks? Like What do I click on it? Yeah, click on squares right there. There you go. Now you're back to like where all your blocks are. Okay? And so now we want to add in a button and that's it. It's just typing button dragging drop, and it's as simple. There you go. So now we can come over here and we can change the alignment, we can change the size, so I'll make that extra small. It looks nice right there. And so we can come here to change the button types. So we have like info, we have success. Ok, we have a warning. Now if we want to come, I'll just leave that as an info. Now if we come over here to style, here's where we can kinda change the text color if I want to make di different color, background color, we can also change as well. Okay? And so that's kind of just, you know, really simple as that. So you can change the text color, their type background. You can change the type biography over here. You can add a text shadow. You can change the different elements for what happens when people mouse over the button, et cetera. Ok, and it's really that simple now if you're like, well, how do I separate it? Like maybe you think like, oh, well, the buttons a little close to the tax rate, is there any way I can give it a little bit more space and like absolutely. And so Now while this specific option of blend doesn't have any way to add padding just above it. You can only element or does come with something called a spacer. And so it's basically just this drag and drop it here. And now you can push it as far as apart. So I think just a spacer at ten already looks nice. Words like OK, got a little bit of breathing room. That looks really nice and you can just leave it like that. So if you want to add a button, that's pretty much all you have to worry about and doing. Okay? And so we come over here to content and then the link right there. This is where you can like link out to other websites if you want, and you can change it to open a new window or add nofollow. So only links that are off your website to another page should be open a new window. But if you're linking to a page on your website, don't have it open in a new window if that makes any sense. But that's basically it. That's all we have to do to add a button.
11. Welcome Message: Alright, now it's time to continue adding blocks to our website. So now it's really coming together. We have this menu at the top. We have a nice little call to action. And so now you can add in blocks. And this is where your own design and creativity can come into play with elements are, so you have a few different options. So first off, you can either quit this plus sign, and then here you can change the site structure or the structure of this specific section. And so it's kinda obvious like this, if you do this one is going to be like two blocks. Okay, so right here, I can come over here, click this plus sign. I can add in any block I went over here and then click this plus sign and add in any block I want, if that makes sense. Okay? And so that's kinda like how elements or works and that's the way that's why I like when you get the techie stuff either way like the head or in this thing right here, then it's like, alright, cool, now I can do it over a one. And so what I recommend is either you custom design things yourself with a plus sign or you can just add in a section quick and easy. And so if we click this little folder icon, will have the element or plug-in pop-up. And it comes with a bunch of different block, block libraries that come in here. Now the reason why I had you install the end vaso elements plugin right here is because the, the library for that elementary provides, Well unfortunately they don't provide the header and the footer section for free. But in Fido does so, it's really the only way you can get the head a nice-looking header quickly and easily. So anyways, if I come over here and I click on this folder icon, we have a bunch of different options. So I like this is fantastic. This looks so good. So I'm going to click on, insert like this. Let's click on get started. Now it says connect to template library access this template library, okay? And so I have to approve and connect my email and just, you know, you have to create a free account so you have no option. But you can't just do it for free at a do you have to create an account with elements or not a big deal? Because then you can just boom, there it is. Done. Wonderful. And so how would I use this section right here? So this sections should be your introduction section, okay? And so this should like, Hey, welcome people to say, you know, hey, welcome to coffee maniacs.com or websites, dedicated website about coffee, whatever your websites about. Ok. And so for me, this was like a personal blog for example, or personal website. Say like, hey my knee, I am, I'm a professional blogger, YouTubers, highly rated us consultant and fiber bla, bla, bla. I just use that whole section right there. Okay. And so you want to click on this and make sure that this is cnn says H4. We want that to be H2 actually, ok. Why do you want this to be H2 again? Because this is a subheading of this. So we want this to be H2. Now this text right there, it's up totally up to you whether or not you want to leave it as this light gray. I actually kinda like that. It actually, I think it looks quite nice, but if you want to change that, you can just come over to style and change it and make it something maybe a little bit more readable. Move just slightly, slightly more readable. There you go. And then right here we have a Read More link. And so we click on that. And so what I personally would do with this is this should link to either a dedicated About page or whatever. And I think it's fantastic. I mean, I literally do that on website crave pro.com because people come here. This is what this website is about. We're more, boom, click over here. And then you're on the about page where you can learn more about web, say Korea pro, How do you say about me? Okay? And so that's why I really like this section way just, just to drag and drop, I just Boyd click a button and there you go. And I think it looks really nice because now we have this hero section up top there. We have the triangle section right there, kinda pointing down. Boom, kinda overweight, kinda like, kinda overlays the image a little bit. And then we get right into the welcome message right here. So anyways, that's how you get started with adding specific sections up, particularly the welcome message.
12. Visual Menu with Elementor Essentials: Elements are essential. So I just want to briefly mention that there is one plug and I really like to add a mentor because as a bunch of different blocks. So you want to come over here and you want to go to add new, then you want to type in elements are essentials. And then it's going to be essentials, essential add-ons for elements. Or now what this does, it just gives you a bunch of brand new elements to add to your say, OK. So it gives you options to lake at a creative button and testimonials, info box advance accordion, advanced tabs. So you have they have they're both versions. They have their pro versions where you have to pay for gases tube. And then they have a bunch of helpful free versions like post grid, fancy text, all this good stuff. Okay, so if you want to add more blocks in more specific extensions, this is what essential add-ons does and whether or not you use it, it's totally up to you, but I just want you to be aware of it. And so let me just go back to my plugins. Because I know with elements or you do end up having quite a few plugins. So, so far we have elements or header, footer and blocks which helps us adjust the header and the footer, Uber website and vital elements which gives us helpful blocks to add in very beautiful looking footer, it's okay. The element or header and footer blocks just gives us the ability to control the header and footer section. Okay, it doesn't give us blocks because it's the ability to control those sections and vital elements I like because actually gives us a pre-made photos of pre-made headers that we can just throw in really quick. And essential atoms just adds in more helpful blocks in elements to help design your website quickly, neatly. So you can kind of explore this plugin on your own to see what elements that you end up using. Maybe you don't use anything, he can go ahead and uninstall it, but just something that you should be aware of. What's continue designing our websites. So I want to add in, in like an image gallery and like maybe a little introduction to the image gallery. So how did we get started? So again, now, you've kinda got, again, like I said, you've got the basics of how to design your website and now you're kind of free to experiment and be creative because you've got this central is out of the way. So what I'm going to start off with, I'm going to add in a new section. And so to boil it kinda way out to, I wanna kinda, maybe this layout right here would look good. So now I have two blocks right here. And so what do I personally ended? I wanted, I like some type of like image over here and like maybe little image gallery and then a little texts introduction over here. So let's go ahead and begin with adding detects in. So we'll click on plus. Now again, you know, it's a text paragraph, so we probably want to have a heading, right. So let me go ahead and do that. And so we'll take that out. And what's just type in like, I make, make you too. I make YouTube videos up. Gospel U2 correctly. I make YouTube videos. There we go. So again, go to style, text, color, black. There we go. And we want to make sure the content not H2. Either we want to H2 or we want this to be h3. Probably would make this h3 totally up to you. But again, this is one, this is H2 and make this person like h3. So now I want to add in a paragraph. So we come over here and we just want like text editor, okay. And so Biotech Center, because we just want to add in text simple Zed. So let me take this, concentrate there. I will just double that a couple of times. And so just the, just for demonstration purposes, you can go ahead and write your own paragraph down. Now the next thing is we need to make sure that this text matches this text. Because it looks weird, right? Like, why don't use two different fonts? It's a big mistake. So what's come up here? It looks click the pencil icon style. Alright, so what typography should be used? Well, it's set to rule rubato. I'm going to be using Poppins. Now I want to edit this one and I want to come to style the topography. Again. I want to put in Poppins. Now. You'll have to use Poppins. You use whatever you want. Just, I'm using pop-in, so we'll make it a little bit like that. Okay, so they kinda match, works a little bit nicer and we can eyeball it or you can get the or you can check this out to see the exact number. But I'm just gonna eyeball it because not a big deal. Alright, so that looks good. So let's go to content array. And so I think that looks really nice. And so let me just come back up top there. Alright, now let's come over here to again typography. So maybe I need to change the wait just a little bit to make it. There we go. That's perfect. So now this kind of matches, this looks nice. Okay, so now we need to add in images. So let's click this. Alright, so you have a lot of different options that elements are, and I really like it. So we type in image. So you have like image, image box in which care, SO basic gallery. Now you'll see something that says EA. That means that that's the elementary atom plugin. So this is because this is coming from that plugging With that we just added could just gives you more blocks. And obviously the things with a lock or obviously elements are pro. So it's totally up to you. You can play around with this with whatever image you want to add. I personally like the image carousel. So I'm gonna go ahead and take that, dropped that in right there. Awesome. Now we need to have images. So I've already gone ahead and uploaded a bunch of images. So you can just upload images as you want. And let me go ahead and create a new gallery. Insert gallery. Alright, so let me just show you quickly one of the images. How did I make this? So again, a 100% with Canva, super-duper simple. All I did was take a screenshot of a video that I made that I went to Canada, YouTube thumbnail template. I just added this Play button on top of it and add a text that's simple. It's really that simple. Okay, and now we, oh, that looks fantastic. Okay, so now we have a nice little image gallery over here that kinda shows off our videos a little bit with the thumbnails. And so you can come in here and change the content style as you want. So again, just gotta eyeball it and play around with things. So if I come over here and come to like medium, how does medium Look? I don't really like the way medium looks. I think I'm going to go back to thumbnail image stretch. How does that look like? Oh, that removes the whitespace. No, I don't really like that. And again, that's why you have to do just come in here and play around with things. Now, what I like is that link and you can have your own custom URL. So you can link this section to like whatever you want. So I come over here to YouTube and we'll just type in, we'll go back, we'll visit my YouTube channel. And we'll just take this one. And then when we copy the link address, go back here. And then all you can do is just put in your YouTube channel or a YouTube video. And now I know you're going to be asking them, hey, can I have this image link to a video and then this image linked to a different No. No, you can't this image carousel can only link to one video. Not a big deal. You just pick your best video. And so when someone visits your site and you do this, they come down here, they click this there, watching your best video. That's the way I would set it up. And it kinda introduces the concept that you make videos and just get, the focus should be more about getting people onto YouTube and onto your channel, Washington videos. More so than having them like on the homepage of your website. Go scrolling through a bunch of different videos and clicking individually to watch videos, people don't do that. So yeah, that's basically it. So the way that this works now if someone clicks this section right there, it's going to be a nice overlay of the video on our website. Ok, and so let's go ahead and click on Update. All right, fantastic. So now everything is saved and that's it. So that's how you kind of add an image gallery and some text to your What seat. Now I want to add in a nother like image to kind of break up the design. So what I mean is like we open up the site, got this nice image up top there paragraph and then a nice, another text and image section right here. That kind of introduces the YouTube videos, for example. We don't want this to be two texts, IB versus paragraph, paragraph, paragraph. We want to have a little design to it, right? And so let's get started. So I want to just do the same thing I did up top here. Okay, I just want to have another image and text over the image. And I already showed you how to do that. So you should already kinda know what we're going to be doing. So again, I'll have to do is start with your heading, and so we just drag it, the heading over here. Boom. Now add text you're heading. So what I wanna do is kinda lay create like an anchor link on the page. So when people click the Course button up top there, they come down here to this section. But first let's create the section first before we create the anchor wake. So this is going to be for our courses. So yeah, you could call it courses, but like always make sure to create compelling copy that grabs people's attention. So I'll do something like courses. That of course is that work? There we go. Okay. Html tag, H2. Yep. Don't want centered. Yep. Okay, style. Let's come over here, which changes from the blue to the black. And let's go to typography. Roberto robot. Oh, no, I want us to be pop-in so, you know, with your fonts, okay, she should have two funds. You'd have one font to be your titles and then one fund TB your body paragraph, making out the font be the same. But if you're going to have multiple fonts, just pick 21 font for your, your titles and your menu up top there, another font for the paragraph. Anyways, now it's time to add in an image. So let's go ahead and do that. Click the buttons right there. Okay, and so again, we come back to style and we wanna go to background and we want to add in a classic. Now you want to just upload your own image again. And so I've already gone ahead and done that. So I have this image I got from unselfish, and that's it. And so let's go ahead and insert media. There we go. Okay, so now we want to come to layouts, and now we want to change the height. So I want maybe fit the screen. I don't want it to take up that much space like that's a lot of space. I just want this to be kind of, It's a little bit more low key. So it's like, let's just say, yeah, maybe like that, you know, something, something minimal. Alright, so, so far looking really nice. Now, we can change the way that this is positioned. Okay, so let me just click off that. Alright, so for example, we come over to style, okay, so the position we want, maybe centre, centre. Okay. So why do we want that? So we'll just go to default. We come this, as you can see, the images kind of clipping. So that looks just weird. We don't want that. So we want to go over here and we want to make sure that it's center, center for example. Okay, let's see this. Alright, so it's still doing this where it's repeating the image. So how do you make it subduing them? Easy? So you have to go to repeats and yet say no-repeat. Ok, well now let's just white. And so we want to have, we want the size to fit. Ok. So we wanted to cover ok. And so it's automatically kinda, kinda zoom in on the image. Okay, so now we want to take a look. Yep, that looks good. Okay, so now to fix this, if you don't like with this looks then got a source of bigger image, etcetera. Ok, so maybe if you don't like how it's two cropped in like that and you want to change it again, get a bigger image then, okay, that's your only option. And so I'm going to leave it like that. I think that looks okay. Now, but I'm not happy with like how tiny that text is like, let's make this bigger so it's cold here. Click the, click the pencil icon. Now we're editing the heading. Alright, so content, go to style, topography. Click on that. Right here is the size. So here you can just make the change to size as you once. So I'll make it something like big and bold like that. Alright, so courses that work. So we come down here, come down here. Alright, maybe that's a little too big. We'll make it like, there we go. Okay, there you go. And they go. Okay, so again, you can play around with this section as you want. So let me come back here. And so again, if you don't want the attachment to like, you know, you want it fix for example, then people will kind of move and the image moves in the background. If you want to do that, again, just do that by changing the fixed attachment. But I actually kinda like the image to stay put for this one personally, but helps you make that decision on your own. But now we have a nice little section and so now we can add in C, like links and images to our courses. For example.
13. Using Anchor Links: How to add in anchor links on your website. So you're like What's an anchor link? And anchor links, one of those links where it's like OK, so when it's on your website, boom, they click the courses and then boom, it takes him down here automatically. How do you do that? That is called an anchor link. Okay, so now to get started with that element or against fantastic mixes, so easy, do a search for a specific widget called Anchor. So menu anchor, then you just drag that, drag and drop that into place. So I'm gonna put that right underneath the courses that work. So the course ID for this, you can name it whatever you want. So I'll just type in course, literally course. Now we'll click on update. So that's step one. Ok, so now we just set the anchor wink right there. And now we have to just link this to this anchor a wink section right there. Really that simple. So how do you do that? Well, we gotta jump into our header. So go back to your element or dashboard. You want go to Appearance, we wanna go to. There we go. We want to go to we'll go to appearance there. Header, footer and blocks. Alright, and so now I have my invite o header that I created. I wanna go to Edit. And then we want to edit this with elements are okay, so it's good to edit with elements or and once you're in there, all you have to do is find your button and then link gets you the section. There we go. Okay, so we'll just click the button, click on that. And so the link, the link is hashtag. Course y. Alright, let's go back to the homepage. So I have this called course. Now to link to it as an anchor, a has to be hashtag. Course, that simple. It's really that simple. And then go ahead and click on update. And just make sure that this is all set and you're good to go, okay? And that's all you have to do in order to set an anchor links. So no one named visit your site and you have a menu item up top there and they click it and you want them to go to a specific page on the site. That's how you set it up. Alright, so now that we created a like a section for courses, now send to upload our courses for example, what you could do, for example, if you had like a Udemy course or Scotia cores are teachable cores, for example, you could put a thumbnail and then what I would do is put like a quick little title. So for example, let's just open a website, create Peru.com. So the way I like to structure images like this where I like that the image and then quick and to the point not super wordy zones like you can go with like a title and just a title, an image or a title. And then at paragraph that explains what the image is all about. That makes sense. Now, the first thing though, I want to fix the twos i, because we have this anchor link there, you can see that's kind of pushing the text up. And so it's like, I'm kinda want the text a little bit more censored. How do you do that? Well, you know, you gotta just do that spacer thing. So there we go. Put that right there. All right, there we go. So now, now this is centered once again in the middle. Okay? So just, if you're just wondering, like how do I move that around, okay, and that's all we gotta do. So anyways, let's add some images. So I want to click on this plus sign. And now you have a lots of different blocks. So if I come over here to blocks and they type in image, we have a lot of different options. We have WordPress, we have image carousel, which is this basic gallery image box image. I personally, I'm just going to use the basic old image because that just allows me to have a little image and then add a text, et cetera. I don't need a carousel. I'm not adding in a gallery, so that's not what I want. So I'm gonna go with like a three by three grid right here. So. Click on three boxes right there. Alright, so what do I want to add in? I want to add in an image, just a plain old image. We'll just do that. Okay, drag and drop that. There. There we go. Okay, so now we just need to add in our image. So we go here to choose Image, okay? And I'm gonna upload this image, insert media. There we go. Alright, so we'll go ahead and click on this one. Do the same thing again. Go to image, drag and drop that in, and we'll click on Choose image and let me just upload this image I got I got a bunch of images with dogs. Okay, there you go. Now, well more. And we'll do image, drag and drop it in. And again, choose Image dragon job. There we go. And go ahead and inserts media. Boom. Now one little piece of advice is that you are going to have to make sure that the images are all the same size. Okay, don't be uploading one image that's like 1000 pixels by 100 and this one's 800 by 478. Make sure that they're all the same size so they fit nicely accordingly. Now we can just add text, okay, so again, very simple. So come over here and we want to add in a little Heading. So just drag and drop a heading. And so I would make this maybe like h3 for example. And so we'll just create that and see how to create a website or learn how to create a website. We'll keep it simple. Actually. Creates a website. Create a website. There we go. Okay. And so again, through the same process, changes to black and make it readable. Go to content Center this. There we go. And we can just come over here and add in again text editor right underneath this. And there we go. And that's all you have to do. And so you can just do this for each one of these items and just go ahead and click, create a quick little title. Make sure that the title is like whatever this is like this should be H2. I definitely would make this h3 and just add in a little title for each and then a, an associated paragraph. Okay, so this came out quite well. I really liked the way it looks now against to create links is very simple. You just go to the pencil icon. And over here where it says link, this is where you can put in a URL to say your specific course where, where it's located. Again, you can come down to the text again. And to create links within the text is very easy to just highlight the text and click this link sign, and that's it. And so also one other thing is like, Oh, well this is a little bit close rate. These are kinda the scrunched together. If you want to add more space, that's pretty easy to do too. So we just have to go up top there to the square icon. And again, we just want to use our handy dandy spacer, but the spacer in there, OK, So now you can just drag and drop this into place. So what's cool about it is that you just drag and drop sections into place. And there you go. So now we have a nice little space or a tab there to give a little bit more breathing room. And I think that's coming together quite nicely.
14. Footer Design: All right, so here's our website and know the main thing that we're missing is the footer. So what's a photo of me? Just open up website. Great pro.com. So the footer is the bottom section of the website where you typically have like your privacy policy terms of use, like a sub-menu, that sort of thing. That's what you just, you just need stuff in the footer. You need like your social media links, whatever you want to add. And so to add with elements or to add a footer with o mentor is quite easy. And it's the same process that we followed for the header section up top there. So anyways, we went to navigate back to headers, footers, blocks, templates, and we want to click Add new. Okay, and so now I'm going to just call this N TO footer. Now it's the same process as before with adding the header. But I personally recommend using like invite o for example, because they just come with some really nice built head of footers that make like designing a website quick and easy. So anyways, we'll do that in what's wheat for matured the load. Alright, great, so let's go ahead and click on the invite o elements right here. And we want to go to free blocks in, then we want to look for something that says footer. And so footers right there. Click on this. And now we can insert any of these templates quickly and easily in. So I like this because like yeah, you can design this yourself or you can just jump in here and just automatically insert a footer of your choosing. So I really like this one will go ahead and insert template. Okay, and that looks great. So now we have our social media links, we have about us and we have specific pages. And so what this means, we can come in here and make these little links to like our privacy policy Terms of Use, et cetera. Okay? And so we're just going to leave this as is, okay, and we'll come back and edit the specific elements of this little bit later. But let's go ahead and click on publish. Okay, so there we go. So now as the footer is good to go. Now if we want to change specific elements of this, we have to click this icon right top there. Under style. Under style is like where you can come in and change the color of this and you can change the links and you can, you know, that's how, again, that's how you come in here and just change these elements. But again, you can totally design this yourself with elementary, but that's what I like about elements because boom, here it is. It's good to go so we can add in our social media links. Alright, so anyways, now let's go back and let's add exits you Dashboard. Okay, and so let's open up our website and let's just take a quick look. Alright, so we'll come down here in the footer is not there. O no. So again, you're forgetting the last part. You have to add it to the state. So for example, the steam vital footer, What do I want? This is the footer, okay. And so what I want, I want to apply to the entire website. Okay, there we go. Now let's go ahead and click on Update. All right, go back to the site. Let's reload this bad boy. And there we go. That's simple. And so that's looking quite nice where we have a nice looking. Footer at the bottom of our website where we can add in some branding, adding an email opt-in form to the footer of the web site. So a lot of, a lot of designs have the IMO opt-in form like right here. And that's a terrible spot because like a throwaway spot, if you're serious about getting email subscribers, you want to add an email opt-in form right here above the footer. It's one of the highest converting spots for getting emails. Now, to add a form is quick and easy with elements are because, because of this fantastic header and footer block template. So anyways, let's go ahead and add new. Alright, so now I'm going to call this email above footer. There we go. Alright, so let's go ahead and click on edit with elements or. Alright, so now we have a bunch of different options here. Now we're going to be using in vodka elements, but I just want to quickly show you why so elements or does provide their own library of blocks. But all the good stuff is pro, gift upgrades elements are. So for example, we come over here to subscribe. It's all pro, pro, pro, pro, pro. Same with their headers and footers. This is why we're using and vital elements because we can get around that. So let's just click on free blocks and let's go to Newsletter subscription. Now psi note, you can absolutely design any of this stuff on your own. You don't have to use a template. I just like using a template because it's just quick and easy. So anyways, that's just come down here. You have a lot of options that you can install. I would suggest picking one that obviously blends into your site. And so let me just take a quick look. Yep, perfect. This one looks great. So let me go ahead and click on Insert template. Okay, that looks good. But this text is totally off, not as text looks nice, but just doesn't fit my site the way I've designed it. And so what I wanna do is I want to go to style and typography and Playfair display. No, we want Poppins as what I've been using and now white gray. No, I want it to be black. There we go. Now, sino also check out the Advanced tab because you can also add in motion effects. Don't overdo motion effects just gets annoying for the visitor, but just a little bit. So k like this is set to fade in animation duration normal fast. So you can play around with this. So I think that looks nice. Just leave it like that. Okay, so now you're noticing like, hey, where's the where's the opt-in form? I don't see that anywhere. Where you have to add that in yourself, ok. Because you get opt-in forms from whatever service provider you using. So this is convert kit. You can use whatever you want, but this is my dummy account for convert kit. So anyways, go ahead and click on Create New. And we want to add in a form, and we want to go to inline. And so you want to find a form within your email marketing service provider that's like just the simplest one, like this, okay, at basic inline form, no frills. Now, obviously you can edit this form, changed the color buttons as you want within convert kit, but this is not a convert kids tutorial, so I will just leave it there. This looks good. Let's click on embed. And we want to use HTML, not JavaScript, and not Wordpress you, right? Why not Wordpress? Well, that's a WordPress plugin. We're not going to install convert kits WordPress blog and we're just going to use HTML. Click on copy, right-click, copy. Their ego done. Alright, so now we want to navigate over here and we want to add in an HTML block underneath that. So again, click the squares and go to HTML. Html, drag and drop it in. Drop it right there. Alright, paste it in. And there's our form. And looks good. So go ahead and click on Publish. All right, great. So now let's go and exit back to our Dashboard. And let's go to before footer. And we'll just say entire website. Okay, click on update. There we go. Okay, so let's reload our website. And there you go. Ok, so that's simple. So now we have a nice couple different sections of our sites. And we have a nice opt-in forms sitting right at the footer it there and then the footer at the bottom. And it looks great. Alright, so adding specific pages to your footer. And so now what's important to put in the footer are your legal pages primarily, specifically your privacy policy in your terms of use. And so in order to do that with element or it's very simple, we just click the pencil icon right here. And now it says list item one and silica. We don't want to say List Item one, we want to change it to say something else. So, you know, just change it. Literally just jumping here and say Laika, privacy policy. Priv a seat. There we go. And so how do you add a link? The link option is right there. And so if we jump into our pages with our default installation of WordPress, we'd come it comes with a privacy policy page, okay? And so you can just come in here and go ahead and publish this page. Click on this, Publish in, publish. Ok. And so now we have our privacy policy page. We come over here and I add a link to my site and that's it. Okay, leave it just like that. And so now we have a privacy policy. So you can notice down here that we're linking to this. Now, what specific legal pages do you need? Okay, so we have a whole guide on this web, say creative pro. We go pages. There we go. Where is it? Ok on second. Oh, oops. Oh, what else have I split my website directly. There you go. How to write your legal pages. Alright, so now I'm not a lawyer obviously, but you know, you need a few essential pages, so you need a privacy policy. And so your point of your privacy policies to tell people like what the information gathering process is for your website, then you're going to have to have a terms of use pages. So what are people agreeing to abide by when they visit your website? And you may want to include a disclosure if you're going to be engaging in affiliate marketing. So you've seen it when you're on a blog post this post mooc and turn affiliate links. Please read our disclosure from somewhere to page it needs to create. And so at the Footer, definitely recommend you had at least your privacy policy in terms and conditions. And so you can come in here and just edit these options as you once, okay? And so let me just minimize that. And so really, it's very simple. So you want to have privacy, another item, another item. If you want to add another item again, you can just come in here and then you can just change the icon library to match the icon right there, et cetera. So it's not too, it's not too difficult, okay? And so you can either delete this entire section if you want or edit these links and make it like a sub-menu, maybe make it your About page, contact, page, whatever. Then obviously your social media links are pretty self-explanatory. So we come over here. So for example, a Google Plus that doesn't exist anymore. Go get and get rid of that. Then it works the same way. So you can click on your Facebook and then add in your Facebook link right there, et cetera, and click on the icon and mixture it opens in a new window because it's off your website if that makes sense. And that's pretty much it. That's all you really have to do for this section at the top there. So about us again, welcome people to the site, whatever you wanna do. And that's it for how I would recommend adjusting the footer.
15. Essential Pages: Alright, so now adding pages to your site with Wordpress is very easy. So again, what you first have to do is navigate over to pages and just go to Add New. And so I went ahead and created like an about us page. Now with element or you have to design each of these pages individually. So I just went ahead and made an about us page d rho is a euro structure is about actually we just change that and make it about. There we go. Alright, so let's just open this page up in. So again, I'm not going to walk you through how to design this because we just went through how to design the homepage. The process is exactly the same. Okay? So again, like you have to just go edit with elements are so quick here, or, sorry, click edit with elements. Or when you're in the about us page or whatever page you're editing, whether it's the bow contact page, all that good stuff. Same process. And then you begin the whole process over again with a blank slate. So again, we have the title right there, the page title, we want to hide that. Click the gear icon again, high page title. And there you go. Ok, so just follow this tutorial again because now you have the ability to customize the look and feel of each page individually. And that's what you have to do with elements are ok. It's not like you get a bunch of templates, okay? You have to kinda design each page individually, but it's not too hard and it allows you to have a lot of fun and a lot of creativity. Once you really understand how elements are works, which you should understand. And so that's what you have to do for each additional page going forward, be at your privacy policy about contact, etcetera. Alright, so the last page I'm going to show you how to add is a contact page with its own dedicated contact form. So let's go ahead and do that. Let's click on add new. Alright, so we'll just call this page the contact page. And we'll call it contact. Okay. Click on publish. There we are. Alright, so now we need to have an email form. So we have to have another plug-in for this. And plug and I really like is WP forms. So we'll go to plug-ins, will go to Add New, and then you want to search for WP forms. There we go. Okay, this is WP Forms. Click on install and click on activate. And here we go. So this is a quick little introduction to WB forms. Wanna go ahead and click on this button where it says create your first form. Okay, so now we have a bunch of different options with templates, we want to just create a simple contact form. Ok, so here's our simple contact form. Alright, so I want to change this. I don't want to have to have people put in their first and last name. So we just want to change this to simple format. So we have name, email, message. Looks good to me. Now we go over to settings. And now the settings is you can, where you can change the format name, become to notifications. Under Notifications, since email address, it's going to send it to your admin email. Now if you want to change it to something else, you will have a different email. Whatever it is, this is where you can input it right there. But as, as by default, it's going to come up as admin email. And now email subject will be new entry, simple contact form. So that means like when someone emails you, it'll come up with this entry. Okay. So you can change this something more customized like my website, email form, whatever. So but you know, when someone emailed you, anyways, to embed, the form is easy. You click on embed. Now we select the existing page, create a new page. You can also embed the form manually or use a short code. And so I want to use a short code. And so we're going to highlight this code right there. Okay, we're back. This will back this. Actually, you know, we have to save. Make sure the Save the form. There we go. Alright, so now we come over to pages and we want to come over to our contact page that we just created. Click on edit. Right. Now. There we go. Now make sure to click with edit with elements or ok. And let it load. Oh, okay, so this looks good. So let me just go ahead and click the gear icon. Let me go ahead and hide the page title. There we go. Alright, so first thing I want to add in a couple of different forms. So I'll just click on element to element enters library. And we go two blocks. And I really liked this block. I don't know why I like it, but I like to spark a lot. So I'm just gonna go ahead and use this block. Ok, so I can just take care of this and we'll just, There we go. Alright, let me call this. Need to get In Touch. Question mark. So obviously this is the page title. So this should not be h4, that should be h one. Okay, then again, you can just adjust this text as needed. Okay. So yeah. Hey, thanks for your interest in the website. I pride to emails and 24 to 48 hours, blah, blah, blah, et cetera. And so we don't need this read more Link anymore. We can get rid of that. Okay, and so now what do we need? We just need to add in another block to enable our short code. But you just need to do is click the little square icon again. And then you want to look for something that says short code. Okay, there we go, short code. Let's take this, drag and drop it right there. I'll right click on paste. And there we go. And our form has appeared. And now this looks fantastic. And so again, if you want to hide this email opt-in form on the contact page, you can do that. Just needs to go into the above the footer section that you edited this and just make it a rule so that this has hidden on the contact page. But if it's not a big deal to you, just leave it like this. And there you go. You've just created a nice looking contact page quickly and easily. Let's go ahead and click on update fan testing. Okay, so let's go here. Let's exit to our dashboard. Now we want to edit to our menu at the top. Or you can put it in the footer. It's totally up to you. So again, I just showed you how to edit things in the footer. But if we want to add something to that menu, again, you have to go to appearance, go to menus. And then you can add in like contact and new. Alright, so we can adjust this I, that, boom, click on save menu. Alright, so let's open up our website one more time. Okay, and so we've successfully added contact to our menu up top there. Now within this menu section, see how I can have a like that. What that does is it creates a dropdown. So I'm just curious, like how do I create a drop-down? You can create drop down by doing this. So underneath home it'll be a dropdown link for contact and blog. In general, I shy away from dropdowns whenever possible. So it's up to you, but that's how you would do it. And that's it. And so that's how you add new things to your menu item.
16. Final Touches: How to add Google Analytics to your element are powered website. So I'm assuming that you've already created a Google Analytics account if you haven't already done so you have to go to Google Analytics. Okay, it's called Google Analytics. Create account. It's pretty self-explanatory, but you want to get to this page, something like this, depending on when you watch this video where you need to get the tracking code. Okay? And so you want to come down here and you want to get the scripts, okay, take this copy. Now we need to put this script into the header of our website. And so to do that, I definitely recommend installing another plugin. So let's go to plug-ins and let's go to add new. Okay, so now we want to install headers and footers. Alright, so insert headers and footers. Here we go. This is the one we want. So go ahead and click Install and click on activate. Alright, so now we're good to go sue, just navigate to settings and then click on Insert headers and footers. Now I really loved this plugin because it's just point so simple. So scripts in header, okay, so Google analytics goes in your header. So that's all you need to do. Done. That's it. And go ahead and click Save. And you've just successfully at a Google Analytics. Now once you've added Google Analytics, you're going to be able to verify your website with Google Search Console. So just navigate to Google's Google Search Console and login to Search Console using the same email that you have your Analytics account with. And that's it. And so it should verify your website in Google Search Console is really powerful because it gives you a lot specific information about how your websites ranking in index within Google, et cetera. So anyways, that's how you add analytics to your website and how to add social sharing buttons to your website. So one service the I personally like is called added this. So you have to just go to add this in log n. Ok, you're going have to create an account, create a do it you need to do. Now, once you're in, you all you have to do is navigate to where it says Tools. And now we want to go ahead and click on add a new tool. And we can want to add share buttons. Let's do that. And now here is where you can adjust what social share buttons are. Appears you can have inline or you can have floating. We're going to do footing. So let's go ahead and continue. And I want to select the buttons. So maybe I want to have Pinterest move it up there. So we have Facebook, Twitter, Pinterest widths. Get rid of add this. And let's get rid of email and just keep these three. That looks good. Let's go ahead and sorry, let's continue adjusting. So so the mobile buttons large, I want them to be small. Okay, so that means like when someone's on a mobile device, the buttons appear at the bottom of the website. You can just turn this off completely if you want. So we come down here to the School here at three colors. All right. So very good. On mobile at the bottom or hide, okay. If you don't want them at all. And so we'll just leave it like that. Three k, This shows how many social shares for each item. And so share count, I probably leave it as ten. And so don't show a number unless it's ten or greater, or you could change it to whatever you want if you wanted to be like 50, whatever. So anyways, once you're done, go ahead and activate tool. Click on activate tool. There we go. So that is it. Ok, so let's go ahead and let's go back there. Okay, let's go to settings. Alright, now we need to get the code. There we go. Okay, go down here and all you need to do is highlight this script. Copy. Now we want to go back to our headers and footers. So we just did this for Google Analytics. So now we want to put this in the footer of our website. So go ahead and do that and click on Save. All right, so let's go back to our website, will reload the page. And there we go. So we've just successfully added social share buttons to our website. And Laszlo just makes sure that your website looks good on mobile. And so for example, what's come over here to website great pro.com. If I go to right-click, I go to Inspect. Now this is set to look like a phone. Okay. And so you just want go through and make sure that everything is in place, it looks good, Nothing's weird. And so with elements or you can do that as well. So which didn't need to do is go down here, right? And go to responsive mode. Now here you can select tablet or mobile in general. Don't worry too much about tablet, but definitely like 50% or traffic's going to be a mobile, and that's it. And so you want to just take a quick look. Now, whenever you edit anything now it's going to only be affected by mobile if that makes sense. Okay? Because you now we have mobile turned on. So for example, if I come down here and we'll say like courses at work, I'm like, Oh, actually that's a little bit too big and I want to come over here. And I want to come to style, perhaps in good typography and maybe make that size a little bit, little bit bigger, whatever like that. And maybe I'll might like that. Okay. It, this will only be applied to the mobile version of your website and so won't be applied to the desktop. So if you go back and go to desktop, it won't change it. So it's only, you're only changing things on mobile. So that's why I just want to go through and just make sure everything looks good, everything's in place, Nothing's weird. Nothing's out of place. And that's it.
17. Blogging with the free version of Elementor: Alright, so the blog page on your website, this is the one thing that they put behind the paywall. So that's why I said in the very beginning of the tutorial that this tutorial is a deal. If you wanna use the free version of elements are in your Ku which is individually editing each page. For example, like the contact page, homepage About page and just adding elements in blocks into the page and doing whatever you want. Elements are, it's fantastic, but for blogging, it's good for blogging, but not the free version because they just, they put this behind the paywall. So you can't adjust this, this the way it looks. You're stuck with this. Don't try like there's nothing you can do. Even if you come in here and you click on edit with elements or you're gonna get an error. So here we go, sorry, the concept was not found, so we click on Learn more. And so some, some, some people I've worked with, o knows my site brokers. No, no, no, you're just using the free version. So right here or you're trying to edit the blog archive page or the home page that shows the latest posts. These are archived pages and they can only be intimate edited with the pros, the LM function. And so that means you have to have elements are pro, which is you have to pay for it. And so that's why so you're kinda just, again, that's why I said you're stuck. And then the individual blog posts look like this and that's not the, not the worst. Okay. It looks okay. I mean, you can get by, but again, it's not if you really want a blog, if that's really important to you than upgrades elements are pro. But again, like I said in the very beginning, if you're cool with just like individually designing each page and you want to get very creative. You should have the ability now because I just showed you how to edit a header, how to edit an email opt-in form, edit the footer. Now you're free reign over the constant area of your website. And so anyways, that is it for this tutorial.
18. Conclusion: Alright, that's it for this course. I hope you enjoyed it and I hope you've got a lot of value out of it. I hope you have a strong understanding about how elements or works so you're able to use it in design any type of website you once anyways, I just wanted to say a quick thank you for enrolling and have a good day. Bye bye.
David Utke, Web Pro and YouTuber
