1 Hour Wordpress Website Design - Build a WordPress website with no coding knowledge. | Melissa Taylor | Skillshare

1 Hour Wordpress Website Design - Build a WordPress website with no coding knowledge.

Melissa Taylor, ✨Web & Graphic Designer 20+ Years✨

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (53m)
    • 1. What you'll learn in this class. (HINT: You'll learn a LOT!)

      1:11
    • 2. Register your web address, setup hosting, install Wordpress, install a free theme

      8:10
    • 3. Overview of the WordPress Admin area

      5:10
    • 4. Use the page builder to edit and create pages

      13:51
    • 5. Updating header, footer, fonts, colors and other theme options

      13:46
    • 6. How to build a page from scratch then add it to your menu

      9:45
    • 7. Wrap Up & Class Project - Build your WordPress web site

      0:57
54 students are watching this class

About This Class

Want to build a Wordpress website yourself but don't have a lot of time or know-how? Then this is the perfect class for you!

In this class you will be taken step-by-step through how to:

  • Search for and register your domain name/website address
  • How to setup basic hosting for your website
  • How to install WordPress onto your hosting platform
  • How to preview then install a FREE WordPress theme

Then once all that is setup, I will show you how to use Beaver Builder, the page builder for WordPress that comes with the free theme we use in the class. Beaver Builder is SUPER easy to use as it has a drag-and-drop interface and comes setup with templates you can use to start your page, various elements you can drop onto you page to setup galleries or your social profile links. You're going to love it!

You will also learn how to:

  • Customize your website color scheme
  • Upload your own logo
  • Select fonts to use in your design
  • Modify your menu and add new pages to it
  • Edit the elements in your footer and copyright area
  • View and edit content in the site widgets
  • How to view and use stock images in your site design
  • How to add and edit slideshows and galleries on your site
  • The basics of the WordPress admin and what you can do within it

This is gonna be great! You will truly learn how to do everything it takes to build out your website in just an hour!

39ecbcc1

Transcripts

1. What you'll learn in this class. (HINT: You'll learn a LOT!): Hey, everyone, and welcome to my class where you are going to learn how to build a WordPress website in one hour. Truly, I'm going to walk you through the exact steps on how to register your domain name, which is also called a Your L or a website address. How to set up your hosting account and install WordPress, and then how to install a free theme onto your hosting server. Then I'll take you on a tour of the WordPress admin area and the Themes settings. You'll learn how to use the page builder that comes with the theme. How did change colors and thoughts on your website? How to upload your own logo? Change out photos, set up pages and columns and rows using pre design elements and widgets and more. It's gonna be great, so you'll learn all the things you need to know to build your website from start to finish . I can't wait to show you how it's done and then see the website you'll build during your class. Project it even struggling to get your website going or you're just not sure you understand all the things you need to do to set it up correctly. This class is the one for you. When you're finished with the class, you will have a solid understanding of what needs to be done and all the tools you need to build out your website. There was a lot to cover, so let's get started. 2. Register your web address, setup hosting, install Wordpress, install a free theme: All right, so let's get started Building out or wordpress website. So there are three things you need. In order to create a WORDPRESS website, you need a domain name or you are ill website hosting and the WordPress software. So the domain name or your L is the website address that users type in to get to your site . Website hosting is a server or computer that stores all of the files that make up your website. So some examples of hosting companies are site ground WP engine go, daddy or flywheel. And the WordPress software, obviously, is the software that you're going to use to build your website. So let's take a look. Getting your domain name registered and then how to set up your hosting. So there are hundreds of websites where you can buy your domain name. I like to use go, daddy, because they're one of the original domain name registrars. So for the purposes of this class, we're also going to set up our hosting with Go Daddy. This makes things really simple because since the domain name and the hosting are set up with the same company, they work together very easily. So we're going to go the easy round register a domain and register are hosting on Go Daddy , you started. We need a domain name. So if you go to go daddy dot com right here at the top, it says, Find your perfect domain name and that's where you going to type in the Web address that you want to purchase. So for this class, we're going to try and purchase skill. Share wordpress class dot com. You do a search for it and it will come up and say, Yes, your domain is available or it will say No, it's not available and it would give you some other options or you can try again. So it says here that this domain is going to cost you $2.99 which is a little misleading. Basically, what it's saying is it's to 99 for the first year, and that's your discount. And then it's 14 99 for each year after that, and you have to find it for two years, so the price is not actually going to be to 99 but this is the domain I want. I'm going to go ahead and register it and, ah, use it. If you look down here, you'll see also gives you a few other options for a dot net dot organ dot info versions, which you can also do. And then if you go down a little more, there's a few other domain extensions you could also purchase if you wanted to. And then I'm going to continue to my cart so that I can purchase this so it's going to do a little bit of up selling. But some of them you might actually want, so you can add privacy to your domain name registration, and basically what that does is it hides your personal information in the domain registrar database for this class. I'm not going to do that. I'm just gonna say no thanks. And then you can create an email address that matches your domain. I'm going to skip that as well and continue with these options. So now we're in the cart page where we can purchase our domain and you'll see over here it has me selected to automatically sign it for two years for this domain, so you'll see that it's 17 98 for the domain. I'm just gonna register one year, and that's gonna be 11 99. So I'm just gonna go with that. But I already have an account at Go Daddy. So I'm just going to sign in. If you do not have a go daddy account, you would click, create account, and it will walk you through all of the steps to sign in. So I will just sign in. So now I'm sign into my account so I can pay for this domain name. So I'm just going to say, complete purchase. And now I have purchased my domain name. So we want to skip all of this. We do not want to use go central website builders. We're going to skip and manage domains. So that's going to take us to our list of domains that I have a lot of domains registered a go, daddy. So we're just going to select the skill share wordpress class dot com and click on the name and that's going to take us to our domain settings. So now what? What I want to do is I want to use this domain to build a website to all click use my domain and I want to build a new website and then it's going to take you to a page where it's going to suggest to you that this product that you need, basically all you need to do with scroll down here and it's going to ask you what kind of posting that you want to set up The best type of hosting for a WORDPRESS website is WordPress managed hosting? Basically, those servers are optimized to better support a WORDPRESS website, and they're set upon the correct platform with the correct software that WordPress needs to run. So I always suggest managed WordPress hosting instead of just basic hosting. So we're going to choose our plan for managed WordPress hosting. So they have three plans that you can get for managed WordPress hosting on Go Daddy. I generally start with the basic plan. It will let you set up one more press site. It has plenty of storage, a good amount of monthly visitors and it has some free themes that you can look at. So I want you to take note of this. So 309 a month is if you sign up for three years after that, when you renew, its gonna be 8 99 months. So keep that in mind. So I am going to sign up just for one month for the purposes of this class, and I'm going to hit by and I'm going to double check that I signed up the basic managed toward press one month it costs $9.58. I'm going to pay with PayPal, so I'm just going to say, complete purchase. It's going to process that purchase, all right? And that's it. So it has gone ahead and purchase that WordPress hosting plan for one month, and now I'm going to set up my WordPress. Okay, so now that I have registered my domain name and I've said it my hosting I'm gonna come down here to manage WordPress, and I'm going to click add site. So I am building a brand new site. Chocolate get started. Now it's gonna ask me to pick the website domain that I want to associate this website hosting with. I'm gonna go back down and I'm going to find skill, share wordpress cost, and I will say next. So that's you to choose the data center. So I'm in North America. I'm going to choose North America. So now I'm going to create my WordPress. Loggins. You have to create a user name and password. So generally I would say something like the name of the girl, plus admin just so I can remember it easily. So I'm just gonna say, skill share admin, and that's gonna be my user name. Just going to come up with a quick password here for this website. Looks like I've hit all the criteria. So let's go confirm that it looks like they match. So now I'm going to install WordPress. Save that now, Here's the important thing. You really need to write down. They use the name in the password that you just created. I believe that Go. Daddy will send you your user name. And I believe that you can retrieve your password from Go, Daddy. But it's not going to send you your password. So when you put it in, write it down on a piece paper so that you can have it for later. Okay, So now WordPress is successfully installed. Quick get started, and it's going to take us through a WordPress wizard to get the website set up, so I'll click. Start Wizard. You can tell them about the type of site you have your industry and what your title and tagline are gonna be. So let's say it's going to be a website in a blogger, and it's going to be in the oh, let's see art and design category and the title is going to be move skill share WordPress class, teaching you how to build a website and then you can put in your contact information, so I'm just going to have info at We'll share a word thus dot com my phone number Max number your street address, etcetera. If you have Social media profile is, you can click on them and you can insert whatever your facebook instagram, twitter, etcetera, accounts are click continue and then you can come in here and you can choose a thing. If you click on it, you can preview what the same looks like. It will walk you through a little wizard of how to go. Win and customize this. I'm going to select this 1st 1 primer and hit select that's gonna install theme so it is installed your theme and you can see a preview of how it looks right here. Okay. So now you've registered your domain name, set up your hosting, installed WordPress and installed a theme on your website. All in About what? 15 or 20 minutes? Not too shabby. So next will review the WordPress admin and we'll start building at your site. 3. Overview of the WordPress Admin area: now that you have purchased your domain name, set up your hosting and have a WordPress and free theme installed. Let's take a quick peek at the WordPress admin area so you can get a feel for where everything is and what you can do. So what? You're logged into your WordPress website. You'll see a few things going on here at the top of the page. So this black bar indicates that you were logged in to your WordPress website. It's going to say hello to whatever your admin name is. There's a few things you can do here. You can enter your profile, you can log out. You can set up an avatar here if you'd like that. Go. Daddy will give you some of your account settings. Fleischer. Cash, that kind of thing. This will take you directly back to go. Daddy, If you are not hosting your Web site with Go Daddy, you will not see this option Here. Page Builder will allow you to edit any page using the beaver builder page builder that's installed with your theme. Or you can edit it the traditional way through the WordPress Editor. New will allow you to create a new post at a new image, create a new page or create a new user. This icon will tell you have any comments you have on this page? This number tells you how many revisions you've had to this page. This is a shortcut, Tore. You can customize your website, and this w over here will give you some more information about WordPress itself. Now, to get into your WordPress admin, you're gonna go up to your site name and then you'll see a few different options. Dashboard is a good place to start, but you can shortcut to the themes, widgets or menus. So I'm just going to click on dashboard here, and what you see now is basically the WordPress admin. This is the starting page that you'll come to when you log in. It's kind of, ah, overview of everything you've got going on on your site. It tells you what version of WordPress you running. It has a few different things and shortcuts up here. This updates link will take you to your updates page, and it will show you anything on your site that's out of date or that has an update available you want to go through and keep these things updated as often as possible again. Go, Daddy. It's a very similar shortcut to what's up here. Post is where you're going to create any of your blog's posts. Media is your library of images and videos and documents. Pages will contain all of the pages of your sites, your home page about contact and that kind of thing. Comments will house all of the comments that anybody puts on your site. This forms element is a plug in that was installed, and it's called Ninja Forms, and it comes with this theme, and this allows you to create some pretty interesting complex forms through a ninja forms. Plug in appearance gives you a bunch of different options, so basically, this is where any themes are housed. So let's say you go when you upload three or four things, you'll find them all here. Customize will allow you to go through and customize the colors. The fall. It's some of the layout, the items that are in the footer and that kind of thing. Widgets are similar to customize in that some of the items that go into the footer or the sidebar will be found here. Menus is an area where you can update the navigational structure of your site. Header lets you update the header of your site, which you can also don't customise. Background lets you update background of your site, which you can also doing customize. And then editor is where all the code for your site is. And I highly recommend you do not go in here and mess with any of that code because you could break the site very easily. So try and stay out of that one. Plug ins is where you can go and add in features and functionality to your site. So there are thousands and thousands of plug ins that have been created by developers for WordPress. And let's say you wanted to do something like at a slide show or a form you would go to plug ins. Search for a plug in that suits your needs, and then you can install it. The users are where you can add new users who are able to log in to your site. You can also give them certain permissions. So let's say you have a ghost writer who is going to be doing all your blawg post and you want them to be able to come in and create a blogger posts for you. But you don't want them to go and edit any other pages of the site. You can give them special permissions to Onley. Be able to create log post tools is something you're not going to use a lot. You can export all the data from your site or import data from another site. So let's say you had an old WordPress blawg and you wanted to export all those blawg posts from your old site and import them into this one. You would use the tools here. The settings Tabs has a lot of different options that you pretty much go in and set up when you start your site and then really never go back to again. It kind of sets up the back end of your site, and most of the time you're not going to need to change any of this. So we'll go over some of these options as well. This item will let you collect your menu to make it smaller. And then lastly, there's video tutorials that comes installed with your go daddy hosting that will walk you through pretty much every single thing that you can do in WordPress. It's basically like a WordPress wanna one class. So it kind of walks through all of these over here and gives you a video tutorial, So be sure and check that out if you get stuck, and that's basically it. That's a real quick overview of the WordPress admin. In the next lesson, we're going to start looking at the website and building out and customizing some of the pages. 4. Use the page builder to edit and create pages: Okay, Now comes the fun part. We're going to customize and create your website. So as you know, we installed WordPress theme as kind of a template from which we're going to build your site. So this is a great way to get a jump start on your site design without having to build everything from scratch. As we go through the page builder, though, you'll see that you can build a site from scratch using this builder because it's super simple to use. It's called Beaver Builder, and it's really intuitive. It's Dragon Drop. It's almost foolproof, really. So first, let's go over the basics, and then we'll do some editing and building out of new pages. So a really easy way to get to your site to see what it looks like is to go up here and either click on the house icon or click on the name of your site that will take you directly to your home page. So now what's on your home page? You can see that there are a couple different sections. There's three columns here, two columns with an image this little bit that kind of slides in the footer area in the copyright area. And then this bid at the top is kind of your masthead or your header area. And here is your menu. So basically, there are two ways that you can edit any page on your site. You can click edit page and that'll take you to the classic old school way of editing things via the WordPress text editor. Or you can click on Page Builder. So if you click on page Builder, so this is the Beaver Builder Page builder framework, and you can see there a few different things you can do here. There are templates you can load in tools you can use. You can click done when you're finished. You can upgrade to a paid version. Here's ah search area or help area. Now this area down here are the different items that you can add to your layout so you can add a row in various columns. You can add a left right or left and right side bar. You can have some basic modules here. Audio html photos or images, a text editor or video. Some advanced modules that come with this fever builder are called actions, which are areas of text with the button, a call out area, a content slider, a gallery and sidebar where you can add WordPress widgets. So all these widgets come already installed, and if you drop it into the page, then you could just customize it. So let's take a look at what we can do here. This section is edited within the customized area, so we're not gonna edit this right now on this page. But all of these elements down here are edible, and you can tell, because when you roll over them, they turn blue and they get a little toolbox above it, so you'll see this in the image. This call to action, the area in the footer that's also edible during be a the customized area and this copyright area. So basically, the footer and below and the menu bar and above are edited elsewhere. Everything else in the body of the page is edited on the page itself. So you see things are set up in rows. So here's the row, and it has three columns and within the three columns or text in an image in a headline. So let's say we want to edit this you can either click on this little wrench tool where you can just click within the box itself, and now it gives you the information for what's in this box. So product and services the headline. So let's say we want to change that to my new headline and then you can. That's more text here. And then if you wanted to lose if you wanted to, you can go and you can change the style a little bit. Let's say you wanted to be centered and let's say you want the heading size to be a custom font size, so maybe it needs to be a little bit bigger, so we changed it to a little bit bigger. Now, if we want to change this photo out, we can do that here so we could select if we wanted no photo at all. When it would remove it from the page, we can say photo. You could also add an icon if you wanted it to be a symbol instead of an image. But for right now, let's go look at the photo so we can edit the photo that's there, or let's replace it with something different. So Let's say I want to use this picture. I would just click it and hit Select and it would drop it right in. So let's look at that real quick again. So if I wanted to replace this, this takes me to my media library, and they're going to be some preloaded images in here. But there's also an area for stock photos where you can come in and you can choose a picture from some of the go daddy library. So let's say I wanted this park bench as my image. It'll show you what it looks like and then you can read about the licensing here. So basically the images that come pre installed with this same are licensed for Go Daddy hosted customers on Lee. So if you were to create your website here on go Daddy and then a couple of years down the road, you decided you wanted to go and host it somewhere else. You wouldn't have licensing anymore to use this image. So just keep that in mind. But for now, since you are hosted with GoDaddy, you can use any of these stock photos. So I'm going to say import, it's going to import that image from Go Daddy's Stock Photo repository and add it to your website. So now it's accessible through your media library, so I'm just going to select that photo and then it's going to replace it right here, so I don't want to crop it. I'm gonna leave that as it is, But you could go in and you could say, Crop it into a circle. That's kind of cool. And then let's say we wanted to make the headline go above the photo. We would just say that the photo goes below the headline, and then it moves it up. So a lot of different things you can do here now for the coda action, which is this. Learn more link right here. Please click on the next tab, and let's say we wanted to say Click here instead. It would change it, and then if we wanted to link it to a page on her site, you can click, select, and then you can type the page name. So let's say we wanted to go to the about page. It's going to go through and it's gonna find the about page, and then it puts the Lincoln automatically for you, so that's really convenient to not have to go and hunt around for the length of that page. So if we want this called action to be a button instead of text will click button and it will change to a button, which I think looks nice, and we can also select an icon. So let's say we wanted to have, um, right hand arrow and we wanted to be after the text. And there you go. So now we have an icon click here and a button instead of text. Now let's say we wanted to change the colors. We can come in here and we can do that so you can see. I'm not sure if it's doing it now, because I'm not on it. But let's say we wanted the hover cover color to be blue. I don't know if that will change right away. When we hit, Save will go back and we'll check that if you wanted the button to be a great you could do that here. Um, you could change the width of the button. If you want to be a full width of that column, you could change that. So it's much longer and see it updated right there. Change the font size, etcetera. So you kind of get the idea. You can go down and do a lot of different things on the buttons. The advanced tab is going to give you a few other options. If you wanted to say at some more space here to the top, like 50 pixels, you can see it pushes it down. You change the left and right padding to make the column or narrow, and that kind of thing put that back now responsibly out basically just means that it re formats the page toe look good on mobile devices, so let's say you're on a tablet or a cell phone. You don't want this big, wide page. You want it to reformat to the width of your screen so that it's easier to read your not having zoom in and out. So that's what responsive means. So this page is set to always be responsive, so I'm going to leave it there. I always wanted to display. I don't have any animation set on it yet, but let's say you wanted this box to slide in from the left. You could choose that, and when you load the page, it will slide in from the left. So lots of different things you can do with each element. So I'm going to click Save. So then let's go and save the page. So this is not published yet until we click done. So I'm gonna go ahead and click done, and then it's gonna ask what we want to do so we can save and exit. Discard the changes in exit or publish. Now, if you publish it, it goes live right away on your site, so just be aware of that. I'm going to click, publish changes, and then it takes me back to the page after it's been published. Now did you see that fade in? That was kind of cool. And then you'll see that your button hovers. The changes to blue when you hover over it and see if we can do that against you can see it slide in. See, it kind of kicks over a little bit, so that's really nice. All right, so let's go and see a couple other things go back into the page Builder. Now what's really cool about this is Let's say now you've got this set up. You have the circle image. Have a button instead of a lank, your headlines above the image. I don't wanna have to go through and do that on every single one. So what I can do is I can delete this and then I can delete this, and then I come back over here and I click on this two pieces of paper, which means duplicates. And once I do that, it drops it down below. And I just grabbed this four arrow icon to move it. I'm gonna put right here, and you see, you get a blue bar wherever it's going to place it on the page, right? So I'm gonna drop it into that box, and there we go. So now I have all the same settings. I could go into this wrench icon again, and I can change it as I need to with a different image, whatever I need to do. So that's a really quick way to continue to build at your site by using similar elements and then just changing the content for those elements. So I'm gonna go and duplicate this again and then drag it over here into the third column in their most set. All right, so it's very similar to how it works down here. This is just an image element, and this is text so you can go in and click on the wrench icon and change either of those. If you wanted to make any changes to the row itself, would come up to the roast settings and click on the wrench icon, and then you can do, oh, a couple different things. Here you can add more padding to the top and bottom, whether or not you want to display it to all users, if you want to be responsive, that kind of thing. And then this is a call to action, which they had dropped in. So let's say we wanted to add some other elements to this page. I'm going to click on this, add content, but and I want to add an advanced module of a call out. So I'm gonna click and drag, and it's gonna let me put it wherever that blue bar is, so I'm gonna put it right here, and Michael, that's going to be get in touch today, everything is on sale. All right, so let's move this over here so we can see. And I'm going to change the style to bay centered. I want it today an h to tag, which you can set up within your setting. 40 pixels going to add an icon fun. And we want it above the heading which is already doing. And then we can change the color of the icon as well. Let's make it this purple color. No, Grady in. And we want the size of the icon. Let's make it really big. 100 pixels. All right. And then if we wanted to have a link, we would type the Lincoln here. Same window, and let's see what this will do, then add a button to it right by today. All right, so there we have it. We're gonna click, save. Whoops. It looks like we've missed an option. It's giving us an alert, so I have to have a heading. So don't miss out on sale gonna save that. And now you have this really nice call out that is really gonna grab attention on your site . So I think what we could do here is. If we wanted this to be on a background color, we would click on the roads settings. Then we will go down to background, make it a color, select the color by clicking the eyedropper tool. We really wanted to stand out. We're gonna make it yellow. I don't know if you saw these other options. You can also add a photo to the background. It might be kind of interesting. Let's see what we could do here. Let's do this one. And as you can see, it's pretty crazy. Um, and then we also have the color back there. But that's not showing cause the photo is over top of it. So let's remove the photo. Change it just to color. I can change the opacity of this. So let's say I don't want it quite so bright. I can add a border to it, maybe a dashed border so it looks like coupon. And then let's say I want that border to be thicker. And they're now I've created this not so beautiful but very functional whole section on the website. Just by dropping in that content element so you can see it's really easy to go in and adult elements to your page or to customize the elements that already exist on your page. So let's click done. We're going to save him. Publish this and I'm gonna go show you how to make edits to this. Header Two men, You into your footer. 5. Updating header, footer, fonts, colors and other theme options: So next we're going to talk about how to update this masthead area, your menu and your footer and then some of the other elements on the site, like the main site color scheme, the fall. It's in that kind of thing, So to do that, we can get to it two ways. One click right here and go to the customized section. Or you could go back into your WordPress dashboard and you can get to it from there. If you go over to appearance and customize, there's also a link to get to it from within the dashboard. So let's click and go to the customized section and see what we can do. Once you're in this section, you'll see a preview of the page that you're on, which is your home page, and you'll see all these different elements on the side that you can use to customize the look of your site. So if we started the top, this is the site that you're on my skill share WP class and the thing that you're using side identity that basically lets you update the title of the website that you see here in the tagline and then the text that's in the copyright area of the site. So that's what's right down here. If you want to turn off this primer WordPress theme by, you can do that by selecting here, and I like to keep that turned off. So if we go back up here and look at some of these things, I don't know that I want this information to display on my masthead here. I think it detracts from the rest of the message. I'm going to delete that, and I'm going to delete this and you'll see they disappear from the site. And then, if you want, you can add a logo to the page. So I'm just going to go and find a logo real quick that I created and dropped into my media library. Click Select. I'm going to skip cropping it because I wanted to be the size that it is. So I'll click skip cropping and then it drops it right into the site. And then if I want to add a favor icon, which is basically the site icon that displays right here in place of this little paper icon, I could do that and add it right here. So once you've made your changes, you can click publish now, or you can go back and make some other changes and click publish when you're finished with everything. So let's look at the layout options, so we have our site set to a fixed with. You can also set it to a fluid with, and what that will do is if you move your browser window in or out, you'll see that it changes right away. We have a fixed with so that it doesn't break until it gets to a certain size. So then, if we go back and we look at the next option, that's the colors. This is where you can set the full color scheme for your site and then different elements on your site. So if we go to the main color schemes, the base color scheme here is set to default. But we could make it something else. I think the plum looks pretty nice, changes everything to this nice purple changes are your buttons changes your footer area. I think that's pretty nice. There a few different options in here that you can do a muted thing. That's pretty nice too. So let's stick with that one, and then you can also go back in and change elements individually. So let's say for this hero image, we wanted to change that background to be a something a little more pink so I could do that there. I could also change the hero text to be, Let's say black now if we still have the title text in the tagline text, we could change that here, but we've removed those so we won't be changing those. And then you can change the transparency of this hero background color to be more or less opaque. So I think that works right there that if we go to the menu options, we can change the background color for the menu individually. That's terrible. Let's do something a little bit nicer, right? That's a little girly, but I think it works. And then if we want the text to be a different color, we could do that here as well. So could make it black or orange or yellow. I think the white works nicely. Then we'll go back and change the buttons. See the buttons now where this kind of plummy, dark color make that a little pinker can also change the text color There, the content of the page. Let's say we wanted the headings to be black. You can see they changed here and then we want the primary text to be black. I see it changed here. It was a little bit lighter. It was a lighter grey. So we're gonna make it darker color, secondary text. So there isn't any secondary text on this page, but you'll see here it will tell you exactly where this will show up. So common counts. Post footers quote photos, and that kind of thing will be in red link text. So if we have some text links in here No, there any text links. So this is a text link. So let's say we wanted that to be green. See, that changes here, and then the page background color is this color right here. And if we didn't want that to be that kind of gray color, we could change it to, let's say, a little more green. And then the content background is the color that goes behind all the content on the page. I'm gonna leave that it's white and then for the footer we can change the widget headings So those the widget text just kind of a blue. Let's make that black. The background of the widgets change that whole area a little darker the content background for each of the widget. So if you didn't want it to be white, you could kind of make it If we went in here. We copied this color, pasted it here. Then they would look the same color like there weren't boxes. If I did that, I would probably go and change those toe white. And then the text a white that looks a little bit better. And I would go back and I would change this link text. No. Maybe to be something a little lighter. Maybe Like that that looks better. And then what else? In the foot of the copyright text, which is down here. I think I want to make the copyright background black and then the text for the copyright White. Okay, so now we've got everything set. Not pretty, but you get the idea. I just kind of want to be able to show you really specifically on screen. What? Things are changing. So Then once you're done with all your colors, you would go back and even hit. Publish and now that's live on your website. So let's go back one more. So let's go to thoughts next. And there are a few phones that you can choose from right here. It's a nice selection, so I like railway. Let's try that one. It's just a little bit prettier, in my opinion. And then we could make the navigation Also be railway the headings see them changed a little bit and then I'm gonna leave the others, as is You can go through and change those to the fonts that are available there. The header media. So this will let you change this background image, and it's really similar to how it works. With other images in the media library, You go and you at a new image. Go find it in your library. This one. Select it. You can crop it if you want to. I'm gonna skip the crop, and then it's gonna go in, and it's gonna replace that image with the one we just picked. And then you'll also notice up here that you can go in and you could put a video is your background, so I don't have any videos on my media library right now. But if you had a video, it tells you right here to make the dimensions 2400 by 1300 uploaded as an MP four, and then it will play video behind your text up here, which is kind of a cool effect in the background image would be the image that goes kind of where this greenish color is. It works the same way you would select an image and drop it in to go into the background. Let's try this one so you can kind of see it back there. Just a subtle effect for the menus. This will let you choose which menu to display in this area. So in WordPress, you can create multiple menus as many as you like, really, and then you can put them in various places on the site. I'll go back, and I'll show you the menu area as well. But basically, that's just let you select which menu to adhere. So you have a primary menu, and if you wanted to, let's say, have services be before about us, you'll see the down here. It changes it right away. And let's say you wanted to delete one of these pages. They want to delete services Page. You would just click this down arrow. You say it toggle set up and down. This is where you can change the name of your page. So let's say I wanted the menu item to be in upper case. I would just have to go through here and then type all of them in upper case for that to work. But let's say I wanted to delete the services page. I would do that. I would come down here and have a click removed, and then it takes it right out of there. So if you wanted to use this primary menu in different places, if you wanted to use it in the Footer, you would just select right here and click foot or Menu and then you'll see. We'll go down to the footer and there it is. It appears in the copyright area of the floater. I don't like that, so I'm going to turn that back off and then I'm going to go back. So I had mentioned that you can create various menus and put them in different places on your site. So if you wanted to do that, you would click, create new menu and let's say in the Footer, you only wanted specific items to show. So let's say it's called us the Twitter menu, and we're going to selected for the footer and then click next. Now we're going to add items to the menu, and that's going to give us a dialog box that shows all the pages on our site, an area that we can put in custom links. So let's say we wanted to link off this site. So let's say we did wanna linked to Google and we were type in Google added to the menu. You'll see it shows up here, and then it shows up in the footer down here under Google. So if we wanted at a page, let's say the gallery page it as it here. If we had a block post that we wanted to add, we would add that here. If we had blog's under specific categories, let's say we had a category for items on sale or travel or anything like that. You can add the entire category is a menu link here. Same thing goes for tags and format, so it's a couple different ways. You can add different pages of your site to different areas. So if we go back to the main customized page, let's look at the widgets. So the basic widgets you have set up now or the three Footer areas follow us. Contact us and join our newsletter and then the hero image. So let's look at the hero quick. That's this area up here. So this is where you would change the text for this hero area. So basically, it's a title in some text and a button. If you wanted to change that, maybe you just want to be all cats. And then let's say for the button you wanted it to say, Get started now, so really easy to set that up and to change that and then for the footers, you'll see that what they've done is they've taken some of the widgets that come with this theme and drop them into place. So this is, Ah, follow us widget. If you turn down that narrow, you'll see that they've put in whatever title they wanted here, it's follow us online. And then let's say we wanted to add our video profile as well. We would click on that icon and they would type in our user name or the full link to our video page, so that's pretty easy. Now let's say we wanted to add another widget just below this. In the same first column, click on Add a Widget and it gives us this whole list of widgets that we can add in so we can add quite a few things in here. If you have a bunch of post on your block and you want to add a calendar of when the last one was posted, you could drop that in there. You can put your contact details, which you'll see is in the second widget. You can add some images in a gallery or a new image by itself on navigation menu that just appears here in this section, you can add text, arbitrary text video, a search field do that real quick. That should be fairly simple, right, and it just adds a search field right here to the page. Same thing goes for foot or two. It's just a contact widget, and they put in their contact information here, which shows up in this section and then the join our newsletter, Widget. So that connects to Go Daddy's email marketing service. If you wanted to do something like Male Champ or constant contact, there are plug ins for that. So you would go to your plug in section, download the plug in for your particular email client and then customize that as needed for your home page settings. Basically, this just lets you decide if on this home page you want to show a static page that you built, which is what we have here or your latest post from your blog's. So if you select your latest posts, you'll see that it pulls in your blawg page, and that ends up being your home page. But we don't want to do that. We want the static page for the home page and then, for the Post page will select the Blawg and then this section for additional CSS. This is if you know CSS coding, which is cascading style sheets, and that just lets you apply more specific styles to certain areas of the website. If you don't know CSS just completely ignore this section. And then one more thing that I haven't shown you yet is if you look down here, you'll see a monitor, a tablet and a mobile phone. And if you click on each of these, it'll show you how this looks on each of those devices. So it's kind of a neat feature. Okay, so we've gone through all of the customized settings, and if you wanted to save those to your site, you click publish, and then they would be live on your website. And then you could just back out by clicking the X and go back to the WordPress dashboard and our next class. We're going to go over a few more of the page builder features and building a page from scratch. 6. How to build a page from scratch then add it to your menu: Now let's go through a few other page builder elements that you can use to very easily add some interesting functionality to your website. So if you look on your site, you'll see that there is a portfolio page and a gallery page. So let's check out this portfolio page and see what they've done here. So if you scroll down a little bit, you'll see that there are a few different areas on the site that look like they have slider elements, so you can click on the left and right arrows and scroll through. Some of them are auto playing. That's just a really nice way to show services or products were. Maybe if your photographer you could show a photo gallery or if you're an artist, you could show some of your artwork. So let's kind of investigate what they've done here and then create one of our own. So I'm going to click on Page Builder and then I'm going to hover over this element and see what they've done here. So if you click on the wrench tool, we'll open it up and you can see that they've added a content slider. So basically, in the slider. They have set up how big they want it to be if they wanted to auto play based on when somebody comes to the page, how long the delay is before it plays in between each slide. If they want all the slides toe loop, they wanted to fade between transitions of slides, how fast they want that fade to go. So it's a lot of different things you can do to totally customize the way the slider works . Then, if you go to the slides tab, you'll see that they have three slides in here, and then you can add slides, duplicate them, move them into different positions or delete them. And then in the advanced tab, very similar options to edit as well. So then, on the right hand side, you'll see that there's some textiles well, and that's just a basic text box. So let's go in and add one of our own and see if we can kind of recreate this. So if we go to add content, so first we want to add a row, we're gonna grab the two column and drag. I wanted to go right here. So now we've got two columns in this row. And as you see, it's got this little dot here so I can drag this to make this column larger or smaller. So let's kind of alternate. And let's put the text on the left for this one, and we'll put the slider on the right. So let's go get Basic Module text editor and drag that into our first column. Then we're gonna put on my headline and then some text, and then we're going to make this larger heading and click safe, and they were gonna go back up to the content and grab an advanced module. And it's gonna be the content slider. We're going to drag that into this column and then I'm going to leave these default settings. They're pretty much exactly what the other ones are set up as it's got the Hyatt auto play and all that. And then I'm going to go to slides, and I'm going to edit the first default slide that they have in place, and I'm going to select a photo. So let's take this one with the yellow door and I'm going to hit save, so we need to have a slide label, So I'm just going to put Slider one and hit Save. Now we can go at a second slide click edit. I'm going to go back and select a photo, but this one and so basically, you just go through, make this lighter, too. And let's add one more the coffee slider three and hit save. So then let's say I want coffee to be second. I'm just gonna shift that up. I'm gonna hit Save. Now when we come down here, you'll see that we have a slider in place. The headline in the text that describes this lighter and it auto place so super easy. We could also go back like we did on the other one and add some color to the background. We wanted to do that to make it stand out a little bit more. Just add maybe a like gray. And there you go a super easy way to add some functionality to your page. Gonna hit, done and published and now that saved. So let's go to the gallery and see what the difference is with the gallery in the portfolio . So in the gallery page you'll see that they just have some images in three columns, and if you click on any of the images, it opens up an image lightbox. So this is a really nice way to display photography or products or services or anything like that that you can display with images or video. So let's see how they did this. Going to go into the page builder. I'm gonna hover over this and look at what the element that they used. And it's a gallery element. So basically they have a collage. They pulled images from the media library. They have eight photos selected at medium size 20 pixels between each one. They have captions turned off an opening in a light box. So let's go and see what else we can do with this. I'm going to go to add content and I'm going to advanced modules, and I'm going to add a gallery of my own. Now, if you grab that and you don't put a row in place first, if you go to a spot where there is no row, it'll add a row for you. So you kind of save a step doing this. It's gonna drop that in all right? And so under the options for the layout. There's some nails, and there's a collage, so they've already done a collage. So let's do thumbnails. We're also going to choose from the media library, so let's click to create the gallery, and what was going will select MM Select eight images. I'm gonna click. Add to gallery now. This is where you can add a caption. If you would like to add captions, you can do that. You do not have to, but I'll do a few just so you can see how that works. Click Update, Gallery and you can see in the background. It's added it in here as thumbnails. I'm gonna make the space and just little bit tighter, and you'll see how they all kind of tighten up a little bit. I'm going to show captions below the photo, and then you'll see the ones that have the captions have them. Waterfall Bridge looking at. Those are the ones I set up or we can do on hover. Let's see what that does click, save and then done and publish. And when we come back to this page after it's published, when you hover over it, you'll see the waterfall caption pops up, bridge pops up would stack. So again, just like the other ones. If you click it, you also get the image gallery. You can close it here, so that's a really nice way to add some functionality to your website. And if you're a photographer or artist of any kind, this is a really nice way to showcase your work. So now let's go and walk through building a page from scratch. So to build a page from scratch will go up here to New and then you click on Page, and this will take you to the WordPress old school style of page editing. The first thing you want to do is into your title, and then you want to come down here and select a layout. I want to use a full width layout, so I'm gonna select custom and full with. And then I'll come back up here and click on Page Builder here. So it's just a little bit different process than editing a current page. Now you'll see when you're creating a new page, it gives you the layout templates to choose from to build the page, which is a really nice way to kick start your page. So I'm gonna select the services page and it's gonna drop in just like that. Now, all you have to do is just what we've been doing on the other pages and select something to edit. Change your headline, change your text, you can go in and you can change the icon that you're using and then searching for a new icon. So they're all kinds of things you can do here and again. You can go back and put a background color behind here, or maybe even a photo by clicking photo here and then selecting a photo from your library. And then if you wanted to overlay a color on your background, you do that here. Maybe I want a solid border in black. So there's all kinds of things you could do once you're in here and you have a template set up so you don't always have to go in and build something from the ground up. You can start with the template and then modify it is needed. You could even come in here and let's say you wanted this to be two columns instead of three I'll remove that one. And then if you remove the column that it was also in, then it will just make it into two columns. And now you have a two column layout instead of three very similar way to work on that as working on any of the pages that already exist. Just drop in a template and make your changes. So now let's say you want to add this brand new page to your menu bar, so to do that, you're going to publish this page and then you're going to go back into customized, and then you go down to the menus. You want to select your primary menu, and then you want to add an item to the menu here, and that's going to take you to all the pages of your site. This is the page just built called my title here. We're going to click that and then it adds it to the page. You'll see its way over here on the right. So let's say we wanted to move it to write about right there and there you go. Then you want to hit, publish and now that's done. So now you're new page has been added to your menu so that you use is confined it. So I think that gives you a really good feel for how this page builder works. It's super easy to add in elements, change elements that already exist and to add some really nice functionality to your website. 7. Wrap Up & Class Project - Build your WordPress web site: I hope you've learned a lot by taking this class and now have the skills you need to set up and create a WordPress website from scratch. If you'd like more info on WordPress or would like to review a different theme that you can use to set up your site, be sure to watch my other class on building a WordPress website. You can find it in my class list, and now that you know how to do it, your class project is to build your very own website. You don't have to build it for an actual business. If you don't have one, you can make one up. Or maybe just build a site to promote who you are. Your hobbies, your kids or pets at a lot of photos, that kind of thing, and you don't have to build the site in an hour, but you get bonus points. If you did, so let's go get started and then when you're done, post a link to your website in the class project section. I can't wait to see what you come up with. Thanks and I'll see you in my next class