Web Design with WordPress: Everything from Beginning to End

1. Choosing your platform: The difference between WordPress.com & WordPress.org: All right, let's talk about WordPress now. There's a good chance you've done a little bit of research on your own, but I want to start from zero just to get you up and running and kind of help. You understand the difference, especially between wordpress dot com, which we see on the left here, and wordpress dot org's, which we have on the right. What is the difference? Well, let's talk. Let's talk about WordPress. It's a chunk of code. It's a bunch of files that make up this foundation to build websites on. So, with wordpress dot com, they're hosting that chunk of codes and files for you. They take care of everything, and it's all gift wrapped in nice and tidy on wordpress dot org's. You get all those files yourself, but you're responsible for installing them on a server. Now many of you know what a server is. But for those of you who don't, all the server is is a fancy computer. It's just this. Just think of it as a computer that's always on somewhere that serves your files. Your website Think of a file is like a word doc or something. But in this case, it's an HTML file that your website browser can display. So you've got the server, this computer that's always on. So when somebody goes to your website, it says, Oh, here you go. Here's the file you're looking for. So what we're doing with wordpress dot org's over here on the right is we're taking that foundation that bundle of files and putting them on your own computer. Basically, you're renting space from a host somebody like Go Daddy or Blue Host. There's a whole bunch of them. We'll talk about that in a second with wordpress dot com. Think of it more like Facebook or any other site. You might log into where they handle everything. You create your own account, but they take care of everything else. Let's talk about pros and cons. One of the biggest prose is you can create an account and be up and running almost instantly with wordpress dot com. That's outstanding. If you're just trying to kick the tires and you want to see if this is the right fit for you. However, you'll notice very quickly that there are some limitations with wordpress dot com. Let's go and take a look that road quick, I'm gonna click on this pricing tab. And more than likely, if you were to jump in with the free plan, here are some of the limitations I want to bring to your attention right away. The first is you're gonna have a wordpress dot com domain name. So let's say you you named your site. It would be whatever your name is dot wordpress dot com in your browser window. That's fine for playing around as a business or professional. That's not gonna work so immediately. You're gonna want to do the custom domain name, which puts you up into the $4 a month build yearly plan. That's not a big deal that's pretty inexpensive, especially for getting started. You're also going to gain a little more storage down here, which again is great. But six gigs is not that much. If you're going to do anything with video or photos or anything more than just, you know, text blogging, it will also remove the wordpress dot com ads, which is great because on the free plan, there's going to be ads displayed on your website again. Not that great if this is going to be something that you're using for your portfolio or in a professional manner at all. So let's jump up a little bit further to the premium plan. This is great. It adds more space for us. It removes those ads. You can also monetize your site, and it gives video press support. To be totally honest, I've never used those, so I can't speak to what that even means. Let's jump up a little bit further, though, So for $25 a month, we get a lot more. We can install plug ins and upload themes, and I want to point this out for the lower ends and Salling plug ins and uploading themes. So a plug in is a bundle of code that lets you doom or with your site. There's a lot of plug ins. For example. Maybe you want a gallery to show off your images. You can install a plug in and then immediately have functionality to create a gallery or maybe create a store or any number of things that you're gonna want to do. You're gonna figure out real quick as you get going, you're gonna want to add more to your website, also with themes. Now, if you're paying for the premium, this is new. You can upload teams before you couldn't do to match, you had to pick from their themes and there's about 320 which would seem great. But you're probably going to get into it and want to tweak things here and there. And unless you're paying for this more advanced plan, you can't customise anything. So if you're somebody who likes to have, somebody likes to know that you're secure, that your sites say if you've got people to help you. If you run into problems, wordpress dot com could be a great option for you, especially as you're getting up and running. However, if you're going to be doing any kind of customization or adding more to your site than just pages for a blawg, I'd highly recommend you dive in with wordpress dot org's, which is exactly what we're going to show you in this course. It's the whole reason why you've signed up here. The other thing is, let's say you're doing this for a friend or your parents business or your business, or you want to start a career as a Web developer and a Web designer. You might as well just dive into the wordpress dot org's ecosystem because you can do anything you want. You download the chunk of files that the Zip folder with all the files that make WordPress and it's yours to do with whatever you want. You can update it. You can modify it. You have access to every line of code. So as you progress as you want to add more or customize it, or as you continue to learn, you have complete control, which is a huge bonus. The other thing is, if you're working for somebody else and they have an idea. If you're on wordpress dot com, your ability to change things is going to be very limited, and I can guarantee you if you're working for somebody else, they're always in have ideas or they're going to want to do things that being on wordpress dot or God will give you the freedom to do so. I hope I answered any questions you might have had between wordpress dot com and wordpress dot org's. This gives you the basic overview, and you'll continue to learn more as we progress through this course, but hopefully this makes it clear for you where you need to go. So in the next video, we're gonna talk about how to get up and running quickly so you can start kicking the tires . 2. Local Development vs. Remote Development and Static vs. Dynamic websites: all right. Before we move on, I wanted to find two terms for you. The first is static and then dynamic. And how that relates to what we're about to do is we're building a dynamic website. What that means is we have the foundation being WordPress, but every time you load a page, it dynamically talks to the server. Remember, that server is just a computer that you're renting space from, like go daddy, your blue host or somebody. So your your website requests information from the server to build the site. So let's say you're adding a store or a blawg. Your site is dynamic in that you might write your block post and it's up on the website. And then depending on what you've told it to do, that that chunk of code will build itself. It will go to the server and say, Hey, I need this post. I need this image and all of this happens in a split second. But that's what we call dynamic versus, say, a static site. If you're a graphic designer, perhaps you've played with Adobe Muse. There's a handful of others, or maybe back in the day I Web if you're ah Mac user. But these are all static HTML sites that basically they are what they are like. There's nothing happening between your Your website is not talking to the database. So when we have WordPress, we've got our main core files. But then we also have what's called the database and think of it like an Excel spreadsheet is just full of data that it plugs into your WordPress files as the website is requested. So what we need to do to make this work is either put the WordPress files on a server. We'll talk about that in later videos, but just to get going right now, up and running quickly, we're going to download some software that will pretend it's a host. It's a virtual server running on your own computer, so this is something that is really beneficial for a couple reasons. The first is it's fast because we're not waiting on an Internet connection to build your website as you build out your site. Changes will happen immediately. This is really important for developers as you're working through things, but the con is because it's not on a real server. Nobody outside of your network, your computer in front of you, we'll be able to see it. So if you have a client that wants to see your work, they can't see it until you either send them screenshots or share it with them another way , or maybe get in person to view it. The second benefit to building this way is it's actually more secure because WordPress is dynamic and it is making requests to the server. It can be hacked, and that happens quite a bit, actually. So we will also cover security and how to protect yourself. But while you're building your website now because it's only on your computer and not available 24 7 for hackers to try and get in and do stuff, it's more secure to build this way. So now that you know the day between static and dynamic, we're going to jump in with the next lecture and downloaded an application to help get your website up and running 3. Set up, Log in, Configure, Create! (WordPress local Install with Flywheel): all right, This is the best part of this whole course. We're gonna make a WordPress site and we're going to do it crazy fast. So when we're all said and done, here's what's gonna be ableto happen. You could open up this app that will host your websites. Locally, you'll click. Create a new site and you'll give it a name it. Continue it Continue. We'll go ahead and add the site. And just like that opened, Put in my admin password real quick. This app will build your local website and now click view site. And Boehm, there is my new WordPress website literally that fast. I can come back into that app and click on the admin button here and it'll take me right into that website we just made Okay. And now I'm inside of my fully functioning WordPress website and that was in a matter of seconds. You can see that it's my site dot Dev is the domain name. We'll talk more about that in a second. But again, what I want to emphasize here is that literally took a few seconds. So I'm showing you this now because I want you to understand when we jump through some of these hoops to make it happen. Why we're doing this. So now that you know we can do let me step back just a few things here real quick. I want to show you. Okay, So when I first started building my WordPress websites, I used ma'am. Ma'am is a free application that does basically what we just did. It's a little more involved, but it's free and it works great. It's what I used to use up until, like, literally a week ago when I discovered this other app. Man Pro is the professional version. Actually, this is what I used because I could host multiple sites and had a lot more bells and whistles under the hood. If you're on Windows or Mac, you can use either one of these and they're great. Okay, so then the next thing I started to use was desktop server from server press. You download the app and it doesn't much the same thing again. Great app. Even faster than ma'am for me. I really liked some of the things about it. And now I just discovered local by flywheel actually discover this was researching for this course, I wanted to show you guys something that was simple and easy to use. And I love this. So what I want you to do is go to local dot get flywheel dot com and what we're gonna do is click this big free download button. Now, the download is about 500 megs. So come in here, click the button, choose whether you're on a Mac or Windows, give them your name and email all information and click. Get it. Now, the rest of it's pretty straightforward. If you've ever installed any, have an application. So just step through that, get it up and running toe where you now have the option for for running this local by flywheel. So go ahead and do that right now. Get all set up, and then in the next lesson, we're gonna do what I just did were actually stepped through and created a WordPress site. But I'll show you more of the options and Maurer of the preferences that you're gonna want to pay attention to. So okay, go ahead and download that now, and we'll see in the next lesson 4. Reviewing preferences to speed up your workflow in "Local by Flywheel.": all right. I hope you've got local by flywheel installed and ready to go. In fact, if you're like me, you've probably already created a website and you've already started clicking buttons and making your own stuff, and you don't even need me anymore. But let's go ahead and take a look real quick at some of the preferences. I just want to show you a little bit more about this program to help expedite your workflow . So the first thing I want to show you is your preferences. So come up here to the title. Local by flywheel. Click on Preferences. That's if you're on a Mac. If you're on a PC, I think it's up to edit down to preferences. I don't know. I'm sorry. You're kind of on your own if you're on a PC. It's been forever, since I've used a PC anyway, So in my preferences we have our new site defaults. So every time you make a new website, this is the information it's going to use and where it's going to save it. So from this environment, what this means is what type of coding, language and database versions are you using? Don't even worry about this yet. This is an advanced topic. We're just gonna leave it as preferred. And what that's going to do is, as long as your application is up to date, it's going to just configure everything for you by default. So right now we've got this environment defaults. We're using this PHP version and this my sequel version. And again, I would just leave us alone. Don't even worry about it right now as you get better as you get mawr developer minded. And and maybe this won't ever be for you, but you'll be able to custom pick what that looks like. Okay, next your admin user name, make sure it's not admin. That's the worst thing you could do. It's very easy to get hacked if you put that on your website. So go ahead and take the time to make your user name something unique. Maybe even add some numbers and symbols and stuff. Same thing with your password. Take the time to make sure you have a secure password. Go ahead and put in the email address you'd like to use. This comes in handy if you ever forget your password. When she migrate this, you can have WordPress send the password reset link to your email. So go ahead and put your admin email in there and then the default sites path. This is just where the files live. So if eyebrows right now, it puts all of the site files, Actually, they're going to be under my root folder under local sites, and then each new website is gonna have its own folder that's gonna have all of the WordPress files inside of it. So this is just telling it where to save those files. You can put him wherever you want, but wherever you put him, make sure you don't move him after the fact because it can break links and cause lots of other problems. So that's gonna be good for now. Go and leave development mode on. I've Like I said, I'm pretty new to this application, so I haven't even been able to use this enough to know whether on or off is going to make much of a difference. The forms I read basically just said, leave it on and forget it. So that's what I'm gonna do. We have some other options over here for exporting advanced blueprints and add ons. Honestly, all the stuff right now is good to go. This is the main setting I wanted to show you. Is these new site defaults? So I'm gonna click on this X over here on the top, right to close my preferences. And now I'm back into my main local sites window. I can click on the site that we've already created, and we can step through and look Atmore of these options. These are things that will get into again at a later date. Just know that under the database, remember that slide I showed you where we have the first slide that showed the course those core files. And then I showed the database and the database is basically the guts of your website. It's It's the Excel spreadsheet that has all the data inside of it to build your website. Well, clicking here I can click on add minor, and this is my database files. So over here in the top left, I can click export, and I can export all of my database information. Super simple to do So. This is gonna come in handy later when we go to move this and do other things. We also have RSS l and R utilities. Then click on the admin website or we can actually view the site. OK, so this is I know I blitz through this, but the reason why is because we don't need to worry about this yet. I just want to show you that you can click around in here to kind of see this more features of your website. We can also click on this little arrow right up here, and that's gonna pop us right over to our root folder for the website. Okay, this is all good we're getting We're getting up and running. We're getting ready to go here. The last thing I want to show you before we move on is this live link button. This is also a huge because in that previous video where I mentioned the pros and cons to a local WordPress build, this is one of the huge cons is not being able to show clients especially if your clients aren't in the same city, is you? It's difficult to upload the file. First, you've got to export all your database and you gotta upload the core files and upload the data base and up update the links and do a lot of work just to let them see it. And then if there's any changes you don't want to work on the remote site, you gotta pull it back down and just do a lot of work. So what we can do here with this live link button if I click enable it gives me a link. So this is on right now on my computer. If you were to go to this link, you could see this website live right now. Now, if you try it, it's not gonna work, because whenever you probably go to this link, I'm my computer might not be turned on, and this app might not be open. So for this to work, your app actually has to be on and running. So right here this is one site running. It's got the little green next to it. That means the virtual server is running. I can stop it by clicking that stop sign, and it's gonna turn off the server and everything else that it needs to run. And what's gonna happen if I come over here to that link and I refresh it. It doesn't work, so this is more likely more, most likely what you're going to be seeing if you visit that link. However, if you were, let's say you were my client and I wanted to show you Hey, here's the website I'm working on and here's how it's looking. I'd turn that link on, I'd make sure my site was running. So click on that little button right here, a little play. But now my site has a green circle next to it, telling me it's on the powers on its running. And if I refresh this page now, it works. So now I could call my client and we could have or whether it's a Google hang out or Skype call or a phone call or something, and we could walk through the website together and look at the progress. So this is a new awesome feature and super easy to do. You could do this with Mam, and you might have been able to do it with that server press version as well. To be honest, I never really did that with those, so I I do remember Mam was a little more difficult. You couldn't just turn it on like this. So this is a huge game changer for being able to work locally, have this speed while you're developing, but then also have the flexibility to share it as well as a security. So when I disable this now, I'd have to worry about my site getting hacked or anything weird happening to it before I'm ready to turn it on and go live so very, very cool features here. What I want to do now is just quickly show you. Now, if you want to make another site, we've got this one running. I can click this plus button down here in the bottom left and just add another site. Whatever you want it to be. I could continue and again I'll could continue because I'm not worried about doing any custom configurations. And then this will pull those default options that I set in those preferences. Click add site. So now I've got another side over here, and it's just that easy. It's super cool. Go and take the time to play with a little bit, and what we're going to do in the next video is actually start exploring WordPress 5. Logging in to a WordPress web site: Let's take a look at how to log into your WordPress site. Now I'm already logged in from the previous lesson. So what I'm gonna do is come over to the top right over over my name and then come down and click on Log Out. Now that I'm logged out, there's a few ways you could get back in. If you're using the local by fly will app. It's actually really straightforward. Just click on the site you want to log into, then over here towards the right. We've got this great admin button and I'll click on that and it'll take me straight to my log in page for WordPress safaris, remembering my password. So I'll click on that and it log in and I'm back into the dashboard. It couldn't be much simpler than that. Now, if you're trying to log in to a remote site, say, on Go Daddy or Blue host or some other hosting platform, all you have to do is go to the website address, so in this case it's my site dot dev. I can hit, return and see the live site now because I have already logged in on this window it remembers that and has this heads up display options bar across the top. Now, if I was truly logged out well, long out again and we'll go back to my site dot Dev, we would just see the website without that options bar across the top. So what we're gonna do is click in the Web address and at the very end of her in a type forward slash That's the one that's got the question mark on it. Log in and hit Return. Now this works. This works most of the time, but there will be some instances where for security reasons or some other reason to pay and the version of WordPress or the software running on your server, that might not always work. So when I hit Log in and hit Return, it actually redirected me to this WP dash log in dot PHP link. It's just a little more difficult to remember, but if you go to that to begin with, you go to the same spot and then last. If we went to my site dot Deb forward slash Debbie P dash admin light return, and that will get us there as well. So As you can see, there's a lot of different ways to get to your log in page. My favorite, of course, like I said, is just to type that Ford slash and then log in at the end. So just to recap, we can click the admin button in local by flywheel. We can go to the Web address and at the end type Ford slash log in. We could type forward slash WP dash admin or we could type in forward slash WP dash log in dot PHP. 6. Configuring WordPress Settings: it's time to roll up our sleeves and actually start working with WordPress. So I'm going to jump back into my sight. We'll go back to the lodge in process that we just learned about in the previous video, and I'm going to just show you a brief overview of the WordPress dashboard and then some of the main settings that I do every time. So we're in Wordpress. Congratulations on making it this far. I hope you're excited about what you've learned so far, and then it's gone well for you. Now what we're gonna do is just go through a couple quick things in the top left. We've got whatever the site title, you named your site. So right now, because I call that my sight. This link says my sight. But if you called it my awesome portfolio, that would say my awesome portfolio. This will always be here when you're logged in so we can click on the house or the text, and it will talk. Go back and forth between your live site and your dashboard, so that's a safe place to just be able to jump back and forth. I could also click on this visit site button. It does the exact same thing, though. All right. So in our dashboard down this left hand side, we have a lot of different things that you should check out. Now, keep in mind if you break anything. Well, for one, it's gonna be difficult to break anything this early on. But if you do, don't worry about it at all. Because as you've learned, setting up a new site is very, very easy. If you're worried about it, you come up here and right click on your site and click the clone button and it'll make a copy of your website so you don't have to worry about breaking anything right now. Actually, while I'm in here, I'm gonna do some house cleaning and click delete will delete this. Another site that I made as a sample. I'm also gonna have it move these site files to the trash. That way I don't have any clutter on my computer. When this is all said and done Now back in the dashboard, I just want to run through a few settings that you should be aware of. That I change with every website that I build So what I'm gonna do is down the left hand side towards the bottom. We have this link for settings. I can click on that. And now I see all of the settings sub tabs listed below it. We're going to start off at the General tab and we can see our site title. You can changes to anything you want. And when you do that, it will update on this menu tab up top here, as well as depending on the theme you're using, it will update the theme as well. So, for example, when I I'm gonna command click on this home icon on a PC control click, what that's going to do is open up a new tab. And that way I can click over here and kind of see what's going on without losing my place in the dashboard. So I'm over on this tab and you'll see this title. It says my sight. Just another WordPress site. So some themes will support this others this might be hidden, and it might be reserved for an image for your logo. It just depends on the theme jumping back into my settings. This tagline is something I would take the time to create something that's meaningful to your website. The reason why is, even if the theme doesn't display this text or you have it turned off in the back end of your website, this text will still be there, and Google and any other search engine will see it. So this helps with your search engine optimization. It's not a big deal, but it is something that helps. So the rest of this looks pretty good. What I'm gonna do now is actually make sure this email address is one that I would want to get notifications for admin purposes. So any time there's a new user, or maybe there's an update available for the software or anything like that that's related to the website, this will be sent to whatever email address you put here. The other thing I change is the time zone. So right now we're at UTC plus zero. I'm going to changes to UTC minus seven because I'm in the mountain standard time zone. And that way, if I have any blawg posts or any updates that go live or any scheduled posts, they will be published based on my time zone. If you want to figure out what times on your at, just open up a new browser window and Google what UTC time zone m I in. And then from there, you should be able to see. For example, I'm in the mountain Standard Time Zone and it says UTC minus seven. So that's how I figured that out. When I'm done with those changes down here in the bottom, we have the blue save changes button, so be sure you click on that before you navigate away from this page or you'll lose your settings. I'm gonna come to the writing tab, and everything in here is fine. I usually don't change anything in here. Now click on the reading tab, and this is something we'll learn more about in future lessons. But I want you to be aware this is where you can set your home page. So currently are homepages dynamically set to be our latest posts. So if I come back to the website and a scroll down, you'll see that on the home page. This hello World post is what shows up here, so whatever the most recent post is will be featured on the website and will jump to the top. We can change that and make it a static page. I could click on this, and if I had any pages created, I'd click on that and then select what page is my home page? That's gonna be really helpful down the road when we set up our website further. The other thing you might consider that I do often is discouraged search engines from indexing this site. So right now we're building locally. This doesn't matter too much. But if I were to be working on a server and published this, I don't want Google to take a snapshot of a work in progress. And then maybe down the road, once I have my riel site up, it could be displaying outdated content people in search results. So I try and leave that on until I know everything's exactly how I want it. I'm gonna go ahead and click, save changes here and then under discussion. Because WordPress was developed to be a blogging website builder, it has great discussion settings and great commenting options, which is great if you've got a website that you want that to happen. However, if you've got a site that's a static site or your portfolio site, and you don't really want a bunch of spam comments. What you can do is come in here and turn off the option to allow people to post comments on new articles, so I'll turn that off and actually I'll turn these two options off is well, and then I'll come down here just in case I happen to have pages that are already up that I might not be aware of that have that already turned on. Maybe that happened. Before I turn these settings off, I turn on comment. Must be manually proved so. At the very least, nothing slips by without me seeing it to get posted on the website. I'm gonna scroll down and click, save changes again. I'll go to this media tab just so you can see it. I've never made any changes to this as long as this is set to organize my uploads into month and year based folders. For me, it keeps things clean and organized on the server. But again, all this should be just exactly how you need it. I wouldn't worry about this too much yet and then last is Perma links. Perma links are basically the link structure. So this is your website? You are l my side, Doc Dev. By default, it will probably look something like this. It would be this gross question. Mark p equals 123 And what that is, Is it saying load whatever this pages and each page you make in wordpress actually has a number, but for humans is difficult to remember what that is. So I like to use the post name option. So if I click on that, whatever my page name is, that's what will show up. So for example, my about page would say my site dot dev ford slash about So that's what I'm gonna do here is leave it as Post Name will scroll down and hit save changes. And now my permit links have been updated. Those are the biggest changes that I make for every WordPress site that I do when I first created. So what I'm gonna do now is go ahead and pauses video, and then the next lesson we're gonna learn a little bit more about how to create pages and more content in your WordPress site. 7. Pages in WordPress: in this video, we're gonna take a look at creating pages and WordPress before we do. I just want to point something out real quick. In the last video I had you set your Perma links to Post Name, but I noticed that it through this index dot PHP in there as well. But we don't want that. I'm gonna click on custom structure and just delete this portion right here, this index dot PHP and in the slash I delete. And now it just has a slash percent post name percent slash. Go ahead and do that and then hit save changes. That way our links moving forward will be much cleaner and simple. Okay, with that done, let's jump over and take a look at pages and WordPress. I'm gonna come up here in the sidebar and click pages, and you'll see we have a sample page by default. Ah, click on the title, which is the same as clicking on this edit link will take us to the exact same spot. And you can see we have our page title. We can see what our Perma link will be. And that's that structure. We literally just changed So now, instead of saying my site dot dev ford slash index dot PHP Ford's last sample page It just has that slash sample page. I can change this link at any time. And where this is really helpful is if you're doing a promotion. So I have a lot of clients that will do different things, like same mail out of postcard that might say something like October sale or flash sale or some kind of event or anything you can think of. So what you can do is highlight this text, whatever this pages, and you can make the link whatever you want. So in this case, maybe we want to say sale it. Okay, And now, when I'm done, all hit this update button, and what that will do is update this page on the website. So if I click on this link, I can see the actual link would be my site dot dep ford slash sale. So this is really helpful when you're doing a print promotion or some sort of advertisement online. You can control what that link is, and that's really helpful for consistent branding. I'm gonna jump back to that page. I'll leave that alone. I just want to point out a couple more things. So right now we have this visual editor here, so our text looks better. It's style that you can see. It's got the paragraph style applied. We can make it bold. I could add heading to the top of this. Maybe, uh, my heading here, click on the drop down and give it an appropriate heading for that style and start to form at my tax. I can add bulleted lists. I got quotes, a line, it at links we can read mawr. I can even ta go the toolbar option, which gives me more options like colors and things like that. This is all great to just be able to type out anything you want and see exactly what it is . We can also add media right here. So if I wanted to add an image on this page, I could just hit return, click add media, and then select a file for my computer and we're gonna get into adding media later. So we're going to come back to that. If I'm on the text of you option here, you can see that ice. I can see the HTML markup. So if you're familiar with HTML, then this is great. You can dive in, roll up your sleeves and really arm wrestle the code to be exactly what you want. But chances are if you're graphic designer, this looks pretty foreign to you. So you're gonna want to make sure that you hang out on this visual tab. For now, that's all I really want to focus on someone hit update. I'm gonna come back up here and what I want to show you is there's multiple ways to add new pages toward press. So we're gonna try mall. So right now I'm gonna add a new page by clicking this button at the top. I'm gonna call this one home. I will say my home page. Now, over here on the right, I'm gonna click Publish another way to create a new pages across the top. We have this new come down to page and click page, and this is another way to add a new page. We'll call this one about, and I could save this as a draft if I wanted to come back to it later. That way it doesn't actually publish on the live website. Let's say you are making something and you weren't quite ready to send it live yet. You could just save it as a draft. When I come back into my pages, you could see that it's his draft. Right next to it. I can click quick edit. And rather than opening up the whole page page, it will open up this quick edit menu where I can change the status from draft Toe published on a click update. And now that page will be live as well. One other way to add a new page is underneath this pages tab down to add new so you can see there's a few different ways to achieve the same thing. I'm gonna call this page contact, and this time I'm gonna hit preview. What that's going to do is show me a preview of what the site will look like without actually making a change to the site. This is helpful if you're making text changes or making changes your page, but you don't want everybody else to see it yet. I'll hit publish. I'm gonna get back over to all my pages and you can see I've got about contact home and a sample page. Now, if I go over to my website, I'm gonna click right here on the title. You'll notice when I scroll down. I can't see any of that. There's no menus. There's nothing that would show me those pages I just made. So in the next video, we're gonna take a look at how to create a custom menu for your website. 8. Create a custom navigation menu: So now that we've created a few sample pages and we have our settings dialed in, let's take a look at creating a custom menu in this lecture. We're gonna add a menu to this so we can actually navigate between all of the pages we just made. Let's start by going back to my dashboard and we will go down to appearance and menus Now that you're here, let's go ahead and create a new menu. So at the top, it says, create new menu will click on that, and we have this menu name. I just call mine May Knave or Main menu doesn't really matter. This is just for you to know which menu it is that you're working on. Once I have that name in here, I'll click create menu. Now we can tell WordPress where to put this menu. The reason this might be helpful is depending on the theme you're using. You might have various locations for this menu to go, For example, you might have a footer menu where you put things like an F a Q or different things that you'd see on an e commerce website like your terms and policy and things like that for maybe shipping returns, etcetera. We can also put this in our main top menu. This titles right here. This display location is going to control where this shows up. Not every theme has the same locations and not Ember. Every theme calls it the same things. You're gonna have to kind of use your best judgment right now. We want this to be our top menu. This is going to put it as our main menu across the whole site. You'll also see with this theme we have the social links menu and that's going to put the menu in a different spot. This would be if you were trying to put, say, instagram Twitter linked in or things like that as your social links so you could create a menu just for that. So now that I've got the location selected, I was gonna hit save menu real quick, and so far we don't have any menu items added yet. Well, over here on the left, you can see the most recent things that we've created, and the site isn't very big yet, so this pretty much shows every page we've created. You can also click view all to see all of the pages that are in our site. And if this was a big site, you might need to search so you could click on the search box and actually type in the page you're looking for. I've found that usually leaving it on the most recent tab works. Great, because whatever I've just created is what I'm most likely trying to add to the menu and it'll show up right here. Now, I can do this one at a time, or in this case, I want to add everything to this menu. I'll click add to menu. And now I have my menu links. If I save this and now jump over to my site and refresh the page. You can see that those links pop up across the top. This is great. We've got a good start now. I noticed the sample page is over here at the top left. I don't want to show the sample page it all and my home pages over here on the right, and I'd rather it be over here in its first position. I'm gonna jump back to my menu tab or to do a couple things. So I'm gonna click this little twirl down arrow on the side of sample page and I'm gonna click. Remove that will delete it for my menu. But it won't delete the page from WordPress, so that page still exists. If you have a link to it somewhere in your sight, that would still work. But for now, it just simply won't show up in our menu. Now I'm gonna do is click and drag this home link up to the top position. And last. What I want to show you is that you can actually nest menu items. So let's say I had the about Tab and I wanted, let's say contact and a whole bunch of other things listed underneath it. I can drag this to the right and now to be a sub item. Sometimes it's difficult to get it right where you want it so you can click that twirl down again, and you can physically click this up one or out from under link that will do it manually without trying to slide it into just the right position. The other thing you can do is, let's say, rather than just saying contact. Maybe you want something more creative like say hello. You can make the navigation label. And that's just the title of the link. Whatever you want, it won't actually change the page. Name that link that we set on the page or the page title. This will just change the label on the navigation. With those changes done, I'm gonna hit save menu. I'm gonna come over to my other tab and hit Refresh. And now you can see those changes have been applied. We've got home in the first position. Sample page has been deleted and the about tab now has our about page. If I click on that as well as our say hello, contact page nested underneath. I'm gonna go ahead and a nest that for now And one more thing I want to show you is we have other options as well. So let's say as your site gets more robust, you can add different posts into your navigation. You can add custom links. So let's say you have a specific website. You want a link, Teoh or and we can put that text here as well. Add that to the menu. We can also add different categories. So let's say you have different blawg posts or portfolio posts. Or maybe their products like T shirts, etcetera. You can add the whole category to the menu as well. I hit, save menu and one more time will come over here and look at this will refresh the page. And those links now show up. We have our hello world post. We have our external link that currently replaces what we just click on. If you're going to send somebody to an external site, what you might want to consider will come back to this rapid workflow link we put in there and we don't see the options right now. So I'm gonna do scroll to the very top and see this little screen options tab. I'm gonna click on that drop down. I'm going to add link target and you can also add some other things here as well. So, as you get more advanced, you can add CSS classes to maybe change certain links that, say, one link. You want to be really obnoxious? Maybe it's a red background or something. You can add CSS classes to that to help style individual links. So again. That's in this screen options tab. Click down on that and I turned on Link target. So now I can come back down to my link and I can click open link in new tab, save my menu will go back to this other to our main website. I'll refresh this page. And now when I click on that link, it actually opens it up in a new browser. All right, coming back over to my menu. I'm going to go ahead and remove this link. I'm gonna remove my hello world post, and I'm gonna leave these three as is. I'll save the menu. And the last thing I want to show you is that if you wanted to have your link across the top and the bottom, I could put this in both places just by having both of you selected light save menu. And now let's see where this theme puts it. I'll refresh the page and I'll scroll down just to see and you can see we have these social links in each one of these. I'll bet. Let me just click on that, correlate to the thing to the three across the top. So We'll look at how to style these later with the actual logos and the social media platforms that they might be related to. But at least you can see how you can assign your menu to different places in your theme. All right, In the next video, we're gonna take a look at plug ins and how you can add even more custom functionality to your website. 9. Introduction to plugins: Alright, it's time for some fun with plug ins like I've mentioned in previous videos. Plug ins help extend the functionality of your website So out of the gate WordPress can do a lot of great things and you've already seen some of that, such as create pages. Do custom menus quickly get a website up and running without having to code anything that's all awesome. But what happens when you're ready for more? Let's go ahead and jump over to our plug ins page here. So in our sidebar will go to plug ins, and this is where all of your plug ins will live once we have them installed. Currently, you'll see we don't have any. So let's go ahead and go look for some. I'm gonna click on this. Add new button at the top, and these are all of the featured plug ins, so I'm not sure who makes this up. But these are all the plug ins that WordPress wants to feature and for you to see, so this is a great place to start. An even better place to start would be to click on this popular tab, and the reason why is based on what plug ins are popular at the time you're watching this video, this could change. So right now we've got contact Form seven. This is an awesome plug in to create a contact form on your website. Really? Basic gets the job done. Yost s CEO is a great WordPress plug in that will help your search engine optimization. It will tell you if your sites performing well and how you could add more keywords to be found better. Jetpack is another great plug in. That adds a lot of functionality to your website. You basically create a wordpress dot com user name to sink this up with your website, and it does all kinds of things related to posts, search engine optimization, social sharing. It'll protect your website. It could do back ups and lots of other things. It's definitely worth checking out. There's a lot more here who commerce is a great one. If you're gonna build anything that has to do with e commerce, whether that's selling digital goods or physical products like T shirts, etcetera, this is the plug and you definitely want to use, and there's a lot more. The other one I want to point out is word vents security. I use this on all of my sites, and it really helps protect you from hackers or from different things that can happen to your website. So there's a lot Maurin here. In fact, there's over 1000 pages over 43,000 different plug ins you can choose from. So in a pond this big, how do you choose what's right for your website? How do you even begin to know where to look? Well, what I've found is you can get a pretty good idea for if it's a good plug in, based on its rating, how many ratings it has and how recently it was updated. Some plug ins like this Yost plug in was updated only six days ago. At the time of this recording, some of them might be weeks, and some of them could be years ago. So definitely state towards plug ins that have been updated recently and have higher ratings. So what we're gonna do now is start adding a few plug ins. We'll worry about formatting and configuring them later. But for now, what I want to do is just install, if you will install this contact form will install the Yost. If you're curious about a Web Ah, plug in and want to know what it does, all you have to do is click on this more details link, and a little pop up window will show you the description of the plug in how to install it. Any frequently asked questions regarding it. The change log as far as what's been made, what's been updated over time with each revision, screenshots and reviews. So this is a really good way to get a good feel, for if this is a plug in, you want to use or not, we're in. Install this word vents security and let's go ahead and scroll down and just see if there's anything else we want to put on here for right now. I think that's good for now. So what, we're gonna dio show you one more thing that you can do when you're ready to add more plug ins up here in the top, right? Weaken search. So let's say you're ready to add a photo gallery or maybe even instagram feed to your website weaken type in anything you can imagine, and there will probably be a plug in for that. So now what I could do a scroll through and just get an understanding of what plug in might meet my needs. So if I wanted to display my instagram feed on a page, I could look through and find the right play gin and my choice is going to be based on again highest rating, which everyone has the most installs and which one was updated the most recent. So as I scroll through, I see there's quite a bit of options. So right now, this is a little bit beyond what I want to show you in this lecture, but I wanted to help you understand where to find plug ins. So that way, if you want to kind of jump into the pond on your own and install a few plug ins, you can have at it. So now what I'm gonna do is click back on this installed plug ins link on my sidebar. If you don't see that click on the plug ins tab and then it'll default to this installed plug ins page. So now we can see which plug ins have been installed on her site which ones are active, and if there any updates, you would see a link to update the plug in. If you ever discover that you want to get rid of a plugging, it's a simple as deleting it. Or you can bulk, delete or change. So I can click multiple at a time, come appear to bulk actions and that they wanted to keep them around but just deactivate him. So they're currently not running on my website. I could click, deactivate and then hit Apply. For now. We're gonna go ahead and click. Activate just on this word fence security plug in because I'm not ready to do anything with the others yet. And as soon as I do that, you'll see I have this upgrade to premium option and I can view details. But the premium option. You get more bells and whistles, such as two factor authentication, So what that will do is when you go to log in to your WordPress site, it'll send a special code toe. Whatever cell phone or mobile device you specify with a secondary code to log in. That's a great way to keep your site from getting hacked is to upgraded this premium service. I believe it's about $40 a year. Don't quote me on that. It's been a while. I personally don't use premium. I just use the basic version and it does a great job. All right. Now, when you turn on or activate a plug in again, these air not active yet their files air sitting on my server in a folder. But to actually have them turn on and work with the website and integrate into that code, you activate it. So we just activated word fence, and oftentimes, when you activate the plug in, it will put a menu in the sidebar. So, for instance, we have this word fence menu in my sidebar now, and I can see there's a lot of different things Weaken Set up here is Well, I'm just gonna click on that word fence title, and you can take the tour and it'll step me through all of the features. I recommend you do that or just clicked and the tour, and you can go through and check it all out on your own. So we activate word fence, definitely go through and take a look at everything that's going on here for now, The default settings air great. We're good to go there. The other thing to pay attention to is sometimes when you set up a plug in, its settings might go inside of this settings menu. So right now, if I hover over settings, you'll see we've got general riding, reading discussion, media and permit links. Sometimes those settings might be added to this menu. Sometimes they get thrown in the tools menu, and sometimes we'll stick him all over the place where you kind of have to dig around and just see where it goes. Every plugging developer handles it differently. You're gonna have to try and read the documentation, depending on the plug ins you use. And as we step through this course and I show you what I use for my clients, you'll get a better understanding of where to look. That's about it for plug ins. At this point in time, as we continue to build MAWR, advanced websites throughout this course will walk through some different plug in settings and how to use them in detail 10. Introduction to widgets: All right, let's learn a little bit about widgets in this lecture. So go ahead, go to dashboard and then come down to appearance and then widgets in your sidebar. Here we'll click on that, and you can see that we've got a blog's sidebar. We've got foot or one and foot or two. This is the default widgets that I'm seeing with the current theme we're using. And over here on the left hand side, we can see available widgets, so there's a whole bunch of things that we can work with now. This option might look different for you, based on whatever theme you're using. And if you've installed any other plug ins that might have added additional widgets to this , for example, had we installed that instagram widget? I'm sorry. Instagram plug in the widget might have shown up here where we could drag and drop this over into our sidebar or footer areas. So let's take a look at how this really works. If I go over to my main website and I'm on the home page, I can see it. My posts are still currently loading, and so this is technically a blawg page and every blawg page on this site. The sidebar will have these elements so that search recent posts, recent comments and etcetera. Let's look over here and you can see all of those in working format. For example, this made at area where we can log in, log out and check other things. Let's jump back over into here. If I click the twirl down on Mehta and delete it, it will immediately show up over here when I refresh the page. So now that made a area is completely gone. Where widgets are great is you can do a change in one spot here in this widgets page, and this will dynamically update every single page on your website. So rather than having to go through each page currently on the website to change the footer area, you can do it in one spot here, and it will make that change across the entire site. So, for example, let's say I wanted to add my logo to the blog's sidebar area. I could drag and drop the image widget. I can add an image by clicking this ad image button, and I have my logo over here. You can select a file from your computer or just Dragon Drop hover over that window. Let go, and it will upload the logo to your media library. I'll click Add toe widget down here and I'll click, save. And now, when I refresh this page and every other blawg page I visit, my logo now sits at the top. Another great spot is the footer. You could add a custom menu. Let's click and drag this custom menu widget. I can add a title like my Custom Footer menu and then select the menu. Now. We made a custom menu a few videos back, but you could add another custom menu just for this footer. Maybe it's not for your social links. Maybe this one is something a little bit different. You would select that menu. It's save. And then the moment you save this, it's going to be live on your website so you don't have to like, in our case, already have this window open, so I have to refresh it to see the change. But anybody coming to your site after you've clicked that save button will immediately see those changes. So here's my custom foot or menu with that menu that we created for the main navigation. So coming back to our widgets menu, I'm going to delete this as well and just show you, if you ever wanted to say, save something, but change it temporarily like, let's say I don't want this logo in here For now, I could twirl it closed, click and drag, and Aiken stash it down here in the inactive widgets area, so that'll keep it off of your website. But it will remain set up the same way, retaining those settings. So that way, if you ever want to bring it back into your site, you can. If you have a bunch of these stacked up and you're ready to clean house, you can click clear inactive widgets, and it will remove them from this list and delete all of the settings. And that's pretty much it for widgets. Right now. Again, I want to tell you that this will change depending on the femur using and the plug ins you have installed. What more they want to point out is, if you install the word fence, you might be getting this notification to click here, to configure or dismiss. If you haven't gone through and taking the time to to go through all of those settings, go ahead and configure that otherwise just sit, dismiss for now, and that'll go away for this session. All right, that's about it for widgets. So in the next lesson, let's take a look at themes. 11. Introduction to themes: in this video. I want to take a quick look at themes and give you a brief introduction. So go ahead and go to your sidebar and under appearance. Click on themes, and if you've been following along so far, depending on when you watch this, your default theme is most likely 2017. I can click, customize and customize the options within this theme, such as What? My header images. If it's got a video background, I can click on this back arrow and select the menu that it's using. I can also change if the front pages a static front page or, in this case, my latest posts, and you'll notice some redundancy these air settings that we've originally set back in the main WORDPRESS settings area. Depending on the theme you have installed, all of these options to customize your theme will change with the 2017 theme. I can scroll down and click on the pencil tool, which will take me right to that menu item in my sidebar. For now, I'm going to x out of this customizer and I'll be back at my Themes page. So we've got a couple other themes that have been installed on my installation of WordPress , but they aren't actually active. So if I wanted to, I could click Life Preview to see how that would change the look of my website. If I like it, I can click, save, inactivate And they noticed that when I come to my main live site and refresh the page, it will have changed. I'm gonna jump back into my Themes page and let's just say you didn't want the's in there and again. I like to keep things as clean as possible so you could click on that details page and down here in the bottom, right, you click on delete, and it'll actually delete and remove all of those theme files from your website. So now I only have this 2017 theme, but let's say you want to move on to something that looks more like you and your brand. What you can do is up here. We have the option to add a new theme, will click on that, and there are a lot of featured themes that you can go through and check out as well as popular themes. This is another great way, much like we searched for plug ins to see what's popular, what's trending, what other people have used or the latest what has been the latest release of different themes. The nice part about the latest area is your most likely going to find the most trending and current design styles in the latest features. Now, one thing I would advise you on with any of these themes is that there's a good chance they're going to be pretty good. However, being that they're free, you might not have the support for the updates that you'd like to have. So if you commit to one of these themes over time, they might become dated, and they might not have as many security updates like a premium theme would. So what I'm gonna do is jump back over to the popular Themes area and just scroll down a little bit. And just to show you how you can install one of these on your own, I'm just gonna scroll through and I see this primary theme. I'm gonna go ahead and click install, so it's installing all of the files onto my server, basically in a folder. All the images and chunks of code it needs to build this theme just like the plug ins, though it didn't actually turn it on yet. So I can click live, preview and see what that theme would look like on my site. But it's not currently active yet. From here, I can change different settings before I turn it on to make sure that there's a limited amount of downtime on my site is possible. Or I could just simply click, save inactivate and the theme will be activated right away. So this has just been a basic brief introduction to themes, mostly so you can see where they are and how to change the look of your website. All right. From here, you've got a pretty good understanding of how to set up WordPress how to add pages, plug ins, widgets, themes and all kinds of things to get you pretty far down the road on your WordPress site. Now what we're gonna do is shift gears a little bit. I want to show you how I would use all of these different tools and elements that I've shown you to create websites for my clients in the next section. We're gonna take a more advanced look at theme design and page layout. 12. Recommended WordPress themes: Where to find them, and how to choose what's best: I've got a lot of ground to cover in this lecture. We're gonna talk about themes, but there's a lot to know and a lot to consider when choosing your WordPress theme. As you've seen in the previous lecture, you can download a lot of different options that are free. I found, however, that you'll have better support and typically better experience with more premium themes and buy premium. I do mean you do have to pay for them, so I don't expect you to have to buy anything for this course. But I do want to show you exactly what I use in my workflow that I actually build riel projects for real clients with. So if this is something you ever want to do more than just as a hobby or from more than just your own personal website, here are some things to consider. First, I usually shop fry themes on theme forest dot net. I've tried a lot of different themes. I've tried a lot of different marketplaces, but the ones that I'm using currently have all come from here. So if you go to theme force dot net, you've got this tab here for WordPress And if you click on popular items, this page is constantly updated and typically sorts by what is the most popular and best selling WordPress theme for the week. So you can see right now Number one is avada. This has hung out at number one for a long time. For years, probably there's the X theme, and then down here is salient. These are the three that I've used and have extensive experience with. And I just want to point out that just because I use them doesn't mean they're gonna be right for you. They're just ones that I've used a lot, and because I use them a lot, I'm quick with them. I know where the developers have put all their settings. Remember how I mentioned that not everybody uses the same type of settings and things can kind of get buried. So I try to find the same themes for most of my websites because it speeds up my workflow because I don't have to try and guess how to make changes. So feel free to take a look. There's a lot of great themes that are up and coming. What I'm gonna do real quick is Hold down my command key on the PC again. You could hold down the control key, and I'm gonna click on these three themes Nevada X and on Salient Just so we can take a look at these options, you'll notice right away the price $0.60. There's pros and cons you could you could think of. This is like, Oh, my goodness, $60. Why would I spend $60? Or you could think about if you or I had to try and develop everything this theme does from scratch. You'd probably have to spend a couple 100,000 dollars, maybe 20 grand. I don't know. A couple 100 might be a little steep, but it would be a lot of money just to try and develop all of the functionality that these things pack. So we've got the Avada theme, and if you want to see what it looks like, we can click on this life preview button. It will open up a new browser window and you can scroll through and check out some of the different settings. You can check out all the different layouts it has and the one thing you'll notice right away. When you get into these more robust, premium themes there almost overkill. There's a lot of code. The sites can be slower with the animation, and they've tried to account for everything under the sun that you might want to use. So because of that, the themes tend to be more bloated. So that's something to consider if you're trying to build a lean website that loads fast, or if you're trying to have something that has all kinds of options for you right out of the gate. So I'm going to jump over into the X theme and I will click Live Preview. Now, one thing I want to say about the developers of the X theme. I actually went to a conference in Las Vegas and met the people behind this theme, and they're great people. I love getting to work with them, and I love supporting a company when I believe in what they're doing. So these guys are great. They've got really good customer service, and that's again, something you're not gonna find with the free theme. So if you have a question or you get stumped, there is a member marketplace where you can ask questions, and for the most part, somebody's probably already asked the same question. And you can find solutions in the form. So that being said, one of my two favorite things about the X theme is this Cornerstone page builder. So a page builder is something where you can literally drag and drop the elements on a page . So instead of trying to code it, you can actually look at the page and drag and drop and move things around, and we'll talk about that a little bit more in the future. But this is a huge plus for this theme as well as demos, so you can click down here on the demos, and they have a ton of samples for this theme. What's even cooler is once we get this loaded, you can have it automatically install a fully functioning working demo. And so your website can be built insanely fast. So we'll come back and look at some of these in a little bit. But some of these demos, for example, if I wanted to build a gym website, I can click on Demo, and this is a sample website that they've built, and when you're inside of WordPress. With your site, you have a theme installed. You can click install, and it'll basically replicate this exact website on your server. So then, from there you could edge road images at your own text, and you'd be a long ways down the road and having a beautiful website the next time I want to search show you is salient. We'll click on Life Preview. I really like this theme. I think it's really slick. It looks good. It's got some great animation elements, and it's actually what I use on my personal Web site. So if I go to Mitchell's garage dot net, this was the website that we used for our agency, and it's pretty basic. I mean, not a lot going on, but I really enjoyed working with this one because it was simple to use. I like how slick it waas, and it was just pretty basically, I mean, as a graphic designer, I like to choose things that look good. So that's how I ended up with salient. Now, One thing I want to point out is with salient. It comes with another type of page layout to a called visual composer It's not quite as I wouldn't say user friendly, but with with cornerstone with X, you can literally see exactly what you're working on with Visual composer. It's not quite as intuitive, but I do like the style of it. So to help give you a better understand of what a page layout plug in does let me show you this. I recently saw a commercial for divvy. This is another theme, and I don't have any experience with yet, but this looks incredible, and I want to show you some things here. First, let me play this video so you can learn a little bit more about it. Building a website is kind of like painting a masterpiece, except it's nothing like painting a masterpiece. See, when you paint something, you can actually see what you're doing. So when you draw a little house, look, there's a little house. But when you're building a website in WordPress, you're working on the back end with an interface that's built for content creation, not design. Plus, you have no idea how anything will actually look on this site. Hard to create a masterpiece away. Last piece. Now there's Devi, with Devi you can create your WORDPRESS website on the actual website in real time, so if you want to add a widget or text, go ahead at it. Everything is dragon drop and totally customizable shape, size, font color. And with over 40 different content elements, there's nothing you can't add. So now building a website really is like painting a masterpiece, only a whole lot easier. Divvy the fastest, easiest way to build beautiful websites. All right, so it looks like divvy is definitely a contender for something that would help speed up our workflow, and especially for those of you who have no coding experience. So if you're interested in playing around with it a little bit more, you can click. Try it for free. And when you do that, it's going to open up a demo page where you can literally kick the tires and see exactly how it works. So as you hover over different elements, you have different options for how to resize things and click and drag. It's really easy. I can click Red in here and put in my name or whatever I want to do update and see how this is gonna work for me. So this is an awesome platform. I'm really impressed by it. But again, I don't have any experience with this in the real world, working for a client to know if it's going to meet all of my needs. But again, looking at it, it seems like it's gonna be awesome. I can add background fills really easy click on any clear want hit. OK, And just like that, the background section has changed, so definitely worth kicking the tires. Now the downside to this. I don't know where you're at moneywise, but they charge $89 per year, so that's more than 60 and it's obviously more than free. But I think you do get a huge value. One thing I want to point out for $90. Basically, you can have access to all of elegant themes, themes. He get access to all of their plug ins as well as theme updates. So as the code changes or security patches come through, you get access to all of that as well as premium support. I sound like I'm a salesman for them. Honestly, I don't know them. I don't know. You know im don't have any first hand experience to know this. I'm not getting paid to tell you this. I'm just looking at what this could potentially do for you. And one thing I want to point out to is the reason why I'm even considering this is because I think it's really important to take a step back as a developer or a designer and continue to learn and educate yourself on the latest technologies. The trends will change, and I'll bet you in a year I would recommend something different than divvy. But the point is, has always kind of learned and try and figure out what's gonna be a good fit for your workflow. So again, for $90 let's say I use this theme twice. I would have had to spend $120 if I used the X theme, because you have to buy a license for each u. R L that uses the theme so soon as you have to sites where there is basically $120 here. Or as with Devi, I could buy the theme or the subscription for one year, and I could use this on 100 websites and only spend $90 so it is a great deal Now. If you decide that you don't want to renew, you can keep all of the themes installed in active on all of your old sites. They just will no longer get premium support, and they won't get any updated patches as those come out. So, honestly, I think it's a great deal, and if you can afford it, then it would definitely be worth considering and checking that out. Now the other thing I want to point out with ex and even with Avada and I think with salient, I do know the X seems to have the most extensions anyway. You can get extension, so an extension. Just think of it as like a plug in that's bundled with the software with the theme. So, for example, like this cornerstone extension, the convert plug. What this does is you has a little pop up box for an opt inform. You can do the content, Doc, which does something similar. You can do galleries and grids and at Google Analytics and the Slider revolution and a lot of different things that come with the theme. So it is a great value. Now this latter evolution. Let me talk about that real quick. One thing I want to point out As you're looking at, what theme to choose, Consider the fact that it's basically a foundation for your graphics and your text. So this letter revolution is basically a huge image gallery or image slider that could go on your home page. So here is an example. This whole big canvas here is Slatter evolution. So imagine if I used the X theme or sailing entered Devi or anything else. Really? All I'm seeing right now on the home page when I get here is just the navigation. The rest of this whole thing is Slatter evolution. So I've got these animated clouds, thes layered mountains and the text, as well as a button sitting on top. So that's something to consider. Now I'm getting into the actual theme file in this style in the layout, so keep in mind that just because you like the way something looks, let's jump over here into Devi again. Let's say I'm scrolling through this site and you might like everything, but when I get to this section here and say, Oh, man I really love that. If we break it down and look at it honestly, all these are Dragon dropped this image over here. It's just a image. So as I look through these different images that came from this website, it's a beautiful image. There's another beautiful image. So let's say I took these three pictures and put them on any other platform. All of a sudden it's gonna look exactly the same. So as you pick your theme, kind of think about what goes in the back end of it, what kind of extensions you get and maybe what the navigation looks like by default, so you don't have to do a lot of styling with it. So jumping back over here to the slider revolution, here's another sample again. This one takes up pretty much the full screen when you get there and there's a whole lot of other usage examples you can see. So this video is getting pretty long, and I don't mean to overwhelm you, but I guess what I'm trying to show you is that there are a lot of things you can use and moving forward. Perhaps Devi is a good fit for you. I'm going to be working with the X and salient themes just because I have a lot of samples to show you and we'll be able to get up and running. And then from there I'll be able to show you the difference is so you can pick what works for you. 13. Introduction to page builders: Okay, Now that you've got a better understanding of finding themes in the marketplace and kind of have a look for it, I want to go ahead and show you the back end of the themes that I use. Just you could get a better idea of what it would be like if you purchase these. So we're going to start off with X with salient, and then I'll compare those to divvy. Now, I have found that of all the themes that I've used, the X theme seems to be the easiest for my clients to use. So this has been a great thing to use when I know that I'm gonna be handing the keys over to somebody else. So if they're gonna be making edits themselves, let me go ahead and show you why. So this is the X theme, and when you go to edit a page, you'll see something that looks kind of like this. This is called Cornerstone in its the ex themes page builder. What I mean by that is, as you hover over each element, you can literally click and drag and drop to rearrange or click within to edit the text you'll see on the left hand side. We have all the different settings for each element. I can click on a section here, and I can control different things like the text alignment or add background images. I could even click on manage layout and really easily click to change how the rows are broke up into columns with column layout. Looks like I could go back to the mainly out here and see these main sections, and Dragon dropped those or hit the clone button if I want to add a copy of something to change it. So to a client who doesn't know how to build anything with Web design, this could be really easy and familiar and friendly to them. So it's a great option. I feel that the templates it has are kind of limited, and I think that overall, though, it'll it'll help a client get up and running because there won't be an overwhelming amount of choices. Now let's jump over to the salient theme. Salient uses a page builder called Visual Composer, and if you go to edit a page, this is kind of what it looks like here. If I click back on classic mode, you can see that it's using a bunch of short codes, and this isn't super intuitive. So go back to the page builder view, and this is at least a little bit better. I can click and drag to rearrange things, but I really have no concept of what is this gonna look like on a page? If I hit preview changes, you can see it's actually a beautiful page. And that's one thing I really like about. Salient is it? It's a really sharp looking theme, but here's a little hidden Jim that makes this probably my favorite is this little template button. When I click on this, Sailing has a bunch of pre built, really nice looking sections that you can work with. So, for example, let's say I wanted to add a hero section. I can click on this over here, and there's a bunch of basically full screen what we call a hero block. So let's say I want to add this minimal called action section will click there, and it threw it down on the bottom of the page so I can click and drag to move us back to the top preview. Let's jump to that page. And now I have a full with full height hero image, and that was really easy to Dio. Let's go back and add another sectional. Come to my template up here and let's add just kind of scroll through in Syria. Quick, what we've got here. How about a full screen biography section will click on that and white preview again would jump to that page. As I scroll down, you can see it added all these full size images of this grid and again, just super slick, beautiful animations really easy to work with. So I definitely, like salient a lot if you were going to be working on your own website like a portfolio, something where you wanted to look real sharp and you don't mind kind of rolling up your sleeves a little bit to figure out some of this crazy in here. Now let me jump over to divvy again. I don't have a website to show you that I have built with Davey. This is fairly new to me, but it seems tohave the best of both worlds. What I mean by that is you can see exactly how it's gonna look. But I can also click down here. This would be closed. Usually click on this little purple button down here and then click all over in this little left button and I can show the skeletal view of this if I wanted to drag and drop in kind of rearrange things. So I feel like it does a pretty good job. Um, I don't necessarily think it has the best templates, has some good templates, but not like Celean does. We just click on it and it pulls in all of these beautiful pre built templates, which I think are super helpful as you're learning how to build better Web design. So this is kind of what we're coming towards. So what we're gonna do in the next videos, I want to show you how I would install X, because again, it's a great solution for clients because of all those built in plug ins and extensions that it comes with, as well as really easy for clients to figure out. Then what we're gonna do is jump over two salient and take a look at how to build a stellar portfolio again. I think salient has better portfolio options in all of the themes I've seen so far. And then from there we're going to continue to learn more about building sites in general with WordPress. 14. Installing and activating themes: in this lecture, I'm going to show you exactly how I would purchase a theme from Theme forest. I don't expect you to follow along or buy anything today. I'm just showing you this because this is exactly what I would do if I was going to build a website for a client. So first and foremost, you need to create an account with theme forced if you have not already. Since I already have one of the more he logged in, I'm just going to dive right in. So theme forest dot net. I'm gonna come over here the WordPress and down to popular items because the theme I want is almost always in this top row. It's just quick and easy. If you don't see the X theme, you could search for it up Here I was X and hit return and in theory, there it is, right at the top. So this is the theme I'm wanting to buy today. I'll go ahead and click on that link and I can click. Buy a license. You see, it's $59 I'll click. Add to cart. Now let's go to check out and with the in Votto marketplace or theme forest and how we want Look at it. It's a little bit different if you just check out with pay power. They actually charge you a $2 handling fee, so the total would be $61. Now you can use a visa card, and same thing applies that will give you a $2 handling fee. Or you could do something called in Votto credit. Right now, I have $3 left over from purchasing this way in the past, but what you would do is come up to your account and go down to add credit, and then you can add an exact amount. Now, for whatever reason, it's in starting at $20 goes up in increments of $10 so you could add 60 or $70 to your account. And then that way you wouldn't be charged that extra $2 handling fee. But you're gonna end up like I have with extra dollars in your account that you might not use. So anyway, be that as it may, however, you want to check out just now, you can either add credit or you can check out with that $2 handling fee. I'm gonna come back to my cart and I'll click. Check out now, Once I'm all ready to go, I'll click. Check out with my PayPal account and the transaction will be complete. So I've already gone through this. I'm going to go to my downloads section. So once you've purchased a theme, you will see everything that you've purchased and you can see have bought multiple multiple copies of the X theme in my day. And what you can do is, once you have that, this will always be in your account. So when you're ready to install this theme on your website, come over here to this big green download button and I'll click on that. And I have the choice to download all files and documentation. And if you do that, it's gonna look like this. You get a zip folder and I'll open this up and you'll see the extensions. And those are all of the apse on Sorry, all of the plug ins that are bundled with this theme. You see the licensing agreement, you'll get an XML file with the demo content. So this is how we can import all of those fully finished and fully functional websites. You'll get this documentation file, which shows you exactly how to install it, how to activate it. All the add ons, basically your user manual. If you feel like reading it all toe, learn how to use X. And then, of course, this extra zip is the actual theme file. So if you just wanted that and you already are ready to go once you get going to know how to do this in the future, you can just download the install a Bill WordPress file only, and that's gonna download just that regular theme Zip folder. All right, that's pretty much it. So let's do this. What we're gonna do is jump into our local by flywheel. I've got my site. Click on admin to get into my sights admin area over two appearance and I'll click on themes. Now I can either click add new up here or I've got this big add new plus sign. I'll just click on that. Either one will work great. And because we purchased this theme, we're actually going to upload the zip folder. So up here in the top, I have upload theme and I'll click there and then I can either click to choose the file or at least on a Mac. I can click and drag and just drop it right there and I'll click Install now. Once the theme is done installing, I can either do a life preview. I can activate it or I can do nothing in return to the Themes Page. And that's what we're gonna do right now. And look at this. We still have that demo theme we were playing with Active, and now we have the X theme ready to activate. So what we're going to do now is go ahead and click. Activate, All right. Once you've activated the theme, it's going to add this menu item in your sidebar and most likely redirect you to this page . And it's going to say, Hey, you're almost finished. You just need to put in your code your purchase code to prove that you bought it so but you can do is go over to theme forest, and wherever you downloaded that theme, you can click on licence certificate and purchase code. Download that and then open up that text file, and it's going to show you who is licensed to who is the author of the theme what was purchased and most importantly, this item purchase code. So I can copy this code and then go back into my theme and paste it in here. Now, you might need to manage your licenses directly within the theme code account so you can click on learn mawr to actually do a product validation process. But once it's all done, you won't have to worry about it anymore. And then your website will automatically update and you have access to all those other extension. So what I'm gonna do now is go ahead and pace that code in here and hit return. It's gonna verify the license. Congratulations. My site is now validated and all the red locks now turn green and I have a lot of bonuses. So I have all of my automatic updates ready to go. I have access to the knowledge base. If I get stuck, I can ask questions, have his demo content. So I can quickly go through here and add any of these sites to my website as well as all of these extensions. So now that you've installed the X theme, you would be ready to go. Now what we're gonna do in the next video is talk about child themes. So I know we just installed this thing, but we're going to do one more thing that will help give us the greatest flexibility as we move forward. 15. Child themes: all right, I'm gonna try and explain child themes If I do a terrible job, I'm sorry, but basically, here's what we're trying to achieve. We've got the main extreme that we just installed on our website, and now we want to put a child theme. It's basically a blank container where we're gonna put anything we want to override on the theme. For example, let's say we changed the navigation layout or we change colors in the theme. If the developers of X theme go ever roll out a new version of the site, which they do, it would override all of our styling. So what we're gonna do is create our own basically many theme that will override their style. So that way we can still update the X Corps files, keep everything current but not lose any of that styling. Hope that makes sense. It's a lot easier than I'm making it sound, I'm sure. So let's just go ahead and dive in, so I'm gonna go to theme dot co. This is where you would have your members account once you've purchased the theme and you validated the license and created your account over here, the top of click on Apex. And because I've already logged in, it should take me right to my dashboard. So once you've created your account with theme Co, I can download the most current versions of the X theme. I can buy another license or I can scroll down a little bit and I see this child themes box . I'm gonna click on that and click download child theme so they make it really easy to do again. It probably sounds scary as I'm trying to explain this to you, but it is pretty straightforward. So I'm gonna go back to my sights admin area. I'm gonna go down to appearance and themes Click on that and you can see we still have the extreme active and take a look at this. We have an updated version. So had I styled all this and I clicked update, I would have lost those style. So this is exactly why we're doing this. So I'm gonna click, add new I'm gonna go to upload theme and then I'm going to drag and drop this ex child zip folder we just downloaded and click Install Now, once that's done, Amenah click, Activate and I will go back and you can see Right now this all looks the same. Everything else is gonna function exactly the same. I'll go back to appearance under themes and you can see now that the active theme is this ex child theme and then I've got the main extreme here. Now you can't delete this. This child theme only has parts and pieces of this main X framework. So this still has to be in your theme's folder for this to work. If we were done with these other themes, for example, this primary theme I can click on this and hit delete and I'll click OK, and that would be just fine. But if I were to delete this ex theme, I'd get a big scary air message saying that this isn't working anymore. So now that we've got our child theme done in the next video, this is gonna be a great spot to go back into our local by flywheel settings. And I want to show you something that will save you time in the future 16. Create a Local blueprint: Speed up your workflow & eliminate redundant work: up to this point, we've pretty much just done a lot of housekeeping. We've installed the theme. We've created our general settings, added a few minor pages and created a menu. There really hasn't been too much that's happened yet. All of the things that we've done so far are pretty much going to be universal, no matter what you dio for any website. So this is a great place to create a blueprint in local by flywheels. So what we're gonna do is basically create a template. So that way, every time you make a new site, all of this stuff we've just done is already done for you. So to do this, it's actually really simple. All we're gonna do is a right click on your site and click Save as Blueprint. Once that's done, you can create a blueprint name. So this one's called my sight. I'll just call this derricks Main blue print. All right, pretty creative. All right, save blueprint. And now what it's doing is creating a blueprint for me to use any time I spin up a brand new website. Now I want to go to make any new websites. All I have to do is click. The big giant plus button will make my new website click on the advanced options, and that's the key right here. When we make a new one for the blueprint and right here create site from Blueprint, I'll click on this drop down and choose the name of the blueprint I just created and a click create site from Blueprint. Now what it's going to do is actually copy all of the plug ins, all of the pages, all the themes. Anything that I've done to this website will be an exact clone up into this point. So that way I can dive right in and start customizing the site for each client. Let's go and take a look at this new website. We'll click view site now It's in a new website dot Dev, and you can see the extreme is active. Everything else that we've done up to this point, let me log in and you'll be able to see that we've got the word fence plug in, installed and running. We've got all of our pages that we've created the X themes already installed, and this blueprint is ready to go. All right, so make sure that you take the time to create a blueprint. This will help expedite your workflow as you continue to build more websites. 17. How to Reset a Blueprint Password in Local: this is going to be an update video to show you how to recover your user name and password . If you created a blueprint inside of local, and then you can't remember what that is. So, for example, in a previous video to this course, we created a blueprint and open up a screen shot here so I can see your settings. So the admin user name was Derek. But what if you can't remember what the password was? What if it's been a little while and you want to set a reset? Well, the other thing we did is we set up our admin email as Dev Dash email at flywheel dot local . So how don't even get into that email address if I wanted to reset the password, so I'm gonna show you how to do that to real quick. We're just going to kind of as a quick refresher. We're gonna do a password reset site here. We're just going to use the blueprint for salient that I set up earlier. I'm going to click create because what's gonna happen is it is going to create everything is gonna call in everything that we set up, including the user name and password, so I don't have an option to put something new in there. And so what happens is you might be, You know, you might have set up multiple blueprints with different passwords or different user names and not be able to remember what you use. Let's go ahead and click. Create site from Blueprint and it's going to extract everything and get us all set up here . And now we see and our dashboard for this website. We see all of the settings and click view site, and it definitely cloned everything. I've got the salient theme going and I'm ready to start building. But if I were to click on the admin to the site and it gives me the option of law again, what if you can't remember anything? I'm gonna go ahead and click lost password. It's gonna ask for the user name or email address. So in this case, I happen to remember what that is. But we're gonna type that in and I'll click get new password. Well, the next problem is Well, where did that email even go on? How do I access it? If it wasn't, you know, my my current email that I have access to. So what we're gonna do is come back here in the dashboard and right click on utilities. We're gonna open up male hog, and right there we see the email that came from our reset. So this is ah, basically a great way to get access to your site if you forgot how or if you're developing your website and want to be able to test contact forms in different email things that way as well. So we're gonna click on this, and now I can see that I've got my user name and I can click here to reset my user name and password. So let's go ahead and do that. I'm just going to use what it recommends. Will click reset password, go ahead and save it. Or maybe not whatever. We'll go ahead and log in. No, no, it's Derek. And I should have saved the password because now I don't remember what it was, but learn from my mistake, and that's how you do it. We're gonna go ahead and try that one more time. We'll go back here and click on Lost Your password. Turner, using name again. Click did new password and we'll go back to male hog. Go back to our inbox and we've got a new one from just a few seconds ago. Or reset it. And this time I'm going to make the password passwords. That way. Don't forget it. Don't ever use that password. You guys know that. All right, let's just log in real quick and see if it worked. Perfect. Okay, Now we're into our blueprint that we just created, and we can now start making changes to our site. Alright, guys, I hope that helped clear up some things. Some of the questions we had about how to get into your blueprint websites. And if you could make changes. One other thing, I want to point out you cannot create or edit your blueprints What you need to do. If we're gonna come up here to preferences down to blueprints, I can delete a blueprint, but I can't make changes. So what you have to do is actually make the changes to your site that you want to dio. And then once you're done and happy with it, then go back in to sit into the local app. and create a new blueprint based off of those changes. So I hope that makes sense. Guys, thanks for watching, and we will see it in the next lesson. 18. Installing demo content: So let's go ahead and use the X theme to install one of those demo sites. I'm gonna go ahead and create a new site, and we'll call this one x demo. We'll go to my advanced options and we'll use that main blueprint. I'll go into the site admin area, and now what I can do is go to the main X configuration area, come down to demo content and let's just go ahead and play with that Jim site. I'll click set up demo content. Yes, proceed. This is going to take over everything here, and it's going to download all of the images and put them inside of your media folder and set everything up for you so it could take a little bit of time for all of the images to download. But once they do, we can go ahead and click back on my site, and you can see that we have this gym website all set up. The navigations been set up. There's even a logo. All of the text works. All of the links work, and there's even custom posts. All kinds of stuff has already been set up for you, so this has an incredible way to get up and running and to be able to kick the tires and check everything out all right. And let's be honest, we just built a fully functional, highly dynamic website in under two minutes. That's insane. I know it took us a while to get up to this point. But let's say you were able to turn this into a career and sell websites toe other clients . These websites that were creating are worth anywhere from 2000 to $10,000 or more. I have charged personally that much money. When I build websites. I'm not promising that you can make that kind of money. But what I'm saying is there is value here, riel, tangible value that you can sell to your clients. So this is an incredible time to create websites and to be a part of this online ecosystem . So I just get really excited. And I just wanted to point that out to you that we just created a fully functional website in no time at all, so that it goes back to the discussion we had about paying for premium themes. Now I know that a lot of the legwork that we just did was basically done by using local by flywheel. I get that. But also importing that demo content from X, and I think that divvy does something very similar. So sure, you might have to spend $60 or maybe even $90 to get into this market. But the barrier to entry iss so little when you think that if you had to code all of this from scratch or created yourself, you might be spending $20,000 or more just to get to where we're at and what we've been able to do in under a couple minutes. So I just wanted to point that out and bring that to your attention, because this is an incredible opportunity. 19. Introduction to building a portfolio website: in this section, we're going to focus exclusively on building your portfolio, whether this whole course was just so you could learn how to do WordPress for your own website. Or if you want to learn how to turn this into more of a paying gig where you're creating websites for other clients. Either way, a portfolio is gonna be the next step so you can show off your work. So what we're gonna do is download the salient WordPress theme because I believe this is going to be the strongest theme for displaying a portfolio that I've currently seen. So you're welcome to deviate and do something else. But here's how I would build my portfolio website. I'm gonna get started by jumping over into theme forest, so go to theme forced Dot net and then in the search box office. Type in salient, and it should be the first thing that pops up. We'll click on this theme, and if you haven't already following along with when we got the X theme again, if you want to do this, love to have you follow along. You don't have to do this by any means, but again, this is This is how I did my portfolio. I just want to show you exactly what I did. So go ahead and purchase this theme if you're up for it. I have already done that. And so in my downloads section of my profile, I have the salient WordPress theme, and I've already gone ahead and downloaded it. So what I've got here are all of the documentation and installation files in this zip folder. So double click on that and open this up. I've got my licensing about my data info. I've got my child theme, which we learned about in the last section. I've got my user guide, which is super helpful to show you how to install everything. And then I also have the main salient theme. So now that we have all the pieces, let's go ahead and fire up another site. So I'm gonna jump into local. I'll click the plus button down here to add a new site, and I'll call this one salient blueprint. I'm gonna actually use the blueprint I made in the last section just to get us started. But if you remember, we actually saved this with the extreme. So it's gonna have all those pages I made, but it's also gonna have all of the settings set up the way they need to be, and it's gonna have the extreme. So we'll do a little bit of housekeeping in here in the update or blueprint. So that way we have options for both themes. I'm gonna click on admin and I'm gonna jump over to appearance and then go to themes and you can see we've got the X theme installed. Let's go ahead and give this the salient theme. So click add new upload seem, and I'm going to start with the main sail ian dot zip. The reason why I start with that one first is because this is the main parent theme. So this is gonna have everything that we need for the theme to work. And then we'll do the child theme last. So that way, when it's all done and it gives me the option to activate, I can just click, activate, and that child theme will be ready to go. So instead of clicking, activate this time we'll click return to themes. We'll click, add new upload theme and will drop that child theme in there Now click Install, All right, and once that's done, we're going to click, Activate. And now my salient child theme is the active theme. So let's do some housekeeping here. We've got a few things to look at. This theme has some plug ins that come with it and that it required for it to function. So you've got to get those installed. And while we're on this themes page, let's go ahead and clean up these themes that were not using. So I'm gonna click on 2017 1st delete click OK, click on the X theme. It'll hit, delete and then click OK, and I want to show you something real quick. Side note. If I try and activate this child theme without a parent theme, you'll notice that we get this broken themes message down here because again, the child theme will not work without the parent themes filed. So anyway, I just wanted to point that out to you real quick to show you why we have to have both. We'll reactivate the salient child theme and I'm gonna delete this X files down here. All right, so now the salient themes are ready to go. Let's go ahead and jump over and we'll click this and begin installing plug ins button. And although it wants me to install woo commerce, I'm not going to be using this for the portfolio site. So this is extra and I don't have to install it. You'll see over here that it says required for this salient visual composer and it says, recommended for rue commerce. So again, I'm a big fan of not putting in more than you need, so we don't want to clutter up our files or have any other problems that could arise. So we're not getting stubble commerce right now. We'll click just right here and click Install for the salient visual Composer. And when that's all done, we should be in good shape. We're gonna do a couple more things. I'm gonna go down to appearance and then two menus. And because we installed a new seam, I need to tell it which menu to use. We already had that menu set up, but we need to tell it where we want that. In this specific themes. I'm gonna click on Top navigation menu and hit save menu. Now when I jump over to my site. We should see that we've got our menu across the top. And currently everything else is in good shape. We obviously have a lot of work to do, but this is a good base and a good place to save our blueprint. So what I'm gonna do is jump back over to local. I'm gonna right click on the salient blueprint and I'm gonna click Save as Blueprint. So this time for the blueprint name, I'm just gonna call this salient What saved blueprint. And now, if I want to spend up a new site with salient theme, we can click the new plus button and then add the salient blueprint for it or I've got that my derricks blueprint that had the extreme If I want to go that way All right, this is a great place to stop. We've got salient set up. We have a new blueprint created for when we move forward and we're going to do in. The next lesson is look at how to import some of the demo content from salient so you can see how to make your portfolio quickly 20. How to speed up your workflow with demo content: all right. Obviously looking at where we're at so far, it's not that impressive. So let's jump in to the dashboard and I'll show you how to pull in demo content with salient. So with the extreme. If you remember it had a little X up here and you'll notice with salient. It throws its own menu kind of halfway down the sidebar. So another indicator of how different developers think differently when they create their themes. So you can either click here or you dive right into one of the sub menu items. If you want, we're gonna go down to Demo Importer. So click on that. And now you can see we have lots of demo content that we can bring into our site. There's actually a lot of great options, so definitely take the time to check these out. What we're gonna do right now, though, is import this minimal portfolio. So go ahead and click import demo and click OK, and what it's doing now is it's actually downloading any images and all of the content files it needs to create this demo so it might pull in some background images. But I've noticed some of the images air just gray placeholder. So again, depending on your Internet speed and whichever Demel you click on, it could take a while. It could go pretty fast, so we'll let this kind of do its thing real quick, all right. And once that's done, we can jump back to the main site and we'll see that the navigation we had originally set up is working. You'll notice, though the home page doesn't look right, and neither does anything else yet. So let's go take a look at why I'm gonna go back to my dashboard. And first let's go down to appearance and then menus. And now you'll notice that I've got select a menu to edit. If I click on this, there's another menu in here now. So it brought in its own menu for the theme, so I'll click on that minimal portfolio menu. Ah, click select, and now that will be the menu Over here in my menu structure, I'll scroll down and I'll choose this top navigation menu and hit save menu. Now it's bounced back over to the main site, and you noticed our pages air correct now. So if I click on the about page is the actual about page for our theme, but notice. We've got all these short codes and all this gibberish, so let's take a look at that. Let's jump back to our dashboard and those are the plug ins. Let's go see what's going on there. So what we need to do is I still have some remnants of the other blueprint. We still have this cornerstone plug in. Let's deactivate that That was an ex theme thing. I'll go ahead and hit. Delete Click OK in. The salient visual composer is installed, but it's not actually active yet. So let's click, Activate And now let's go take a look at our site. Click on the about page that looks a lot better. Let's click on our contact page, and that looks much better as well. So now let's go back and let's go to our settings and then go down to reading and let's turn off the your latest post on the home page and instead make it a static page. Click on that and let's go choose our Home Dash Minimal portfolio and we will click save changes. Let's jump back over here and take a look and that looks a lot better, all right, so you can see right away that this is a pretty impressive portfolio. It's got some really subtle animations that looks like if I drag my window smaller, you can see it's responsive, which is awesome. All right, we're one step closer to our portfolio. So now let's go ahead and drill into how to customise our site in the next video. 21. Update the website name and remove the default logo: Now that we've got this beautiful website and the demo content installed, let's start making it our own. I'm gonna start with the logo just because that's a simple win. If you don't have a logo, that's OK. In the next video, I'll show you a quick tip on how to create something that will meet your needs as you get going. But for now, let's go ahead and jump to the dashboard of our website once we're in there halfway down the side. Since we're using the salient theme for this demo, all of the salient options under this custom tab here. So we've got our general settings and all kinds of stuff, and this is where most of your styling is gonna happen. If you're using this theme, depending on the theme you use, you'll probably see something like this or under appearance. You might see customize, and you can go in there as well. So this is something where you're gonna have to do a little bit of search and discovery on your own. But again, when you buy a theme or we download a theme, they usually have documentation. So again, this is where I would start. I'm gonna come over here and you can start clicking around and just exploring all the different options and literally just start clicking on stuff and hit. Save changes, bounce back to your website and see what it changes. So this is where you're gonna have to just spend some time kind of getting familiar with whatever theme you're choosing. For now, let's jump over to the logo, and I happen to know that that's under the header navigation tab. So I'm gonna click there and you'll see about this tab for logo and general styling. So if you have a logo, all you got to do is click on this upload button and throw it up there and click Select down here and then it'll be there. Then you can add a retina version where it's exactly two times the size of your logo. For the high density displays, you can tell it exactly what heights gonna be. There's a few other settings you should know about down here, but again, just kind of scroll through and see what it does when you're ready hit save changes and your logo will be live. Now, if you don't have a logo. Just click the off button. Here we'll click, save changes. And now I want to hold my place here. I don't want to lose what I'm working on, So I'm gonna hold down the command key on a Mac. You can hold down the control key on the PC and then click that will open up a new tab for you. This is really helpful because then I can see the changes that I've done in this case. I've got my site as the title instead of a logo. But I can also bounce back toe where I've got those changes happening. So that way I can quickly toggle things on and off it save changes, bounced back to the other tab. Refresh. In this case, I would usually just hit command are on a Mac. I believe the shortcut is F five on a PC, but regardless, just refresh the page and you can see those changes as they happen. So this is how you would change the logo. Really simple to do so go ahead and start with that. Now, if you've got it saying, let's go ahead and turn this back off, let's save it come back over here. Could command are now? It says My sight. Let's say you're you wanted it to say something else. That's a quick change. Let's jump back toward Dashboard. Let's go down to Settings General and the Site title. Let's just change it to whatever your name is And let's make the tagline my custom. Actually, let's do it this way. Graphic design portfolio will come down here and hit save changes. Bounce back to the life site when you see that now it has my name at the top left. So real simple to do so Go ahead and make that change now in your site. If you're following along and in the next lesson, I'll show you a quick tip on how to create your own custom logo to drop in here if you don't have one yet 22. How to make a simple, custom logo: If you already have a logo file toe work with feel free to skip this video. However, I'm gonna show you a couple of tips that could be handy down the road no matter what you're working on. So what I'm gonna do is I just took a picture of a fake signature on a white piece of paper . I just drew it out with a Sharpie marker. I use my iPhone to take the photo, and this is the photo I got from that. Pretty basic. Pretty simple. So feel free to draw out your logo or sketch your name or whatever you want to do, but just make it simple. Make it quick. So what I'm gonna do with this is go ahead and grab that photo I just took and shared Actually used the airdrop on a Mac. But you can email it to yourself or texted to yourself What? If you want to do, I'm gonna drag that photo file right over my photo shop icon. I'm assuming as a graphic designer, you probably have access to photo shop. If you don't, you can probably do something similar in whatever design software you use. But here's what I'm gonna dio I've got my layer here. I'm gonna hit command J to jump cut that into a second layer here, I'm gonna click back on that background layer and I'm gonna fill it with a bright green Ault Delete to fill it with this foreground color I already had. So now when I make these changes, I can see what happens. The first thing I'm gonna do is bring up my levels. So the shortcut for that is command l from levels. I'm gonna bring up my whites quite a bit, and I'm gonna bring down my darks to really crunch that back down. And, you know, I could leave it up a little bit because I kind of like that. I can see some of the texture of the marketing here. It actually looks kind of cool. So maybe I'll back that down a little bit and remind whites up even more and I'll show you how this can work for you in just a moment. So once you get that where you're kind of happy click, OK? And now what I'm gonna do is double click on the layer Now, don't click on the name And don't click on the thumbnail kind of click off to the side here , and this is gonna open up your layer style and this little slider this blend if is where all the magic's gonna happen. So we're taking this current layer, the one that's got my fake signature on it, and we're gonna scrub it left a little bit, and it's going to hide any of the lighter tones. And I could do the same with the darks if I wanted to. In this case, I could scrub away the dark tones and now the black hides. But what I want is this black signature on top. So I'm gonna drag it and you can see if I zoom in over here that I still have a little bit of white around the edges. Now this doesn't matter too much for what we're about to do next. But if you wanted to blend that even Mawr, I can hold down the altar key and click and drag on this white slider, and it'll start to kind of pull out the whites. But leave some of the greys behind so you can see a kind of get that washed out. Look where that green comes through. So you might like that for your signature. Just depends on what you're going for. I'm gonna click. OK? And now, technically, that's just a layer style. It didn't actually cut away the white. So the way I know that is, if I were to apply, like a drop shadow or something, click OK, by moves to the side. It applies a drop shadow to that whole picture. What? We don't want it to do that. What I want to do is at another layer right above this, this fake signature layer, I'm gonna hold on the command key to select both of them. That's the control key on the PC. And now what I'm gonna do is come up to layer merged layers. That's command E. And now what it's done is it's It's basically smashed those two layers together. But anything that was transparent, it actually cut away. So now if I apply a drop shadow, you'll see it actually follows the signature, which is great. I don't want to add a drop shadow, though, but what I do want to do This is where it's really cool as I can now change the color of this thing. Let me show you how. If I click on this little lock transparency button, I'll click on that. Now I'll only be able to affect any of the actual pixels that have content in them, but it won't touch anything that's transparent. So here's how this is helpful. Let's say you want to change the color to something else. Anything else I'll click on any kind of color. Get my foreground that way and I'm gonna hit Ault. Delete, and it fills the foreground, and it only fills the pixels that have pixel data. So that's what this lock does, so you can easily change the color. Or maybe you wrote it in a blue sharp because that's all you could find. Well, you could click and drag down here, make it oh, Arfield. Fill your foreground color with black and now hit delete again to fill my foreground with black. So the only thing I need to do now is straighten this out, so I have my rulers on it. Command are if you don't see them or go to view and turn on your rulers so I can drag a guide down. I'm gonna click on this layer and kind of get it close command T or controlled t on PC, and I'll drag this little anchor point right up here. So now when I turn or curve this, I can put it on a straight line. So there's your signature. We're ready to go now. I now I got to do is just export this. So what I'm going to do now is turn off this background layer and come up here to image down to trim and actually created this custom shortcuts. So you probably won't see that cause I use this shortcut all the time, but click on trim. And now what I can do is trim away top bottom left and right pixels based on transparent pixels. So anything that's transparent, it'll it'll trim it to that. So if I click OK, it will trim it all the way down to here. Now, there must be something down here that I can't see with my own eye. So I'm gonna do is just hit the letter m to get my marquee selection and I'll click and drag about like that will hit the delete key. I'll click and drag I just a command do. You were quick to de select click and drag down here and hit the delete key one more time, making sure I do that on this layer. Command D. Let's try that image. Trim. Shortcut again. There we go. And now it trimmed it back down. So now what we need to do Is it just export this so we can actually use it now? If I look at this, though, and we looked at by my ruler, I can see this image is about 1200 pixels wides. That's going to be huge. Let's jump back over to our Web site real quick. And if I wanted to be about this big, I'm just going to take a screenshot command shift in the number four or click and drag. So my my logo was about this size. I can see it's about 166 pixels wide by 55 pixels tall, so I'm just going to get this other one in that ball park. So let's do it. About 150 pixels wide, I hit the sea key to get my crop tool come up here and change it, Teoh. 100 and 50 pixels by. I'm gonna delete because I don't care how tall it is. I just want to be as tall as the logo, and I'm gonna crunch this up a little bit. Crunch this down a little bit and I'll hit the return key. And let's take a look at what's going on up here. Okay? So I still have this pixel data appear. I'm gonna delete that. I'm gonna put 72 for 72 pixels per inch return one more time. There we go. And I'm gonna command in the number one key. It seems going to view, and then 100% just so I can see how big that turned into. Okay, great. So now we're good to go now. I just gotta exported. So what I'm gonna do is go to file down to export. And I'll just do a quick export as a PNG file because it supports transparency. We'll call this logo and I'll just throw it right on my desktop. So it's easy to find when I upload this. Now I want to show you one more tip or trick when you're working with Web graphics. I found this cool site called Tiny P and G, and what it does is it will compress your images. So if I go to my desktop and I look at that local file I just exported right now it's only four kilobytes, which is tiny, and that's awesome. So really, I'm not gonna get this much smaller. But if it was a big header image or or if your logo maybe was a little bit of a bigger file , you can drop this right in here and it's gonna compress it and you can see it actually still made it. About half is big, which is awesome, because now it'll load even faster. It will be one of the first things to little my website. So I've got that logo ready to go. I'm gonna jump back over to my website. We'll go to the dashboard down two salient down to the header navigation. We'll turn back on the logo for my site and let's go ahead and upload it right here. Now here is where I would take the time to put an Ault text. This helps for your search engine optimization. It helps Google and other search engines. Find your site so you could just name it. Put your name in there or whatever you want, but this will help you get found when people search for your site. So if you continue to do this as you upload images, this will help you in the long run. Click Select. And there's my based logo and I'm actually going to upload the exact same one for my retina logo as well. And let's jump back into photo shop real quick. I'm gonna hit command A to highlight the whole, um, canvas. And if I go to window down to info, it will open up my info palette here, and I can see that the width is 150 in the height is 70. So if I wanted to, I could cut that in half and have this be my full retina version. Or I could make another version that's 300 pixels wide by 140 pixels tall and then have it do the math for me. But for right now, for the sake of just getting this done, I'm gonna leave it alone. It save changes. And let's just see how this looks all right. So there's my signature, and again you can see it's pretty small. So let's jump back over here and change that local height to 70. Now let it go. Let it 70 pixels tall hit, save changes will jump back over here and hit command are to refresh my page. And there it is. There's my custom signature, and it's looking good. Now there's one more thing I want to show you. If you're on any other website, you'd probably be done at this point. But the salient theme actually supports multiple versions of the logo. On the reason why If I were to click down here on any of these portfolio items, you'll see that a couple things are going on. One. It has a huge header image, which we'll talk about in the next lecture. How to make thes. But you also noticed logo up here. The old salient logo is still there, and here's why. If I jump back into the salient theme and I come back under salient, down to header navigation and then I click on this transparency tab, the navigation has transparency, support, and when the knave is transparent, it gives you a couple options from or logos, So this would be my starting logo. So when you first get to a page, what's showing up here? And in this case, it's a white salient logo. Then when it gets dark, what's it gonna be? And I had already uploaded these. So these air the dark version. So what I need to do is create a white or light version of my logo for pages like this real simple to do, I'm going to jump back into photo shop. I've got this layer selected. I'm just gonna make sure that I still that transparency locked hot the letter D to get my default color swatches over here. I'm gonna get the letter X to swap. So that way my foreground color is in front. You could also just click these little arrows right here to swap it. Now I'm gonna do is hit Ault delete. And now my logo is in white, so I'm gonna go ahead and save this out real quick. We'll have file. We'll go down to export quick export as PNG and we'll call this logo dash white, and then we'll come back into our web page back to the salient menu, and let's go ahead and upload the white version real quick. Go to my desktop. We'll throw that in there and again give it some up text, all right, and now it's uploaded for the retina version as well. We'll save our changes. Jump back over into our front page here will reload it. There we go. That looks great, and that's pretty much it. So in the next video, let's take a look at how we can customize the typography and the colors to start making this match our brand. 23. How to change fonts: Let's change your fonts to match our brand. And while we're in here, let's go ahead and update this text at the top just so That way, it makes sense. It's a quick win. I'll click on Edit Page and I'm going to go right to this text block. I'll click on the pencil tool instead of saying hello. I'm Phil. Let's change it to whatever your name is. In this case, it's Derek. I am a about graphic designer from Callis Bell Montana. All right, we'll leave it at that hit. Delete. We have to hit save down here at the bottom, and then we also have to update over here on the right. And now when we go back to that home page real quick, just click on view page, and that's all looking sharp. So let's go ahead and dive into you fonts. So I'm gonna go back to my dashboard and I'm gonna come back to the salient mending menu. And down here we have this typography menu, so I'll click on that, and it's pretty straightforward there. Drop down boxes, so it's really easy to change. But how do you know what the fault looks like, Well, these are all being pulled in from Google fonts. So if you just Google Google fonts, you'll find that you go to fonts dot google dot com and you'll see all of the fonts that are available so you can scroll through and find anything you want to use that you like. So let's say I wanted to update my navigation, too. I don't know. How about Playfair? What I could do is now that I see what it looks like, jump back over here, I'll click on my drop down menu and I'll just type in play fair. And there it is right there. I'll click on that. It's safe and let's jump over to the live site. And just like that, my navigation is updated, so that's actually really easy, And a lot of new themes are that way. They make it really easy to upload and change your fonts. One thing I would consider as you're playing with fonts and typography for your whole page is stick to two fonts whenever possible. So what that would mean is you would have like a display fonts. So maybe something you use for your main navigation and your headings, and then you'd have your body copy font, something that's probably simpler and easy to read on a website, something that Sand Saref and I would never go more than two fonts, because what will happen is it will start to look really cluttered and your brand will look really disjointed. So stick with two fonts for now, for those of you that want more control over your fonts. And if you already subscribed to the photo shop and illustrator and in design the whole creative suite, you should have access to type kit. So if you have a type kit dot com, there's, ah, whole another library of fonts that are available to you. And this is a little bit out of the scope of this lecture right now. But when you sign in, they will show you how to install type kit to your website so you can choose even more fonts toe work with OK in the next video, let's take a look at how to customize the header images 24. Creating a home page hero image and custom headers: in this lecture, we're gonna take a look at creating a custom header image for your website. So it doesn't matter what theme you use or what you're building. Putting a new head, a graphic or a slider image into your website will drastically change. Ah users. First impression of your site. Right now we have this really clean, minimal portfolio site, which is great but salient actually supports the use of header images. So again, if I click on one of these portfolio pieces, you see that we can have this full screen image at the top. What I'm gonna do is go back to the home page and click Edit page and you can see that if I scroll down here, I have the option to add an image background for the page header. If I click upload right now, I'm just gonna throw one in here. That's already there will hit, select, and I'll hit update quick view page, and you can see that that drastically changes your first impression of the site. You'll also see that that white logo we made it automatically changed the logo used because it's now using a transparent navigation menu. All right. So what I want to show you is how I would go about designing a header graphic for my website in photo shop. Usually what I do is I would go over to pixels p e x e l s dot com and just search for any kind of image, or probably take my own of my own camera. But in this case, you could search in here and find all kinds of great images. So it's pretending this was an image of my own desk that I took. I could click free download, and it would download it into a new tab. All right, click and click on copy image. Or you could just hit, save image as and put it someplace safe, like on your desktop or in a folder you're working from. We'll go ahead and copy. This image will jump into photo shop, and I'm gonna make a new document. What a file new. And this is something that I want to point out it. You know, it really depends on the theme you're using and what your end goal is and who's gonna be using your website. But typically what I do, I make the width of my images about 2000 pixels wide and the height it changes frequently. But let's just put it 500 pixels for right now I create, and you can see that this is a more of a slivered graphic. In salient. I have the option. Let's jump back over there real quick. We'll click on edit page when I scroll down, have the option to make us a parallax header, and I can also make it a full screen height. So if you're going to do that, you're gonna need a much bigger image. So looking at the page header image for this site, it suggests 1600 to 2000 pixels wide in a minimum height of 4 75 If I click full screen height and that's good and preview what that would look like, you can see that I'm gonna need a much larger image for that toe work. So this just depends on how you want to work and what you're gonna do. All right, let's jump back into photo shop and let's say I wanted to make this bigger. I can hit command option in the letter C, which opens up my campus size and I can change my height instead of being 500. Maybe. Let's make it 700 pixels tall. I don't click. OK, now, what I can do is either hit command V to paste that image I have in here and the reason why it was still in my clipboard. It was because I had right clicked on that pixels file and I click copy image. Or you could open it up from where you say doing your desktop. Either way, it doesn't matter. I'm gonna hit command t on this layer that we just brought in and scale my image down to fit. Now, this is okay, but if I were to throw this up there, it actually be kind of a distracting backdrop. So what we're gonna do, there's a few ways we can work. I'm gonna create a new layer above it. And let's just say that I wanted to work with maybe this green color over here for my library. I select that and fill my foreground color. It also delete to fill the front. And now I'm gonna do is just cycle through some different blend modes to see what I like the best. So make sure you have this layer selected at the letter V to get your selection tool. And now we're gonna hit the shift key and the plus sign. And what that's going to do is it's going to cycle through all of these blend modes down here. So it's hit shift plus just to kind of cycle through and see what what I like. You know what I didn't mean for this red, but that's actually kind of a cool color. I could leave it that way, but let's just talk with through here so you can see how having the green on top interacts with the layer below. But that might not be enough for you. So what? You might consider doing it, setting it back to normal and let's drag this layer down below. I'll select this image layer and command J to jump cut it. So I have a version of it. If I don't like what I do, basically, just cloning it, I'm gonna click back on this layer and now and hit command shift in the letter you, which de saturates my image that should be upon careless see image adjustments down to de saturate. So that's where I got that shortcut from all right. Now what we're gonna do is change the blend mode of the image layer, and I happen to know that multiplies. Probably gonna give us the best option. So I'll click on that and you can see that we get a nice header image. But it's gonna be dark enough that it won't overpower everything else in the website. So now I'm gonna do is go ahead and export this. So come appear to file mood and export. This time, instead of choosing a PNG, I'm gonna go export as the reason why is this is such a big image. I want more controls over the type of file export. So that way I can really crunch the file size down, so it doesn't take a long time to load on the website. I'll click export as and you can see right now. If I didn't touch anything, this file is gonna be 660 kilobytes and you might not have any reference for how big that is. But that's pretty big. I would tend to stay under 300 kilobytes if at all possible when I make my websites typically want to export this quality. All said it toe 70% or maybe even less than that. Let's see what that does for our file size, so that makes it about 198 kilobytes, which is okay, it's It's something where you kind of need to pay attention to what browser speed your target market's probably using and what else you have on your website because you don't want people have to wait for graphics to load. So if I zoom in on this, you can see that compressing it down actually doesn't really hurt this image at all. I can't really tell that it's been compressed, so maybe I could go even further than that. Let's try 50% and see what happens, and at that point it still looks pretty good, and a file size is only 107 kilobytes, so I'm happy with that. I'll go ahead and click export all. We'll just call this header throughout on my desktop export, and this is something where you can still pull up that tiny P and G website that I showed you in the previous lecture and you can compress your head or image down even further. And I'd highly recommend you do that. Because even though Photoshopped is a really good job of compressing the image, you want it to be as slim and a small of a file size as possible. So I'm going to drag that image for my desktop up into this little drop zone in tiny P and G is gonna compress it. And you know what? We didn't get that much, but it's still eight kilobytes saved. So go ahead and hit Download right here. It'll throw it into my downloads stack. And now let's jump back over into our website. I'll click on Edit Page scroll down to the bottom. We'll go to image background, and I'll click on the remove upload button right here, down below that image and we'll click upload, upload another image, which is the one that we just created. And again, don't forget to add all taxed or description text. If you have something to add for your site, just again trying to help your site get found by Google or other search in search engines, and then another option we can do is click this Parallax Header option again, this is in salient, but what it's gonna do is add a really cool depth effect as you scroll. So let's go ahead and save that in view what that looks like now. So now we have that image full size, and as I scroll, you see, it's got the parallax effect, where the background is moving at a different speed than the foreground and other page elements. It's pretty cool, and that's pretty much it as faras the header image. Of course, if you have more design skills, you could add a lot more elements to this. You could do things such as it's gonna add a new layer, get my Grady int tool over here clicking drag and maybe make that a multiply. So it kind of gives a little burned edge here. We could do a lot more. We could add text. We could add more images and go crazy with it. But right now all we're trying to achieve is just a subtle design element that kind of helps build our brand and build the story behind the website, and that's pretty much it. I know this is pretty simple stuff, especially If you're already a graphic designer, you should know how to create your own graphics. But I hope this helps you find simple ways to add some more visual interest to your designs . And no matter what the musing, whether it's the default 2017 currently on WordPress or even any other website pot from out there, almost all of them give you an option to add a header graphic. And if you're on WordPress and you're using a different theme and maybe it doesn't have the option for a header graphic like this, don't forget. You can add the slider revolution, plug in as well, and add a lot more functionality to create those awesome graphics for your site. 25. How to set up your portfolio: in this lecture, we're just gonna look at some portfolio settings in the salient theme. So what I want to show you is currently the home page. From what we installed, it has basically default page elements, and then it's got the portfolio that loads down below. So the way that works now, if I click on edit page up top here, you can see that the way this is working. It's got the visual composer plug in, and it has these sections here, and it's got this portfolio element added to it. I can click the pencil tool, and I can change exactly which categories it's pulling in. I can control how the layout is control a lot of things in here. I'm gonna go ahead and hit, save changes, cause you can check this out on your own now if I wanted to. If I go back to the main site, you'll notice we don't really have a portfolio link. But if I wanted to create my own portfolio section and have the home page be more basic or have text instead of images or whatever, I could delete that section and create a new page just for the portfolio. So if I come up here to New and I click Page, I can make a portfolio page. Capitalize that, and then what I'll do. I don't have to do anything here in the middle. There's actually a built in template in the salient theme. I'll come over here, click on that drop down and choose Portfolio, and now all I have to do is hit. Publish. If I had view Page, you can see that I have a fully dynamic portfolio built on the default settings from within . Salient. Now it doesn't show up in the menu. If I wanted to, I could come back over here to menus, and it's the last page we just added. So click on that and add to menu, maybe drag this up in the place and hit save. And just like that, I added a custom portfolio page to my website as well. So that's something you might want to do depend on how you want your layout to be, and then the next thing I want to show you is if we scroll down, you can see that we have these categories set up. So if I click on adverts or applications or branding graphic design. All the projects shuffle according to what their category is in. The way that that works is pretty is pretty simple. I'll click on my dashboard again and I'll come down to the portfolio menu and then down here have project categories, so I'll click on that. And you can see this is where we've created these categories, and over here we can see how many different projects belong to each. So if there's something in here you don't want any more as a category, I could just hit, delete, or I can add a new category all together. So perhaps I want to add Web design as a category add new project category, and now Web design will be here, and it automatically created a slug. So you notice I didn't have to try and put that in over here and again. The slug is just the girl friendly version of the name. So it's what it puts up in the address when you go to that different category. So all I had to do is put the name hit, add new project category and then if I wanted to, let's go back to our main site here, and we take a look at these categories. You'll notice it doesn't show up yet. And the reason why is if I click on any one of these. We currently don't have any of them showing up as one of those category items, so I'm gonna edit any one of these. It doesn't matter what, but I'll click on the Web design category in one of these projects on update. And now when I go back to that home page again because we have a project that featured Web design, that category will now show up. Now that you know how to set up the portfolio and change some of the basic settings, let's actually look at the post themselves, the actual portfolio pages and how toe how to work. With that, I'm gonna jim back into my dashboard. And if I come back to this portfolio tab, I'll click on that and you'll notice that when I'm on the main portfolio tap, you can see all of the different portfolio pieces that came in when we installed the demo content. So if you're ready to create your own stuff and you don't need this as a guide. You could click the check box at the top, go to bulk actions and it moved to trash. Then click apply, and it would throw all of these in the trash and you could start from scratch. The other thing, you could do as you're kind of getting your feet under you and kind of getting used to how this works is just go ahead and click on any one of these and just start reverse engineering how they have each page set up. So since this is a post under the portfolio category and again over here, we can control the specific category it belongs to, and we can add multiple categories of you want update real quick. I'm gonna hit view post, and you can see that each post has a different layout down below. So as you scroll through all of these projects and you see what you like, you might be able to start adding in your own content in its place. So as I scroll down further down towards the bottom, you can see that it's got this next project button that's a default built into this theme. But I can come back in Click Edit Portfolio item, and I've got this visual composer here. So if I wanted to, I can rearrange any of these things. Click into Rag Aiken, ADM. Or Elements. Click on that plus button and there's a lot more elements like images, texts, animated title, lots of stuff that you can add in here. So that's gonna be something you're gonna have to decide what you want to do on your own. We could also add templates like we learned at the beginning of this Siri's where you could go through an ad, any kind of elements like this whole project category. So let's say that you want to show something with these iPhones as a sample. You could click on that, and this four visible touch enabled gallery gets added all the way down to the bottom. So here's that gallery I can click and drag that back up to the top. Let's say I wanted to be the first thing that they see all pretty changes real quick and now on a scroll down. That's the first thing we see now didn't add the images this time, but again, this is gonna be something you're gonna want to populate with your own images. Anyway, the only other thing I really want to show you is if we scroll back down under the posts itself, you can control what the featured images, and that's gonna be what the team uses as it displays thumbnails and such. So that's something where you can add your feature image there. There's also additional settings down below, so you could make it a full with portfolio item. You can make it a custom content grid item. You can change the custom thumbnail image. You can also control, whether the masonry item sizing, whether that's wide, tall, regular So what that means. Let's jump back to the home page real quick as I scroll down. So this is wide this one square. This one's tall so you can control whether your image is any of these layouts. So it fits better with whatever the project is. So I hope that helps you get a good understanding of how to dive in and update your portfolio with the salient theme 26. How to add looping video to your website backgrounds: alright guys, in this lesson, I want to show you how to add a video to the background of your website. I think it's a ton of fun to do and it really adds a lot of visual interest and can pretty easily elevate the look and feel of your website without a ton of work. So just like you see on the screen right now, I've got a full screen while rather not full screen. But it goes to the full edges of the Web browser, this video here and as I scroll, it's got a parallax effect and we've got some HTML text sitting on top of it. You'll notice, and then when we scroll down the rest of the site just kind of looks like any other website . So what we're gonna do in this video are in this lesson is learn how to drop in a video like this. So another example just to maybe give you some more ideas. In this case, we only have the title over the top. But on this other website here I created for a podcast. We used the intro video that they used on YouTube that I actually made this video to, um anyway, so we have this video sitting in the background, and then on top of it is this logo that I designed as a PNG file. So it's transparent. We've got some HTML text, and then if I click on the button, it scrolls down and it's interactive. So we've got some interactive elements sitting on top of the video. And again, I think this is a ton of fun and just such an easy way to add so much value to your website . So let's go ahead and dive in, and I want to point out that both of these websites are using the salient WordPress theme. My website also uses the salient WordPress theme. I'm just really comfortable with it, and I really enjoy it. But most modern Web editors and most of the new themes you're seeing now for WordPress will let you do video background. So, um, go ahead and follow along so I can show you some of the tips, tricks and things to actually avoid along the way just to kind of help set you up for success. And I think you'll be able to apply these to just about any theme that you use, but again, for this one we're using salient. So the other thing to get started. Go ahead and download the video attached to this if you want to follow along or use that video. But if you want to create your own video, maybe for your own personal website or for maybe another company or client, I really recommend the in Votto Elements subscription. I use this for all of my creative assets. Lately, I've been really enjoying it. They have all kinds of items, from stock video to music to graphics to photos. Fonz. I mean all kinds of stuff. I really can't recommend this highly enough. So, um, anyway, check it out. It's pretty cool if you come up here and we just search for Opener, which is what what we're making. Basically, um, I come down here and click on video templates, and we're gonna click on the little magnifying glass to search. You'll see that we have over 9000 opener video templates, so just go through, find one that you think is cool, download it and then drop in your own photos of your own videos and create your own Ah, dynamic opener. Pretty cool stuff. So Ah, one thing I want to point out to They do have different applications supported. So if you're if you're comfortable or familiar with after effects, for example, then maybe you want to search by that. I've noticed most of the the really cool ones have been made in after effects. But there are some really good ones for premier as well. So just find what you like, click on it and then you can download it and then replace the footage with your own. So pretty straightforward. And a lot of them have tutorials built in on how to edit those templates. So once you're done with that, once you've got a video you want to drop into the background, I recommend anywhere from like, you know, five seconds to 30 seconds long were just tryingto just trying to quickly add some some visual interest here. So get your video, and then the next thing we want to do is actually make it so. This video can be dropped into this website, so let me go ahead and show you how this looks on the back end. So again, I'm using salient and it's gonna look a little different, depending on the theme you're using. But we'll click edit on this page, and there's a few different things going on here. So we've got the WP bakery page builder, and it's just a way to be able to drag and drop your content around. I'm not too worried about that right now, but if we click this pencil tool on this background on this this container this row, if I scroll down, you notice I can add a background image or I can even come down here and click on enable video background. And as soon as I do that, I have the option to either use a YouTube video. Your l so basically go to you to find any video. At that point. You know you have to make a video. You could just paste the U. R L in here hit save changes and the videos automatically gonna play. But that relies on you having to have a YouTube account or a way to grab a video that you want to use. The other way is to do what we call self hosted so you would actually upload your video file into your WordPress website and hosted from your own website. So to do that, we need three different file types. We need a Web M file. We need a MP four file and we need a nog V file. Basically, they're just the same video, but different file types. If you're familiar with with regular graphics, think of like a J peg or PNG or PDF file or a gift for Jeff file. However you want to say it, all we're doing is just creating the most, um, the most support, depending on what browser people are using, whether it's safari or chrome or Firefox or something else. So by having all these different file types, depending on the Web browser your visitor is using, it's smart enough to serve up whichever file type they need. So I hope that makes sense, and that's what we're gonna do right now. We're gonna take this video and we're going to I've got it right here. My downloads. So it's just open this up. This is a 42nd video, and it's just this opener sequence that we got from involved elements and then dropped in our own footage to make it relevant to our site. All right, so we're gonna go ahead and use this video, but to do that will notice appear in the file name. It is a dot mp four file. So what I need to do is come over here to a website that I use called online Dash convert. And there there probably are better versions. If you know of one going comment below, there's also plug ins for Premier. So you could search for, uh oh gv Premiere Pro. And you're going to see some different how to convert toe GV and Web inversions with Premier. So by default, Premier does not support these file types as far as, like, just quickly exporting it. So that's why we have to use this online video converter. All right, I hope you track with me. Let's go ahead and get into this and let's just see how it works. So we're gonna click on this video converter option. We're gonna come down here and click on the target format, so the 1st 1 will dio Let's just do the Web M version. It doesn't really matter because we have to convert a few different ones will redirect to the Web M converter page. We'll choose the file and let's go grab that video file. Click open and it's gonna upload it and then process it. You'll see the progress here and then when Once it's on uploading, we can just click right here on the start conversion button. All right, so once that's done, uploading all I need to do is click start conversion or if you want to, you can scroll down and you'll see we have a few different options. Personally, I never really mess with this. But if you wanted to, you can crop different ways and you can change the screen size. But in this case, I'm just trying to straight up, convert it to a different file types. We'll click on that, and right now it's downloading the video. It's a cued the video, and it's working on processing it. When it's all done, it's going to automatically throw it into your downloads. All right. So it finished converting my file, which originally was about 60 megabytes, and you'll notice that this Web M version is only 12 which is awesome, because it's going to be pulling it down onto into a Web sites we want to load immediately . So having a much smaller is gonna be awesome. So now I've got that done. I can actually click the green download button, but it already threw it into my downloads stack and you see the foul right down here. But I need to convert the original file again. So we just did. Let me just double check. We did the web inversion. So we're gonna click on this convert original file again. Button. That way I don't have to re upload the file. We'll scroll down that we're gonna go to video converter, and we're going to go to O G V. Click on that, and we're going to click, start conversion and do the whole process over again. All right, So the O G. V file is done, and you notice this one is a little bit bigger. It's 40 megabytes, but it automatically downloaded to my download stack. If you don't see it, you should be able to click the green download button. And in the last video file type I need. If I come back here and double check, you'll see we did the Web M o G. V and now we need an MP four file. So it's actually the video file we started with. But I'm gonna let the online convert plug and do it again, just to see if we can compress it a little bit further. So it loads even faster. So I'm gonna go to convert original file again, back down the video converter, and then we want the MP four. We'll click on that and we will click on start conversion one more time to you get the MP for file started, all right. And the MP four file is only 28 megabytes instead of 60. So that's awesome. All right. We have all three of our video file formats here that we need to work with. Now, what we need to do is actually get them into our WordPress website. So to do that, here's my workflow. Not necessarily the best way to do it. Just how I've discovered to do this in this instance. So what we're gonna do is come back over to the website where editing were to come down to media here in the sidebar. Because what this is looking for is the u. R L Well, how do you even find the URL for this file? Here's how. What we're gonna do is come over to media. I'm gonna hold down the command button when I click. If you're on a PC, you hold down the control button and click and it's going to open up this link in a new tab , which is awesome. And now I can upload the video. So I've already done this once, and you'll see I've got the video files here. So for the sake of speeding this up, what we're gonna do is we're going to just click on this video file. We'll do the 1st 1 to sing. See, what we can do is one of a couple of things I could just grab this video that we did this Web m click and hover over this any part of the window and just let go. It's going to automatically upload it. And, ah, once that's done, you'll notice it will have Ah, thumbnail just like this and I can click on this and you'll notice over here I can copy the link. This entire link here is for the media asset that we just uploaded. So triple click and there to highlight everything. Or just click on the copy link button and then jump back into this portfolio. Adam, let me. Okay, so I got Thea the Web M version. All right, we'll jump back in here. We're gonna go to the web and file your l and well, paced it in there. Now, we need the MP four file, Earl. So we'll come back over here and we can just toggle back and forth. Let's go ahead and grab this MP four file triple clicking here. Copy it, paste it in there and then last is this oh, gv file. We'll come back over here and find that gv from this toggling back and forth appear. Or we could close this window and just double click back in there. That's him doing that. Ah, well, triple click copy the link and paste it in. They're all right. So the last thing we probably want to do is at a video preview image. So the way this works is let's say somebody's on a slow Internet connection and the video doesn't start right away. It's going to display the preview image first before it jumps into the video. So it's good to have just so they're not seeing a white screen. So we're gonna jump over here, I'm gonna go to my media library, and I'm just going to select an image that I've already uploaded just for the sake of getting this thing done here, and then we scroll down. We've got a few other options, but we're gonna leave it like that for now. I'll click, save changes. We're gonna click update, and then we're going to. And actually I should point out usually I would click preview changes. But the server that I'm using right now tends to cash all of my things that I do all the changes. So when I click preview changes, that doesn't show up for me for some reason. But most of the time I click preview changes. I wouldn't just update it without looking at it first, but in this case, uh, was going click update. All right, so I'm gonna view the post. We should have two videos playing now. We should have the one of the top that I had originally. And if I scroll down, it's really confusing to see, but you'll notice I've got a video background behind this other container as well. So that's how you drop in videos, at least, uh, specifically with salient and WordPress. That's how you would do it. But what's most important, to point out is just how to convert your files to those other Web formats and how to do that as well as another way you can do that is through dropping in a YouTube link like I showed you at the beginning of this lesson. So I'm gonna go ahead and go back to edit this portfolio item and let's go ahead and strip this out because I don't want it on that section. Let's see. It was right here when I click on this and we will just delete these links and that background will go away. We'll take out a video or that photo. We'll click, save changes and we'll update it. And then that video will be removed from the content. But if I go to my media, you'll notice that those assets are still sitting in my media library. If I ever wanted to use them again in another spot on the website, so the only other thing I want to point out just to to really kind of pull back the curtain and show you everything ended on this specific website. If I go back to the school of the homepage right now, so we'll go here and will go to this project or view the project. So we've got the video at the top. Scroll down. Everything looks good. That video's been removed. All right, I'm gonna edit this portfolio item and just want to point this out. If you are using salient how you would drop in that video. So we've got our main page builder section. I'm gonna go ahead and close this, and if we scroll down, you notice we actually the project configuration. This is because I'm specifically working inside of a portfolio post type right now. So that's how I'm seeing this option. And if I scroll all way down, I also have the project header setting. So I did the same thing that I just showed you, but this is specific to the header. So I dropped in the web m file. I dropped in the MP four file on the GV file and the preview I turned on the Parallax header option. So it scrolls with that parallax animation. I made a full screen. We just turned that on here. Or we could set the page header height. If you do want it to be full screen, here's an example where I could just make it say, 350 pixels. Tall organ. Turn it on right here to be full screen. If I update this, we'll go back to this page one more time to view the post, and we should only see about 350 pixels of video. Let's see how we did. All right, So now that's much slimmer instead of taking over the entire window, which you might prefer doing it that way instead. So again, depending on the theme you use it, you might have different options. But at least now you know where to look and how to convert those videos to drop. The men are guys. If you have any questions, please comment below. Also, if I went too fast, I know I get excited. I talk pretty fast. Don't forget it's a video. You can replay it if you missed anything particular, But I hope you learned a lot. And hopefully that was super helpful for you guys. All right, Thanks for watching 27. Why add a blog, and what is it?: What is a blawg? Well, in this section, we're going to get it installed on your website. And so before we dive in, I just want to demystify this. I know. For the most part, you probably really know what a blawg is, but don't want to over think it really all a blawg is is just a collection of articles. It's nothing fancy. It doesn't have to be Quote a blawg. You don't have to use WordPress. You could make it with static HTML pages. Really? All it is is a collection of articles that are in reverse chronological order. So typically, the newest post shows up first. So with WordPress, we can actually schedule our posts, and we can do some pretty fancy things. But again, if you know how to code a Web page are you got to do is add another page and add some links , and essentially, you've created a blogger or your collection of articles. We also organize our blog's with categories and tags. This helps that become more user friendly as well as improve our search engine optimization . Which reason to the next point does blogging actually help s CEO or search engine optimization, I would say yes and no. So, yes, because by its very nature is just a collection of articles. So any time you have more content on your website, it's going to help with search engine optimization is gonna help the search engines like Google being Yahoo, whatever, it's gonna help them find you. It's really in regularly publishing content, so you could do this just by adding pages. It doesn't necessarily have to be a blawg. What's nice about a blogged, though, is that it that that sorting of the categories and tags and all the posts in tow one spot instead of adding a ton of pages, it just it helps keep it clean and not be so cluttered. So that's where it's really helpful. And, honestly, it's just casting a wider net for search engines to find. So again, you're adding a lot more content, a lot more text, which then gives those sorts engines something to actually discover and then show to people who are searching for it. So the other way that this really helps, especially with WordPress, is you've got these built in made a tag. So your titles, your descriptions, your keywords that we added, like on the featured images, when we uploaded the logo in a few lectures back where we added that all text. That then gives Google well again any search engine, something to discover. So that's where the magic really happens. As faras, it's helping your CEO. The other thing is page links in general, that search engines can follow. So when they land on that post and you have other categories in your sidebar or other links that then let it spider out and crawl and discover all of the other pages on your website. The other piece to this is the search engine friendly you RL's. So whenever you had a new page or new post in WordPress, your your L a. The top whatever your domain name is dot com forward slash whatever the page title is, and that's one more way for search engines to find you. So in conclusion, the information that I just shared with you was actually written originally by John Crenshaw a few years ago, and the link is in the description here. I'd encourage you to read it. He goes through and give some really great points to this as well as if you're considering diving into the whole blogging, seen some practical steps and tips for how to create different posts. How to come up with ideas when to post them to make the maximum result for your effort. And last, they're super easy to set up, especially because we're already using WordPress, so let's dive in. 28. WordPress blog settings: creating a blogger on WordPress is really easy, because that's what Wordpress was intended to do from day one. So what we're gonna do is continuing with the site we've been working on. And it doesn't matter if you haven't been following along because of steps I'm going to show you will work no matter what theme you're using as long as your own WordPress. So let's go ahead and dive into our dashboard. And what we're gonna do is we're gonna create a regular page. We're just gonna name it Blawg. You can name it anything you want. It could be news. It could be featured articles. It doesn't matter what the name is. We're just going to create a page that will house all of the posts and post are kind of like pages. But there are post there just designated as on article essentially, and all of those posts are going to dynamically load into whatever page we tell it, too. So let's go ahead and do that. First, let's jump over to our pages. And when you created your demo site, it may be created a blawg page for you. If it didn't and even if it did. You can add a new page, and again, you can call it anything you want. In this case. Since I don't have a blogged yet, I'm just gonna call it Blawg. I'll go ahead and hit, publish, and then I'm gonna jump over to my settings will go down to reading. I'll click on that. And now what I'm gonna do is I'm going to tell wordpress that my post page is this blawg page. So now my blawg post will load into this page, I'll click, save changes. And now I'm gonna go back to my appearance down two menus and I'm gonna add that blawg page to my menu. We'll click here, click add to menu, maybe drag this up. So contact is the last page there. Will it save menu? We'll jump back to the live site, and now we have the blawg link. I'm gonna click on that and you'll notice I've got this. Hello world. So this was one of the default posts that gets installed when you load WordPress. So, depending on your theme, your styling could look very different. One way that we can control this with the salient theme. If I go back to edit page, I don't have a templates function over here on the side. Some themes will have that where you can click a little drop down and it will have the option for, like, blogger portfolio soon control what that page is. In this case, you're gonna want to come over to the salient menu, go down to Blawg and click on that, and then you'll have more blog's settings that you can set for how you're blawg is displayed. So if you go through here when control a lot of things from how it loads in the animation to the type of layout it is whether in this case, it's standard blawg with a sidebar. Or maybe it's a masonry blawg where it's got all the images. Kind of like Pinterest does. If I save this real quick and we go back to the home page and then click on Blawg, that should change the layout. Now, this hello world does not have a featured image, so I'm gonna click on this post real quick. I'm gonna go to edit post and I'm going to quickly throw in a featured image just again. So we can see how this works. Click set featured image. I'll update that post. Let's go back to the main blawg page here and now you can see how it pulls in that image. So basically, if we just look at what we did the beginning of this, we set up a page and we told WordPress what page was going to be our blawg page. So in the next video, I'm gonna talk a little bit more about posts, how to set them and how control the settings in WordPress. 29. Posts in WordPress: in the last video, we got her blog's set up on our WordPress site. Now I want to talk about posts in general. So right now we're on the block page, Let's jump back into the dashboard and you can see that in the sidebar. We have this post tab, so if I click on it right now, we only have this one Hello World Post. It's really easy to add a new post. I can click on this. Add new button here. I can click, add new on the side bar or while I'm in the site and I have this options bar across the top . I can click New post here, so they're all going to get you to the same thing, and this page is gonna look really familiar. It looks almost exactly like a regular page page and we're breast. So in this case, ever wanted to add another post slash article? Whatever you want it to be called, we can add a title up there and you'll notice it gives the Perma link or the URL right here . And we talked about in the first video of this section, where this helps with your search engine optimization. So this will be the actual link that goes up above in your search engine are in your your your l in your browser window. So if you wanted to change this, you can change this and make it something that's even more s CEO friendly and specific to your topic. Once you've done that, you can add any texture one here and maybe for the sake of this tutorial will just copy some warm Epsom in there. Lauren Epsom. For any of you potential non designers is just filler text. So we'll drop that in there. Now that I have that I can continue to add more things within this post. So if you don't see this, you can click on this toolbar toggle, and you can add even more styling or appear. We can add media. So in this case, you could upload a photo if you wanted Teoh and inserted directly into your post anywhere he wants. You can also create your featured image and like we briefly talked about in the last video and we do something different so we can see what that is. The featured image is what will show up on that blawg page. Now, depending on your theme, some things will pull that featured image and actually use it for the header graphic and will use it in many places throughout your blawg since around salient. You also have a custom header setting here where we can upload anything we want for that page. We'll go ahead and select a file there. We could make it parallax. We can add all kinds of stuff here, and I'm going to go ahead and publish this now. Actually, before I do that one thing I do want to mention, you can save a draft and come back to it later. You can also edit it, depending on if you have a team working with you. Or you can even have it published automatically so you can create all of your blog's posts on a weekend or whenever you're up for it and then schedule them all out automatically release at any given time. So I'm gonna go ahead and hit Publish. Right now I can click on view post up here to take me directly to the post. So there's that header image we just did as you scroll down. This was the featured image. That's what shows up on top. And then this was that in line graphic that we dropped in there. If I go back to my main blawg page, you'll notice that the most recent post shows up first. Hopefully, by now you're getting a better understanding of how the posts feed into the blawg page. In the next lecture, we're gonna talk about categories and tags in WordPress. 30. Categories and Tags: Let's talk about categories and tags in WordPress now. I don't overthink this too much. In fact, you've already worked with them a little bit if you've been following along. When we set up our portfolios section with our portfolio, we had categories as well, but they were a little bit different. They were, Let's see, here we had adverts applications, branding, graphic design, photography and Web design. So these are all just simply categories, so it's probably easier to look at it and think of it this way. When I click on these different categories, whatever that project is filters into that category. So we're gonna do the same thing with our blawg, but we're gonna take it one step further. So here we've got categories, but we could also add tags. So something that I want to point out when I first started to research this because to be totally honest categories and tags is not something that I've used a lot in my past, because I'm not a big blogger yet. However, I'm starting to be, as I create more of these tutorials for you. But in the meantime, I had to actually look it up because I wanted to make sure I was teaching you correctly. So I found this great article and something that I thought was really interesting. That, I wanted to point out, is that Blawg posted clearly fit into a single category. So again, your category, your main parent thing that you're going to sort this into so it shouldn't fit into multiple. And the example that this author gives is remember playing with those blocks as a kid that you had to put him through the whole, whether it's a square or circle. His point is that if it's a square, it's not gonna fit in a round hole unless maybe you bang on it with a hammer. So what he's saying is that, like as a main category, your post, it only fit into one of those. Now you might have a red square in a blue square and the Yellow Square and all of those would be tags. So for me, that made a lot more sense. Also, his example is say, you're a breakfast blogger and you've got breakfast. I'm sorry to have breakfast a food blogger, and you've got breakfast, lunch and dinner and then within those you could have tags of scroll down bacon keen while or vegetarian, so I hope that makes sense. Let's go ahead and apply that to our own blawg. So what I'm gonna do is jump back into my dashboard and you'll see I've added a couple more post since the last lecture. Just so we had something to work with. I'll go to my dashboard and then come down to posts, and when I hover ripostes, you'll notice we've got categories and tags. So let's start with categories. As a designer, I might add something like tutorials. We'll go ahead and add that. And when I do that, remember, it automatically adds a slug, just like it did in the previous lecture, where we talked about adding categories for our portfolio. And when you do this, I would take the time to add a description. For right now, I'm not simply to kind of move through this tutorial more quickly, but again for search engine optimization. And just as a good practice, I would take the time to set up your description. Let me add a couple more categories real quick. Let's add freelancing, maybe business, and let's just call that good for now. And I'm gonna jump back up to my main posts area and we've got those four posts that I just added, and right now they all have the uncapped ago rised category. Let me go ahead and edit these now just because in that article he mentioned that we should keep it toe one category, and I agree you can still apply to as many as you want. So WordPress doesn't physically limit you from adding Mauritz. Just good practice. So let's go ahead and add just one category here will call it tutorials. And then what I can do is at a tag. So right here, let's just add another tag called Web design. So maybe this is a Web design tutorial post I'll click on add. And that will add that to this and this print design. One was already added from something else I was doing as I was gearing up for this lecture . So that's why that's already in there. I'm gonna go ahead and click update up here and now when I view my post, depending on your theme, you might not see anything different. And this is something we can explore more in your settings, but sometimes you'll see below may be the name of the author you'll see in this case I've got the date, but sometimes it'll add the actual categories and tags as well. As I scrolled down, you'll see we've got my post and then on the side bar, and this is just in the salient theme, and currently this is set up with widgets. We have our tutorials category and uncap big arised because that's what's been applied to this one. Specifically, If I jump back to my main blawg page and I scrolled down, you'll notice that I still only have these two categories. And the reason why is because those are the only two that exist on my site right now. Even though we've already made categories, they aren't actually applied to any Post yet. So let's go back and take care of that real quick. I'll jump down into posts and you'll see again. We've only got one category rat basically our tutorials category, and then we've got these other default on categorized. So rather than clicking all the way in to the page, I'm bursting to do quick edit. I'll click on that. I'm gonna uncheck uncanny arised and we'll add business to this one update. We'll go down to this and hit quick edit. It's make this one freelancing. We'll update that in the last lets make this. Hello world. Let's see, we've got tutorials, business freelancing, actually licious. Leave this one on Categorized and I'll Click Update. Now, when I go back to view my posts and I scroll way down on the sidebar, you'll see we've got the different categories and if I click on any one of these, it'll filter it just like it does on our portfolio. And then, depending on how you have your blog's set up, you can have your tags featured as well. So right now, by default, they're not showing up. But let me show you something real quick. While we're in here, I'm gonna jump over to my appearance and go down toe widgets. So right now, my blog's sidebar that we're looking at is controlled by all of these widgets right here. And what I can do is come down and I have this tag cloud widget. I'm gonna drag in. Let's put it right below categories it save and Now, when I jump back to that blawg and I go to my sidebar on school down, you can see that the tags that I've used so far show up. So if I click on that web design tag, any post that have that Web design category will show up. So hopefully that helps clear up what a category and what a tag is and WordPress and how to use them. And the next lecture. We're gonna take a look at how to set up comments in WordPress or how to disable them cause most likely, you're not ready for comments yet, and that way you can avoid getting spammed. 31. Comments in WordPress: having comment functionality on your blawg is gonna be really helpful for engagement as well as it's another way tohave s CEO on your site. It's one way that Google or Yahoo are being, or whatever can actually see people interacting with your website. So in many cases, comments can be a great thing. And in fact, that's how you can get a lot more inspiration for what articles to write. As people engage with your post and you can see what's popular. However, the dark side of the Internet, as you know, are all the trolls and all the haters who are gonna post negative things, or all the people who were gonna spam and post links to other sites that you probably don't want featured on your website. So let's take a look at comments real quick in WordPress and show you how to control that. I'm gonna start by jumping into my dashboard again and you'll see we have his comments tab in the sidebar, so I'll click on that, and you can see right now any of the comments we have, whether we have anything pending anything approved anything that's gone into spam or anything that you've added to the trash. So this is a way for you to quickly see what is happening on your website Before we get to this phase, though, you might not even have comments turned on. Or maybe you do when you want them off. So let's take a look at how to control that. First, I'm gonna come down here to settings, and I'm gonna come down to discussion and you can see that these are all of our discussion . Are comment settings. So as you read through all of this, there's a lot of different settings that you might want to control, so they're pretty straightforward to read what they are. But the ones that I change the most are allow people to post comments on new articles or allow link notifications from other blog's or attempt to notify any blawg linked to from the articles. So usually I have all these turned off by default. If this is on any time you make a new post, it's going to allow people to comment on that post, and usually what happens is, if I don't intend for that to be on, then I'll get a lot of spam comments, and it'll start to really affect my website. If you're gonna have this on, I would for sure leave on comment must be manually approved. And that way it doesn't go right on to your website immediately. At least that way, it goes into this comment sidebar where you have to physically approve it before loads on that Web page. So again, as you get started, I would recommend turning this off unless you're trying to create an engaging community on your blawg. Now let's say you've already got a bunch of blogged posts and you forgot to have this functionality turned on or vice versa. Let's say you have a bunch of them and they've all got comments turned on and you want to turn them off. Well, it's really easy to fix. You can come over here to posts, and I can select all of these. We'll go to bulk actions and we'll click, edit, click, apply, and then what I can do is down here under comments. I can click, allow or do not allow. So right now they aren't allowed on my blawg. But I'll click allow and then click update. And now, if I jumped any one of these blogged posts, and I'll click view post if I scroll to the bottom. Depending on your theme, you should see the leave reply or something similar box at the bottom, where people can actually click in here and type in a comment and then hit Submit. Comment. So again, this is how you're gonna get a lot of spam and a lot of other things so we can talk about different plug ins that will help block any spam content. So now if I scroll back up, you can see that attached to this post is a comment. And if I go back into my dashboard and go down to comments, I can see that another comment was left, and that's pretty much it in regards to comments. The only other thing I would show you is if we jump over to plug ins and we click. Add new. You can actually search for comment, and you can see there's a whole bunch of different comment plug ins that air really helpful . One of the most popular ones that usually comes by default with WordPress is AC is met. I don't know if I'm saying that right? But if we check out more details, this is one that I think you have to subscribe to if you're going to use it to its fullest potential. But from what I've seen, this is one of the best spam filters you can get for your comments on your WordPress block . 32. Introduction to contact forms: If you've been following along, we've got a portfolio. We've got a blawg with a killer home page. Now what we need to do is add a contact page because I can guarantee you that that's going to be one of the things that your clients are gonna ask you for. And one thing you should probably do, even for your own site, is create a contact form. This does a few things for you. One is it protects your email address so I wouldn't recommend putting your email on your WordPress site unless you want a lot of spam content eventually when you get found. So a form is a great way to help protect that, as well as weed out the tire kickers. And what I mean by that is, if you're going to be a Web developer or graphic designer or anything like that, even, just I guess the general business person a form can help be a barrier to entry and kind of a gate. So that way it qualifies your buyers. So rather than anybody being able just contact you and ask you silly questions that will happen. It will help guide them and make sure that they're a buyer who's ready for your service. So, for example, you might ask, How big is your company, or what? Your marketing budget And maybe on one of the drop downs. Maybe you have, like, $1000 as your minimum purchase. So that what you're not getting, people who want, you know, a $200 logo or a $200 website, right? So the other bonus to this or the other benefit is depending on the contact form. You use it. Congrats, all of those contacts and all of those entries into one spot. So there's a couple contact forms. I would recommend the 1st 1 you probably already have if you've been following along. If we jump into our plug ins here, this contact form seven. So again, if you're following along. If you got salient theme, I think maybe even the X theme it probably installed this by default. If you didn't get it, it's really easy to go to add new and plug ins, Search for contact Form seven return and you'll see it pulls up. And one of the ways that we know this is a great plug in again this was updated very recently and has over a 1,000,000 active installs. So between that and it's high rating, you know that it's a pretty good solution now. There's a lot of other contact forms if we scroll through here from different styling options and other plug ins. But Contact Form seven is by far the most popular. The other contact form is gravity forms. However, this one comes with a price tag, so you do have to subscribe to use it. But I highly recommend this one. It's really easy to use. It looks beautiful, and one thing that I like better about gravity forms versus contact Form seven is how it works, and what I mean specifically by that is Contact Form seven basically acts as an in between . So somebody goes in there. They fill it out in the hit submit, and all it does is fire off an email to your email address. Well, something that could happen is if it's not configured correctly, or maybe your server goes down or something weird happens, which has happened to me before. That email doesn't get through and because all it's doing is sending out an email essentially If it doesn't get through, it doesn't get saved anywhere, so you'll lose that contact. And then you have people going, Hey, I emailed you and you never got back to me. Whereas gravity forms when it fires it off to to send it to you, it also copies it to your WordPress database. So where this is cool is all of your contacts over time can be in one spot. So if you wanted to, you can export all of that as a comma separated value sheet, and you could upload those contacts into something like mail, chimp or constant contact or some other email marketing platform. So it's super useful for in the future. Now I do know there are some other plug ins you can add to Contact Form seven to make it do similar things as well. But it's a lot more hoops to jump through, so I'm a big fan of things that work well, that look good and just take care of things and make my job easier. So again, that's why I would highly recommend gravity forms. Not only that, but both the X theme and the salient theme for sure have built in elements. So what I mean by that? If you remember, when we go to any of the pages here, let me just jump into one real quick. It doesn't matter which one. I'll go to my page builder. It will goto add an element. Let me just type this in real quick. So contact Form seven is already installed, so it shows up here. But if I have gravity forms installed that will show Oppa's well, and it has custom styling, and you can also style it yourself. So what we're gonna do in the next lecture is look at how to actually set up contact Form seven and how to set up gravity forms. 33. How to install Contact Form 7: contact Form seven is really simple to set up, however configuring it can be a little bit tricky sometimes. So what we're gonna do is install Contact Form seven in this first video, and then in the next video, I'll talk a little bit more about how to control the settings and make it exactly how you want it to be. All right, let's get started by just installing Contact Form seven. So go to my plug ins. Page and I can either click add new right here on the side bar or and click on Add new on the top right here and I'll search for Contact Form seven. And it should be the very first thing that loads here on the top left. And if not, this is what we're looking for. So I'll click install now and then. Once this is finished, installing the button will actually change. You click right here on the same button toe, activate it, and that actually turns on that plug in inside of WordPress. And as soon as we do that on the left hand side, you'll notice it added a contact tab. So click on that real quick, and it gave us a default contact form right out of the gate. So we don't even have to make our own form now, which is really nice. And what we're gonna do is use this short code here beside this form. And we haven't talked about short codes yet, so let me give you just a real quick rundown. Basically, short codes are a way for you to quickly and easily add different interactivity to your website. So when you had a plug in, like this contact form page, I can actually copy the short code pasted into any page or any widget or any place in the footer and that whole form will actually display in its place. So let me show you how that works. Let's just jump over two pages real quick. I'm gonna make a ah, test page. You don't have to name it. Anything special. We just call it test. It doesn't matter what you call it, and I'm gonna click right inside of the WordPress editor here and notice that I'm on the visual tab and not on the text tab brisket. Command V to paste that short code that I had copied to my clipboard. I don't even have to publish the page yet. I'm just gonna hit preview and you'll notice on this test page. That contact form comes in beautifully. It animates it's interactive, and I can actually go ahead and fill it out right now. So let's just test it real quick. So put my name in. It's put in a fake email testing the form and did it work. All right, that's when I hit Send and thank you for your message. It has been sent. All right, Well, where did it get sent to? Let's take a look at that real quick because we're working locally and we're not using a real host at the moment. The contact form won't behave quite like you expected to. You'll have to put wordpress onto a riel host or install another plug in tow. Have it work like like you think it would as faras filling this out and emails you directly . But one thing I have discovered that's really cool about local is they've created a utility just for this purpose. So if you go to the website that you're working on and then over here, we click on utilities. It has this male hog utility, So I'm gonna go ahead and click on that, open it up and you'll notice that I can see the test email that I just sent. So if I cook on that, you can see exactly who was from what. Their email address. Waas with Subject Waas and the message body. So this is a great way to kind of make sure that your form is configured correctly and that everything looks good before you put it up on a live server. So we'll get into details on how to actually customize the contact form in the next video. One more thing I want to show you. Let's jump back to our main page. So I just showed you how to use a short code to put that foreman. But if you're building with a theme like Salient or X or even divvy and you have those pre built page builders, so I'll turn on my page builder by clicking on that button here and now on, said the WordPress editor. I've got this visual composer set up and you'll notice it automatically converted that short code into this contact form seven element. So let me show you this real quick. Let's pretend like that wasn't here, was gonna hit the trash can to remove it. And let's they're using visual composer to style a page. I could click the plus button and you see all these different elements we can add, like centered headings and images and all kinds of stuff. Well, by default, we've got his contact form seven elements, so I'll click on that. And instead of having to use a short code, I could just point and click to add this. And there's even a drop down menu. So if I had multiple contact forms to put in here, those would all show up here as well. So it's really just point and click. Just add contact form as an element will click on the drop down to select the form we want to use. And currently there's only the one I'll hit. Save changes, and then I'll hit preview and you'll notice that it does the exact same things. We have the same form, installed just a different method but achieved the same result. So I hope you're tracking with me. But I do want to remind you if you got lost along the way. First, you can always obviously rewind and rewatch this because it is a video. But second most importantly, make sure you join that Facebook group that we have set up. It's a great community where if you get lost and have questions, you can reach out to people or if you have ideas, or if you want feedback on what you're working on, it's a great place in a great community to help each other out as we get up and running and learn more about WordPress. So again, if you haven't already check out that Facebook group and get signed up. There should be a link attached this video. And if not, there should be a link attached to the introductory video at beginning of this course. And now what we want to do is go ahead and take a look in the next video is parts how to style eyes Contact Form seven and add different form fields and control it settings for where it e mails and all that kind of good stuff. So stay tuned for the second part of installing Contact Form seven 34. Configure your new contact form settings: So now that we have contact form seven set up and running and everything's looking good there, let's go ahead and look at some of these settings and how to configure your form and have it be exactly what you want. So first things first. This is a great spot for me to point out that if if you're already overwhelmed looking at what's going on here in the sidebar you might want to consider, just go ahead and purchasing gravity forms. Instead. It's a lot simpler to work with its dragon drop, and it's a lot prettier to work with. So that being said, if you want to stick with the free version, let's go and roll up our sleeves and dive in. So I have my screen open here on split screen, so we kind of see what's going on under the contact tab inside of WordPress. So let's click on that. So you see, I just landed right here on this contact page. Click on this contact Form one. And now we have four different tabs that we can work with. We have our main form, so this controls what are form actually Looks like, see you over here on the side. It controls what the actual input boxes are. We have our male tab which controls how it sent in who it sent to. We have our messages. So for example, if I were to try and send this form right now, you can see that it says this field is required and one or more fields having air. All this kind of stuff can be configured on the messages tab here, and we have additional settings. And to be totally honest, I have never used this tab. So if you'd like to learn more about what this tab does or how to style this form further, I just should point out real quick that you have these docks at a Q and support tabs right here on the side. So feel free to dive in and learn even more about this. But what I want to do right now is just show you basically what I change whenever I get into contact Form seven and what I set up for my sites. So let's go back to form and let's just try and deconstruct what's going on here. So this is the default form and those actually probably weren't in there. That was me playing with stuff earlier. So let's take a look at this. We have our label, which is what shows up above the contact or the input field. So in this case, your name and it's required shows up here, and then we have a text box and input box. This little Asterix means that it's a required field, and then this is the name of the field. So how this would work? Let's go ahead and go down to the bottom is if I were to want to add any of these types of elements, I've just click on it, and I can use this box to give it a name. So maybe this would be like, um, cell phone or something like that, and then click required field and you'll notice down here it's building the short code for me. So as I click required field that added that Asterix in there for me by default, I could give it a default value. So let's say you wanted to be filled with something right out of the gate like that. I can use this Texas, a place holder in the field and you'll notice that it added that into my short code. Ah, hit insert tag. It's save. And now when I refresh this page, you'll see that it has this form field down here, and it has the number as a placeholder text. So, Suze, I click on it that goes away, and I could start typing in my own number. But you'll notice that when I refresh this page, it didn't have any label above it. I didn't know what was up here. So what we can do is copy this label Doesn't matter. Which one was it? Command C Command V to Paste. Ah, grab this closing label tag. And now I save. And I don't even care that this says subject. Right now, I just want to show you how this works. Let's refresh this page. And now I've got subject above and you'll notice a placeholder text went away. So there's little bugs like this that I'm not quite sure if you're going to run into these or if it's just on my end. But I have found that it does stuff like this every now and then. So again, another reason why I would probably suggest jumping over to gravity forms. So anyway, let's keep going. I'm just going to delete this placeholder text, mostly to show you that you can work dynamically right within here. And this is just a general text input area, this whole thing so you can mix in all of these short codes. But I can also mix in HTML as well. So if I save that, if you know how to use any kind of HTML tags, CSS tags or anything like that that work here as well. OK, so now what we need to do is configure how this is sent. So if I click on the male tab right now, it's been filled with the default from local. But what you're gonna want to do is put in your personal email address or wherever this is getting sent in the to field. The from field is dynamically generated. So this your name variable were short code or whatever you wanna call it. If you come back over here to form, you'll see that we have the your name name here. We also have your email. We have your subject, your message, and you could call these whatever you want. Whatever you want. This is just what contact Form seven put in here. So when I get back over here to mail whenever it submitted whenever it sent this will be whatever was put in this input box over here. For now, always leave this alone, so leave it as WordPress at whatever your domain name is dot com. So that way it functions properly. Your subject will most likely be whatever your site name is, plus in quotes, whatever the subject that was put in the text box over here or in the input box so you could changes to whatever you want. Usually what I do is I put contact from my website or contact from, you know whatever your website is dot com That way, it's a quick reminder of why this was coming to you. This I usually leave alone and then the message body is again. Whatever you want, you can put whatever you want in here. So if we were to pull up male hog grow quick, you can see that this whole message body was what was sent through that contact form so I can come back in here and configure this. And if I were to ADM or, um, Mawr form fields, I want to make sure that I added those two. This sent mail as well. So don't forget to Adam Teoh here when you do that. So let's go ahead and see how that works. I'll go back to form and I'm gonna highlights whole thing. It command C Jim back over to mail. I just can't command V just to get it in here just so I can kind of deconstruct what's going on. So let's I want to add this cell phone box. What I would do is just say, cell phone. And then rather than having this text box, I just wanted to be that cell phone short code. So you tracking with me? I hope that makes sense. I know it's a little bit confusing. This is just how I work. I'm just trying to show you what I do. So if you have questions if it doesn't make sense, please comment on this video or in the F A Q. So I can update this video if you're following along and it's working great and awesome. All right, so now that we've got that going? How we want. I'm just gonna hit, save. And now, if I were to fill out this form and submit it, it would have that additional cell phone content in there as well. All right, so that's pretty much it for contact form seven. I hope that makes sense again. If you got lost, please make sure you join the Facebook group so you can reach out to anybody there and ask questions. You also have his docks and F A Q and support tabs that might do a better job of explaining their own product that I'm doing currently. And last but not least, in the next video, we're gonna dive into gravity forms so you can see how that works and perhaps go that route instead. All right, Thanks for watching 35. An easier (but not free) alternative: Gravity Forms: in this video, we're going to take a look at what gravity forms can do for you. So first I'm gonna do is go to my plug ins and I'll deactivate contact form seven and you could leave it running. You could actually have both contact form seven and gravity forms running at the same time . It's not going to affect anything. But since if I were going to be using gravity forms, I would have no need for contact form seven. So I'm just going to some housekeeping and delete that. Now I'm gonna do is jump over to gravity forms, and I already have an account, and I've already logged in, and when you log in, you can see what your licenses are. And I've got a business license here with a license number, and I can also go to downloads to see exactly what I have to download. So they've got some different beta releases. You got the main gravity forms, and then there's some also basic add ons that are available as well. So right now all I'm gonna do is get the download for the main gravity forms Plug in. I'm gonna come back to my licenses tab, and I'm gonna double click and copy that license to my clipboard. And then we're gonna jump back over into our plug INS area and I'll click on Add New. And this time, instead of searching for my plug in like we did with Contact Form seven, I'm going to click, upload, plug in, and I can either choose the file or I know it's down here. My download stack. I'm just gonna drag and drop and pop it right on top of that. We'll click, install now and then installed successfully. So let's go to activate that plug in. And there you go. That's pretty much it. Now, if again, it's going to say, Register your copy of gravity forms to receive access to automatic upgrades and support. So this is where if you, if you were to have the download files first on, do you don't have the register the license key yet. You'll get that message so you can click Purchase one now, or we could go into settings for gravity forms, and we can just paste that license key right in here directly. Next, we will keep the background updates enabled. That's fine I'll click next, and I'm not going to use any currency. But I can select this to US dollar since we're in the States here and everything else for right now is fine. And we can come back and change any of these settings at any point in time. But right now, all the bees alone and that's pretty much it. So just like you did with contact form seven, it created a forms tab on the sides. You see, we have a few more options. We can come back to the settings any time. If you need to change any of that, we can see all of the forms. Or right now you just click. Create a form. So that will take us to the new form tab. Just call this contact us just a simple contact form and I create form. And just like that, we have our form builder right here. So this is a lot simpler than Contact Form seven. I can click over here on what I want from standard fields. Click over here and give it a name. So this field label could be Maybe this is the first name and you can give it a description you could make it required, so you can see how this is very different than Contact Form seven. It's very much point and click. You could change the appearance, and there's even some advanced tabs that you could work through here as well. So ah, lot of flexibility and super easy to use. Let's go ahead and take a look at these advanced fields down here, so I just made a name tab. But there's already a name tab here that we could add. I'll click on that, and it gives you a first and last name already without having to set that up. Maybe you want an address in there and you see it adds all of that. Maybe you want a phone number or email address or file upload, and you can see how this is super easy to work with. So I'm gonna go ahead and hit update, and then from there, what I can do is go to my setting. So about these four tabs across the top, we have our settings that control how the form behaves. So, for example, here is the form basics. What's it called? What The description you can change some of the layout options. You can do a lot more down here. What's really important is the confirmations tab. So as soon as somebody submits this well, how does it behave? So if I click at it right now, it'll send off this message and it will actually set up a paid I'm sorry, a text right in the middle of where the form used to be. So it's just gonna pop this up, but you have the option to redirect to a whole different page. So maybe after they submit it, you send them to a whole thank you page that you've created on your website, or you can redirect right here to an actual u R L. So maybe it's a completely site altogether. So it's really nice that this is so flexible. It lets you really dial in exactly how you want to behave. Then there's notifications. So the way notifications work is once the form is submitted, you want to know that somebody actually filled out the form. So right now, by default, it's going to send a notice to whomever the admin is on the website. You can double check that by coming down here to your setting. So I'm gonna hold on. Look, man key and click real quick. And so, by doing that, I opened up a new tab, and right here we can see that currently, the default admin addresses this Dev Desh email placeholder the flywheel put in here. So you do want to make sure that you have your actual email address here. So whatever is in here is what is going to be sent to this Admiral admin notification. All right, so there's a few different settings we can dial in here. These are all really straightforward. So there's simple for you to kind of look through and see what you want to do. And then we have entries. So what's really cool about this is every time somebody submits an entry on your form, those entries air captured in the back end of your site here. So the reason why this is so great is let's just say that your host has issues or something weird's going on. Or maybe your email account is blocking, you know, but quote spam. And maybe it's not spam. Right? So any time you have a question about missing on entry. You can come in here to forms and go down the entries and you'll see every single injury that's ever happened on that form. That's amazing. It's a super big help, especially when things go wrong. And I've had that happen a lot where this has actually been a lifesaver toe have that contact information so really handy to have. And then, of course, we got a preview button. You click on that and you can see what the form might look like. And then, depending on the theme you have, I mean, it might look a lot different. It will look a lot different, but at least you can kind of see how this is laid out. As far as the form is concerned. Now I don't want to do is take a look at how to embed a form, so let's go ahead and jump over two pages and I'm going to jump over to our current contact pages live on the website click edit. So if we hit preview real quick just to remind ourselves what this looks like, this is that contact form that it currently have on the website and because it's a local host. We don't have his map showing currently, but when we migrate that this will show up. So what I want to do is try and put that form right here in this open space. So I'm gonna close this preview. Well, Jim, back over to the main page and I'm gonna click on this little plus sign here. And this time I'm gonna type gravity forms and you'll notice that when I did this demo with the contract form, seven gravity forms didn't show up because I didn't have it installed yet. But now that it's installed, it shows up as an element within visual composer. So now what I can do is click on this drop down menu and just choose that contact us form I chose. I can choose whether or not to show the title. I could display the form description in this case on both of these. I'm just gonna leave it as no enable Ajax to be totally honest. I just leave this alone and let it be how it is like it's safe and I'll preview changes. And there's my contact form with all the different input fields that we selected. So you can see how gravity forms is really, really easy to work with. Now, if you wanted to add gravity forms and you had a they didn't have a page builder like visual composer were using a different theme. And you're not seeing this whole visual composer layout. It's really easy to do with short codes, just like we did with Contact Form seven. So what I'm gonna do is go to pages. I'm gonna open up a new page. I just held on the command key to clicked. Open this up in a new tab. I didn't want to leave that place over here and let's make a new page. And when you have gravity forms installed and you're using the regular page builder window here that WordPress has, you should see this ad form button so I can click on that. And then, from there I can select what former want to add, and it gives me a few options here as well. I can even add some advanced options, which I don't really ever use. But I'll click insert form, and now we see a short code, just like what we saw with Contact Form seven. So you could use this on any page and in any spot, whether it's the footer or a sidebar widget area or whatever. And if you don't see this, just Google, let's open a new page in this Google for gravity forms short code so you can always go that route to and open up their documentation that scroll down here. And here's that same code that they gave so I could copy and paste that. So just try to give you ways to to really quickly figure out how to embed this contact form . So I hope that was helpful. And again, gravity forms a super easy to work with. Of course, the downside is it's not free. But in the long run, I found that has some really great options and things that have worked really well. And that's pretty much it guys. Gravity forms is really straightforward, and I highly recommend it 36. My thoughts on hosting, and some resources: WordPress. Hosting is a huge topic in something A lot of people are really passionate about. A lot of people who will swear by one host and say the other one is the worst they've ever seen and you might have somebody else who says the exact opposite. So in my experienced, I've had really good luck with Go Daddy. Their customer support is really good. They're hosting platform Their their shared hosting can be a little bit slow. And what that means is you have one host or computer that is sharing its resource is with many sites. So depending on who you're sharing with, you might experience slow load times and things like that. So the managed WordPress hosting that they offer is a step above that shared hosting plan. And then you have other hosts like Blue Host and WP engine and site Ground and Dream host, and I could go on and on and again, they've all got great options as well. So it's really hard for me to tell you exactly what you should do. I think you're gonna need to do some research on your own. Figure out what your budget allows for maybe even trying. Call their technical support and see who you like toe work with. That's what we did. So currently. Like I said, we have a lot of our sights on Go Daddy. We also use Theme Co. The X theme they have hosting, and we've used their hosting as well and had have had good experience with them Currently, they don't have a call center, though, So when you when you need help, you have to email them. And sometimes that can be difficult, especially if you're new to this, to know what to even ask. If things aren't working, you don't even know how to ask for help. So that's where I would probably steer you towards Blue Host or Go Daddy or something like that and then also local by flywheel. So this local app we've been using for everything is owned by flywheel. It's a hosting company and in the next video I'm going to set up a fly, will account and then we're going to use the local app to push up the site that we've been working on. So I'm really excited about this. It works really, really slick. It's it's actually so easy and the base price for their hosting for one site is about $15 a month, which is it's It's a really good deal. Now. You could get a go Daddy hosted site for about $5 a month. So yeah, it's cheaper. But the headache in transferring files and updating databases and things like that, which I'll show you in later videos, is all you have to worry about any of that with this flywheel stuff. So that's why I wanna show you that first, because it's a great way to get up and running without having to go crazy in the process. So anyway, that's what I have to say about hosting. I'm gonna add some more. Resource is to this video that you can check out and again join the Facebook group if you have questions or comments, or if you'd like to share who you're using or who you've had success with and just keep that communication open because I know that this video and this whole topic is going to be something that gets dated quickly in this course, because it's going to change fast. So do your research, do your homework and check out those links below 37. I LOVE THESE GUYS! How to setup a hosting account with Flywheel: it's easy to get set up for hosting with flywheel, and this is gonna work Great. If you follow along using the flywheel, the local by fly will app it's gonna make your integrations seamless. And it's going to really save you a lot of headache down the road. So this is a great option, and it's free to sign up and check it out. So what we're gonna do is go to get flywheel dot com and on the home page of his big sign up for free button. So we'll click there and go ahead and create your new accounts. And then once you get signed up, you'll have your own account here and we've got this big green create new site button. So I'm gonna click on that, and then you can set up your WordPress site details and we can give it a temporary domain name. So this way you wouldn't have to purchase a domain name yet to get started using their service. So in this case, I was gonna make it. Derek Mitchell 0.5 all sides dot com. And now what we need to do is create a new WordPress user. So this would be a user name. You could make it whatever you want. I need to cut in real quick on this video and talk to you real quick about demo sites. So I'm about to go through and show you how to purchase the hosting and all of that, which is great, because it's something that you're going to need to do anyway if you want to keep your site online. But if you just want to check this service out and do that free trial that had talked about the home page, you can create what's called a demo site. So here's the link. To check out this documentation, it's get flywheel dot com forward slash wordpress dash support slash What is a demo site? All right, so basically, what you can do is create a new site. You can upload the site for your clients. So that site we just made in local you could actually push it up to a demo site and they can see it, and it will be in the actual production environment. And then if the client is ready to go, you can actually transfer the billing to them so they're responsible for all of the payments. Now, if you're your own client and this side is for you while you're on the hook for the payments there. But anyway, it's that simple, and then I have to do is make the site live. So to demonstrate that here is the video from flywheel. If you like many designers, you've used a demo server at some point to show off a great new website designed for a client with fly. Well, that's a thing of the past. Demos. Sites on Fly will allow you to stage decide to show to the client four. Pain. The cool thing is the site is already in production location. It's a going lives, easy switching DNS. With no migration. What's even cooler is when you're ready to go live. You can choose to pave the site yourself or transfer billing. A client still confused. Here's how demos sides work. When you create a site and buy oil, you have the choice to pay now or pay later. If you choose to pay later, your site will still be available for you to see a demo site, but it won't be lying. All demo sides have expiration dates before your son expires will send you a few notices. Until then, you can do whatever you need to make sure your site looks perfect before you. When you're ready for your sent to go live, you'll need to complete building, choosing to pay for the site yourself or transfer to Once you've done that, your site is no longer a demo. All you need to do is turn off password protection and it will be on the Internet for the world to see. Pretty awesome, right? Della Sites are just another way of reimagining hosting for designers. All right, pretty straightforward. So with that, I'm gonna turn it back over to myself to continue showing you how to actually pay for the hosting and get that set up. If that's the right you want to go and then we're gonna put that password and again, and then you can either pay. Now I have a client pay later, were added to a bulk plan. All right, let's scroll down and choose a plan. So here you can see we've got some different plan options and to be totally honest for what you're going to get with flywheel $15 a month is a really good deal. Now you could find cheaper hosting solutions from places like Blue Host or Dream Host or Go Daddy or Site Ground. They're all gonna have some different options available. But the one thing that's cool about flywheel is that it was designed specifically for WordPress and specifically with this local app that we've been using. So it's going to give you a lot of great flexibility as well as seamless integration that's gonna make your life really easy, especially if you're not a developer and you don't wanna have to try and worry about all the technicalities of it. Plus, they're going to support you with free migration. So if you ever try to bring one site from one spot to another and you have issues with it, they'll do it for free. So that's a really great bonus. So I'm gonna go ahead and choose his $15 month plan, and then I can choose to pay yearly or I can choose monthly right now. Let's leave it as monthly, and then we have some different site add ons, So a cdn is a content delivery network, so what that does is when whenever your site loads, it's pulling those files from that server. Remember, we talked about that, But let's say your customer is trying to load your website and all your files on a server somewhere. And let's say California and let's say they live all the way in New York. Well, those files are gonna have to bounce through all the different network. And granted, this happens over split seconds, but every second matters when your site is loading. So a cdn basically will clone your site to servers all over the world that we when somebody tries to request your website, it's gonna load from whichever server is the closest to them, so it loads really fast. It's really handy. It's a great service, although when you're first getting started. You don't need this because your site probably isn't that big and probably doesn't have a much traffic coming to it. So, honestly, a second or two probably isn't going to matter right now. So that's something that you could know exists, and you can add to it later. If you discover your site, feels like it's slow or your watching your traffic and you discover that you have a lot of people bouncing off your site, so that's what a cdn is. And again, I don't even use one currently. And it's something that I might upgrade to in the future. But for now, we don't need it. An SSL certificate so secure sockets Layer or SSL keeps your sites information secure by encrypting communication. So what that means is, as your site or as a user is requesting the spiral vials back and forth from the server, it encrypts it and protects it so people can't steal information. I'm gonna go ahead and click on this and select the simple SSL. Since it's free, it's fully managed by flywheel, and that way I don't have to worry about security on my site. Once that's done, I'm gonna scroll down and select my payment method. Click add payment method. For the sake of simplicity, I'm gonna go ahead and use my PayPal account. Click here. So once you add your payment method in this case, I added papal. I'm gonna click up here to make sure that selected. And then with that payment selected, I'll scroll down and click pay now and when it's all done, it's gonna redirect us to our sites directory here within flywheel. I can click on the dashboard button on the very top. And if you have more than one site, you'll see them all listed out here. But for right now, we only have this one site. So when I click on that, we can see the overview and the stats of the site. Since his brand new Obviously there's not gonna be much here to look at. We can see stats for when we do have traffic, weaken, see different add ons. So that was that SSL that'll need to follow up with the Cdn and multi site which are all beyond the scope of this lecture. Right now we have our backups. So since there is brand new, obviously is no backups yet either. But this is going to be really helpful to have automatic backups of your website. So if anything ever happens like a plug in breaks or gets hacked or, you know anything happens that you weren't expecting, you can always revert back to a backup. We have some different advanced options as well that you probably won't need right now, but it's good to know they're here. You can flush cash, which sometimes if you make changes, your website and they don't show up right away. It might be because you're hosting Platform is cashing in or saving the old version so you can flush the cash to see the current version of your website. You can do development mode, which will help disable the cashing. So that way you can see those changes instantly while you're developing. So if you're adding CSS or different image files or different things like that, you could turn development mode on. So as you're making those changes, your website, you'll see them immediately. That was really cools over here. We have this gear icon. You can change your site name, but you can create a blueprint kind, like what we learned about at the beginning of this, where maybe you spool up sites online instead of going through the local development. You just do it right away through the hosting environment, so you can do that here as well, and you clone your site as well. So let's say you're creating multiple sites for different clients. This is a really great time saver, and then we can click on WP admin, which will take us right into the back end of our brand new website in an effort to try and keep this course in this lecture as current as possible. I'm going to attach the documentation files to this lecture, so that way you can see what the most current transfer and migration processes are from flywheel. If you have any questions, definitely feel free to reach out to me directly comment on this video or again, join that Facebook group and we'd love to help you out. 38. INSANE TIME SAVER! How to push/pull your site between Local and Flywheel: Now that we got our flywheel account set up for hosting, let's connect that to the local app. What I'm gonna do is open up local and what we get in the left hand side. I've got this little connect a flywheel icon. So I'll click on that and I'm gonna log into flywheel. And since I'm already logged on the website, it sees itself. And so I'm gonna go ahead and click connect to Derek Mitchell. That account that we just created allow it to open local by flywheel, and there we have it. We have our first connected website to fly wheel so I can pull this down toe local. If I wanted Teoh, let's see, create a backup and create the site. So that way I can make modifications on my own computer so I can connect and pull down the site. Or since that's just a base install and there's nothing there for me to worry about. I can come back to all of these sites that we've been working on, and I can actually push this up to fly wheel. So click pushed a flywheel and I'll select a site on flywheel or I can create a new site. So if I don't want to override what I've already done, I can create a new one. But I'm gonna go ahead and push is on top of that. I will push to flywheel. And now it automatically connects to that site that we made on the server. And it's currently pushing these local files who made up to the server, and I can't help but mention this is 100 times easier than any other migration I've ever done in my life. So we're gonna learn how to do that, how to do it the manual way in other videos down the road. But I just wanted to point out that this is insanely simple and worth every penny. Now, depending on the size of your site, this could take a while. And because we're using the salient theme and we have a lot of different graphics for it to push up as well, it could take a while. So we're gonna go ahead, let the spin, and I'm gonna pause the video. All right? So when the sites done being sent up to the server, you're gonna get this message site pushed, so basically all those files have been sent up. It's now radio. It's still doing some processing in the back end. And when it's all done, I'll get an email saying It's all done, so I'll go ahead and click, OK, And I'm currently in the local by flywheel app and down here below. Now that I have that site connected, you can see we have the push and the poll from flywheel buttons down here. So if I make changes on the live site, I could come back in here and pull down all the files. So any changes a current and then also shows that I'm connected right here. So if I click on this link, it's gonna open that up directly, and I can see the dashboard on flywheel. And then from in here I can click on the actual link itself and see that new site we just put up and I'm getting an error because it's still processing. So once this is all said and done, we'll be able to click through our website and everything should be working. Great. So I'm gonna go ahead and cut this video right now, and if you have any questions again join the Facebook group or comment below. I'm gonna sound like a broken record, but I want to make sure that I'm helping you guys out as much as possible. And I can't do that if you don't join the group. And then also, I'm gonna attach some documentation because, like I said, I know that I'm gonna do my best to show you everything in this video. But given the nature of Web design and Web development, things change so fast. So it's something that I did hear looks different or it's not working out for you. Make sure you check the documentation for flywheel in the information below. All right, guys, thanks for watching. 39. Real Client: Case Study Introduction: Hey, I hope you're learning a lot of valuable information so far in this course, and in the next section when I want to do is show you a riel World case study. Now what I'm about to show you is actually one of my current clients. It's a golf course, and originally I designed their WORDPRESS website using the X WordPress theme with the initial thought that I was going to design this and then hand over the keys, all the user information, the user name and password for them to be able to make updates themselves and keep it current. Now, however, we've continued to trade. So I update the website and then I get to go golfing on their site are on their on their course. So it's been a really fun project, a really great client, but because of that, I actually want to switch themes. Now I really like the salient WordPress theme. You could even use the Devi WordPress theme. There's a lot of great themes out there, but I'm very comfortable, a salient, and I like the modern look and feel. It's been a couple of years since I first publishes website and now what I want to do is go back and add some really beautiful galleries, some video shadow box, looking things, some animated headers and just overall, I want to clean up the site. And then on top of that this year, they want to be able to create on online store, where people can actually go and buy their season passes ahead of time on the website without having to do each one manually. Currently, what happens is, if you want to buy a golf course or a golf past, you gotta call the clubhouse and do it all manually over the phone or send an email so it's not very automated, and that's gonna be something else we're gonna be adding as well. We're gonna be adding the Wu commerce plug in so that we can do e commerce through their website. So we've got a lot of fun things in this next section. Stay tuned, and if you have any questions, feel free to comment below. But basically what I want to show you more than anything is just how to take a site that's a couple years old and drop in a new theme and create some updates safely and securely, without risk of overriding your current website or breaking things. So we're going to use local by flywheel. The app with flyable hosting to be able to do an online backup, will pull all the files down, will make our changes and they're gonna push him back up or we're done. Now. You can do this with a lot of different hosting platforms. I've been really happy with flywheel. Check out the links below and you can learn more about their hosting as well. I also use Go Daddy. I've used Blue Host and a handful of others as well, like DBP engine. Currently, my favorite is flywheel, so you'll see me pushing that a lot. I don't make any money for saying that, but it's something that I have really enjoyed, and it's been my favorite. They load really fast now. If you're not using flywheel, which you probably aren't, you probably using something go daddy or blue host. Or maybe you don't even have a host yet at all. I will be showing you other ways that you can create these backups and push your site live as well. Alright, guys, let's go ahead and dive in and we'll see in the next video 40. Real Client: First, Backup Your Site: So before we get started updating the theme of this site or making any changes, it's always a really good idea to make backups. So something to do. I'm sure you two different ways that I do this right now. I'm actually in local in the actual app. So I'm in the Northern Pines Golf Club website that is sync with my computer and with the server online so we can click on this link down here, which is connected to Northern Pines Golf Club. I'll click on that, and it will actually open up the dashboard for my hosting account. So when I do that, the very first thing I want to do. You could also just go to the get flywheel dot com site and log in and get here as well. But this takes you directly to the specific site you're trying to work with. I want to do now. The very first thing I do is just coming over to this backups tab, and I'll click on that and then you can see it's already been backing things up for me, so I might not need to do this, But what I like to do is I'll click on this little blue plus icon here and I'll create a new backup. I'll just call this pre theme update, and that way I know exactly where this Timestamp is in history to know that if I mess anything up, I can always come back to the most recent backup before I made all the changes. So now that that's beginning, it's got a backup in progress here. You see that it's working. Shouldn't take too long. I can go ahead and close this window and we'll come back to the local by flywheel app on my desktop. So back in the local by flywheel app, what I want to do is go ahead and start this site. So it's going to start up this virtual server here and once it's running, I can come and pull from flywheel. Now it's very important you're paying attention to which icon I can't emphasize this enough . If I were to push to fly wheel, it would take all of my local files which are not the most current version, and it would overwrite everything that's on their live website now. We don't want to do that right now. What we want to do is actually pull from flywheel. So that way any of the updates, you know where they added new users or at a new pages or updated themes and plug ins on the live website. I want all of those current updates to be on my local machines. I'm gonna click pull from flywheel and I want to pull it to a production environment, will click poll and depending on the size of your website, this could take quite a while. So we're gonna go ahead and fast forward through this. I'm gonna go ahead and let this work and when it's finished, will come back in the next video and take a look at our next steps to begin updating the theme on this website. 41. Real Client: Install the New Theme: Now that we've got our website backed up both on the actual host as well as locally, I've got a local file pulled down, using the local by flywheel app. Now I can proceed with full confidence knowing that not only can I make changes without people seeing it live until I'm ready for them to see it. But also if I make a mistake or if there's any conflicts between plug ins or anything weird happens, I can make sure that I get that fixed. And if I break anything, I've got a safety net to go back. Teoh. So now that we've got that back up, one thing I want to point out is again. I'm using the local by flywheel app and the site that we're working on today has S s l set up that's secure sockets layer. So if I come to the main website here, this is the one we're gonna update. And what we're gonna do in this lesson is change the theme from the X WordPress theme. We're gonna install the salient WordPress theme and make some modifications. The site's been up for two almost three years now, so it's just due for an upgrade. I've got better photos I want to put in and some different features that the salient theme has that I like better. So that's what we're doing in this lesson. We're gonna install the theme and then the other thing. I want to point out here before we dive in. So because this has a secure sockets layer, you'll notice we have http s in this address here, which means it's secure. I can click on this lock. It will tell me the connection is secure and that's something you do on the host side of things. And that's out of the scope of this particular lesson. But what I want to point out is that because we have that turned on when I go to my local version here, you see, it's dot local. It's the development site. It doesn't live on online. You can't see it except for on my computer right now. So when you first do this, this little lock icon, it's going to say connection is not secure. What you need to do is coming here to local will. Come over here to SSL and you're gonna have a certificate here. That's gonna say trust? Do you want to click that trust button and is going to say trusted? And now, when you click on this and it opens up the browser window, you'll have this nice little lock icon. It looks like you can use it instead of getting the big page with the red letter saying, You know, not secure, Don't proceed from chrome or safari or whatever you're using. So hopefully that makes sense again. It's a little bit out of the scope of this video, but it's one thing to be aware of some of the issues you might run into if you're trying to do this, so now we're gonna do is actually grab the theme vials. And I've purchased this theme from theme forest dot net. It's a salient theme here. I really like it highly recommended, and I use it for a lot of the websites, especially even my own website at derek Mitchell dot com. It's powered by salient. So what we're gonna do is I bought a fresh license and it was about 60 bucks through theme forest, and I'm gonna click on the download button. And instead of just telling the license or just loading, downloading the theme files. Want to grab all files and documentation and the reason why? And I'll show you in a second. Here it went, my download stack. Let's open that out is because it's going to give you all the licensing information. It's going to give you the user guide, which is really handy. We open this up real quick, you can see that. Um, well, you can see that it actually is just a one page with a link, but anyway gives you a link to how to make all the changes you want to make and fine tune the theme. But on top of that, if I were to just download the unsellable WordPress file only it would only give me the salient dot zip file, which is enough to install the theme. But we want the child deem to, and let's go ahead and show you Why here. So I'm gonna do is jump into my local version. Let's come back into the fly will happen. I'm gonna click right on the admin button which will open this up and take me to the log in page. So now that I'm logged in I can see you've got some updates to make. But what I want to do is go ahead and install that theme. So we're gonna come down to appearance and then come over here to themes and then click on that and you can see that I've already done this before, so I'm gonna go and do some quick house keeping. We're gonna delete this and we're going to delete this. And now I'm just left with the default 2019 theme as well as the ex theme and the ex child theme. Now, let me explain the way this works real quick. Just as a refresher, we install a theme. We have the main theme which has all of the styling for every element of the site. Now, here's the problem. Let's say we were diving into the ex demon. We made any modifications, especially with CSS or different styling when the theme gets updated and it will get updated. If we were to update that theme, it's going to overwrite all the work we did. And so, by using a child theme, what's gonna happen is it will use the parent theme as the base and then any changes you make to the child theme, no matter what this is, is going to override. So we're gonna update the child theme. So that way, it's the most current version of the site that overrides all the other styling. And then that way you can still keep the engine. Basically, are the foundation of your site current here with the parent theme. But your child theme is what styles everything. I hope that makes sense. Let's go ahead and just add this new theme from salient that we got. So we'll click up here on the add new button. We're going to upload the theme, and you can click to choose a theme or what I like to dio. Usually, I'll have a finder window open here somewhere, and I'll just dragon drop. So I do. The parents seem first, and here's why. So we'll click and drag salient dot zip and click install now, and here's why. I do this first because I don't want to activate it yet. I just want the files in the database here. So instead of clicking, activate, I'm gonna click Return to Themes Page. They're gonna click. Add new. We'll click upload theme. And then this time we're gonna grab our child theme on a dragon drop. Throw it on there, Click Install. Now And this time we will click. Activate Now, by doing this is gonna break just about everything on her site. So this is why we're working off line first. If you've got a site that doesn't have a lot of traffic, maybe you want to just dive in and go for it. I've done that in the past on my personal sites, You know, when I have, like, no traffic. But if it's gonna be a big site that has traffic, you want to make sure that they're not seeing this. For example, when I click on this, you can see the styling is around color. Now the logo doesn't show up. A lot of stuff still kind of works. And the reason why is because we're using Cornerstone for our page builders are page layout looks the same because that came in from X, but assumes we come back in and start changing those settings. Let's go back to our dashboard here. Let's go to our, uh, Valleys plug ins we need to bring in will come back to that in a second. Let's dive into our plug ins page. So the reason why this still looks halfway decent, like I said, is I want to come down my plug ins. The cornerstone is the page builder from Theme Kill for the X Team. Now I'm gonna have to deactivate that because it's going to conflict with salient. So let's deactivate that. And now one of you, my page, it's gonna look like garbage. All right, so you can see, man, we've got a lot of work to do now that that's turned off. All right, so let's go ahead and dive back into our dashboard one more time. Each theme handles things differently. So in this case, salient has a lot of plug ins that you can use. Some of them are required. Some of them are optional. So, for example, I can add the salient demo importer, which will then let me pull in demo pages when I'm building the site. So if right now they're required is the salient WP bakery page builder. Now this is basically salience version of a page builder, which is like Cornerstone, that we just turned off. So let's click on this. Let's go ahead and click on this check box here and here under the two that are definitely required will come with the bulk actions and click Activate Actually knew Click Install My bad. We have to install them first. Now let's click. Apply and let's return to the required plug ins installer, and then you'll see that these required plug ins. If I scroll down, you can see they have a whole bunch of plug ins that we can use for salient. So, uh, I am actually going to install all of these because I will probably use all of these in this theme. So what I could have done from the beginning You just click on this box up here and it will open up all of these blown Check those two. We'll click on Install, Click apply, and now it'll install the rest of these plug ins as well. All right, so they all got installed. Great. Let's go back to our plug ins installer. And this time, let's activate them. Also, click on this toggle at the top, Everything selected. We're going to click on the bulk actions come down to activate and click apply. All right, so now let's go and look back on a page. It's still gonna look like garbage, because all of this short code is referring to the cornerstone plug in self. Uh, unfortunately, we basically get to rebuild the entire website because every page was using that cornerstone layout. So everything is broke. And what's nice about this, though, is now what I can do is peel off this tab here. Let's go to the main website that is online. Still appeal this one off. I'm gonna click and hold on my green little full screen button, and we're gonna tell this one on the left side, and then we're gonna throw our new version over here on the right side. So now what? I can do that to do the right one. I messed this up. That I messed this up. No, we're doing We got all kinds of weird style and stuff happening here from my Google Chrome browser as well. So, um, let's try and get back to the home page here. All right, so we want to make the homepage look pretty. And currently this is the information that's on it, but we're going to start over completely from scratch. So in the next video we're gonna do is start diving into each page and using the salient templates to get us started really quickly and start making really beautiful pages with really minimum effort. All right, let's go ahead and dive into that next. 42. Real Client: Theme settings: All right, So we got a website backed up, we got our theme installed, we started breaking stuff, and now it's time to start rebuilding things. So I want to do is we're back on the home page is here. We've got the one on the left that is still currently live at the one on the right that we're building locally. Everything's on broke and messed up, so start fixing it and the way that I do this. Usually it's one of two ways typically, what I'll do is I'll start by top down, left to right so the very first thing and start working on this fixing logo, fixing the navigation of colors and the styling. Usually, I would I would leave the page builder on if I'm working live on the site. So even though we're using the salient page builder, I would leave the cornerstone plug in turned on just to the page. Still, kind of looks like this as I'm building things, but since RAV line, it doesn't matter. By offline, I mean, we've got the main site live still, and this is offline. All right, so let's go ahead and jump back into the dashboard and I want to show you basically where your were your main styles for salient are gonna be and for everything, they're going to be different. I'm just kind of showing you where to start poking around if you're using this. So on the left hand side. Now we have a new menu item called Salient. If I were to jump back into the dashboard of the current live site, you'll notice it has the X theme. Let's expand this here. I've got the X theme here, and we've got all of its settings here and let me just make this a little bigger. So you see it there? You all right? So, ex demon documentation, you'll notice that the salient option is not here. That's something that got added as soon as we installed that theme. So we're gonna jump into here, and we've got all kinds of settings to work with. So eventually you're gonna want to go through every one of these settings and make sure that everything's dialed in how you want it. But let's just start with the top two here. We've got the general settings, will click on that, and then with that I'm gonna go ahead and scrub this over so you see everything. We've got, the themes. Skin. This is a little bit beyond the scope of this lesson, but basically, it's just how this particular theme developer has made some based styles on how the buttons look and things like that. So play with that, see what you like. But in styling, we can play some different drop down options, all kinds of things. We'll leave that alone for now. Other things weaken drop in here as well, from just different ways that this particular theme functions. So just scroll through, get kind of nosy, just play with things. You're on a backup site so it doesn't matter if you break it, just click buttons. It saves. He would happen. So I just approach is like building a You know, a puzzle of putting a puzzle together or, um, just the problem solving of like, Well, let's see what this button does didn't blow it up or you know that it fix it. So that's my approach is I just go through everything and I just I just toggle everything and just, um, just dial it in based on whatever I think looks good. Hit, save, and then go back to your site and see if you like it or if see if you have to keep going. So the next thing to do is jump into the accent colors. So currently, the accent colors that came in with this theme look nothing like our website. So what I'm gonna do is jump back into our main site on the That's seeing it. My menus all crunched down here. Aereo, uh, so you can see the colors that they have by default this green color here and I might do some. I might redefine some things and I might do that in Photoshopped, So I have a road map to go towards. But for now, what I'm gonna do is I use an app called Sip s I p. I've actually a YouTube video about how I sample colors. You can check that out. I'll put a link down below, but basically I want to do that's want to grab this hex value for this green color, copies it to my clipboard. Now I can jump into the accent color here, and we're just gonna pace that in what save changes, and I'm gonna hold down the command keen collect here just to kind of throw up in a new tab real quick and see. So my cart button now looks green. Open this up yet that looks green instead of that blue color that didn't match at all. So we're just going to start, you know, refining things and dropping in our colors and getting it stylized. So that's my approach. I need to define some of this. I'm gonna do that. We'll come back and I'll show you what I did, and then we'll continue flushing out our new design. 43. Real Client: Logo Setup: All right, So in this video we're gonna do is finish up our colors here and then get our logo dropped in. So I'm still in the salient options here. I've got the accent color scent, and I just wanted to show you real quick how I'd flush this out real quick, cause I'm not really sure how I want to do this yet. I'll probably end up changing it, but just for announces not, you know, pink in and Scion, We're magenta and Cyan. I'm gonna click select color. I'm gonna go ahead and paste in that hex value ahead up here. And then what we do is just click and drag just a little bit further down here. So I get just a little bit of a darker tone compared to the original accent color, just as an extra bump for any of the other buttons that come in and the extra color to Let's do the same thing. Well, pace that in there. And then we could even brighten it up a touch. And we'll just see where that plays where that comes into the theme. You might want to change that down the road and then our extra color three is fine with his gray color. That's totally fine. So with Grady insist, do the same thing. I'm gonna click on this color. Well, paced in that paste in that would make it a little bit darker. So now any buttons that have Grady answer any Grady and backgrounds in the template and then same thing here. But this time, we'll make it a little bit lighter. All right, so again, all of this might change on the road. But at least I have something to work with. A click save changes. And now I don't want to do is jump in and start getting this logo dialed in. So I'm gonna come over to header navigation. We'll click on that. And then the first option here is logo in general styling. So whatever I click in here is gonna update. We've got all these options on the right. So we want to use a Nimitz for the logo because currently, if we open this in a new tab, it's just text. So let's go in and fix that. So what I'm gonna do is turn on this toggle, and now I need to upload the logo. Well, to be honest, I'm not sure what size eso Let's just go out and play with this for a little bit. The way I'm gonna do this is listen, Wouldn't come over the original site and just kind of see what size this waas. I'm gonna hit command shift in the number four. I'm on a Mac on a PC. You're not gonna be able to do this. There might be a plug in, but I don't know what it is. But what I do is this is to take a screen grab or a screenshot. And so, um, a command ship for to get started. Now I can click and drag out, and I kind of see that this logo currently is exist pixel dimensions in the bottom. Right? So it's about 180 pixels by about, uh, about 70 or 60 pixels tall. So 1 80 by 60 is a good place to start. So let's go make that logo that that's is that size. So I'm gonna jump back over into my finder window, and I want to grab the client logo, and somehow I don't have the original creditable logo. I don't know how that happened. But I do have this. Pdf They sent me a one time, and sometimes you get lucky with the pdf file. Click and drag and hover over my illustrator icon and drop it in there. And in this case, I got lucky. This is a vector format that I can read. So what I can do is highlight this and looks like they've got some weird strokes and stuff going on. So this is going to get me in trouble down the road. I need to be careful that I grabbed the actual exact logo file. But for now, this will help me get this going and ah, yes, and see, I work. So what I'm gonna do is turn off the stroke down here. I'm going to click on this little slash or hit the backslash key. So now there's no stroke. I've got my image here, and we're gonna want to export this and a few different colors. So we want that logo to be 1 80 by 60. So let's make it. Let's make a new our board. So shift. Oh, to get my our board tool, it's gonna click and drag and Let's change the width and height of this up here with that selected 280 pixels and was at the height to what we say he was 60 pixels. All right, so now I know that there's gonna be the right size that I want this to be and what we're gonna do after we get this going on the groupies together command Geo, group it. Hold on Option key to drag a copy up here, and then we're just going to scale it in place. All right. So immediately, I noticed that this didn't scale, right, because we've got the tree on top here, but in this version, it's off to the right. So I'm gonna have to do some some rework here to make this work. But let's just kind of go through this anyway. And, um, actually was gonna build it this way again. I'm working kind of fast and loose. Hopefully, guys in C. At least a process of how you can work. So I took a screenshot of this. I'm gonna drop it in here and see what else is different. Um, all right, so this is this is, like, not even close is faras spacing and things. So, um, again, because I'm gonna replace this in the future. I'm not too worried about it right now, so let's just get this close, and, ah, we'll go from there. All right? So I know this isn't an illustrator course. Um, but I thought you might enjoy my work flow. So we're just gonna just gonna kind of get this close here again. I'm gonna totally drop in a new logo anyway. But hopefully this kind of helps you See how I would approach this and getting this dialed down or dialed in here? All right. No. Sample that color, old man. We got All kinds of mess is going on here. Okay, So that looks close enough for now to drop it in again. It's still a different logo, but this helps me finish is part of this lesson here. All right, let's scale this up. All right, Now we've got our logo file set, and I'm going to hit shift. Oh, to get my our board tool again, Hold down the option key and click right on the our board name and dragged to the rights. And I've got another version of this with one more time, and we're gonna change colors. So we're gonna do a white version. You will be able to see it, but it will be there. And we're going to do a Let's do a black or maybe a gray version that matches, um, custom over here real quick. Back toward general settings. Rx. I'm sorry. The account colors, accent colors. All right, extra color. Let's grab this. So it's just three okay and pasted in there. OK, so now we've got a white version, a green version, And this gray version now want to do is delete this art board here and get rid of this stuff. I don't need it for right now, and I'm going to save this file now. Save as we'll call it Logo revisions just for now. And, ah, saving an illustrator file hit. Save. Okay. And now what I want to do is export each of these art board. So I'm right now. I'm in the essentials. Classic workspace. Just gonna reset this to make sure you and I have seen the same thing. And I'm going to click on this little box with the arrow. That's the asset export we're going to grab this file was gonna throw it right in here. This group that command GT group it, we're gonna throw that right in there. Let's do the same thing. Here was a group this command GT group it, throw it in there, Manji to group it, and we'll throw it in there. Let's give you the name Green. All right, let's actually give it the full name Northern Pines Golf Club. Highlight all that and copy it so And copy that. Have to type it again. And we call it Logo Green. Coming here will paste. I will say logo, white paste and type in logo gray. Perfect. Now what we want to do is we want to export all of these at the one X scale, so it's gonna be the size, and then we want to do one at a scale size of two X. So what that's going to do when we jump into our back into our salient settings inside of WordPress. Let's go down to the header navigation and we can upload the regular logo here, and then we can upload a two x size of logo. So that way it'll look super crisp and clean on high definition displays. All right, so let's jump back over to Illustrator and let's go ahead and export all of these. So we'll click and hold on shift and click on all those icons to click down here on Export . We're gonna tell it where to go to go to a Northern Pines folder. Let's make a new folder. We're gonna call it 2020 Web updates could create and click a new folder and call it exports. So all the stuff I got exported is gonna get dumped in here. What choose? It's going to spit out all those logo files. Let's take a look and see what it gave us. So we jump in there, 20 Web updates, exports and then we've got a 180 pixel wide version and a two X version. Let's just look at a pixel dimensions here. So when we look at this, we've got are two different sizes here we've got. If we scroll down and see the information, we've got 1 80 by 56 at 72 d p. I. And if we jump in here for peopie, I whatever we've got our dimensions that are twice as big and are higher resolution. So perfect. Now we can start populating our website, so let's jump over to de header. Here we're upload our logo, click upload and for the default logo. We're gonna do that green version. Let's jump into her folder, Let's go Find our 2020 Web updates exports and we wanted the green logo. But click open and let's go ahead and give it a caption and a title. It's already in there because it pulled it in from the name. So we're good there, but just kind of help with some search engine optimization. That's always a good thing. Now it's going to upload the retina version, so click upload and we're looking for the same logo, but with the two x in the file name. So let's take a look at this one green at two x click open. It's quick, select, and I've got a retina version and our standard version and our logo height. So we want this to be the size of the standard logo and honestly, remember what it actually exported as Let's take a look, let's go back into their single, um, small version, So the height is 56 pixels high. So let's come back over here. Your skin type in 56 mobile logo height. We're going to explore that Someone leave it alone for now. And ah, let's go ahead and just see what happens. CPAs. Any other settings I want to drop in for right now? Nope. Let's click. Save changes. And that's just command. Click on this to open up a new header here. All right, So what we got going on here? Let's refresh this. Now that that saved. If I were to preview the website, that logo should pop up. However, I have some code in the back end of my site, and I'm still seeing this custom header that I designed and coded somewhere else. So I've got to go in and do some more leg work. I'm gonna go ahead and cut the video short here and fix that. But basically another area that logo dropped in. Usually it would show up here, and you'd be in good shape. All right. Real quick. I wanted to show you what I did to fix that logo issue. So something else, you know, especially I'm recording these tutorials, and there's a lot going on in my brain trying to figure out what to tell you and then also what's really happening in the site in the back end. So in the last video, we had the menu still looked like this here on the left, with the green in the old logo and the update we just did. It should look like this now with the logo and green instead of in white and in the top left instead of centered. So I did some digging turn. Remember what I did here? Because it's been a long time steps at the site originally. But what can get you in trouble sometimes Let me go back into plug ins here. And if I scroll down, I still have a lot of other plug in still activated and two of which that I again forgot. Even put on here was shift knave and uber menu. So I don't remember which one I had activated that was causing the issue that I built in. But I deactivated both of these, and now these air no longer overriding my theme. And now my theme looks like I expected to so just a quick note. For those of you as your diving in, there are so many variables, I can't even begin to try and tell you the exact issues you might run into. So you really do need to be okay with just pushing buttons and trying things out. But that's another area where that could get you in trouble. Is having plug ins installed that that's the first place you should Look, if things aren't behaving quite right, go check out your plug ins. Alright, guys, I'm gonna go ahead and shut this one down, and in the next year, we're gonna start styling that home page. 44. Real Client: Super-Fast Page Setup With Templates: Okay, so this is my favorite part, And this lesson we're going to start style izing the home page and really making it look sharp. So this is how I dive in. We've got this hot mess of stuff in the new site that we're getting towards and we've got the old site. So let's go ahead. Because I'm already logged in. This is the home page. I could just click right up here on edit page. So I'm gonna go ahead and click on that and because I have the old page to refer to Aiken work this way. You could also just make a new page altogether. And that way you can always refer back to the text and then just swap which pages live at the end. But because I've got this one work with, I'm just gonna dive right into here. And I have the option now to use the WP bakery page builder, and I can use the front end editor or the back end editor. So let me just kind of show you what that means. It was a friend and editor. It's gonna look a lot more like the divvy theme. If you're familiar with that. So if I click on that, it's going to open this page, and it's going to look almost exactly like whatever you're building. So it's really nice to be able to work in line and see all the columns and see exactly what's going on. So you can add rows and columns, add different templates and things like that. It's a great way to work. I'm not as familiar with it. It's probably easier if I just dove in. And that way you didn't delete this whole text block. So my pages totally clean toe work with here, and ah, or I can click on the back end editor and this is I'm going to leave the page here so won't say that, But this is what I'm used to seeing is the builder in the back end. So, uh, this is how I typically work. Same kind of deal. I'm going to delete this whole content, this whole container so I can add an element. I can add a text block organ ad from a template, and this ad from Template is my favorite, my favorite feature of this entire theme. So if I click on this. Now what I can do is I can. On the left hand side, I can see some different options we have or can scroll through. And you can see they have a Thanh of elements already baked into this theme. So I'm gonna go ahead and start off by clean on the hero section, will click on that, and you can see that narrows down my options to some really classy looking hero sections. So, for example, I don't want this version by just want to show you how cool this is. I'm just going to click on this creative hitter, click preview changes and all of a sudden, just like that, I have a really cool looking graphic Now, obviously, it doesn't match the golf course at all, but I have to do is change the color, change the image, and then this is a really cool page layout. All right, so I'm going to jump back into this edit page here. I'm gonna delete that section and this actually, try and find something a little bit better. So click on sailing templates gonna come back Teoh hero sections and they just Look, there are so many great options. Now this golf course in particular, I've got some really great drone footage, so I probably want to put a video in there. So let's just type video and just see what options we get here. So we've got device video hero we've got here O Grady in overlay with video lightbox We've got Let's see I want I Want is a video background. Let's see here let's just go back to you, all of them, and type in video. That should give us a few more options. So let's click on this parallax video lightbox row and thats click preview changes. It's gonna open up a preview window, and so it doesn't have a moving background. It just has. So I am going to probably spend a ton of time poking around in here, So let's just kind of speed this up a little bit. What I can do now is just keep clicking back in these templates and just adding things so I could add, Let's go to like an about section here. Just scroll down and find some cool look and colorful blocks. Click on that we'll click back, and that drops it in right down here, we'll click back on salient templates again. Let's go back to, um how about services or something crazy? We'll click on that. It'll apply it. Open up another one, maybe some testimonials. Drop that in here and now what I can do is click preview, and I'm gonna delete all of this and work off line. We're not staring at me, but you can see how quickly this home page looks so good. Like, it obviously needs some refining, but we've got animations built in. We've got awesome background images that are full with its fully responsive. As I scaled us out, there's gonna be a really slick theme for us. So whatever do now is I'm going to you actually closes preview window If I like this. And it was all done high wanted to, then I would hit update cause right now, when you click, pretty changes. Nothing actually updated yet. But it seems they hit update now the new home page is exactly like this. So instead of clicking preview if I click view page, it'll take me to the life site to the Life page. And by live, I mean, I'm still in the development site, but, um, but now all those changes have taken effect. So I've got a lot of work to do. I seem to drop in images from the course. I still need to update the text to reflect this, But I'm really excited about this and house like it's gonna look. So what I'm gonna do now is come back to edit page, and I'm going to delete all that stuff because I'm actually spend some time thinking about exactly what I want to drop in. And then I'll show you how I did that here in a second. So it's just delete all this garbage, and, um, we will start over and I'll show you what I did in the next video. All right, thanks, guys. 45. Final Thoughts: I hope that you've learned a lot in the last couple videos with this real case study, and that is given you some ideas that you can put into motion immediately. And I just want to do a quick follow up from these last few videos. If you have any questions, please let me know. I want to help you out as best as I can. And I also want to point out a couple of things that you might have noticed along the way. And one is if you're working with a client, Ah, lot of times you're not gonna have the freedom and flexibility that I had right here, and I think that part of it is because for this particular project it was a partial trade. So they did pay me some cash to get started. But it's also kind of a residual trade situation where I get to go golfing and when they have a quick update like adding a new staff member or modifying some some pictures or changing some dates and things, they just give me a call and I just make the changes so because of that so that they don't care. But they're not nearly as picky as a client who, you know, maybe this is their first website, and it's all of their money that they've saved to start this new business. So when you work with a client like that, typically there gonna be a lot more picky and a lot more hands on, so you're gonna need to navigate that. In each case, you know, each scenario live. It's your own website, you know, obviously you could do whatever you want. So with this particular case study, that's basically how it was. I just went through and made changes that I like stylistically, and I just kind of went nuts with it. So just something that too, I guess consider as you approach working with riel clients is that you're gonna want to define what we call your scope of work. And that's basically, you know, for each phase of the project, what exactly are you working on and how much do you promise for them for a certain cost? So just something's toe. Consider, as you dive into this and again, if you have questions, please feel free to hit me up. You check us out in the Facebook group as well as in the comments below. I'll do my best to answer where I can and also stay tuned. This is obviously still a work in progress for me too, because ah, we're even now as I'm recording this video, making more updates to the website. So as I can all record some more of those and publish them here so you can kind of see the progression of this website and how we've managed to keep it current. All right, guys, Thanks for watching.