Build a Professional WordPress Website in 8 Steps! No coding experience needed. | Melissa Taylor | Skillshare

Build a Professional WordPress Website in 8 Steps! No coding experience needed.

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

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (1h 33m)
    • 1. Class Introduction & Overview

      1:45
    • 2. What's a domain name & why do I need hosting?

      1:35
    • 3. Register your domain name & setup your hosting

      7:38
    • 4. Install a design theme & demo pages

      7:08
    • 5. Customizing the theme's global design options

      26:26
    • 6. Setting up your on-page design options

      19:46
    • 7. Building a web page from scratch

      11:39
    • 8. Installing SEO plugin and image compression plugin

      14:25
    • 9. Wrap up & your class project

      2:33

About This Class

In this class you will learn how to build a WordPress website for your business or your side hustle in just 8 simple steps! 

This class is geared towards true beginners who have never built a WordPress web site, but will also be valuable to intermediate skill levels as well. There is a LITTLE bit of technical info, but I’ll go over all of it with you in the class. Hand-holding thru the process is included :)

In this class you will learn:

  • How to register your domain name (your website address)
  • How to setup your hosting account (where your website files are stored)
  • How to install WordPress on your hosting server (you'll build the site using WordPress software, which will allow you to easily create and manage your site)
  • How to select and then install a theme 
  • How to download a demo site from the theme
  • How to customize the global site settings
  • How to customize your on-page design preferences
  • And finally, how to install plugins to add functionality to your site. We’ll be installing an image compression plugin and a Search Engine Optimization plugin and then walking thru how to setup and customize each of them.

In this class we'll use a very easy-to-learn page builder called 'Elementor' that lets you drag and drop different types of functionality onto each page, move them around, customize them, etc. Elementor is a very powerful but simple page builder that will let you totally customize the layout on each page of your site without any technical or coding knowledge.

For your class project, you get to design your website!
It doesn’t have to be a big site with lots of pages, it can be just one page, but it should reflect your brand or your colors or just a little bit of you! Show who you are thru your design, then upload a screenshot of your home page and a link to the site so I can see it. Cannot WAIT to see the WordPress website you have built!

 

Transcripts

1. Class Introduction & Overview: Hi, I'm Melissa. Welcome to my class On how to easily build a website and eight simple steps. My 21 years as a freelance web designer have given me tons of insights onto how best to build a website and the pitfalls to avoid when you're creating them. This class is geared towards true beginners, but is also gonna be really helpful to people who have some intermediate knowledge aboard press but need a little more expertise into how to build a side out completely. There is a little bit of technical info in this class, but I'm gonna walk you through everything step by step and the hand holding is included in the process. In this class, you're going to learn how to register your domain name, how to set up your hosting account, which is where your website files are stored. How to install WordPress, which is the software. We're gonna build the website on how to select and then install a theme how to download a demo file for that thing. Then how to set up your global options for your design settings, how to set up the on page options for your design settings and then how to install plug ins . Toe adds a little additional functionality to your site. Just eight simple steps in this class. We're also going to use a really easy to use page builder called L A Mentor, and this is a dragon drop page builder that's gonna let you take items and dropped them onto the page in a really visual setting. So it's really easy to use, and you're gonna love it in setting up your pages for your website. So for your class project, you get to build a website. It doesn't have to be a big site with a lot of pages, but it should reflect your brand, your logo, your colors and that kind of thing. So take a screenshot of the website you've created or post a link in the Projects panel below, and I can't wait to see what you come up with. So we've got a lot to cover in a little bit of time, so let's go ahead and get started 2. What's a domain name & why do I need hosting?: in this lesson, we're going to discuss what a domain name is and why you need hosting. So basically there are three things that you need in order to create a WORDPRESS website. So first you need a domain name. So the domain name, which is also called a U R L, is the website address that users will type in to get to your website. So basically, it's what you type in the address bar to get to any website on the Internet. Secondly, you need a place to store your website files so that others can access your website and this is called Web hosting. So website hosting is a server or computer that stores all of the files that make up your website. So your page files your blawg post all of your images, your database that's all stored on your Web hosting account. Some examples of hosting companies are site ground, which will be using in this class WP engine go daddy or blue host. There are hundreds of them online, and I'm gonna go oversight ground with you today and explain how to use that. And lastly, you'll need the WordPress software. So wordpress is a free content management system, also called a CMS features a WordPress. Include plug ins that you can add to your site to add functionality, and they also have a template system that you can use to base the design. Overwork. Your website off of WordPress used to be mostly associate with blogging, but it's so robust that you could build out full websites with tons of functionality now using WordPress. So now that you know what you need and why you need it, let's get your domain name registered and then let's set up your hosting account with site Graham. 3. Register your domain name & setup your hosting: first thing we need to do is get your domain name registered for your website. So let's do that first and then we'll look at how to set up your hosting. There are hundreds of websites where you can go and buy a domain name. Some of them are less expensive than others. Some are easier to use and others, but basically they all do the exact same thing. They give you a domain name that you can connect to a hosting account so that people can find your website. In. This class will be using site ground both for the domain name registration and for setting up your website. Hosting. This makes things really simple because since the domain name and hosting or with the same company, they work together really easily. If you were to go register your domain name at, say Go Daddy or network Solutions and then set up hosting with a different company like site ground, you will probably have to go through a few extra steps to get your website launched because you would have to tell company number one where you're hosting is and point them to each other, and that kind of thing. So for ease of use, we're gonna go the simple route. We're gonna register the domain and set up the hosting both on site ground. Why am I using site ground when there's hundreds, literally hundreds of hosting companies online? Well, I be site ground for a lot of different websites, and I have found their hosting to be reliable and fast, really easy to set up, and they have great tech support. So if you ever get stuck, you can get on chat or you can call them, and they usually answer your questions very, very quickly. So I like to use them because I just found them to be really reliable and easy to use. So when she go to site ground and you click on hosting, you'll see that there are a few different options. So Web hosting is just for a basic website. WordPress hosting is for a WordPress website. If you're going to use e commerce, they have a special solution for woo commerce hosting and then cloud hosting is for really exceptionally large, high performing websites. So we're going to stick with managed WordPress hosting because we're building a WordPress site and you get the best functionality for WordPress with a managed WordPress hosting plan for our sights. We don't really need anything huge. We're gonna be building kind of a smallish site. So we're going to start with this start up plan. But if you were building a larger site something you need more Web space where you think you're gonna get a lot more monthly visits, you can use the grow big plan, which is slightly larger. Or if you need something really technical, you need a lot more functionality. As's faras the back end of your site. You could use this go geek plan and you'll see each of them is a little bit more expensive as you go up in. Each of them has a little more Web space and a few more monthly visits. So if you want to see what each plan offers, you can hover over this and it will show you a list of features things such as free WordPress installation, free SSL, free emails, free daily backups, which is really important 24 7 support and we'll go over some of these features as we get into it. So to set up your hosting you're going to say Get plan. And what's really nice about this is that it also lets you go ahead and register your domain at the same time. So I'm going to register a new domain, easily build a WP website, and I'm going to select dot com as my extension. But if you wanted a different extension, you can just select here and then choose any extension that's available, and then you'll see it's going to be 15 95 year, and when you click proceed site, Graham will go and check to see that this girl is not already purchased. So click proceed, and then it will go through in check. And if it's available, it just takes you straight here to this. Page says that that Ural is available for registration with your hosting account. So then you'll go through and fill out all of this information, including a credit card number. You create a password for your account up here. The hosting service. Be sure you check that you have the right plan. This is the start up plan. And so here's something that you really need to take into consideration. So if you register for 12 months. For that 1st 12 months, you get this promotion of 3 95 a month. Now, pay attention to this when it renews its going to renew at 11. 95 a month. So you want to think about that when you're selecting, how long you want to register for so that this is going to be an ongoing site. You may want to go ahead register for 36 months because you'll get that 3 95 price for all three years. If you only register for one year, then you're only going to get that price for one year. So it'll show you right here. How much is gonna bill you now based on what you select, And then it will tell you your domain registration is 15 95 so you can select domain privacy for $12 a year, and it renews every year. Domain privacy basically keeps your domain registration information private. So your email, your address and those kinds of things, and one reason you may want to do that is because robots can go through and do a look up on new domain registrations, and you'll find that when you register a new domain that you might start getting a lot of unsolicited emails because your email has been scraped from the domain registry. So something to think about their Once you have all your options selected, you'll see your total here, confirm your terms of service and then click Pay now and it will take you through, and it will process your payment and then you're hosting will be set up. So once you filled out that form, you'll be redirected to this page, saying your account with successfully created and now you can log into your customer area and start managing your website. There are also going to email you your user name and password, so be sure and hold on to that email because it will have information that you need. We're also gonna want to write down those Loggins that you just created and keep that somewhere safe. So we're gonna collect, proceed to customer area and continue on with setting up our website. So once you're in the customer area, since you selected a WordPress managed hosting plan, it's going to help you set up your WordPress site. So just click set up site and then you can either migrate and existing site, which we're not doing here, or you can start a brand new website, so install a new application, you're gonna click select, then you're going to come down here and you're gonna choose the application you want, which is WordPress, and then you're going to set up your log in with your website credentials. So you want to use an email address that you can easily access, one that is already set up that is not associated with this domain and then set up your password here and then click Continue, and it will continue to build out your site. Once you've done that, is going to take you to this page where you can add on a few additional things. The SG site scanner will check your website every day and notify you if you have any kind of malicious code, or if it looks like your sites been hacked so you can add that if you'd like, you can also add domain privacy. If you didn't do that during this set up and then click finish and it's going to create your site for you in the background, it takes just a couple minutes to do the once that's done processing and you'll be taken to this page, and you can then access your WordPress admin. Or you can go to your site tools. I like to go immediately to the admin and check things out, so I'll just click log into the admin here, and that will take you to the site wizard. Now you can click on Exit here a the bottom, and you can manually search for and install your theme, install plug ins or anything else that you like. But for this class, we're gonna walk through the Wizard and select our theme and are plug ins that way, as that's a bit easier for those who may never have used WordPress before. So at this point we finished one of the hardest parts of getting your website started, which includes registering your domain name, setting up your hosting and getting WordPress installed, and it took all of about, what, five minutes? So not too shabby eso. In our next lesson, we start the fun part of picking out of fame to add to the site, and then we'll customize it to your desired book. 4. Install a design theme & demo pages: Okay, so now we're going to start the fun part of building your site, which is picking a theme and then customizing the theme to your design. So basically, a theme is just kind of a set up of a demo website, and then you can go in and change the content, the photos and the colors to make it look the way that you want it to, which is a really simple way to get started with the really nice design. Especially if you're not a designer. It gives you that first initial step to something that looks really professional. So in order to work through the Wizard, we're going to click start now, and it will walk us right through. So it takes us to a page that shows some available themes that site ground has for you. Um, so you can just kind of scroll through and see what it is you like. Find it a design that might work well for you and just get a general feel for how the themes might look. So if you want to see what one of the things looks like, let's say you like the look of this. You can click on this plus, and it will open a page for you that will show you what that thing will look like once it's installed. So this is a general overview of what it looks like. You can see the knave at the top with some social icons, the logo to the left, then issue scroll down. It will show you how the pages were built out. Now this is the home page. This is what the home page layout would look like. And what you can do once you install a template is you can go through and it's, Let's say you don't need this section. You could delete this whole section so you can go through and customize these pretty well to meet your needs. Exactly. So let's close this and go back and let's pick one to use for our site. So let's just select a thing to start with. I think we'll start with this corporate theme, and if you take a peek at it, you'll see it's got a logo area the left, many with the riots and social icons. So this top bar you can put some additional information in a nice hero image and then a few different sections down below as you go through it. So I'm going to select this corporate thing by hitting select, and it just tells you that it is enabled by Element or which is a page builder. It's one that I really like. It has tons of different options and it's really flexible, so that's exciting. So we're going to hit, select and it's going to install element or for us. And then I'm going to hit, confirm, and then it takes us to a page with some other functionality for our site. So contact form. We definitely want that not gonna do any e commerce. I'm not gonna have an events Calendar Elementary comes with a gallery, so I'm gonna leave that off. And I believe it also comes with a map, and we can also go back and install plug ins later if we need to. So for now, I'm just going to go with this contact form and I'm going to hit continue, and now here a few more things we can add in. So if I select CSCO, it's going to install Ghost CEO plug in which I really like. So I'm going to do that. And then these need 1/3 party monster insights, which I havent used before. So I'm gonna leave those out and we'll talk about some of these other things later, So I'm gonna hit complete. Then it's going to go through and install the theme and those plug ins for us. And once that's done, you get a success screen saying that your side is ready so you can either go to the WordPress admin dashboard or you can go and view the site. So let's go to the dashboard first and take a look around. So when you go to the WordPress dashboard, you'll see this page first. This is the home of the dashboard page. You can click here to view your site or here to change the same design. You can create an edit forms. Check your S E. O. So this is just one way that you can get to some of those elements. I don't generally come to this screen very often because there are other ways that you can do that, that I find a little bit easier to navigate around the site. Another way you could be your site, for instance, is to come up here to this little home and click view site, and that will take you to a preview of what your site looks like. You want to change your design. There are a few other ways to do that over here with the themes panel or under appearance. So we're gonna use mostly this left hand navigation to get you accustomed to using WordPress because each theme is going to be a little bit different and how it looks. And each hosting company is going to set this page up a little bit differently. So we'll stick toe over here so that it's a little bit more general for all hosting companies and for all things. So let's take a quick pick it or site so we can kind of see what we're doing is we go through one way I like to work is to come to the visit site link. Then I right click with my mouse, and then I select open Lincoln New Tab, and then that will give me a second tab so I can toggle back and forth really easily. So the way the sights set up now, this is what the page looks like initially when you come to it a little bit flat. So what we're gonna do is we're gonna go back to the admin area and we're gonna go to the theme panel and then under the same panel is installed Demos. So we're gonna click on that. And from inside the installed demos page, there are again a few other themes. So basically, the way it works is the theme that we installed Was that corporate same. And then we can put a demo on top of it that has all the styling already in it. So I'm gonna go down here. I'm gonna pick this yoga one because it looks nice and calm. And again, you can click on Life Preview to take a look at it. It's very nice. So I'm going to select that one to install, So I'm just going to click on it. And then it pops up this dialog box and it tells you that there were a few required plug ins that need to be activated so that it could look exactly like this demo. So we already have ocean installed. We're gonna install elementary, which is the page builder, and then we're going to look at this. So this is the sticky header, which I'm not going to use on this site. And you have to, I believe, purchase it as an adult. And so we're going to skip that as well and not use the sticky Hever. So we're going to say, Go to the next step, select what you want to import. So I want all of the pages and post images and menus, the settings, the widgets and the contact form. So it's gonna give me everything and I'm going to click Install. Now that's gonna take just a minute. So we'll wait for that to work. And then when it's done, you get the success screen and you can click to see the result. And there you go. So now this demo is completely installed with a look that we can go in and edit to your customization. So now that you have the theme installed on top of WordPress and you have the demo installed on top of the theme, the next thing we're gonna do is we're going to explore the different ways you can make changes to this where you can change the colors in the fall into the photos and then walk through, updating a few of the pages to make them look the way that you want to for your site. 5. Customizing the theme's global design options: in this lesson, we're going to review how to customize the appearance of your theme. Now there's two different ways you can do this. You can customize the global look and feel of the themes. So that would be all of the fonts on the site. All of the colors, all of the top Header in the Footer. And then there's on page customization where you can go in and you can change the photos and the type and the way that the each page is laid out. So we're going to start with the global appearance first. And to make those changes, you'll come over here to your left hand navigation within your WordPress admin, and you'll click on appearance and customize. Now what's that opens? You're gonna get a list over here. Of all the items you can customize and you'll see, there's menus and general options typography, header, footer, widgets, etcetera and then on the right. It's going to give you a preview of the page once you've made those changes, which is really nice so I can go in here and I can change this color from green to something else and you'll see the preview so you know what it's gonna look like. So for this project, we're going to change this yoga theme into ah website development company. So we're gonna change out the logo, all the photos and text, all the colors to be something different and then create a web site from the same and I must show you exactly how to do it. So let's click through some of these options and see what we can do here. So this is add ons that you can go through and purchase. So we're gonna skip that cause we're gonna gonna do any adults in this class site identity lets you put a site title in a tagline onto your site. Now, this isn't really seen anywhere on the page. This is meta data that's going to be picked up by search engines. And that's something we'll talk about a little bit later with S E O. But you'll see it's up here and your tab so home and it says my WordPress. So we're gonna change that to our website company name, which is just going to be Web design. And then our tagline is easy to do. No coding. I needed so that's not gonna do much on page for you to see. But that's something that you should definitely go in and do. So they were gonna click back. We're gonna go down to menus so the mini has already set up here, and we're gonna leave that for now, just so you can kind of see how they work and how they navigate through the site. But if you click on main menu, it will show you each of these pages in the menu, and it's really easy to edit. You can just click and drag, click and drag and you'll see over here it changes the order of the menu items. Then, as you build out your site. If you add more pages and you want to add them to the menu, you would just click at items here. It will show you all of the available pages, or you can add different post from your blog's specific categories from maybe you're blawg post or from a portfolio. So if you wanted to say at a custom page, maybe you want a link off to 1/3 party site, you can come up here to where it says custom links, and when you click on that, you can put in the link to the site you want to go to. Let's say google dot com and the Link text would be search or whatever you would like it to say up here in the menu bar. And when you say at menu, it drops it right here at the bottom. And then again, you can always shifted around to however you want it to display. And if you want to delete one, you click delete, and you're back to your same menu. So what you want to do is you always want to click publish after you've made your changes and then they'll take effect on your site and it's gonna be in real time. So every time you click publish that goes live on your site right away, so you can also add menus to different locations. So if you wanted your menu to also appear in the top bar, appear which is this green area, or if you wanted it to appear down in the footer at the bottom of the page down here, you can do that as well, so that makes it really nice to be able to add it anywhere on the site you want, so we're going to go back and back one more. Now, widgets are different elements on the site that are controlled in a different manner. And the footer has four widgets right now you can see it set up in four columns. They're all right here. So if you wanted to add or change something that's in your widgets, you could do that right here. You could change the phone number or the URL. You can change the title here, General increase. So maybe you want to say get in touch, and then that will change it right here So you can go through and change any of the foot or widgets as you see fit on here. So if you wanted to add a different widget, you can click here to add a widget, and then it will bring up a list of a bunch of different things you can do to add to this widget. So let's say you wanted a custom menu down in your footer. You would select custom in you, and then it's going to give you this widget that you would just go through and fill in. You can check the link color for this menu. The fall in size, um, different styles of dropped down, etcetera, and then that will appear right under the studio address. So I'm going to delete the switch it cause I don't want that, all right? And we're gonna go back to the widgets. I'm gonna click publish, so it'll save that and then back to the main customization menu. So now, home page settings. This basically just allows you to choose which page you want to set as your home page. So they already have quite a few pages set up in this demo. But let's say I want the services page to be my home page. I would come here and other click services, and you'll see that this home page will change to be the services page. Now, instead of the home page, we're gonna go and change that back, and then your post page is your blawg, and it's just selected there. That's generally set up for you, but I just want to show you exactly what that is now for general options. If you come in here, it will show you a lot of different areas of the site. So general styling for the entire site this let you choose your primary color, which you'll see is this color and then also it set is the hover primary color. So any time you hover over a menu item, it turns the green. It also sets up for buttons and things like that. And I believe when you go and you add something in like this call out box, it will give you this green is the default, which you could then change. But it's nice to have your primary color set because it makes a little less work down the road so you can change the background color of the entire site. I tend to leave mine white and then links color. I'm gonna go up here and grab this primary color, and I'm gonna go down here and change this links color to be that same green. So it's a Z Z is that I come up and hit publish, then it changes it. So general settings. This is going to allow you to change the site from wide toe boxed. But generally I stick with the wide full with screen of the box will bring it in from the edges and allow you to put in a background. You can do that if you'd like. I do prefer the wide layout, but you'll see every time you change to a different option. It does give you different options below it, so that you can set up your settings for each of these styles. So if we stick with the wide layout, then you can make your container with the certain wit. So if I only wanted this to be really narrow and I wanted it to be 900 pixels, I could change that. And you don't really see a lot of effect here because it's is why does the screen. But you see here how it got so much smaller. What it's doing is that measures your 700 pixels basically from left to right in the middle of the screen, and then whatever is left, it spreads to fill. Teach edge of your browser. So that's how wide works that it kind of brings everything in from the center. Put that back to 1200 with content with. It gives you a percentage of the site that will be the body content. And then if you have a sidebar on the page, this is the width of the sidebar. So it works in percentages. They just need to equal to 100. You can set your basic layout for every page these air set to full with, but if you want it all your pages to have a right sidebar, you would just click on that. And then on the interior pages, which are set up differently, every page would start with the right side bar on it that if you wanted to add some padding to your content, you would do that here. If you want to set up your search results page, it's here. Open graph is information for social media. So if you wanna have this information so that social media works a little bit more smoothly with your website, you can turn on open graph, and then you can put in things like your Twitter user name, your Facebook page URL and your app. I d. Now this is different from your social media settings, so this kind of works in the back end and you don't see anything going on with this will go to social media here in a minute. So then, while you're still in your general options, the page title. If you want to show it on all devices, you can. If you want to hide it on, let's say mobile or something like that. You can. The page title is going to be on your interior pages. There's not one on this home page, so we'll show you that when we get there, you can say which tag you want to use for your heading tag. I always say Stick with H one so you can set it up to show the page title on all devices or hide it on certain devices. You can't have the style set up to be centered, default, hidden, that kind of thing. It doesn't look like on this site. They're using a page title, but when we're on the individual pages, I'll show you how to turn that on. You can set the background color of the page title bar. You can show breadcrumbs in the page title bar. You can use an icon or text for the home icon, things like that, and you can see as you scroll through here. There are a lot of options. I'm not gonna walk you through every single one because they're fairly self explanatory. But I think you get the idea of what it is you can do within these options. This scroll to top is an arrow that shows up down here in the bottom right corner, which I really like because some sites are very long scrolling. You can change all the positioning and the sizing of that the pagination. This is gonna work on things that are multiple pages like your blawg. So this is where you would set up your pagination. If you want to show it where you want to show it on the page, what color it's gonna be for the forms and input text area. This is really nice option tohave because a lot of times when you use 1/3 party form, it tends to use their own styles and it doesn't look like your website. So what's nice is you can come in and you can change the font color of the label, the font size to match your site, and it looks like it's picked up most of the settings from your theme already. So what I would suggest is to put the four men and then if you need to change it, come back here to the forms. Customization, same buttons. So you can set up your buttons here on when you put a button on to the site, it will automatically take on these settings. So if we wanted to go ahead and make it that grain from the other page, you can do that. And then I'm just gonna drag this a little bit and make it a little bit darker. So when you hover, you see just a tiny difference, but enough to know you're on top of it, and then color is the text color of the button, and then your 44 error page will display when somebody types in the oral. That's no, not on your site. So the 44 pages something that's kind of set up automatically, and it just says your page can't be found. It continues to show your your menu at the top. Generally, I don't do a whole lot to this page because it's kind of automatically created. And if somebody comes to a page that's not found, they still have the menu available so they can get back to another page. So that's all the general options now. As you keep going down, you'll see the global typography options, which lets you change all the fallen sizes and colors for every element of your site. So for your widgets and your footer, your blow opposed the page title. Bar your menus. Let's go in here and let's change some of the menu typography to something else you can see . So if I come into the main menu, I can select my fault and you'll see that there's some standard Web phones. These are all pretty basic phones that you probably even have installed on your computer. But if you want to use something a little bit different, all of the Google fonts are available in this drop down as well. Now, if you haven't used Google phones before, you can go to fonts dot google dot com, and it will show you every Google font that's available. And what's nice about this is that you could come in here and you could say, I want on Lee to see Sand Sarah phones. It will show you only the sand Sarah phones. And then you can say you can type in any words in here that you want you to see how it looks. So if you're gonna have a nice big headline of Web design, easy to do, no coating needed. And you want to see how it looks in that font. You can do that and then click apply to all fonts, and then every phone will show it so that you can see exactly how that headline is gonna look on your site. So I really like Roboto. I think we're gonna go with that on this site. So let's come back here now when we go down. Course I picked the one farthest down the list, but let's go find Roboto and it is Roboto condensed and you can see right away that that changed. Now I think it's a little bit small, so let's make it 15 pixels. All right, that's a little bit better. Um, what does it look like? Bold. Okay, I like that. We're going to stick with that for the typography of the menu. You can also do that with the drop downs. I don't think there are any drop downs on this one. But basically, if you had multiple level pages, a drop down menu would come out. And so you would want to change the phones for that too. So this green bar at the top, this is called the top bar. So let's look at that real quick. Let's change that fought family as well to roboto. Goodness, that's way down there. OK, let's see. Roboto condensed. You can see that That changed. I'm gonna leave it as regular defaults. I think I want a little bit bigger now. If you wanted to make this bar taller, you can change his line high right here. You can see it makes that bore taller and thinner. And then if you wanted some space in between the letters, you could space it out like that. All right, so I think I like that. I'm gonna click publish, so it keeps my phone settings. And now I think I'm going to change a couple of the things so you can see the body fallen. Here is a serif font. And this is a san serif font for the body. They're using Roboto Slab. So let's see if we use condensed I think that's a little bit thin? What if we just use Roboto? All right, I like that. And then I like that font size. So that's the body. And then all headings gonna change that. Also to Roboto condensed don't want it capitalized. I'm gonna leave it like that font color. So that sets up the font for all of the headings. And now you can go in individually and change each of the headings. Individual ease. This is where you can change out your logo and information. So if you don't want to use an image for your logo, you can just use a fallen and type your name. We're not gonna do that here. We're actually gonna put in the image. So we're gonna leave that alone, and then we've done the menu, the footer widget headings. If you wanted to change those as well, you can do that down here. So that's how you work with your typography and those air global settings. So, again, once you get into the pages themselves, you can go in and change things on pages. Well, so for the top bar, this is where you style the content that's in the top four. So we already change the font. So in here we can turn the phone off the top bar on and off so you can see without that green bar at the top. I like to have that top bar. I think it's nice element. So we're going to show it on all devices and now you can change what you want on the left and right side. So let's say we want social media on the left and content on the right. So we're gonna have to find the social media and turn that on first. You can see I've got my colors all set up here. I'm gonna go back. And then here's your social media element for this top bar going to enable the social media , and then it comes on over here. Now you can see that I'm just getting squares. I'm not actually getting the icons. We're gonna go fix that in just a minute. But for now, you can see you can adjust the phone size of your social icons. You can adjust the padding, the link colors and then down here is where you would put in which social icons you want to show. So you would put in your full Ural of your Facebook page of your Twitter page instagram page, etcetera. So I'm gonna click publish Now, we need to go fix this. And so what? What these icons are is they're pulling from a font called phone. Awesome. And it looks like that's not installed on our site. So I'm going to close out of the customization, which will take me back to the admin dashboard, and then I'm gonna go to plug ins. I'm going to install the font Awesome plug in. So this page shows you all of your plug ins for your site, and this just kind of adds extra functionality. So I'm gonna add a new one, and I'm gonna search thought awesome, and it shows up right here, Gonna click install now and then once it goes through the installation, I'll turn it on. And now, once that's on, you'll see. It's right here in this list, and you don't have to do anything else to that. It'll just work now, So I'm gonna go to appearance, customize again, go back to where we were, and now you can see in the preview that all those icons are showing up. That's an easy fix when something like that isn't working. Sometimes it just requires a plug in tow work. So now let's look at the header. The header bar is Theo area with your logo and your menu in it and the search bar. So in general you can change the style. Minimal is what we're using right now. You can change it to full screen center and see what it looks like centered. So I believe if we had less many items that many items would appear to the left and the right. If we had it on centre, I'm still gonna go back to minimal. You can play with that and see what options you like the best. I don't have the header full with what that means is it would go all the way to the left of the browser window and all the way to the right, and that always feels a little bit tight to me. So I keep it not full with. There is a tiny little border on the bottom, which you probably can't see it. Because of that photo, you can change some of the padding etcetera and then on the header media, if you want to make a great big header and maybe you want some video behind it, you could do that here. If you want an image behind it, like maybe you want some kind of color or something style back there, you can add that there you can add an overlay color, change the position in the size etcetera, and then for your logo. When you're ready to add your new logo, you can't remove what's there from the demo and then select the logo that you want. So I'm gonna go and find that in my files, have the logo right here, and I'm gonna click open and select it. This wants you to crop it. I'm going to skip the cropping. It'll just put it in full size, and there it is, and it appears right there. Now you can change some of the sizing of it. Change the max height, the max with get it to the exact size that you want to, regardless of what size your images. When you pull it in now you want your image larger. It will hold its resolution better. If it's bigger than it, then it will if you make it really small and then try and enlarge it. So let's go back and then for the menu. This is where you get to come in and change your menu colors. So I want the menu hover color to be the same as the W in my logo. So I happen to know the color for that. So I'm gonna put that in. You can also just come down here and you can drag around till you find your color and I'm gonna take that same color. And I want the current menu item to be that orange color so you'll see it changed right away. So this is your on the home page, so it makes the home page menu item that color, you can change the background of the length. So you see, right now, there's no change in the backgrounds. So if I wanted each item toe, have a background color when you hover over it, I can come down here to the hover select this like gray, and now when you hover, you have a bar behind it that indicates where you are, and if you want to put a background on your current menu item. You could do that as well. And it will do that for each item. That is for the item that you're currently on. Don't like that. So turn that off. Okay, so then the drop down styling again. We don't have a drop down menu here. But if we did, here's where you would style it. Same thing for drop down categories. Post. Uh, this search icon is on here. You can change it here. If you want to turn it off, you can take it off completely. So for social media, you can turn social media on in your menu since we already have it up here. And there are a lot I don't want to take up the room and my main menu for that, so I'm just gonna leave them in the top bar. So for the mobile menu, when you come into this section, this is gonna have you customize it for your mobile phone. What I like to do is click on this little phone icon because that will give you a better idea of what the page will look like on a telephone so you can choose your break points where the content and the images start to break on the page. I generally just leave that as it is, you can select a different logo for you mobile. So if your logo here is too big and you want something a little bit different just for your mobile menu, you can change that there so you can display the word menu next to the burger icon. I'm gonna turn that off because I think that's a little bit distracting. So now you just have the burger menu so you can choose your custom hamburger button here. I just leave it as the traditional one. I like that one, but you can go through and play with all these and see what they come up with. And you may like something different for your site, then for the mobile menu. If you want the menu to open from the left or the right, I prefer mind open from the right. So when I click it, it comes over from the right hand side. And then a few other options. Down here is faras colors, etcetera. So I noticed that my logo did not save. I'm gonna go back and put that logo back in. Oh, I haven't hit Publish, that's why. And it still didn't change. But I think what's happening is this is a retina screen that I'm working on. So I need to put a retina logo in here. I'm gonna go and added into this field, and then it will update here. So I'm also going to adjust it here on my mobile site and see if I could get this just a little bit bigger. Change that. And let's change this. All right. Well, I guess it wants to say exactly like that. So we're gonna do that. Looks like it's max size, so we'll leave it there now. I also did not go change my top bar color. So let's go back and find that and then go to general and then change the background color to my orange color. I want the border to be the same, and I want the link color hover to be, I think, quite a bit darker. So let's do that and publish. All right, so now we've got those color set, so let's go back. And then I also noticed on social look when I hover, they turn green and I don't want that. So I'm gonna come down here. I'm going to also change that to be a little bit darker. So you can see. And then after you publish, you'll see. Now they all hover over to that darker orange color. All right, so I like that. All right, so then I'm gonna go out of that and back toothy general options. I think we've hit everything. So far, we have not looked at this custom CSS and J s. So that's basically custom cascading style sheets and custom javascript. Now, hopefully, this is something you're not gonna need to use If you do know CSS and you know how to write it and make changes to certain elements of the site. This is where you put it. But we're not gonna go over that in this class because that's a bit advanced. I think the last thing we haven't hit is foot of bottom. And if you come down here to the very bottom of your page, you'll see this green bar here. This is the foot or bottom. It's also called the Copyright Area, So if you turn it off you'll see it just disappears and the foot or just goes flush to the bottom of your browser. I kind of like the copyright bar at the bottom, so I usually turn mine on. And then this is where you can edit the text that's in it. And I usually like to say something like Copyright, um, Web design or whatever the name of the company is. And then maybe your privacy policy can live down here and then maybe your terms and conditions, because you want them on your site, but they don't really necessarily need to be in the forefront. And then if you wanted to add a link to it, you do have to put a little bit of HTML in it, which is basically just your link code. And you can look this up online if you're not sure what that is, or you can simply copy this. But what will happen is this is your page link here. You would just replace this pound sign with your page link for your terms and conditions page and then the same thing with privacy policy. So if your privacy policy is, um, privacy policy is your URL you just put that right there and enclosure a link and you're done. You can see it all updates down here. Now again, this bar is still green, so let's change that up. So it's not what I want has changed that back to the orange and then for the hover color. We'll do the same as I did before and just make it a bit darker for the hover Click publish . And then that's done All right, so now that we've done some global changes to the website, we're going to go through and we're gonna edit this page because a lot of the elements on the page are specific to the page not specific to the global settings, so you'll see it ahead on the fitter updated. But then things in the page like this button is still green. The faults are still different in that kind of thing, so we'll get into the page, will edit each page, and I can show you exactly how to customise it with your content and your images. 6. Setting up your on-page design options: now that we've gone over how to create the global styles and settings for your website, lets go and edit this page and I'll show you how to change photos texting colors to make it match your style for your business. We're gonna come over here and we're gonna close out of our customization box by clicking the X and then that's gonna take you back to your WordPress dashboard. And then from here, you can get to your home page two different ways. You can come over here to pages, and that's going to show you all the pages of your site so you could click edit right here . Or you could go and visit the site by hovering over the home icon and click visit site, and that will take you to your home page. And then from here you can click at it. You can also kind of bypass one step by clicking at it with element or an element, or is the page builder that we're using? I'm gonna go ahead and click edit so I can show you how to do it step by step, and then once you've done it, you can just skip this one step. So once you click edit page, it will take you to you're a page screen. We can edit the content of this home page so you can see it doesn't look anything like the page that you were looking at before. This is the default page builder that WordPress gives you with your site, and you're more than welcome to use this. It's called Gutenberg, and it's just a block system where you can put in your text. It's just not very visual, and I really prefer the visual layout. So we're going to do editing with L. A mentor, the page builder that came with this theme. So to do that, we have to turn on L. A mentor, and you do that by just clicking this blue button at the top. It will go through a little process for a second, and then once that opens, you can see that it's much more visual, and it's gonna be a little bit easier for you to go through and edit on the fly. So basically, we've already done the header and footer so you can't edit those from inside this option. You would have to go back to the customization option if you wanted to change anything in the header or the footer. So this is only for on page content. So we're on our page. We have some new choices over here, and then we have all the content over here on the right, and you can see every time I hover over something, you get a box that has a pencil icon to edit this section. So if I wanted to edit this text, I would simply hover over it and click The pencil icon also is a shortcut. You can hover over it and right click on your mouse and then say edit text editor, and that will open the text editor over here. And you can type in whatever it is you'd like to add is gonna add a period. You click update, and then it updates it on the site for you in real time. If you wanted to do something a little more fancy, you have a couple different options. You can come up here to the style you could change the text color. Let's say you want that text to be green, which looks terrible, so we'll put it back to White. Let's say that you wanted the style to be centered instead of left. So you have all those options under style and then a few options under advanced for things like, if you wanted a little more padding at the top, you could do that. You can see it sets all of them. They're locked together. You can turn that log value off, So if you want Onley padding at the top, you can add 20 pixels of padding to the top. You can see it, scooted it down a little bit. You can do a few other things. So the motion effects will have this text animate on the weight and so you can have it Zoom in from the right hand side and you see how that zooms in. You could have it bouncing a couple other effects so you can do that on any text on the site. You can add a background color to this text block. So if you wanted to add, um, an image, you could do that here, or you could just come in and add some color behind it. It will make that block a color. You can add a border to the text the same way you did with the padding. You just type in your your pixel amount. And if you want a shadow, you can click here for the shadow. And you can say, if you want the border to be solid, double dotted, dashed, etcetera and it will do all that over here. I don't think I want any of that. I'm gonna turn that back off and kill. That looks like it's put a shadow on here, which I didn't want so back to default. So that little arrow that was right there click back to the fault. It will reset your settings, and then you can do some custom positioning. Um, you could just mess with this and see kind of how that works. View. I'd like where its position now, right under the text. So I'm gonna leave that for a responsive design. You can say if you want this, maybe to be hidden on mobile devices. For whatever reason, you could turn that off. So when you're on a cell phone, you won't see this text. And then again, if you want to write your own custom, CSS, you could do that for the custom CSS styles. So that is basically the same thing you would go through and do. For all of these different text boxes, you just go through and type your headline, change the fonts and colors of the size, etcetera. So let's edit this button because we don't want it green. So just right click and say at it. And then I want to go under the styles, which is where the colors are, and I'm going to change the text color to be that same peachy orange color. And that is going to be F 2785 p, which gives me that color. You can see it change the text color. Now that's on the normal setting. That's what you see when the screen loads for the hover setting. Gonna copy this? I'm gonna click on the hover option, and it changes the background color. Two. Peach Now and you can see that's all changed. Don't be confused by this blue line around here that actually won't show up on the screen. That's just giving you a visual representation of what it is you're editing at the time. This box here, you'll see, is empty. That's just a space holder so that this text will stay right here. You don't need to do anything in here. If you don't want this text to be pushed all the way to the right, you can delete this box or you can change it to suit. You know where you would like this to align. So let's look at this image real quick. So to do this background image, this is inside of a different container, and you can't really see it because, like if I have Rover, you can get this thin blue line. It's just pretty big to the edges, so it's a little harder to see. But to edit this section, you go up here and you click on these six little dots and you'll see that edit section comes up and then that will give you all the options for that section over here. So I want everything to stay the same, except for the image. So I'm going to click on style and then you can come down here. You can either delete the image altogether, or you can choose a new one, which I'm going to do, and I just click on it. I'm going to select a file from my computer. And since I have that text on the right, I want something that was going to give me some space to the right. So I'm gonna choose this picture and that will load in. And then once it does, I click insert media and you'll see that it drops right into place. So that works really nicely. I like how that looks, and I'm going to click the date because I am done with that section. Now, once that's done, I can go and view the changes by clicking down here. You see this eyeball icon and then that will open a new window without any of the other elements around it. And then you can get a good feel for what site will look like when it's live. That looks nice, right? So we're gonna go and work on the next section now, just gonna close that window outs, go down to the next section and we're just gonna swap out a few more pictures. So these pictures were not actually background images. They're part of the column a Z. You can see cause when you have ever it, so I've just clicked on it. I'm gonna choose a new image for their and we're just gonna go through and pick a few and see how they look in place. And what's nice is that it dynamically resize is these images for you. So you're not having to go and crop every single one of them. The images that I'm dropping in a fairly big eso. The best thing to do is to it would be for you to go in and actually crop these to a closer size so that the image isn't so large. These air each about a Meg, some of file space, and so the site will load faster. You would want to go in and change those to be a bit smaller and optimize them. But for now, we're just gonna put them in and see how they look. All right, so we've got those in place now and we're gonna go down here, swap out this image by clicking these six little buttons and then going to style in selecting that image to change. Okay, through find another photo that works, click insert media. And that's what you would do. You just go on down the page and do that. So I think what I want to do is let's say I don't want this section at all. I've pretty much hit my top points for my home page. So if I want to delete this section, I would come up here to this X. I have a click it and it gets rid of that whole section, so that's pretty easy. Okay, so let's say I want to edit this section. Let's say I only have two testimonials that I want to show here. So I'm going to click on this little icon. I'm going to right click and I'm going to hit Delete, and that's going to take me just to two columns now, once I do that, if I wanted to, I could come up here to this edit button for this section, and then it's gonna show me different structures again for two columns so I could switch it up a little bit, make him left or right or center. I think the 2 50 50 works well, and then I'm going to go again to the background image, and I'm going to go into style and then you can change the image right here. So what's interesting about this picture is that they have this background image faded out . You can see over here how dark it is and over here, how light it is. So let's go change our image real quick. And then we're gonna put in something like this in the background. Click Insert Media Now. Once that's in there, it's already ghosted back because that's how they're settings are. So let's look and see where they've done that. I think it's going to be and border overlay, and it looks like they have an 88% opacity set on top of that image. So what they've done here is on background overlay. They chose this color, which is white, and then they just kind of knock it back just a little bit and you can see like if I put 0% it makes the text hard to read. So if you do like that, then you get a feel for what's back there. But it's very subtle, so you can still read the text. So then when I want to do is I want to come in here and I want to change her name to not be green anymore. So I'm going to triple click on that. It takes me to the style for this testimonial and I can click on name. And then here's the text color right here. Just gonna make that black. Then I'll do the same over here. She does not look like a Hector, but that's all right. I'm gonna come to the name, make that black. And then if I wanted to change anything else, there's all the other different options in here that you can also go through to change can change out the photo. It automatically makes it into a circle. So then I'll come down here. I'm gonna change this as well. To be not green. Let's make that the same color, all right in a click update. And then it's a very, very long page. I think I'm going to late this one. So let's look at this gallery and how it's set up. This is kind of an interesting feature. Basically, what they've done is they've just taken six pictures and put them into a gallery, which is a really nice element on a page. So we're gonna go through how to build your own page from scratch here in a minute. But basically all the elements that you can add to a page or over here on your left hand side and the gallery is just one of those items that you can add. So if you wanted to edit this again, you would do just like any other element. You click on the pencil icon that's going to give you some of the different styling and content options. So the content is the photos themselves, and then the styling or things like how much facing tohave. Um, if you want motion effects when it comes in etcetera. So if you wanted to swap out the images, you could either come in here one by one and edit the gallery. So all I did here was I clicked on one of the images, and that opens up this edit gallery so I can change them around. Change around the order. You can add a caption to them. You can delete them as you want to, so I'm going to delete them. But I'm gonna add a few back in. So let's add in three of the images that we already used on the page and click add to gallery, and I want them to be first on the page and then click insert gallery. So it pulled my metadata from each photo and dropped it in automatically, which is interesting, but that's not really what I want. So I'm going to go back into each image by coming over here and clicking on the image itself. And then you can see right here how it has added in text. So I'm gonna just delete that on all three of these by triple clicking and hitting deletes . Then I click insert gallery again, and it should have updated, but it doesn't look like it did. So let's go try that one more time, I say. So if you click on the image itself, it does have a title. Over here is well, and I'm going to go delete that. That must be what it's pulling and do that click insert gallery, All right, so I'm not sure why they're not updating because I deleted all this text, but let's get going. We're going to see if once we do a full update and go view it if that disappears so I think we're done on there. So let's go down and preview it and see if that makes a difference. So here's hungry pictures, our new buttons, these pictures we added in this image. The two columns made this the the orange yet and see like I thought it just wasn't refreshing the screen. And sometimes that happens, and you just have toe kind of look at it and make sure that it's doing what you want it to do. What's nice about this gallery is when you click on it, it pops up into an image lightbox, so that's kind of cool. Now let's go back. We're almost finished. We're gonna go and look at these icons. So once you're in this element again, it's just a color change. You're going to go into the style. You gonna change this color here to be the one you wanted to, and I'm going to copy that and then I'm gonna go into each one of these into the style and paste in that color. So they're all the same, and it looks like there's also a color on the hover, which I missed. So we'll go and do that and then the last one. Change the hover oops and click update, and then you'll see to those hovers to the correct color. And again, you can come in here and you can change all this info. You can delete a column and then re space everything. Um, you know, there's a lot of different things you can do to customize this, to make it your own. If we were to come up here and delete that now we have three columns. So let's say you want to add something to this page. You know, it's very long already, but let's say we wanted to add an element t to the page down here, towards the bottom. You can see right here. It gives you instructions drag widget here so you can either come over here and drag something into this space. Or you can click on this plus icon and select the set up that you want. So if you want it to be multi columned or set up a certain way, if you don't click that X and come back and find your widget that you want to add in, let's say we want to add a button is going to drag it in here. And so then, once you're button is in place, I want this to be center. So when I'm on content for the button, I'll just click center that drops it into the middle. I also want the button to be different color paste in that color upsets for the actual text color, the background color to be the orange color. And then we also wanted to hover. So let's change it around, too. The background color, but maybe a little darker when it hovers, man, keep the text white, and then you can see when you have heard it changes colors, and that's super easy. So we're gonna click update now I noticed. Here we still have this little green bar and these foot or widgets. So what I'm gonna do as I am going to exit this page editor, and to do that, you click on the three little icons there and you say, Exit to dashboard, and that's going to take you back out to the dashboard. And then, from there, I can go back into the appearance and customize, and I can change the settings for the footer and then once we're in our customization options, this is a little tricky to find this one. So it's not actually in the footer widgets. It's in the general options. And then it's in general settings. Newt. It's in general styling, okay? And so what you see here is here's to global settings that we did not change, which we should have because they're little elements throughout the theme that have these little accents of little, you know, bits of color or an icon and that kind of thing. So if you come in here and you change this primary color and the hover color, then that's going to change all of these little accents automatically, and you won't have to go through and do them as you're building your site. So I'm just gonna click here. I'm going to change that to my orange color, and then I'm going to also use that on the hover. But I'm gonna make it slightly darker by dragging, and you can see it changed it. Here. I'm going to click publish, and now, anywhere there's a little accent color like that, it will automatically be my style color that'll just back out of that which takes you back to your page editor and then I'm just gonna click view page. We've already gone through and saved everything and updated it. So let's see how it looks now. Concealer images are in place. Our colors of all changed our phones. We change globally in the last lesson. This is back to three columns, and it all looks great. So in the next lesson, we're going to create a page from scratch so you can see how that's done, and then you'll be on your way to building your own website. 7. Building a web page from scratch: now that we've gone through and edited a page that was already set up where we just swapped out some images and text. Let's go in and build a page from scratch so that you can see exactly how that works. This is going to give you a little bit stronger knowledge of how this page builder works so that you can do a lot more on your own. So the easiest way to do this is to just start by going up here to new and then clicking page that's going to create a new page for you. So again, when you do that, you're gonna come to the General WordPress Page builder. And there's one thing that you need to do before we get started. Basically, on all of these pages, it will automatically add a title bar for you, and we don't want that on our pages. I'm going to show you what that looks like and then how to shut it off. So if I click edit with L a mentor, it's gonna take me to the elemental page builder and you'll see right here. It gives me this page title, which I don't want on the page. None of the other pages have it, and it looks a little bit strange. So I'm going to back out, did the dashboard and it takes me back to this page so I don't want this page title it to show up. But I do want my page to have a title so I know what it's called when I'm looking to the admin. So I'm just going to call this my new page. And since I don't want this to display on the page, I'm going to come down here to where it says Title. Now these are some of the on page settings that you don't get to see when you're using the elementary page builder. So if you ever need to use any of these and you shouldn't use any except this page title, this is where you'll find them. So I'm just going to click on page title, and then I'm going to say Display page title, and I'm going to turn that off by clicking disabled Now. Once you do that, you go back into edit with L. A mentor. It will go back and it will create the page for you again but you'll see that there's no page title on it, all right, so now we're ready to get started. You'll see that we have the same footer and the same headers on all the other pages, and those designs settings are still intact. So I think what we want to do is let's start off with a page heading and then maybe an image, a little bit of text and then a button, something fairly simple. I'm just going to drag my elements for my page heading here, and this is going to be my new page is amazing. I want that to be centered. I also wanted to be an H one tag, which is the largest tag. I can also come in here and I can change that to a different size. I don't think that's quite big enough. I want to change the style. I can come and I can change the color of the text. Let's say I wanted it to be my regular orange color. I'll put that in there and then if I wanted to change the typography to a different thought , I could do that. Here I can add a shadow to the text, which I don't want to do. And if I wanted to do some advanced settings like some padding and spacing have it pull in with on some animation If I want any custom positioning, same things that we are allowed to do with the other elements that we used on the other page. And now that I've added the heading, I'm gonna go back out to the main grid of elements, which you get by clicking on this icon on the right, so next to one and added image. But I think I'm going to do two column layout. So first I'm gonna dragon intersection and onto the page and you'll see it gives me two columns here, and then I'm going to come down here under layout and I want it to be more of ah, 1/3 to third kind of layout, and then I'm gonna go back up to my grid of elements. I'm gonna find the image element gonna drop that in here. We'll go and choose my image in search and then over, I'm going to go back to my grid of elements here, gonna get my text editor here, and then I can start adding some text. I'm just gonna copy this here, but a couple breaks to make it look interesting, then to style the text. If I wanted to make it a color, change the typography, anything like that, I could make it bold centred, which you don't like. If I wanted motion effects again, same things available here. I could also change it to one of the preset headings. I'm gonna leave it. It's paragraphs and you can turn on a drop cap as well. Says an interesting effect if you wanted to do that. So now I have a headline and image in some text. I'm gonna add a divider. And then if you want to edit that divider a little bit, you can see it's a solid. You could do a double divider, a dash divider. Think we need to make it a little bigger. If you'd actually see some of this, you do. A double divider dashed are dotted. I'm gonna leave it just a za solid and I'm gonna make the color of its the same orange. And I'm gonna line that to the center because I only wanted to be about 50% wide. Then on the advanced again. Similar options that you could do for the text. Go back to my main grid and then I'm going to add a Google map. And once that Google map is in place, you can see it set to the Coca Cola London I in London. But I'm gonna make it to, let's say, 100 Main Street, Austin, Texas 78701 And that gives us downtown Austin, Texas. I'm gonna leave that on there and I'm gonna go back to I'm gonna go back to the main elements. And then let's say I want to add an image gallery like we had on the home page. You can drag that over and then I'm going to click here to add images. I'll just go and grab a couple from my gallery and again, I'm gonna make sure that there's no text in here like there was before. Just gonna delete that right and click insert gallery. It drops in those. So then you come over here and you want to set up kind of how it looks. I don't want them to be a little bit larger. They are not all the same size. I'm going to go back in and just kind of edit this a little bit to make it look right. It's Delete that and add this. That works a little bit better. All right, then it's delete this one and at a different one. Okay, so that looks a little bit better. Um, if we want to. And at this gallery, though, Notice style. I want three columns. There we go. So that looks a little bit better now. I think I need a title above my gallery. I'm gonna add that right here. My photo gallery. I wanted a line to the center, and I believe I want to add some space above that to push it down a little bit from the map . So I'm just gonna you can see this blue line appearing where the space was gonna go, and that gives me a set default of 50 pixels, and I think that looks good. So I'm gonna leave that there, go back to the elements page and let's see, What do we want to do next? I think let's do Ah, icon list. So I wanted to be two columns gonna drag my intersection and Then I'm going to come back up and find my icon list in a drop one on this left side, and then you're gonna have your list items. So this is, um, my first bullet point, and then you can change your icons here. There's ah, icon library that's automatically set up with this scene so you can just click on icon library lips and then you have a few different options that you can use. So you would just pick whatever icon you'd like and click insert. Then you would go to your second list item, change the title, and I'm gonna leave that icon and then your third and you would do the same. And there you go. So that set. Now, if I wanted to copy this and paste it into the next column, I could do that by clicking copy, and then I could come over here and I could say paste. And then that's an easy way to get your similar style and everything over into the next column. And then all I would do is come in here, and I would just change the names of these bullet points if I wanted to. If you wanted to have these bullet points in line like stacked right next to each other. You can also put them in line like this. But generally I like a bulleted list to be on top of each other. If you needed to style them a little bit, you can change the spacing between them. You can change the alignment. You can change the size of the icon and then the color of the icon do all kinds of things to customize it, to make it your own. And let's see what the text you could do the same with the text. I think I want that to be black, and maybe it's indented just a little bit more away from those icons. And again we could use some motion effects if you wanted to defeat in. So I kind of like that. So I think what I'm gonna do is the opposite of what I just did. I'm gonna copy this one, and then I'm gonna paste it here and then I'm going to delete that went and now they're exactly the same. And so there's my page. So I have some text in a headline. A quick map to find me photo gallery and a bulleted list, and you see it keeps the header and footer. So, as you can tell, you're just gonna need to go through here and figure these things out as to how you want them to work. There's a lot of different things that you can do if you want to add your social icons or, if you wanted to add, let's say, an accordion. If you have a lot of text on your page and you want the user to be able to click on Accordions, too, you know, showed the content as they need to read it. Instead of having a huge, long scrolling page. You could do that. I don't want to go through each of these because I think it will be good practice for you to go through and figure them out yourself. But as you can see, there's a lot of different, really nice functionality that you can use to add some interest to each of your pages. So now that we've gone through and we've created a page on our own, we're going to go through a few more items in this theme and the page builder and get things finished up so that you're ready to start building your own site. 8. Installing SEO plugin and image compression plugin: So now that we have the sights set up and you know how to customize your global options and you're on page options and how to build a page from scratch brute going to go over a little bit more of the functionality that you can add to your site this is more of, Ah, nice city. If you wanted to add some interactive features or some widgets to your site, and to do that, we're going to add to the site what is called a plug in. And to do that, we're gonna go from our dashboard and our admin panel over here, toe where it says plug ins. Now when you go to this page, it will show you the plug ins that you already have installed on your site. You'll see that we have four so far. That's not very many. A lot of sites will have 10 or 20 depending on the site itself. Elemental plug in is the page builder we've been using. Foreign awesome is what controls the icons that you're able to add to the site ocean. Extra ocean is the same reasoning, and then these air some extras, like widgets and panels etcetera that come with the theme and then SG optimizer is something that site ground installs on their sites. That optimizes site makes it run a bit faster. So from here you can do things like you get at a membership plug in. To allow people to join the site is a member and see specific information that nonmembers couldn't see. You could add a security plug in for an extra level of security from hacking on your site, you can add interactive Matt plug ins. There's just a whole slew of things you can add. We're gonna go over to plug ins that I always install in my sights. One is for optimizing and compressing images, and one is for search engine optimization, which is also called S E. O. So to add a plug in, it's very easy. You just come up here to add new and once you click that you're going to get a list of different plug ins that you can install so you can scroll through here and you'll see they're just hundreds and hundreds of them. These were some of the most popular you can search my tag like, but generally I just come up here and I type in a search and for the ones we want to add, the optimization plugging is called Smush. So I'm gonna find that here it is Smush image, compression and optimization. So I'm going to click install now and then that will go through a small process and then you can activate it from here. Or you can go back to the plug ins page and activate it there. I'm just gonna go ahead and do it here and then once that's done, I am going to go back and say Add new again and I'm going to add the S e o Plug in that I like to use, which is called Yost. And then that comes up right here. Used S e o Click Install now and then again, once it's installed, Click Activate. And now they're both added. You'll see right here, used and right here. Smush. So let's go over Smush first. It's a little bit faster. I'm just going to click on settings and then it will walk you right through a wizard so you can go through this wizard and it kind of gives you an idea of what it is it's going to do . Basically, what it does is it allows you to smush damages as you upload them, or it allows you to smush them one by one, based on whether or not you want them to be compressed. It also allows you to do things like lazy loading, which means that the image doesn't load until you're down toe where it exists on the page, things like that all these things will make your site load a little bit faster. So basically, for this free version, you can get up to 50 images at a time, smushed by clicking books. Mush. Now you can see I have 41 attachments that needs finishing, so I'm going to click books, mush and then it just goes through and it does it, and it's going to compress the images, so it just saves you a lot of space, and this will just run for a minute, and then when it's done, we'll go onto the next one. Okay, so now it's done smashing all your images. All the attachments have been smushed, and you can see you saved 187.3 kilobytes or 5.1% of your total file size. It's much 128 images, and you can see how that would be really helpful once you get a lot of images on your website there on a ton of them on there right now. But the more you get, the more important this is. I still do suggest that you crop the images to a size close to what you're going to use on the site, as that's the most helpful and compression. But then this is something secondary that you can do that that will really be helpful. So let's go back to our plug ins and let's go to the Yost s CEO plug in that we're going to use for our search engine optimization. So basically, if you just click on settings, that's gonna take you through to the initial Yost s CEO page, and it will walk you through a configuration wizard. So all you need to do is click on configuration wizard and that's gonna get you started. And it's gonna walk you through just a few general questions as faras your site set up what type of site it is, etcetera. So you want to specify if the site is under construction or if it's already active. Generally, if my sights live or from about to launch it to go live, I'm gonna go ahead and say It's live and ready. Click next. What type of site is it? So it is not a blogger or shop. I'm going to say it's a small offline business and click next. Next says your site represent a person or an organization. Mind represents an organisation's. So I'm just going to type in Gezi website design as the name of my company. You can then add in ah logo and I'm going to go back to my media library and find my original logo, which is right here. Choose. And then if I have a Facebook page link Twitter, instagram, all that I can put all of those into here is needed. Click next. So then, on this page is going to ask you which pages you want to show in search engines. So, for example, we don't need my templates to show up in the search results, so I'm going to say no, and we don't need my library to show up in the search results. But we do want any pages or any block post to show up. So both of those will stay. Yes, click next. So on this page, multiple authors. You just want to tell it whether or not your site is going to have multiple people creating different block poster, different pages and I am no. So I'm going to say next and then for the title settings. This is just your meta information. This doesn't really show up on your website, and you can just basically pick the separator of the title. So basically, if I come up here to this tab, you can see this is my meta title for the page. So Geo Steps CEO, and then it has the forward carrot, and then it says configuration wizard. So yo Stasio is the is the site name, and then configuration wizard is the page that you're on, and the right hand carrot is the title separator that they have chosen. So I'm just going to use this pipe and say next. Then you can sign up for the newsletter if you want to, which I don't and click next and then they have a few up cells, which I don't want, and I'll click next. And then that's it. So then, once you get here, what's really nice is you can go through this WordPress Yost training. It's just a quick video. That kind of talks about Yost and how best to use it. I've already done that. So I'm going to click close, but feel free to watch that. That's really helpful. Now, when she collect close, it takes you back to this dashboard, and there are a couple of the tabs we should go over. So features just let you turn often on specific features of Yost s CEO. Uh, I don't use a lot of these features, so I do come in and turn some of them off just so they're not distracting on the page. But this is going to be up to you as to what you want to see on your site. And each of these little question marks will give you the information about what each of these things is. So I am going to turn off cornerstone content text link, counter right. Integration. The admin bar menu just puts your little icon appears you could get to it easily. I like to have that on, and I'm going to click, save changes and then under Web master tools, this is where you can come and get verified for different search engines. So Google or bang, I don't know what Badu and the Index are, but they look like they're very specific to certain search engines, probably ones that are not in America. So all you would need to do is to get your Google verification or you're being verification . You would click on one of these links. It will take you to those sites. Then you'll probably have to set up an account, and it will walk you through how to do that. And then once you get to the right spot, is gonna give you a code. You'll copy that code. You'll come back here and you'll pasted in place and then you click Save, so it's multi step. But it's totally worth going and doing. And once you've walked through this wizard in these three tabs, your about 90% of the wave done. You can also come over here on under the Yost section on your admin toolbar and click on Social and then on that page, you can put in your Facebook your l Twitter Instagram, etcetera here. And then you can also go into each of these separately. And if you have a Facebook app idea, you can put that in there. And if you have a specific image, you would like to be used on any pages that don't have an image on that page. So let's say you going to Facebook? You want to post a link to your contact page, but your contact page doesn't have an image on the page. It just has, you know, your general address and phone number. If you upload an image here, it would use this image as the default image if your page doesn't have a photo wanted already. So that's really nice tohave. And then you can go and do the same thing for Twitter and also for Pinterest. So once you've gotten all this set up, what you will notice is when you go back to your website pages and you click to edit the page so you'll notice I click Edit page. I did not click edit with L. A mentor. When you get on this page, you're going to scroll down and you will see this section of the site for the Yost s CEO plug in. So these are going to be where you put your own page metadata for this specific page and for all the other pages of your site. So what we did first was global, and these are on page settings. So basically, you're gonna put in your key phrase for this page, and this is the home page, Ron. So I'm just going to say, um but see, our focus key phrase should be two or three words. I'm going to say, um wordpress website design. All right, and then I'm going to come down here. This is a preview of what it's gonna look like when you're a search result comes up on Google. So I want to change this snippet of the description so you can see that it has taken the page that you're on, which is my home page and Web design, which is the name of my sight. And it is automatically created that for May and then in the meta description, I can type down here a description of what this pages. So let's say the site we'll teach you how to usually build word press, but site from scratch, including how to. And you see this orange bar at the bottom That's giving you an idea of how many letters how many characters you need in your description. So it's orange here and then, as I type in name, it goes to green. So now I'm in the green Zone, so don't want to go over that if I can help it. All right, so still in the grain. If you go over that a bit, you'll see that it then turns back to orange. You're not gonna get penalized for having too many, but it is going to truncate it. You can see up here. It stops at Web hosting. But if I had continued to put in more characters, you see, it just puts the dot, dot, dot and that doesn't show up in your search. Engine results listening. So I try and stop it there. You also want to try and use keywords that you've used in your focus key phrase and that you've used on page and all those things kind of work together to give you a better ranking . No, I'm not an s CEO expert. These are just some little things that you can do. If you need somebody to help you write your S E o for your website. That's a whole different discipline on. And I'm sure there are other classes on here that you can go and watch about search engine optimization. But for now, this is what you would want to do for each page of your site. Also, when you come back up here to the top, you'll see that there are four tabs. The social tab is really important as well. So basically, if you go to Facebook or Twitter and you want to link to this home page, you can set right here in this section exactly what you wanted to say. So instead of it pulling the word home as the title for your post on Facebook, you can type in easily, create your wordpress website. That's gonna be the title instead, and then you can also put a description, and then you can also set whatever image you would like it to show. Now, if you have an image on this page, it will pull that automatically. But if not you can set that image here, and putting an image here will override the global image that you may have put into the Yost Global settings earlier. Once you've done all that, you just click update. It will update it on this page and then you're all set. Now you've set up Yost global settings for a search engine optimization. You've smushed the images on your site so that the load faster. And now you're ready to go and launch a website. So I think we've made great progress in our class. We've gotten the hosting set up in the domain name registered. We have WordPress installed with a demo theme that we've customized to our colors and fonts and our imagery, and it looks great. So we have some plug ins install that will help the site, and you're on your way to a having your brand new website and the next Listen, we're going to do a quick wrap up, and then I will talk about your class project 9. Wrap up & your class project: already, folks, that's a wrap. You have successfully completed my class on how to easily build a WordPress website and eight simple steps. I hope it wasn't too overwhelming for you and that she learned everything that you need in order to build your own website. If you have any questions as you're going along, building your site, please post them in the community tableau. And I'm happy to help you get through any roadblocks that you come across. Let's review what we've learned in this class in my class. She learned how to register your domain name, set up your hosting account, install the WordPress software pick and install your theme installed demo pages for that same, customize the global design settings, customize your own page design settings and then install plug ins to compress images and set up your S E O. That kind of sounds like a lot, but you got so much done and now you have everything that you need in order to build your website. So the one thing we didn't discuss in the class is where to find images to use on your site . So in the project notes, which you confined by clicking on the projects and resource is tab below. You'll find links to all the software we used in this class and a list of free or low cost stock imagery and stock video websites where you can find photos and videos to use on your site. So free a class project. If you didn't build your site along with May as you watch the class than your project is to get started now and build your website, use the tips and instructions in the class to get your website your are registered. Then set up your hosting and install WordPress. And then once that's done, find a theme that you'd like to use. If L. A mentor doesn't come installed with the theme, there's a link in the project in resource is tab for you to download Elemental for free so that you can use that as your page builder. And then when your side is set up, be sure to install smush and use to compress your images and optimize your site for search engines. If you did build your site along with me during the class, I'd love to see what you came up with. Did you hit any roadblocks or have any questions, post them on the community tab. And I'm happy to help you get through the building process. I'm really excited to see what you built in what you learned in the class. So please leave some feedback or post a review. And if you have any questions, I'm happy to help you out. Thanks so much. Hope to see you in my next class.