Hi, I'm Beau with FreeCodeCamp.org. By the end of this course, you will know how to make all of these different websites and how to customize them. We'll be doing this all in WordPress and I'm going to teach you every step you need to know. This course is perfect for beginners.
First, I'll show you how to do the initial setup. This includes getting a domain name, hosting, and installing WordPress. A domain name is what people type into a web browser to get to your website. Some examples are youtube.com, freecodecamp.org, or wordpress.org. Hosting is where the files or data for your website are stored.
When someone goes to your website, the files that make up your website have to be accessed from another computer somewhere else in the world. The company that has the computer with your website files on it is called a hosting provider. So what is WordPress? WordPress is a content management system. It helps you manage your content.
Basically, it helps you create a website. Even if you know nothing about coding, you don't need to know HTML, CSS or JavaScript. You can do everything graphically with WordPress.
WordPress is by far the most popular way to make a website. It is used by 40% of all websites. And best of all, WordPress is free to use. After we get the WordPress software installed, I'll show you how to set up the installation. and customize it for your purposes.
Maybe you want to make the website into a blog or an e commerce site, or a website for a local business. I'll show you how you can easily customize it for whatever your use case is. Then I'll show you how to update the design.
I'll show you how you can make your website have the exact look that you want it to have. I'll show you how to get your own images into the page and use the colors that you want. Right now I'm going to show you how to get your domain and your hosting. This is the part that you will have to pay some money for.
But it is pretty cheap. The name usually costs between 10 and $20 per year. And hosting often costs around $5 per month. But I'll show you how you can save some money on this.
We'll actually get the domain and hosting at the same place. Hostinger provided free co camp a grant to make this course possible. And we'll use Hostinger to get the domain and hosting.
They're one of the cheapest hosting providers and they have good service. I've actually used them in the past for my personal websites before we got this grant. And they make it super simple to set up a WordPress website.
Just so you know, everything I teach in this course will work with other hosting providers as well. So you don't have to go with Hostinger. But some things about Hostinger is that they offer a free domain SSL and 99% uptime guarantee. So we'll go to hosting.com.
we have a link in the description that's going to give you a better deal than what you would normally get. So click go for it. We'll go down here. And we have we have the single shared hosting and the premium shared hosting.
Now, if you're just go if you're just starting out, you're a beginner, you may just want to go with the single shared hosting, the cheapest one, the main thing to look at is really the really the main thing is that this one comes with a free domain. And this one does not come with a free domain. But it's just an 899 value.
So if you get it, this version, you can just get the domain separately for 899 or possibly a little more depending on what your your, whether it's me a.com or dotnet or what the end of the domain is different types of domains cost different amounts, but they're generally around 899. So you may just want to go with this one that's 99 99 cents a month, and then just pay for the domain separately, instead of doing this one that's 219 a month. But you can see that this is just the promotional rate anyways. it's going to be $4.99 a month when you renew or $2.99 per month when you renew. So you really want to kind of look at what the real rate is and not just the promotional rate.
So if we select this one right here, and then you're going to actually have to choose whether you want to go with the one month pay by month or pay by 12 months, 24 months, or 48 months. You can see that the 99 cent price is only for 48 months. Personally, I think the 12 months is... the most reasonable, especially when you're just starting out.
You don't want to commit to 48 months unless you're sure you're going to want to use this for actually that long. So I'll just go to the 12 month plan. And then you can just choose how you want to pay for it. And then enter all your information.
Now I already have an account. So I'm not going to enter all my information right here. I'm just going to log into my account where I already have everything set up. So once you get signed up, and you've paid and you're logged in, you'll be taken to this dashboard. And if you got the plan that includes a free domain, you can claim your free domain.
Or you can just get your domain during the setup process, including purchasing one if your plan does not come with a free domain. This is what we are going to do. So I'll click Set up under premium shared hosting.
Okay, welcome to hosting or Quincy. My name is actually Bo. But Quincy Larsen is also with free code camp. And this account is actually in his name. So I'll click Start now.
Okay, here we get to choose what type of category you're in. Either you're claiming a free domain because you have the right type of hosting or account to get that you're going to buy a domain. because maybe you sign up for the account that doesn't include a free domain, but you still need one, or you're going to use an existing domain.
First, I'll show you how to claim a domain. The process is similar if you're going to buy a domain. Afterwards, I will show you how to use an existing domain.
So I'm going to try robot toys review.com. Okay, that's available. You may have to try a few times to get a domain name that's available because a lot of domain names are already taken.
But let me hit Continue here. And then I am going to skip I will start from scratch. And I can choose my website location.
Let's do North America, because that's where I'm at. Finish up. Okay, my website is ready.
Now I'm going to go to the control panel, I'm going to manage manage the site. And if you somehow get out of it, and you're at this main site, you can always go to hosting. And then you can go to manage for your manager your website here.
Before I show you how to manage your domain and set up WordPress, let me show you how you can use a domain purchased elsewhere. It's easiest to get your domain you're hosting from the same company. However, it's not required, you can get your domain from one company and host your website with a different company. So let me show you how you would host a website on Hostinger. If you got your domain from a different company.
Now you can just skip this section if you're just going the easy route, and you're just getting everything from Hostinger. But if for some reason you do get a domain from somewhere else, I'll show you how you can set it up. So host so you're hosting at Hostinger. So in this example, I got a domain called robot family reviews.com from Google domains. No matter where you get your domain, there's going to be somewhere in the dash.
board where you can update the name servers, it could be under something called DNS, it could just be under something called name servers. So we're gonna have to update that in order to make sure that we're hosting this name with Hostinger. So I'm going to go to use custom name servers. And it could look a little different depending on what company you bought the name server, what company you bought the domain name from, but it's going to be pretty similar to this.
So I'm going to put in s one DNS parking.com. This name server, this website here is specific to Hostinger. So this is something owned by Hostinger.
And this is how you connect your domain to Hostinger. So I'm actually going to copy this, I'll click Save. And I'm going to Oh, I have to add another one. So I'm going to press plus and then I'm going to do ns2.
So These are the website and s1 dot DNS dash parking.com and s2 dot DNS dash parking.com. So these if I save this, now, it says it could take effect within the next 4048 hours. So it could take a but it may be this day, it may be in the next hour or two.
So it's going to take a little while for it to be connected correctly. But now we've run everything from our domain to get this connected to hosting her. A little later, I'll show you one extra thing you have to do on hosting or to make sure it's connected to this domain.
Okay, now we're completely logged into our hosting account. It's associated with our website. And now we have to install WordPress. And just in case you want to use a different domain name, let me show you how you would do that.
Now, you probably won't want to do that you'll probably want to just use the domain name that you got with hosting or But if you do get another domain name, and you want to make sure it works with the files that you're hosting on Hostinger, I'll show you what you can do. You can scroll down here, and we'll go to add website. And I'm just going to add another website that that I purchased elsewhere.
So you can actually have a website that's from elsewhere that from a different company go to the Hostinger hosting. So I'm going to do robot family reviews.com. and make sure it's spelled right.
And then we'll do a password and then add the website. So that's one cool thing about hosting or is if depending on what plan you have, if you have the right plan, you can host multiple websites on one account. So you only have to pay for hosting one time.
And then you can host a bunch of websites on there. So then this drop down menu would point to which up which website you're going to update. So I'm going to robot family reviews.
And so since I set the DNS settings to hosting her I'm at robot family reviews.com. And this is just the default page that hosting or show is before you set that up. So let's go back and set up the page.
So it doesn't matter if you got your domain name right through hosting or, or if you got somewhere else and then pointed it at hosting, we are going to set up WordPress right now. So in order to set up WordPress, I'm going to scroll down here. And then I'm going to go to auto installer, this is going to let me get. auto install WordPress on the website. Okay, you're probably not going to see anything right here because you probably don't have WordPress already installed.
But if you've already installed installed WordPress on any of your domains will show up here. But this is how you installed WordPress for the first time on one of your domains, probably just one domain. So we have we can click that we want to install we want to select that we want to install WordPress.
There's also a few other things that we can install. like if you were going to have an e commerce site, you may want WooCommerce as well. But we're just going to install WordPress.
Okay, and you'll probably just want to keep the default for all of this. But since this account was actually registered to Quincy, and my name is Bo, I'm going to update this to bow. But again, you'll probably just keep the default and everything else we can keep the default.
I'll put in a password here. And then the website title, it's going to be called robot family reviews. Okay, and I'll just click install. Okay, it's finished installing. So I'm gonna go to my website again.
And I'm going to refresh. And here it is robot family reviews, we have our WordPress installed, go here, you can see the URL up here robot family reviews. And it says Hello world, welcome to WordPress, I'm going to zoom in a little bit so you can see that better.
This is just the default page that WordPress creates. So we're going to do a lot of customizing to this, but we can see that we have it successfully installed. Okay, so let me show you how we're going to get into our WordPress dashboard to start editing it. You we don't even have to go back to the hosting or website, right from this website, we're going to go into the URL bar.
and I'm going to put slash WP dash admin. So on most WordPress websites, the URL slash WP dash admin is where you go to administer and be the administrator for the website or to configure the website. So let me press Enter here.
And now we have to log in, we'll log in with the information we use when we created when we installed WordPress. So for my username, I'll put bow and the password. will be the password I selected before click Login, we are in our WordPress dashboard. So here is where we can start customizing our website, we've finished setting up the website and hosting, we got the domain name, we got WordPress on installed on the hosting provider, we logged into the dashboard.
Now we're going to start setting up and customizing the WordPress options. So what we're going to go do first, it could go to the plugins here and see what installed plugins we have. So you can see there are quite a few things already installed. And the truth is, we're just going to start from scratch.
A lot of these default plugins aren't really that necessary, because they may not really specifically apply to what we're going to try to do. So I'm going to select all the plugins here, I am going to delete all of them. And I'm sure I wanted to delete them. And some I may have to have some of them I'm going to deactivate first.
So I'm gonna go deactivate and apply. And now I will delete all of them. Don't worry, because all this can be reinstalled.
If you need them, we're just going to start from scratch and show everything that we want to install all the plugins that are going to work for the page that we're creating here. So let's go back to the dashboard. And so here's our main dashboard. So this dashboard is the back end of the website. It's where you control the options.
It's where you go to edit your website. And you can see whenever you want to see your website, let me just show the different tabs up here. If I click robot family reviews, it's going to go right to the main website, we're going to click back.
Also, if I click here and click Visit site, it's going to go to the site. So first, I want to show you before we get into all the customizing, I want to show you how you would make sure you have the most updated version of web of WordPress. So if you click updates here, by the dashboard, we can see that there are nothing there's nothing to update.
If there's anything to update would say something like update, or there'd be a button around here, but we have the latest version. So we don't have to do anything as far as updating. But it's something you can keep an eye on over time, you probably want to get the latest version just in case there's any security updates.
That could be important to keeping your website secure. Okay, now let's look at how we can add a user or change the password of the user. So if I go to users here, we have currently one user, and it's Bo. And if I was going to change the password, I'll just click here, go to Edit.
And then there's all these things I can change here, including setting a new password, but I like my password. So we're not going to do that. This is also where you can add a new user that click Add New, you can have multiple users that can log in to the administrator portion of your WordPress page.
And each user could have different roles. So maybe one person can only add new blog posts, where another person can actually redesign the whole website, depending on what what, what abilities you want to give to each user. Okay, next, we're going to set up what the URLs of our pages and posts will look like. So I'll go to settings here. And then I'm going to go to where says permalinks.
Okay, so the default is that it's going to have your root URL, and it's going to be slash index dot PSP, p slash year slash month num. And then we don't want to have all this extra thing. So what I'm going to do is just change it to post name.
So the URL is just going to be a URL of something on our website is just going to be our root URL, and then just sample dash post, or this would be just the post name. So we I don't I mean, if you want, you can include the dates in here if you want to include the day and name or the month and name or a number, but we're just going to have the name of the post after the root URL. But it's really up to you how you want to do that. So I'll just go to Save Changes. And we're done with that.
Next, we'll update the theme. The theme is the overall look and feel of a website. Certain themes will make it easier to update different parts of the website. So let me go to appearance and theme.
So by default, there's just these three themes. And we're on this one right now. But there's hundreds or 1000s of WordPress themes you can install. And we're going to do that right now, we're going to install this one of the one new ones, I'm going to click on Add new theme.
And like I said, each theme is going to make it easier to update different parts of the website. So there's tons of different options here. But what we're going to do is install one that's very popular and also allows a lot of customization. This is called ocean WP.
So I'm going to search for ocean WP. Click on here, details and preview, we can see that this has five stars, it has 4559 ratings. And this one has is one of the more popular WordPress themes.
And one of the reasons why is because it's so customizable. It also can work with WooCommerce, just in case you want an e commerce store. But to install this theme, I'm just going to go to install up here.
And this is going to give us a lot of options no matter what type of website we're trying to create. It's one of the more popular free WordPress themes. It's especially good for beginners.
It includes high quality pre made designs, and it's very easy to customize. Okay, it's installed. And now I'm going to click activate.
Okay, you can see right here new theme activated visit site. So let's visit site. And this is where let me refresh here.
Okay, so this is now what our website looks like with our new theme. It still doesn't it still doesn't look very nice, because we're still going to be doing a lot more updating to customize exactly how we want. But this theme is going to make customizing even easier.
And you can see now you can see this bar at the top, this bar is going to appear anytime you're logged in to WordPress, and you're on your website. And it's going to make it easier to customize individual pages. If I just click customize here, I could start start editing this page directly. We're not going to do that right now.
But we will do that a little later. I'm going to go back to the dashboard. So I'm gonna click right here. And now we're going to add some plugins that we need. So I'm gonna go to plugins.
So a theme determines the look and feel of your website. plugins add new features and functionalities. For instance, with a plugin, you can add a contact form to your website. Also, you could block spam comments, implement a shopping cart, there's just tons of different things that plugins can help you add to your website.
Depending on what theme, there may be some recommended plugins. And one of them is ocean extra for this one. So let's just begin installing this plug plugin.
And I'll click install. Okay, now after we get ocean extra installed, there's one more plugin we're going to install go to add new. And this next one is called Elementor.
And you can see this has 5 million active installations. It's one of the most popular WordPress plugins. And it makes it very easy to design professional looking web pages without coding. It gives a drag and drop page builder.
you can see pixel perfect design, mobile responsive editing, it makes it just a lot easier, especially for beginners to design a website. So I'm going to install this one. Okay, let's go to the list of all of our plugins. Again, I'm going to select them all.
And then I'm going to activate apply. So we're going to activate both plugins that we installed. So here's this welcome screen, we're going to just skip this, we don't need to go through this getting started right now. And let's go back to the plugins again, just to make sure it worked.
Elementor is activated, but we need to make sure ocean extra is also activated. You know, I think this plugin got installed wrong. So that could happen if that happens. No, it's not a problem. We'll just delete this.
And then we're going to reinstall it. So let me just refresh this page and begin installing this program again. plugin.
I mean, I think the problem is I went off the page while I was installing it before. So that could happen to you to not a problem. You just delete it and then reinstall it. Okay, it's all installed.
It could take a little while. You just have to kind of wait till it finishes. So I'll go to return to dashboard. And with ocean WTA has a setup wizard.
So let's do run the setup wizard. And it's going to show you the different things that you can do. So to get started, so the first thing to do is select the demo template. So this is something that's pretty great about Ocean WP is that it has all these demos included with it.
And a lot of them are free. Now, the way they make money is that some of them you do have to pay for. But these ones that are included here, these ones are all free that we can see right here. So we can choose which demo looks most similar. to what we want.
If you're gonna do an e commerce, you can do store, we have personal simple, you can even do a preview. So I could do a live preview of this. And then see and if I like this preview, I can import it, you can see there's different blog tips.
So we're going to go to with something more simple here, I'm just going to go back here. Okay, and I kind of like the this lawyer one. Now, you can create you can choose anyone you want.
And all the things I'm about to teach you are going to apply no matter which of these demo templates that you choose. And I'm not making a page about a lawyer, but I just like some of these things that are in the lawyer page, I kind of like how it's set up. And like I said, we're going to be able to change every single one of the we're going to be able to customize this.
So you don't have to be making a website. about whatever the like the name of this demo is, we can choose lawyer even though we're not making a website about a lawyer. So I'll just select this one.
And I'll go to the bottom and install demo. And depending on which demo you install, there's going to be specific plugins that are necessary just for that demo. So let's click Install now. Install now. Now, when it says get this add on, that means we are going to actually have to pay extra for it.
But the good thing is, it's optional, we don't need to get this add on, it's just an optional thing that you can get. And so we're just not even going to get those add ons. And we're going to see how we can still customize and make the website exactly how we want even without getting those add ons. So I will now click import. And here is where we can customize it right from the screen if we wanted, we can upload a new logo, we can set the title, the tagline.
And the thing is, we can actually change all this stuff. later. So I'm going to skip this step because I want to show you how we can change all this stuff right from within WordPress.
So I'm gonna skip this step. And you know, we don't need any of this stuff. So I'll just click View the website. Okay, so now I'm going to click Visit website.
And so here is our updated website. You can see it's all about being a lawyer now. But we can change all of that. And we are going to do that.
So I'm going to close this Okay, we're back at the dashboard. Let me dismiss this. We can also if we want to, we can activate this, but I don't want to so I'm going to skip it. And going to this theme panel button here.
If somehow you messed up when you were installing your demo, or it didn't install right, or you went off the screen, you can go click on this theme theme panel. And this is where you would install the demo, you could run the setup wizard, which we already ran, we could run that again. But we're not going to run that again, we already ran it.
Okay, we got our theme and our demo installed. Let's just see what it looks like I can go up here, click Visit Site. And so this is our lawyer theme. Like, obviously, like I said, we're not lawyers. But the next step I'm going to show you is how to use this as the base of our website, and just go through and start customizing things, and how to customize the text, how to customize the image, how to customize layouts to go along with what our site is actually supposed to be about.
So I'm going to go back over to the dashboard, we decided we're not going to activate these social sharing buttons. So let me show you how to remove this message. It just got installed with everything else.
So I can click here and go just to I can just deactivate to temporary deactivate deactivation because who knows, maybe we'll want it in the future. Okay, I'm gonna go back over here. And that gives gets that out of the way.
Now we're going to install just one more plugin before we start customizing everything. So I'm going to go back to the plugins screen again, I guess it could have stayed on there. And the plugin is going to help us back up our WordPress site.
It's good to have everything backed up just in case you make a mistake or something goes wrong, you want to have a backup of your website, so you can use it later. And also, let's just get rid of this too, because this is a paid extension, which we don't really need. So I'll just get rid of that space was just an ad that shows up. So I'm gonna go to add new. And this time, we're going to install a plugin that will help us back up our WordPress installation.
And this one is going to be called all in. So we got all in one WP migration. And this is going to allow us to back up our site. And you can see it's very popular 33 million installations.
we're just getting that installed. Okay, that's installed, I'm going to activate that. Okay, now let me show you how that this will work. You click on all in one WP migration, and we can export there's two ways to do the backup.
One, we could export our entire site to store on our computer. So if we just do export to file, okay, now just click download. and close that. And then you can always just import it if you want to.
Another way is to go to the backups tab here. So the cool thing about this extension is it will also automatically save backups right to your WordPress server. So you don't actually even need to download anything. It's good to export the site every once in a while.
So you have a back up like a master backup. But you can also create a backup right onto the WordPress server, and it'll just be saved right onto your server. And then whenever you want, you can either download it or you can restore right from here. So that's another way to do backups.
And now we're going to start customizing the website. So we could go right through these links here to customize. Another way you could customize is going to the theme panel. And then at the very bottom, there's all these things about uploading your logo, adding the favicon. choosing your primary color, choosing your typography.
So you could update it through that way. But I'm going to show you a different way to update it. The way the reason why this other update way to update is good because it works across all themes. Even if you don't even install a custom theme, you can still update your website this way.
So I'm going to go to the dashboard. Actually, I'm going to go right to the site here, I'm gonna click Visit Site. And once you're on the site, you can go to any page in your site.
And you can just click Customize. So now we're customizing anything and we can click on any of these. sections here to customize different things.
So first, we're going to customize the general look of everything. So I'm going to go to site identity. And we already know the title is robot family reviews, which you could change if you wanted, but for the tagline, and this could show up in search bars, or I mean in search engine, so it's good to have something that really relates to your, your website here. So I'm going to say reviews of robot toys. then I'll go back.
Now, I'm going to make a lot of changes. And then I'm going to click Publish to publish all of them at once. So or I can actually just publish it right now.
And then you can guess we'll see how it goes the changes as we go. So now I'm going to change the logo, we got the logo here, I'll just click this logo. And you can also go a different way to do it, you can click header.
And then we can click logo to update the logo. And I'm going to remove this logo. We are going to create Well, you can see what we're moving the logo automatically just puts text here instead of the logo.
So I'm going to create an all new logo to use on this website. So there's a cool website you can use to create a logo for free. Okay, I'm at logo maker.com. And we're going to create our logo.
So I'm going to do a search. Remember, this is all about robots. So you can search for anything, but I'm going to search for the word robot.
and try to see which thing I want to use for my logo. All a lot of these look kind of cool. I kind of like the simplicity of this one.
So I'm going to use this as my logo. And then I'm going to put some text here too. And it's just going to be called robot reviews.
And so I will make this a little bigger, can move this around. And I had zoomed in a little bit, but I will zoom out. Okay, so I'll click this text. And this is where you can change the font. So let's see which one looks the most like a robot.
Well, I kind of like this one, I guess it's not like a robot, but we're gonna change the colors of everything too, I can select both of these. And now I can make this color go to any type of color I want. I'm going to do this blue color, kind of like this.
And I'm going to make this text a little bigger, so it's closer to the size of this image. And then I'll make the image a little smaller. Okay, robot reviews.
So now I'm going to click the Save button. I don't need the high resolution, I'm just going to say no thanks download the low resolution. And the great thing about this website is it's one of the few websites where you don't have to create an account in order to create a free logo. So we got that. Now I just want one with just this robot thing.
So I'm going to click this text, I'm gonna delete the text. Now I'm going to save that. And I'll download the low resolution file.
Okay, let's go back to our WordPress site. And now I'm going to select the logo. Okay, I'm just going to drag this over from off screen. So then I'm going to call it robot reviews, logo, and I'll put that as the alt text also, and then click Select.
And then I'm going to make sure the whole thing is selected up here. And crop image, or you can just do skip cropping. Okay, now if I hit Publish, it should show up on here.
And then I'm also going to have to refresh the page. Okay, if you add the logo, and it doesn't show up correctly, it could be because if you're on a retina display, it still has the other default logo stored as the retina logo. So you may have to go in here, you may have to select an image.
And if you just choose an image, and it could get really small, but then if you just remove, then it will default to the normal logo whether you have the retina display or not. So that's something I ran into since I do have a retina display that I'm recording this on, you may just have to select any logo and then remove it. And then it was just default back to the normal logo.
Okay, so we have the logo updated So now let's see how we can update the general colors used on our website. You can see how it uses this gold color, there's a line right here, there's a gold color, there's a line right here. So let's see how we can update what colors are used on the website.
I go back here. Okay, I'm gonna go to General Options, go to General Styling. And now we can select what our primary and hover colors are. And the border color, we can update all these different colors.
So I want to figure out what color this robot reviews logo is. So let me go back over to my logo website. And I can actually just copy this hex color right here, I can see this number right here with letters.
This is the color. So I'm going to just copy that. And I'll go back over to WordPress.
And now I'm going to put that as the primary color. So I can go around and select any color like this. Or I can just paste in a hex code. And that's it. we're done with that.
And then for my hover, my hover primary color, I'm just going to choose something that's a little darker, maybe a little purplish here. And now I'm going to click Publish. And then I'll refresh.
And you can see a few things change colors. So we have these down here that change colors this little line, but we have to change we have to update the color in a few more places. I'll show you that later.
But now let's add the favicon. So we update the logo, we updated some colors, and we'll be doing more colors later. And now let's update the favicon, which is what appears in a tab or the U in the bar in your browser, like in the tab right next to the site name, that little picture.
So we're going to go to site identity, and then select a site icon. So I'm just going to upload a file here. And then I'm going to upload this.
So I'll put favicon. And then I'll just select that. And that shows a preview of what it's going to look like. Looks pretty good. Okay, I'll crop the image.
Now there's a bunch more things we can customize, you can see there's all these things we can customize. And we're going to come back to a few of these later. If you want, you can play around yourself and just try changing things, you can always go back if you make try something one way, you can always go back to the other way. And you can kind of experiment with what your website you with what you want your website to look like. But I'm going to show you another way to be editing the website.
And that's what we're going to use to edit some of these colors and some other things. So we're going to do something to edit the actual content of the website. So this is mainly editing what things look like, like the logo, some colors, font, font size. But we're going to edit actually the text and then other things on the website. So let me click Publish to make sure everything's published here.
X here. Okay, now we're going to go through and find out how to edit each section of this website, we are going to find out how to change the words, change more colors, change the layout, add images, add links, and it's all possibly simpler than you would expect. So you'll notice that we no longer have the top bar in here.
It's because I actually restarted my browser and it got logged out. So whenever you don't see the top bar, that means you're logged out of WordPress. And you need to get logged back in before you can start editing. So let's do that again. So if you remember, you just go to the main URL and do WP slash admin.
And then you go to that page, you can log in with the information you you set up when you first installed WordPress. Okay, now I can go back to the site by going to visit site. And then anytime you see this top bar, you on each page, you can either click Edit page or edit with Elementor. Now edit page is the default way of editing.
It's called Gutenberg. And it's pretty good. But there's Elementor just makes it more user friendly.
There's a lot it's more graphical, you can drag things around and it kind of gives you a little more, it makes a little something's a little easier to do. So we're going to go to edit with Elementor. Okay, so here's Elementor, we have our page on this side, but we have this new menu over here, which are elements we can add to the page.
So we can actually bring in elements, just like I can click an element like image, and I can bring it right here. And it will put an image here. Now it's currently blank, or a placeholder image, but I'll show you how to actually make into your own image in a second here.
But you can also click on any of these spots and edit the sections. Now see, I have to actually scroll back and forth. That's just because I'm kind of zoomed in here. So you can see the elements on the page a little better on your computer. it may actually just show up everything that once you may not have to scroll back and forth here.
So here, you can actually just edit the text. So I can say, read amazing robot reviews. Okay, over here, we can change settings, like I can center the text, I can write a line, I can go to style, I can change the text color if I wanted.
So I can make it any color. I'm just going to keep it as white. But I can even change the blend mode.
So maybe if I do lighten, see how this what this looks. So if I go to overlay, you can kind of see it. Now you can see through it just slightly, I can turn on a text shadow by want so I could so I could make this darker.
So you can do all sorts of things. Now this text is not going to let me change the size here, because there's some texts where where it's like key pieces of content, the styling is actually in a different spot. But if I go down here, I should be able to change the size. So if I go over here, now, this is just basically default text, placeholder text.
I'm going to keep the placeholder text, I'm not going to go through and add updated text for every section. But if you're creating your own website, obviously, every piece of placeholder text, you're going to want to update to the content that you actually want. But you can change things like if I select that I can make that bold, and you can see it changes the bold over here. See, I can scroll down here and there's more settings I can change. So I could change the columns.
So now there's 10 columns of text, but we'll just go to default because we really just want a single column there. And so you can just go through and change all these things. So we also have the style here.
So let's see if we can change the style. So we can change the text color, the typography, if I choose the typography, I can actually change the size of the text. So here, I can basically make it as large or small as I want.
but I'm just going to delete if you just delete the number together is it'll just go to to kind of the default size that already was. But if you want a different size, that's where you would change in here. So there's just a bunch of different settings you can change to get the style exactly right for what you're looking for.
And there's even some advanced settings. So if you change the margin, that's going to change the how much spaces is above the text or below the text. So if I change this, if I make it so the values aren't linked together and make this go up, you can see how there's it's getting more space on the right of the text can bring that back to zero.
And if I do bottom, I can put like 70 here, you can see it's putting more space on the bottom of the text. But I'm just going to keep this at zero. And there's all these things, different things you can change, like you can even add motion effects. So this would actually add an animation to the text.
So if I do fade in, you can see it gives an example of it fading in, or you can make it moving, going from the left right there. So there's a lot of different cool things you can do to make it just unique and specific to what you're trying to do for your website. And so let's say I want to change this here. So contact our attorneys. So if I click here, you can see this is where it's linking to anytime you see this pound sign or this hashtag here.
that just means it's a placeholder link there. It's not actually linking to anything. But really, we want it. So there's two things we can make this link to, we could either make link this to an email address, but we're going to link it to our contact page.
So our contact page, I can actually go here, right click and go to copy link address. And if I paste this in here, we can see it's robot family reviews.com slash contact. So now when someone clicks here, we'll go to the contact page.
But let's also change what the text looks like. So instead of contact our attorneys, I'm going to make it contact our reviewers. Okay, so now when someone clicks that it will go to the contact page.
And now let's see how we can change these different elements. You can change some colors on the page by changing the overall styles on the page like I showed you earlier, but some elements are colored individually. So I can click on here and then go to style And then here, I'm going to get the hex value that we're using on the other parts of the page that blue make it here.
So I'm just going to paste that that hex value in from that we were using before. And you can see it's changing to this blue here. And you can do that for any element. So like I can click on this, this icon here, and I can go to style. And now I'm going to show you an even easier way to do it.
So yes, we can select the color individually. But this time, we're going to use the global colors. So let me show you how we're going to set the global code, I'm going to manage global colors. So we have the colors.
through Elementor. And then we have the colors on WordPress. So we already set the colors on WordPress. Now I'm going to set the global colors on Elementor.
And I'm just going to paste in the hex value again. So now we have this blue. And for now, we'll just leave these the same.
So let's go back here. If I go here, I'm gonna have to save save the global colors. If I click on here, then I can set it as the primary color here. So I can do it for all these things. I don't know why this icon wasn't showing up.
But I knew was there. So I just click there. And I can set this there again, click on this icon, which for some reason wasn't showing up. And I can go through each icon here and change it to the color, the blue color we're going to use. And then so here's another element here, this little line right there, And this time, we have to go to this border section, because it's actually just a border on one side.
And I can change that to the primary color. Okay, so let me show you how to add a picture, I added this placeholder picture. And what you're going to want to do, unless you have a lot of your own photography for different products, we can go and get some royalty free photos that we can use right on our website.
There are some few a few extensions, some if you WordPress extensions that you can install that will make this simpler to do right from WordPress. But you can also just go to the royalty free websites yourself. So one popular one is pexels.com. So I'm just going to search I'm at pexels.com I'm gonna search for robot.
Okay, so look at all these robot pictures. All these are royalty free that anybody can use. So let's see which one I want to use. I kind of like how about this one? Okay, I'm going to download this.
But instead of just downloading the original, it's a little bigger than what we need. So I'm going to go to the medium size. If it's too big, it'll just take too long to load. So I'm going to click free download. And now I'll go back over to Elementor.
We'll go to choose image, upload files. And then I can just drag it right into here. Okay, I'll text and just you know, alt text is what displays when people are using screen readers. So some people may be accessing your website that can't see the image, but they can use a screen reader to have it read out what the image is of. So it's always important to include alt text.
So I'll put robot staring at camera, or maybe at you. Okay, so insert media. And now we have a robot here.
So now let's see how we can update. See, we have this background image right here that we have this lady staring here. So to update the background image, we're going to have to update this whole section.
So I'm going to click right here. And now they've clicked here, I have the editing for this box. So you can see this blue line now surrounding this whole section.
And now we can change things about this. So what I'm going to go I'm going to go to style. Now we have this image. Now I want to change this and use a different image.
So here's another cool website for finding free royalty free images, which is unsplash.com. So let me try searching for robots here. Okay, so this now we have a whole new set of images we can deal with.
Now I kind of like this one, this is cool for a background image. So I'm going to click here, go to download, I'm going to do download medium. Okay, now I'm going to do choose image, upload a file. And then I'm just gonna bring in this image again. And since it's just a background image, we don't need alt text.
So insert that media. So now we have a new image in the background. So that's pretty cool. I'm kind of looking at this, I noticed that there's a lot of space above the text, there's a lot of space below the text, that's too much space, that's easy to switch. So I'm still I'm already on the editing for this section because I click this six dot thing here.
And I'll go to layout. So I'm on the layout tab, and minimum height. So if I make this height go down, now there's going to be less space above and below, I'm changing what the height of this section is.
So that kind of that looks a little better to me. So we can get to the next section. And let's change from this text. So instead of practice areas, we'll do our focus. And then we're going to change these different sections instead of family law, I'm going to do stem programming, toys, and fun.
And then we can try to find not fun law, then we can try to find an icon that goes along with each one. And it makes it easy to change the icon. So if I just click on this icon here, and I go to content, I can go to icon library.
Okay, for STEM, I will use a school icon for programming. Let's see if we can change this to maybe a computer laptop. with a little code icon. And then for toys, content for toys, I'm just gonna scroll down and see Oh, paper airplane, like that for a toy.
And then for fun, we'll just do a grin here. Okay, now you may want to get rid of sections. So like this section that doesn't really apply to us.
So we can actually just press x and get rid of this teams. Now, this is something maybe we want. So we could change this to review team.
And then you could go through and change I'm not going to update all these names, but you would can you could update the pictures, you can choose the image to get pictures of different teammates. And then we may want to change this text. So go to style, and then for color, primary color. And then we just go through each one and change the style to make sure it's all the color that we want. Basically, you just want to go through these menus till you find the thing that find the setting that will change what you want to change.
And the great thing is pretty much everything can be changed. Now you can see I don't know why these weren't showing up. But these are social media icons. So let's say you want to get this the social media links for every person on your team. So you go in here, and you would just click right in here.
And then you would put the Twitter like HTTPS colon slash slash twitter.com slash bow Carnes. And then you would do that and put the link for each each social media link for each person on your team, you can also add new social media links. So maybe do add item, and you go to the icon library, maybe you want to add a GitHub link. So we get that icon, insert. And now we have another link.
And then you would put the link right here, you just type in the link. Okay, so let's keep going down here. This one, we're just going to delete that section, so we don't need that section. Here's another thing that we could change. So like we could change this, we could easily change the colors.
So styles, we can do primary color. And then now when you hover, it still doesn't, it doesn't stay blue. So you're gonna have to choose colors two times. So in the normal mode, and the hover mode.
So that's why you have to look for these settings to make sure you change the color every place the color needs to be changed. So we can go through and do these on these other ones too. again, you can go through and update this text, you can update this text, you can change the text, you can update this link. Again, it's so this one, you may want to use your contact link again.
So we could update this to slash contact. And then we can update the background image. So just like before to upgrade the background image, we're gonna click here. And then we can go to style. And then we could choose the image we can update the image to a different image.
Let me show you how you would have your own section. Like let's say this section is no not not like what we want, I can get rid of that section, we can get rid of this section. But what if I want to add a whole new section in between here. So what you want to do if you want to add a section is just click this plus button. And now it's going to have an empty thing right here.
So I'm going to bring over an inner section. So this intersection now has two tabs here or two columns, I mean, so we can add something different each of these columns. So if it plus here, let's say we want to add a video on this side.
And let's say we want to add an image on this side. So let me show you how you would update what it what the video is. So let me scroll over here.
So after you have to click this little edit button on the top of the corner at the video. And so we can update this video. So I'm gonna update this link, I'm just gonna paste in. And now we have a different video, we have the video, we want to be featured here. And then you can also do something like start time and time, you can change a different source if you want the video to be from some different location, can change autoplay, there's all these different settings you can change here, you probably want to turn on privacy mode.
So YouTube won't store information about visitors on your website unless they play the video. So that's just a nice thing to do for your visitors. And then then with images, we can change the image just like before. So we're going to change the image, we click on image, we can go to content, and then we can choose the image.
So we can choose an image that's already on there. This time, I'm just gonna make it simple, I'm just going to add an image that we already have. So how about this one?
Okay, and then we can even change the background of this whole section. So if I click here, now let's say I instead of white in the background, I want a different color. So I can go to style, and then background overlay, or not background overlay, I want to go to background.
And then you can change different buttons. So classic gradient video or slideshow. So you can actually have a video playing in the background.
And you can get that video directly from YouTube, I'm going to do a gradient this time. So the first color, we're going to take a blue, and then the second color, we're going to have like a lighter blue here, because it's like a black to turquoise. And now you can see there's a gradient in the background.
And I'm going to actually change the you can change the angle, I'm just gonna do a 90 degree angle. And it doesn't really look that good. But just I'm just trying to show off the different things you can do. So let's delete this whole section here.
And let's say you want your your map, you want to have a map of where you're located at. So let me show you how you would change where it shows where it shows in the map. So I'm going to go to this section.
And actually, you may have to hit this Edit button right up here. And right now the location is New York. Well, let's try Michigan, this the state I live in.
And we'll zoom out a little bit, you could also put a city or you could even put a very specific address if you wanted to. But for now, we'll just say Michigan. And let's just keep going down here.
So this is like an empty section of the page. But this only shows up when you're editing when you're on your page, it's not going to show here. So let's just look at what our page looks like so far.
So I'm gonna click Update, and then preview changes. Okay, so this is what our page looks like so far, it looks a little different. And you can go through and see, oh, there's a few things I didn't change the color of. So let's go do that.
Now that's it's good to preview every few seconds. So you can every few minutes to see if there's anything you still need to do. So I want to change that color. So let me just go to edit with El mentor. we're going to change this section.
Sometimes there'll be colors in various places. So you kind of have to click around to find out the exact spot. But for this one, it was border. And we can change the color here, scroll down, there's one good border. At this point, you probably know exactly how to change this, this stuff here, style, and to change the color of the text on these buttons.
is going to require some custom CSS. It's not too difficult, but I'm going to save this to show you for later. So we're basically done updating this main page.
Oh, lawyer firm, how about robot firm? And we'll preview changes. Okay, now let me show you how you would update a few different types of sections.
First, I'm going to show you how to delete add and delete sections to this menu here. And then how to make some changes to the news or blog section. So this news is also similar to a blog. So a lot of websites are going to have a new section or a blog section that's kind of a different type of section than the other sections. So first, let's go through and find out how to add and remove sections.
So right. So first of all, let's say you wanted to edit this section, if you want to edit just like before you do edit with Elementor. And then you would use all the same types of editing that we saw before you can edit here, you can add a new section, you can delete a section or edit the whole section just like this before.
But really, what we want to do is completely remove this section. So let me show you how you would do that. If there's a whole page in your website that you don't even want, how would you remove that? So first of all, you would see which sections you want to remove? Well, we don't want any of these three sections.
So I'm going to remove all the three of these sections. And then I'm going to show you how to add an all new section. So these are the types of things that you may want to do when you're developing your own website, you want to know how to remove a page.
and how to add completely new pages. So let me show you that. To remove this, you're not going to do it from the edit with element or the Edit page, we're gonna have to go back to our dashboard.
Just so you know, there's two types of basically pages, we have normal pages, and then we have posts. So posts are like our blog posts. And you can see these are all some sample posts that they put in there.
And then we also have pages, which are different pages, like we have the blog page, we which is I think the news page, contact back home practice areas. So we are going to do a few things. First of all, we want to, we're just going to remove some of these sections, we don't need the attorneys page, we don't we're going to keep the contacts page, we don't need the fat, the fact page practice areas.
And we're just going to delete those three pages. So I'm going to bulk actions and move to trash and then apply and click No, thanks here. Okay, now let's see what our page looks like.
Now that those have been removed, I'm gonna go to visit site. And you can see now they're not even showing up in here. So let's see how we can now add a new page. Also, I'll show you how you would remove a section from this menu, even though you don't want to delete that that page from your website.
So I'll show you that first. And then I'll show you how to add new ones. So let's say we want to remove the news section from this menu here. I'm going to go back.
Well, let me close some of these extra tabs here. I'm gonna go back to our dashboard. And let's change the menu. So I'm gonna go to appearance, and then menus. So these are how we're going to change the menus.
So I want to change the main menu and not the footer menu. So I'll select that. And so we're going to want to delete well, it still has the element, the page that we deleted. So if you delete the page, you also want to delete off the menu. So I'm gonna do is click here, remove, click here, remove, click here, remove.
And the same way, that's how you would remove the news page. So I could click here and remove. Now that didn't remove that page from our website, it just removed it from the menu.
So if I click Save menu, And then if I go to the site, we don't have the news. But if I go to the URL and do slash news, well, I guess that's not what it was called. I think was called blog. Okay, so we can still see it.
So here is the blog, it's still on here, even though we removed it from the menu. So let's see how to add it back to the menu. Go back to the dashboard, we're gonna go right back to where we were appearance and menus. And then I'm going to add an item here.
So let's do view all, I'm going to select the blog, and I'm going to add to the menu. Now this is going to be different now, because it says blog before it said news. So let's see how we can call it news instead of calling a blog, we're gonna call it news. So this is going to change what it says right in the menu item.
But actually, we don't want it to be called news or blog, we want it to be called reviews, because these are going to be our robot reviews. So I'm going to save the menu like that. And if we go back, to the page, I'll actually open up into a new tab this time.
And then we can see home reviews contact us. So that's how you add or remove sections from this menu. So now I want to show you how you would add in all new page. Okay, so to create a new page, we can just click Add New, and then we have the Add New button here too. So we're on the page section, we're gonna click Add New.
And we're going to just give this a title. For this example, we're going to do programming lessons. So people who are really into robots can learn how to program robots, how we're going to edit this after we get the title here, we're gonna go to this template. And so the default template, we're going to do a element or full width, you can kind of experiment with different things. But the element or full width will allow us to have a page without anything without any sidebars or anything.
And that's what we're going to do for this example. So I'm going to click Edit with it. Elementor. Okay, now we're editing the page.
And you can see that it still has our normal header and our normal fitter footer. But we just need to add what's going to be in here. And you can see it's going to have some breadcrumbs here with the home and the programming lessons.
And now we can just add sections here. So if I click plus, then we can just choose how many columns we're going to have. And then you can add elements into each one of those columns.
Like you could put pictures in one column, text in another buttons in another video in another, maybe a map, or maybe two columns of text, it's really up to you what you want to add to each column, I'm just going to go with the two column layout again here. And so you can see, we can also change the size of the columns. So right now we have a small column on this side, and then a larger column on the other side.
And it's always going to have this drag widget here just in case you want to add something to the bottom of the page. But when we actually preview the page, when we see what it actually looks like, it's not going to have this thing down here. So let's add something to the column.
So I'm going to do is put an image on this side and some text on this side. Now on this side, I'm going to show you how you can have columns inside of a column. So here, we're going to add an image, I'm gonna go back to unsplash and put robots And I'm going to grab this one, the rock and roll monkey robot. So I'm gonna download and instead of downloading the largest one, I'm going to go to the medium one. And then we'll go back over here.
And I'm going to choose image upload files, I'm just going to drag this over. And then for the alt text, I will put monkey robot kind of I guess not really a monkey. It's looks somewhat similar But it was called rock and roll monkey. So what I'm going to do is now put some text here.
So first, I'm going to put this text editor here. And we're going to say, if you want programming lessons, if you want robot programming lessons, you've come to the right spot, here is what we offer. And now I'm going to add a another section down here. So I'm going to go to insert section.
Okay, so now we have two columns inside this column. So on this, I'm going to add a heading. And the heading is going to be scratch. programming. And then over here, we'll have a heading, which will be Python programming.
And then we can just add more text in here. So let's keep going back here to until we can insert a the text editor, we're going to enter insert a text editor on both sides here. And so here's where we would talk about the scratch program. Here's when we talk about the Python programming. And another thing you can cool thing you can do is if I click here, I can go to duplicate.
And now actually, I have three columns, I just duplicated this column. So we can do another type of programming. And we can do JavaScript programming.
And then I can go back over here, we're going to add a button. the button is going to be right at the bottom here. And I'm going to change this instead of click here, it's going to say contact us for details.
So this basically a call to action. And then for that link, I'm going to go right to the contact page, which we are going to be developing pretty soon here. Okay, now let me publish this, I'm going to have a look.
Okay, so programming lessons. And you can see we have two sections here. And then it goes right to our footer down here. So using this method, you can add as many pages as you want to your web page. Now we also want to make sure it's up here.
So let's add our programming lessons to our navigation. So I'll go to our dashboard, and then appearance menus. And then we're on our main menu.
So we're gonna add programming lessons, add to menu. Now we can drag this up, it's going to be called home. programming lessons reviews, contact us.
And you can also have sub menus by this becomes a sub menu if I pull over, but we went all on the root level. So I'll save the menu. And then let's visit the site.
Okay, so here's the homepage. And obviously, we still have to would have to kind of update some of this text, I'm not going to go through and update all the text, but you can get the idea of how to update all this text here. And if we go to programming lessons, so here's that.
And all looks good. Now, the next two things we're going to do, we're going to update this reviews page or the blog page, we're going to update the contact page. And then after that, yeah, this isn't working at all.
After that, we're going to update the footer. Let's go to the reviews page here. So first of all, some people that make a website, they want to only be a blog, they may want this blog page with their different posts like this to appear as their homepage when someone first goes to their website.
So let me show you how to do that. We'll go to the dashboard. Okay, so how to make the blog as your main page, we're gonna go to settings, and then reading.
And then we would set the homepage as your latest post. So let me just show you what that would look like if we set that as your US post, I'll go here, go to the page again. Okay, now if we go to our URL up here, we're at the root URL, there's no slash or anything after it. And you can see it's the blog posts.
But let's turn that back. So we'll go again, we'll go to Settings, reading, and then we'll do static page. Now now we're going to set this again.
So our main page or homepage is going to be home in in our post page is going to be blog. And here's how you can actually change a little bit what your blog, your your blog page is going to look like. So you can check choose how many blogs are going to show up on each page, you can show free post in the feed is going to be the full text or summary. If you want to discourage search engines from indexing the site, Usually you're going to want this off because most people want it to appear in search engines.
But if for some reason you don't, you can click that. So let's save changes. And now let's see how we can update our blog page. So the blog page is a special type of page, that the way you change the layout, it's a little different than the other pages. So we're going to go to appearance, and then customize, no go to blog.
and then the blog entries. So we're going to change what the blog entries page looks like. And there actually is a different way to do that. If we didn't have this up, and let's say we were on our site, if we go to reviews, and then we can just click customize here, and then it should open that up that screen up where we were just at.
Okay, and then we'll still have to go to blog, blog entries. And this is where we can change what this is going to look like. So right now we have it with the right sidebar, you can't really see it. Now I'm actually going to change the zoom level on Chrome here.
Okay, so now you can see the sidebar here. And this is where we're going to actually edit, you can edit those different sections. So right now, we're not using Elementor at all, we're using the default WordPress editor to edit this blog page, you can't edit this section with Elementor. So here is where we can make any edits we want.
So one thing we can do is go to left sidebar, and it just switches the sidebar to the other side. But let's keep right right sidebar. And then it says this is mobile sidebar.
order. That means if you're on a mobile device, there's these buttons down here. So you can switch to different types of view this like a tablet view.
This is like a mobile view here. So if we change this, so now it's going to show the sidebar first, and then it's going to show the content, or we want to show the content first and then the sidebar because on a mobile device, you're not going to let show both the content and the sidebar. at the same time. So it's gonna put one after the other. So that's what this is all about.
And this would change the size of these headings, but it doesn't work for this particular theme that we're using. Let's go back to desktop view. But you can also change the style.
So large image, okay, we can also do grid, or we can do thumbnail. So it's up to you what you want your main page to look like. I actually kind of like this, I like thumbnail. And then you can change where's the image?
Is it gonna be a right or left, you can change the vertical position. So you can see there's a lot of different settings you can change on here pagination style. So we have the pages down here. So we could change it to infinite scroll.
So just keep loading more and more blog posts until you get to the end of content, which is I guess we're at the end of content now. So let's go back to standard We can also delete anything over here that we don't want. So for instance, I don't want this calendar, I'll just click here. And then I can go to remove. And then we're not gonna hook up with Instagram.
So I can remove that. But if you wanted to, you could just go into the settings in there. We'll keep the recent comments recent posts. And actually, we have this twice here. I don't know if we need all this.
So let's just make sure we only have everything. one time. So right now, you have somehow got the recent post recent comments, recent post recent comments, that's a little too many.
So I can just remove that, we can remove this. And then if we edit this recent post, you can still change things like instead of doing three posts, let's show the five most recent posts. And there's a bunch of other settings you can change to make this look exactly like you want.
But this looks pretty good. So the next thing I want to show you is how someone can how you can load create new blog posts. So let's publish this. So to make new blog posts, there's two ways. If you're in this screen right here, you can just click New.
And then suddenly you're creating a new blog post just like that. And if you're already over here, you can click Add New here. And I'm going to minimize this because we don't want to be looking at these settings all the time, you can go into those settings to customize exactly again, where everything looks like, but we don't need to be looking at those settings. So we're going to be reviewing different robots.
So let's say we're going to review the Cosmo robot, this is a great robot. And just like before, now what we could edit with Elementor. But personally, I think for blog posts, it's good to I would just recommend using the default editor, just to make everything look consistent, you want all the blog posts to look very consistent between the different blog posts. And using the built in editor instead of Elementor is one way to make things look consistent.
And the built in editor is great for just doing text or just doing blog posts, where Elementor is good for like moving around different things on the page. So we're going to use just this built in editor. But just like in with Elementor, you can still add a bunch of stuff like I can click this plus button here.
I can add a form I can add an image heading a gallery. So I'm going to add a gallery. So in a gallery, I can actually pick a lot of different images. So let's say just we could upload more images, but I'm just going to select these to show as an example, and I'll do insert gallery.
So you could potentially like have a bunch of images of Cosmo robot. And then you would show this in a gallery. And you can also insert a single image, there's a bunch of different things you can insert. And you can do browse all so you can actually these are all the different things you can put a quote, you can put a table, you can put a verse, like poetry with special format quote.
So there's a bunch of different types of things that you can enter, insert right into your post. So let's say I'm done, I'm going to click Publish and publish. Okay, now I'll view the post.
Okay, here's my blog post. So? says Cosmo robot review, this is the great robot. And then you can see this gallery here.
And then people can leave a comment here. Now, if I go to now they go to reviews, it shows up as the first review, but I noticed a few things. One, there's no image like these other ones. And it's uncategorized, usually you'll have a group that this is under. So let's go back to the post, I'll go in here, and then I can just go to Edit post.
Okay, I'm gonna go to categories. And then I'm going to add a new category, this category is gonna be called review reviews, and then add a category. And now it's going to be under reviews instead of uncategorized. So default is uncategorized.
But we may want to be called reviews. So now and you basically can add as many categories as you want. And you can put each blog post into whatever categories you want.
you can also use tags, but we're going to use the feature featured image. Okay, I'll go to set featured image, and make sure you're on upload files. And then I'll drag this in here.
And this actually is a picture of Cosmo up a Cosmo front because it's the front of them set featured image. Okay, I will update this. And then I'm going to go down here view post.
Okay, Cosmo robot review, and it's under reviews, this is a great post. And then people can leave replies here. And then if I go to reviews, we can see that appears at the top of this list here.
Okay, let's go into this review. Let's say you want to change the format or like what your blog post displays like, we can go to customize here, I've got a blog, and then single post, and you can adjusting like for instance, I can decide whether the feature images before after the title, maybe want to move the title above the feature image. Okay, so now it says Cosmo robot review, and then we have an image, I kind of liked it how how it was.
And you can even like, let's say you don't want this meta, you don't want this information right here, I can just take this off. Okay. Now we don't need to see like when it was posted, and who created it. Or you may not want to show tags, I don't have any tags.
But at the bottom would show tags if there were tags. But one thing we may want to do is decide which meta information shows up. Like for instance, maybe you don't want to show the categories down here, I'm going to take off categories. So now we don't need to know it was reviews.
And maybe you probably maybe you don't want to show how many comments there are. Okay, you just want to show the author, and then the date, or maybe you don't even want to show the author, maybe everything is going to be created by the same person. So you don't need to show who the author was for each post. And where the author, that's how we showed you how to create different accounts.
So the author is whatever account made that post. Okay, let's call this good. There's a lot more settings you can do if you want.
But I'm just going to publish this. Okay, now while we're looking at this, if you are going to use this as your real page, you wouldn't want all these sample articles, there's all these sample blog posts, and there's all these sample comments, just so you can see what it's going to look like, you're not going to want those sample articles and comments and blog posts when you actually go live with your website. So let's see how to remove those.
I'll go to the dashboard, and I'll go to posts. And then I'm just going to select all the posts except I'm going to unselect the one they just created. And now bulk actions and move to trash. So these are all just the demo posts.
And then we can do the same thing with the comments. Let's go to comments. And actually, the comments just got automatically deleted, because they were already associated with those blog posts that we just deleted.
So we don't even have to delete the comments anymore. And now let's go to our site. just let's see what it looks like right now.
If I click on reviews, or just one, there's no recent comments. And there's zero comments on this one. So you can go and see what that looks like. Good.
And people could leave a comment. Maybe I'll leave a comment right now. This is a great post.
Now, you may not want people to be able to leave a post or leave leave a comment. So let me show you how you would turn off comments completely on your posts. I'm gonna go to customize here, then we'll go to blog, single post, we go down here.
And then I can just hide comments. So now nobody's gonna be able to comment, nobody's going to be able to see account see comments or leave a comment. So now we just don't even have to worry about comments.
If you're going to do that, you're probably going to want to remove this section here recent comments. So let's just remove that. So we don't show the recent comments.
Let's publish. Okay, and let's just do a preview again. So here's reviews, it's not going to show recent comments. let's see if we can search for something. So I searched for robot and it came up with all the pages have robot not just the blog post but also the other pages.
So that's pretty nice. Okay, so now we are going to figure out how to update this contact us page. I'm just gonna go to edit with Elementor.
And so just like before to update the map, I'm going to click this here, I'm going to type in Michigan. And then I'm going to zoom out a little bit here. looks nice.
And you can put in an exact address if you want. You could also just delete this whole section. If you just right click on here, I could go to delete down here.
But we're not going to do that. So now what you're going to want to do is just change the colors here. So go to style, and then primary.
And then obviously, you would change your address to be your address. So we could change this style to primary, and then these hours. we can change this to primary, or you may not want these at all, you may want a contact form on this page.
So we're going to add a contact form right now where people can fill that out and then send an email to you. So let me put a plus here. And this is WP form is going to drag this in.
Okay, so as you can use WP forms to build a contact form surveys, payment forms, and more with just a few clicks, let's create a form, you can create it for completely from scratch or start with the template, I'm just going to use simple contact form. Okay, name, first name, last name, email, comment or message. Let's say you also want to drop down and the drop down, let's say it's going to be subject.
And then you would have a few different choices. Maybe it can be robot review programming. lessons, site, suggestion, or other, okay, and you can decide if it's gonna be required or not, we'll make this not required. That looks pretty good.
So we have the name field, the email, the subject, and the comment or message and then there's a submit form. Okay, if we go to settings, and then we go to confirmations, we can put what's going to happen once someone submits the message. So thanks for contacting us. Robots are amazing.
And then oops, not add new confirmation, we're just gonna use this one confirmation and then we'll save this, I will go out of this, we got this form. So now the form is right on the page. So what's going to happen when you click Submit? Well, it's going to send an email to wherever email you have set up in your settings in your WordPress settings. So let me show you how you would confirm that.
Let's see how you would confirm your WordPress settings. So let me update, click Update button down here. Now preview changes, we'll just see what the form looks like really quick first. So here's the form, you can select the subject.
Let's go to our dashboard. Then we'll go to settings general. Okay, so we have the email address bow at free code camp.org. So this email address should get a an email if someone fills out the form. Let's test that.
I'm gonna go to contact us. And I'm going to put name Quincy. Larson Quincy at free code camp.org. I'll do site suggestion, update your footer, and I'll click Submit. Okay, thanks for contacting us.
Robots are amazing. Okay, let me go into my email and see if I can find that email. And here's the email.
Now it did get marked as potential spam. But since I basically had it sent to myself, I know it's not a spam. So I can say look safe.
And you can see name, email subject, and then the comment message update your footer. Oh, that's a good idea. Quincy. Thanks, I should update the foot footer.
Okay, so that worked. We can now our contact form works. Okay, let's go back to our page. So now that we have the contact form, let's go back to edit with l mentor.
First, I don't want to deal with people calling me or actually coming to my house or anything. So this contact page, I just want to have the contact form. So I'm going to delete this section. So now just have the map, and then the contact form.
And that's pretty good. So let's take Quincy suggestion and update the footer now. But we're going to also update this little header to I'm gonna show you how to update this line up here, and then the footer down here.
Okay, so let's first preview. Okay, and now to update this header here, and then we'll update the footer, we're going to go to customize. Okay, so this thing right here is called the top bar.
And this part right here is called the header. And so we can update the top bar or the header. Let's so let's go to top bar, the general, and we could just disable it completely.
That's maybe one thing we want to do disable the top bar, I can't think that looks good like that we don't really need to show a phone number or the social icons. But let's say you do want to show them. So let's go to enable top bar.
And then we can see well doing a hide on mobile or hide on tablet or just showing all devices, we can change the colors, we can change different colors and paddings. But let's go back here for the content. And right now the content is call us at this phone number. But maybe you want some sort of call to action, like check out our new programming lessons. And then let's say we want to change these social icons at the end, you could just disable them completely.
Or we can enable them and just enable just have certain ones. So you can see there's all these options. And if you put a hash mark, that's just an empty link. If you if you don't have anything, it won't show up on here.
So let's we're not going to have Skype, we won't have LinkedIn, we won't have Instagram, let's say we only want Twitter and YouTube. So now it's just Twitter and YouTube. And we can actually just put our Twitter page, we can put our YouTube page right here, whatever we type in here, like if I say, hbs colon slash slash youtube.com slash free code camp, and let's say it publish.
And we'll put that. So now if we click here, the YouTube button, so now opens up the free code camp YouTube channel. Let's close that. Okay, so now we know how to update this.
And then I already kind of showed you how to update this header, I just showed you where you click. But let me just show you a few of the options you can do for that. So click header, we can change the height, we can change the background color, maybe you want to darker, we'll just go back to default, white default.
And then there's just a bunch of other things you can change here. And just making the you can change update your logo, the menu, the mobile menu, because when it's a mobile device is going to look different. So I already kind of showed you that.
But yeah, you can click mobile, I'll show you what it's going to look like when you're when it's a mobile device. And you can click the menu. And this what the menu is going to look like as a mobile device.
Okay, let's go back to this. Okay, so we know about editing the top bar, the menu. Now let's go down to the footer here. There's a lot of stuff in that footer, a lot of stuff we're not actually going to need. So there's two sections, there's this section, which are called the footer widgets.
And then there's this copy of this bottom bar called footer bottom. So let's update the footer bottom first, it's just going to say copyright, you may not want to say ocean WP theme by Nick, maybe you just want to take that off. Maybe we just want copyright 2001. And then these links down here are going to be the footer menu, which I'll show you later. But we got this footer bottom updated. And you may want to update the footer widgets.
So here we can update the color and everything, and some general things. But another thing you can do is just click on this, like you may not have a newsletter. So this is set up, if you do have a newsletter, you can actually set up to work with MailChimp. Now it takes a little bit of bit more setup. And for now, it's kind of outside of what we want to do.
So I'm going to remove that. We already have our social at the top, we don't need them at the bottom. So let's just remove the social.
it works the same way as the stuff at the top. And now I don't think we need this practice areas too. So we just want to have the contact us we just want the about us in the contact info. So I'm going to remove this again. And now we just have these two columns, but it kind of looks weird that they're squished.
So let's make these so they fill up the whole thing. So let's go back to the footer. Actually, wait, footer footer widgets.
And I'm going to do two columns, there's only two columns here. Okay, we have two columns, we're not seeing both columns. So what we can do actually is go to the widget section here.
Okay, let's go to footer widgets. And let's do okay, we have three columns here, we just want two columns. So we're going to go to two columns here.
And it looks like we lost one. So to get that back, we're going to go to widgets, footer two, we'll see footer one is how we would update the about us. Let me show you that. And then we'll add the second one back.
So this is how you would update the about us, you can say we write the best robot reviews. And you can update this, check out our reviews. See this P just means paragraph, the beginning of the paragraph, the end of the paragraph, the beginning of the paragraph, the end of the paragraph.
And now you can see a means anchor tag, or it's just a link. So first footer, so this is a link. And then this is the second link, the link goes nothing, we don't have an about us page.
So we're going to take this whole section off. And then we're just going to have the contact us page. And again, we're going to go to the same page we keep going to So that would be robot family reviews.com slash contact.
So now this button will go to the contact page. Okay, click Done. And then we'll add the second footer section. And I can do add widget now I can there's all these different things you can add as the widget, an image gallery, page, calendar, audio, Twitter.
But we're going to add contact info for the widget. And you can see that it has all this information here, but it's not showing up. If you just change something in here, like I could say, Contact us today, then it's going to show up.
Sometimes you just have to change the text to make it show up. And then you can update the street the phone so we can actually modify some of this stuff like we don't need so many phone numbers. We're just so let's say we only want the mobile phone number.
So we can just basically if you just delete everything here, it will go away. And so we don't want fax. I don't know if there's too many people that use fax anymore.
And then we can keep the email address, which is going to be bow at free code camp.org. And then we just duplicate that. And website, well, we're people already on the website.
So we don't need to share that there. Okay, and you could change the address to and then we have these this button here. Now, for Skype, we don't want that. And that's what we want.
So I'm gonna click Publish up here. Okay, I can close this. And we got our website.
So now I'm just going to show you how you change this menu down here. So to do that, we have to go into our dashboard. then we'll go to appearance. And then we'll go to menus.
And then we go to footer menu, select now, so you can change which links you have here. So let's say what if I want my programming lessons in here, I can add that to the menu here. And then if I can actually just delete some of these other things, so remove, remove. remove.
And if you didn't want to remove it, you can just change it, you would have to update the URL and then what the label is both just save the menu. Let's see what it looks like with just that one item. So I'm gonna go to the site. And you can see it just says programming lessons.
That looks kind of weird. So let's just remove the menu altogether. And then I'll show you how to update this. this should show like an up arrow if because it navigates to the top of the page. But right now, it's just a box here.
But let's remove that menu first. So I'm just going to go to the dashboard, close these extra tabs. And then I'll go to appearance menus.
And I'm just going to delete the menu and then save that we go back to the site. Okay, now we don't have the menu. And then let's update the copyright notice copyright 2001. I think I typed that in earlier incorrectly. So I can go to customize a footer bottom, and then that should be copyright 2021. Now let's change with this button with this, I said we'd get back to this where we change that button. So it's blue there.
So I've already showed you a few places where you can update colors. And if you see something on your page in your theme, and you cannot figure out how you can change the color of that item, it could be in the custom CSS slash JS tab. So if you go here, this is a little tricky to update, because you are going to need to know a little bit about CSS.
But you don't have to know a lot, you may be able to figure this out. And if you don't want to even bother with it, you can always just delete this button, and we don't even need a button in the about us page. But if you really want to try to figure out how you can change this, you can look for some comments. So anything like this is a comment.
And we can see this as button in the footer. So we know this is probably something that's going to change any buttons that are in the footer. And then remember, we know that the anything that looks like this, these are colors, these are the hex colors that we saw before.
And you can see, oh, color. then it has this. So what I'm going to do is just paste in that blue color from before we have this hex, I'm just going to paste in that color. And then it changes to the right color.
So we can click Publish. And that worked. So I'm going to go back.
And the last thing I need to do is update this thing right here, this should be an arrow. Okay, so to update this, we're going to go to general options, then scroll to top And then we're just going to select what we want it to look like. And so I'm just going to create this two arrows.
But you can also there's a lot of other settings, you can change on that. And then you can also turn it off. If you don't like it, you can just turn off the button. And actually, you think I think I'm just gonna go with turning off completely, they'll go with publish.
And then this, let's test out the site. Okay, obviously, there's more things we can update. But I think you really know everything for all the things you have to do to update the site. Okay, we've reached the end. You should now know how to create your own WordPress website and customize it to meet your needs