How to Make a Single Page Website for Freelancers, Agencies, and Businesses | Hoku Ho | Skillshare

How to Make a Single Page Website for Freelancers, Agencies, and Businesses

Hoku Ho, Web Design

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
27 Lessons (1h 17m)
    • 1. Course Intro

      2:46
    • 2. Intro to WordPress

      2:38
    • 3. Getting Started Intro

      1:16
    • 4. What is a Domain Name?

      1:17
    • 5. How to Register a Domain Name

      2:02
    • 6. What is Web Hosting?

      1:05
    • 7. How to Get the Cheapest Web Hosting

      4:32
    • 8. How to Connect your Domain and Web Host

      1:17
    • 9. How to Install WordPress

      3:03
    • 10. How to Change HostGator and WordPress Passwords

      1:46
    • 11. Installing the Pixova Lite Theme

      1:43
    • 12. Site Name, Pre-loader, and Breadcrumbs

      3:05
    • 13. Contact Info and Favicon

      1:42
    • 14. Disable Team Section and Add Header Image

      2:00
    • 15. CTA Text, Button, and Anchor Link

      3:16
    • 16. What We Do

      1:07
    • 17. Our Skills Section

      1:42
    • 18. Recent Works Section

      4:32
    • 19. Creating a Page

      3:31
    • 20. Testimonials Section

      3:02
    • 21. Creating a Blog Post

      2:31
    • 22. Featured Video Plus Plugin

      6:02
    • 23. Blog Sidebar Widgets

      2:42
    • 24. Footer and WP Editor Widget Plugin

      8:07
    • 25. Add Contact Form

      2:59
    • 26. Editor Files

      3:05
    • 27. Menu or Navigation Bar

      4:05

About This Class

If you want to create a beautiful website to find more clients for your agency or freelance business, this is the course for you.

We’ll build an actual single page, portfolio website together, step by step, from start to finish.

You’ll learn how to get your website live on the internet and how to customize it with WordPress. No experience and no coding is required.

The website we’ll build will have the following features:

  • Call-to-action header with beautiful image, text, and button
  • Simple contact form
  • Display email, phone, and dress contact info
  • ‘What We Do’ section
  • ‘Our Skills’ section
  • ‘Recent Works’ section with image, logo, and link to project
  • Page for portfolio item with image gallery
  • Video blog posts
  • Blog sidebar widgets with contact info, recent posts, and search bar
  • Embedded YouTube videos
  • Page/post featured image
  • Testimonials section with photo, name, and quote
  • Custom footer
  • Parallax scrolling
  • Single page, freelance/agency theme
  • ‘About Me’ widget
  • ‘Follow Us’ widget with icons and links to profiles for Twitter, Facebook, Pinterest, YouTube, Google Plus, Dribbble, Tumblr, Instagram
  • Custom favicon (site icon)
  • Custom domain name
  • Unlimited bandwidth web hosting
  • Responsive web design, so it will look good on any screen size or mobile phone
  • Custom Navigation bar
  • Anchor links that jump to specific areas of the page

Don’t have a programming background? No worries, we’ll start from scratch. You’ll learn how to register a domain name, set up web hosting, and install WordPress (in other words, everything you need to get your site live on the internet).

Then we’ll start customizing the site with WordPress. You’ll be able to quickly and easily add content and customize the design. All without writing code. We’ll be using the Pixova WordPress theme, which is well designed, easy to use, and completely free.

We’ve cut out the fluff so that you can get your website online as quickly as possible and start attracting new clients. Now go get started!

Transcripts

1. Course Intro: welcome to this course on how to create a single page portfolio website from scratch. This is the perfect course for freelancers, agencies and service businesses who want to showcase their services and attract new clients in the course. We're going to build this actual Web site from scratch, and we'll do everything step by step. From start to finish early, you can see exactly how to do it yourself. Let's take a tour of this website that we're going to be building. So up here we have this nice, beautiful call to action area with a big called action button. Then we have down here some information about our services as you continue to scroll. Here is some graphical representations of our skills and then a place for some more recent projects. And ah, these can link to the different website itself. Or it could link to a place on this website. For instance, for this project, we actually have ah created a page sofa click here. It takes us to this new page specifically for this project, where there is more information about the project as well as some other portfolio items related to this project. Yes, we'll continue to scroll down. You'll see that here are some testimonials and then we have an area to display our blood post. If you so desire, then here, close to the bottom. We have this nice contact area with our contact information and a clean, simple contact form. And then here in the bottom, we have some nice widgets. Well, about me widget some links to some of the projects or sites maybe we're involved with, as well as our social media profiles and then some other links to the latest vlog, post or tutorials. Now this elevator button takes to the top. And then right here we have this custom menu or navigation bar that will take us to specific areas of our site, which is perfect for a single page website like this one. This site is also completely responsive. So it's gonna look good on any screen size, tablet or smartphone. And so this is an emulation of what the site will look like on an iPhone. And you can see it has adjusted to fit the width of the screen perfectly so that it looks good for any users, no matter what device they are using So this is the website were going to be building in the course. If you have any questions along the way, feel free to post them in the discussions and best of luck. 2. Intro to WordPress: in order to customize our website were going to be using WordPress. And we're press is Web software that lets you customize your stipe, and you can do so without having to write code, so it makes it a lot easier to build your website. But where press is still very flexible and powerful. And so right now I'm signed into my WordPress dashboard. And this is where I would come to make any changes to my site to add, for instance, blawg Post or to ah, change the appearance of the site. And there's also something very important called plug ins. So this is just a example of something that makes WordPress such a good development tool. So with plug ins, it's a way to extend the functionality of your site. It's kind of like you know, you have a computer. Your computer can do certain things, but you install different programs to extend the functionality of your computer. So to do different things that don't come natively on your computer, you may install program similar with a plug in. No plug in will help you extend the functionality of your website. So, for instance, let's say I want to add. Ah, some share buns. One of my favorite plug ins for this is mass share, and so it's free to use almost gonna hit, install. Now activate the plug in and now here it's installed. No, I just need to ah, at or customize certain settings to make sure it shows up real quickly. So ah, I wanted to show as many buttons I have selected, and the buttons I wanted to show are the Facebook and Twitter. So save changes and then in visual, I'm gonna go to location position, and I wanted to appear on all posts and I'll have to say changes. So here's how a block post will look like beforehand. And now, if I hit refresh it should implement that plug in. And so here you can see the mass share plug in, which adds mashable style, uh, share buttons where there's a counter. If someone shares it, it's going to show here. And you know, they can just click on the Facebook or click on the Twitter to easily share this article. And so this is just an example of why WordPress is so awesome, because without having to write any code I could, ah, install plug in. And while law, I have these share buttons here on my site. So WordPress is a great way to build websites, and that's what we're going to be using to build this website. 3. Getting Started Intro: before we can start customizing our website, we first need to get it live on the Internet. And there are three main things we need to do to get our website all set up on the air in it, so that we can begin customizing it. First of all, we need to register a domain name and a domain name is Justin Address so facebook dot com That is an address that directs people to Facebook's website. So after we register a domain name, we they need to set up Web hosting and Web hosting this. Think of it as a remote computer that stores all of your content. So when we are putting images and videos, any type of content on our website, those things need to be stored somewhere, and Web hosting is just basically renting a remote computer so we can store a content on there so that when people visit our website, they're able to view all of our content. After that, we will need to install wordpress, and once we install WordPress, we can then start customizing the site with WordPress and luckily for us, where press is 100% free to you. So once we do, these three things will have our website live on the Internet and ready to start customizing 4. What is a Domain Name?: one of the first things you're going to need to do when you're building a website is register a domain name and a domain name is Justin Address to take you to a website. So if we want to go to Facebook's website, for instance, appear, we type in facebook dot com. So this right here highlighted is their domain name, and it's just the address that takes us to their website. So you need a specific, unique address to take people to your website, and that's what the domain name is. So domain names you can register that usually costs about 10 bucks a year. Uh, you can register from place like name sheep Go Daddy one in one. I've used all three of those services named Sheep, in my opinion, is the best. It's cheap, really easy to use. And for any of those services they have usually have a bar where you can put in the domain name you want, and you can check to see if it's available or not. So let's say I want to buy broker's website dot com its search, as you can see Hoc, whose website dot com It's available. So if I wanted to, I could just buy it right now. 5. How to Register a Domain Name: So first thing you want I'm gonna want to do is go to name cheap dot com and there's a link in the description of the video for name cheap. You can go to as well, then just put in your domain or here in the search for its search and domain are named. Chief is a really great website for domains because one they're really cheap and two it's really easy to use. Okay, so make sure it's available and just add it to cart. It just added view cart so you can get it for multiple years. I just want one, and you can turn on or off auto renew any time so I could turn that off later if I want. And this is for a year and doesn't order a new awesome and any of this stuff if you want to go for it. But I usually just want to don't mean nothing else. So you confirm order, and then, if you don't have an account, just go ahead and, uh, feel that out and hit, create account and continue now just some additional information you have to fill out. I'm going to do as individual And yes, I just go ahead and fill that stuff out and hit. Continue. So now just go ahead and make sure this is direct contact information. And if you need to change it for summers and maybe buildings different, then go ahead and do that. If not, you can Just If you want to save this for later and, uh, then continue, then you're gonna put in your credit card information and make sure your billing address is correct. And this is automatically and on the right setting. So you don't have to click any of that. You can make this your default, uh, payment and then just ah, it continue again. OK, so you can just review your order real quick. Looks all good. So that's it. Just it pay now and you're done. 6. What is Web Hosting?: If you want to make your own website, you're gonna need Web hosting, and I'm gonna explain to you what that is using Pinterest. So after uploading this picture from your computer to Pinterest, you could actually delete the picture from your computer, and everyone would still be able to see it on Pinterest. That's because once you upload it to pinchers, it's actually stored on Pinterest's computers. And these computers they're used to store Web content are called servers is a picture of a typical server, Iraq. And so, for your website, you're gonna have pictures, texts. You might have videos, all sorts of different content, and that, too, needs to be stored on a server. So you could either by your own server and set it up yourself. But that's pretty complicated. So what most people do is they simply rent a space on someone else's servers, and this is called Web hosting because they're hosting your Web content on their servers 7. How to Get the Cheapest Web Hosting: So go to host gator dot com and I'll put a link in the description and host Gator makes it really easy to get started right away, and it's very cheap. So that's why prosecutor Click get started now and scroll down here. The different plans hassling planet hatchlings plan is loaded cheaper than baby blend. But with baby, you can put money Don't means you want onto this one plan. And so for that reason, I think the baby plan is the best. You can buy a couple years and events or go monthly, so it's just two months now and hit Sign up now so you can buy your domain through host Gator. So let's say Money's Hokies. I want to buy Hoc, whose website dot com It's about $13 in a year. If you buy it through Host Gator name, chief dot com is actually a few dollars cheaper, so you could buy it through another service if you're But if you were to buy it through another service, just say I already owned this domain and then, ah, put it in. You're gonna need to use your name and pin number and this auto populate correctly don't need to touch that. You'll need to put in your billing information. These I do not believe are necessary. We're gonna check them. If you really feel the need, then, uh, even checked. And there's a preloaded 20% off coupon. So this is 20% off your first bill, though. So if you see usually $10 a month, but they're going to give it to you for $8 for the first month for the first bill. So if you scroll up, see right here it's January currently. So the second month, February, he goes back to $10 a month. So we've actually hooked us up with a better coupon. You type in build without code one. You're going to see this discount jump up about eight. So went for $2 to almost $10. So your first bill would only be one cent, then, after that, it goes back to the regular $10 a month. However, if you want to get an even bigger discount, can you have to pay more on events? So let's put this to you 12 months. So this is if you were to buy 12 months in events. You still get that same $10 discount with this code. But if you do build with a code with no one, just build without coded validate. This is actually 25% off discount, so it's 25% off your first payment. If you're buying a year in advance, then it's 25% off this amount, which adds up to almost $30 off and the ultimate discount, missus. Sane Cuban code. The 25% off your first payment so you can see in the second year goes to, uh, back to $10 a month. But that's another whole year. The ultimate discount would be buying three years in advance. 36 months, 25% off. That amount is almost $70. So that's how you would save the most money. But obviously the downside is you have to pay in advance. So if you want to do monthly, I would do to build without code one on and you know it will be just one cent. But if you I don't care about paying in advance, then I would say paying advancing three years, obviously, is how you're gonna get the most often have just build without code 25% off your first payment, and that's how you'll save the most money. And so, obviously, you have to pay Maura front. There is, however, a 45 day money back guarantee. So let's say you pay three years in advance, and after a month, you realize you don't need a website anymore. You see it here, everyone posting plan ahead of the 45 d money back guarantee so you could actually get a refund if you, uh, want to within 45 days, even if you do by three years of front. So that's how you get the cheapest hosting possible. And once you decide on your hosting plan, fill that stuff out. Just sit here and hit. Check out now and you're done. He will get an email with your count. Information, however, does sometimes go to spam, so check your spam folder 8. How to Connect your Domain and Web Host: Now that you have your domain name and Web hosting set up, let's go ahead and connect everything together. So go to name cheap dot com and then just sign into your account. Man, you sign in and we'll take you to your dashboard. And then just click on the domain name that you want to hook up to your Web hosting Click manage on the right and then up here in the right click on Advanced DNS. Here on the top row domain name server type, it's set to name cheap default that just hit. Edit here on the right and then click on custom. And now, after clicking on custom, we have now have these fields where we can put in names over one names over to. And so if we just hop over to that host get or email that we got, it has right here name, server one and name server, too. Then just hit, save changes 9. How to Install WordPress: let's install WordPress and we'll get your site live on the Internet. So go to this host Gator email you got with your account information right here where it says your control panel. Let's click on that link. You can ask for user name and password, and these come from the email, so using him right here, So just copy this. Copy this password are here. Hey, sit in low again. It's gonna take you to your control panel for host Gator here in the control panel like you neither. Quick. Right here, where it says get started with WordPress today. Or if you scroll down a little bit, software and services quick install. Both of those will take you to the same place. Click on that. And if you scroll down, install WordPress, click that scroll down again. Install WordPress for free. They have some other things they're trying to sell. But all you need to do is click Install WordPress install for free. No, it takes you and it's so if you've never registered domain before or if you never start installed WordPress on a domain before for the very first time. Usually it will. Auto popular in here. I have a ton of domains and sub domains, so I'm just gonna pick the one that I want to, ah, install WordPress on. But it should auto popular, if not just used the drop down and select the domain name that where you're gonna install WordPress. Well, yeah, And again, if it's the first time when you only have one I didn't hear put an email the top block title, which you will be ableto change later and then user name on your first and last name and then just click install WordPress and it is all complete. So quick view, credentials. And so this is how you get to the set you just installed wordpress on. So let's click on that. And so right here I can put in my user name and password to log in and start editing it. And here's the user name. So put that in here. And then here is the password. And make sure you don't, uh, excellent exit out of this browser or this tab or anything, so that you have the user name password. Although a lot of times I'll send you an email with this. Ah, these credentials But make sure you keep track of him so that you can log in. And then I'm just gonna log in. And now we're presses installed on my site. And this is now the admin area working. I can customize my new WordPress site. 10. How to Change HostGator and WordPress Passwords: when you first send it for host Gator, they give you a random string of letters and numbers as your password. And when you first install WordPress, they do the same thing. They give you a random shrink of letters and numbers as your password. But you can change that to whatever you want. So I'm gonna show you how to change your password for each of those things. So for Host Gator, just log into your C panel. And if you go to that email with your account info, do you quick on this link to your C panel and then just use your user name and this password tow law again? Once you're ends wrote on a tiny bit and under preferences, click on change password. Then you're just gonna input your old password from the email. Copy that pasted in here and then put in your new password and repeat it. Leave these unchecked and hit Change your password now and you're all done for host Gator four WordPress. You're just gonna click on this link to get to your WordPress admin, and I already clicked on that and put in the user name from this screen and I'm gonna get the password from this screen pasted in here and hit Log in and I'm gonna go to users and hit all users here on the left. There's my, uh myself. I'm hit Edit Scroll down a little bit more. Just new password. I'm gonna put in my new password, repeat it and then hit update, profile and your old on. 11. Installing the Pixova Lite Theme: here is our fresh new WordPress site, and it is using your default theme and themes. Determine the overall design of the site over a look and feel the color scheme. Lay out that kind of thing. So if we want to change how our WordPress site is looking and change the design, then first thing we're gonna want to do is change the theme. And so let's go back to the dashboard. And if we already signed into WordPress, then ah, well, have this bar up here when we go to our actual site. And then we could either quick dashboard here or we could just add to the end of our domain ford slash WP hyphen admin. And this will also take us to the dashboard area of WordPress. Back here will goto appearance and themes. I'm gonna click on, add new and then in here I'm gonna search for the theme picks over light. Yeah, well, just hit Click on it. And so here we can actually preview What? Ah, this theme is gonna look like on our site, and it already has some ah, dummy content in there so we can get it kind of a feel for what this team is gonna be like . So it's a pretty nice ah theme here. And ah, so we're just going to go ahead and hit install, and then we're gonna activate it. And so now it's active. Let's go back to the actual site itself. And here you can see our site looks completely different because we've put in this brand new theme. 12. Site Name, Pre-loader, and Breadcrumbs: we can just get right into actually customizing this theme to, ah, make it exactly how we want it. And so to do so we can go to customize up here Or if we were, were to go back to the dashboard here in the dashboard, on the left, under appearance we can get to the customized button here is Well, so that's gonna open up this customizer where we can make some custom changes to the theme and see those changes happening in real time. So we'll just start from the top, and worker would wait, work our way down. So theme options even click on that click on general company name. So if you're an agency, you know, you can put your agency's name here. If you're a freelancer, you're gonna put your just your regular name here. I'm making this as if it was for my own freelance Web sites. So I'm gonna put my own name in there. Ah, copy, Right? Only that, as is pre loader. So go back to the actual site. When I hit Refresh, you'll see it'll say, loading in the middle of the screen. So let me just hit, refresh and look for that loading. There it is right there. So it's saying loading before any of the content is loaded. What it's doing is basically waiting for everything to get loaded before it shows you the screen. So it doesn't, you know, show you the words before the images are is ah, completely loaded. So it looks pretty clean because as soon as it's when it's actually done, you know, you see everything in its finished form versus ah, if the pre loaders off, you might see the words first and then the button. And then finally, the background image. However, my problem with it is sometimes if it takes a long time to load than the people just see loading in the middle of the screen before seeing any content. And sometimes that can turn people off when they can hit the back button before they see anything. Whereas if it's start to show, it starts to show the words and, you know, button and stuff and they can see Okay, well, the sites just it's just gonna take a little bit, but it's ah, it's in profits in progress, versus if you just says loading for a lot of seconds, you might think Well, maybe it stopped loading because it's not showing anything at all. So, personally, I like to disable the pre loader would do that and then animation. So ah, if you saw that little jump as we scroll down things kind of the content kind of jumps into place. There's these animations I want to keep those and then we have bread crumbs. And so what the bread comes, are is if we scroll down to ah Post, let me open up one of these posts here we can see has a kind of a trail of how you got to the post oats within the category of uncounted arised. And we're at or in the actual block post Hello world. So that's what the breadcrumb is showing this kind of paper trail. And ah, I actually don't want that enabled either. So I'm gonna hit disabled for that. Leave that as is and now So I'm seeing my changes happen in real time. But I have to save it before can exit. Someone's gonna come up here and hit, save and publish 13. Contact Info and Favicon: Let's continue customizing this theme. So I'm gonna screw up and hit on this back button right there, and I'll quick on contact details and right here I can put in my email and then phone number and address. You don't just put my city okay and as it's starting to reflect, so let's go back to the main part of the site. And if we scroll down all right here, we can see it reflects the changes we've made as our city in the address, phone number and email. Now we'll go back again and going to cite identity. And if you change site title and tagline, it's actually not gonna show up anywhere on this theme. But site icon will show. So when you change site icon or out of sight icon, basically, what does adds this little icon up here, appear in the tab. It's also called a fabric on, so I'm gonna select file. I'll put a file, and it's gonna put a picture of myself since a site for me as a freelancer. So, like that crop, everything's good, and now you can see it's pretty small, but it's just my picture up there in the tab and Ah, yeah, again. I want to make sure these changes get saved, so I'm gonna hit, save and publish. 14. Disable Team Section and Add Header Image: Let's continue customizing the theme. So hit the back right here and then these other ones Background image, static front page breadcrumbs. I'm gonna leave those as is and hit back again. And then I'm gonna quick on section, visit visibility. And so there's different sections of our site. So, for instance, we have recent works and we can uncheck this so it doesn't exist if we want to. Right here we can uncheck the work section so that this part would disappear. We want all these sections over this particular site except for the teen one. If you have an agency, then you probably want to keep this ah, team section so you can put your different team members. But since this is for just me as a freelancer, I'm going to uncheck this to, uh, disable the team section, and now it is no longer there. So now one ship back again and going to see ta or call to Action section, which is up here, the top, and so it has a nice header image. But I'm gonna put in my own image. So click on that they don't click on add new image upload file, select files. You know, grab my background image. Now that it's just finishing up, loading, selecting crop, it's by default, cropping it to the the size that it wants, which is, Ah, 1920 by 10 80 pixels. So, ah, now my background images there, and it doesn't look like it's working yet, but sometimes a customizer will do its best to reflect the changes. But it doesn't quite work. So if it looks like it's kind of broken like this, then you can just hit, saving, publish and come to your actual site hit refresh. And here it looks like it's working just fine. We have that nice new background image. 15. CTA Text, Button, and Anchor Link: continuing on. I'm going to hit the back button and go into the C T A text area. And this is the text that appears right here. So I'm just gonna get rid of the subtitle completely. And for the main called Action text. I'm gonna put in my own, uh, text and you can see now it's updated. So I'll go back and then Goto button. And I'm just gonna put work with me right here, and you can see there it is. And I actually want it to lead to another area on the same page. I wanted to link to the contact area so that when they click on this, it just takes them to the contact section. Um And so to do that, we're going to use something called anchor links. And so if we go back to this part, let's ah, look up here in the menu. And so if I hover over this, the menu or navigation bar kind of pops out, and when I click on one of these buttons, actually not gonna take us anywhere off the page, it's just going to scroll us down to the point in the page. So contact. If I click on that, it takes us down here to the contact US section. And the way you do that is pretty much you put a tag on this section saying this section is called contact. And then when you make your link, you have this link to the theme the area of the page with the tag of contact. And by doing so, then whenever I click on it, then it will just take me to that area in the page. It's over this theme, they already have pretty much the tags. All ah, created. And the tags are just the names right here. So, uh, if you want to get to the contact area, the the tag name is contact news team testimonials. About the only one that is different is instead of being recent works, this one's just called works. And so the way you ah link to ah, that area or the way you use that tag name is you just get your actual domain names. I'm gonna copy that. They sit in here, make sure has a forward slash, and then after the ford slash you just put the pound sign. We're number sign and then write the name of the ah area that you want to link to. So, for instance, we wanted to go down to the contact area. And so it's just called contact of that shows here in the menu. So I'm gonna put contact. So we have just a regular domain ing pound sign and then the tag name. So again, this is called an anchor link because it's, ah linking to a specific spot on the same page. It's not taking us outside of the page, so I'll just hit saving published and we'll just test this out. So come back here. I'm gonna hit, refresh, and you can see the call to action area has changed. So this should now take me to the contact area, so I'm gonna click on it. And it worked. It took us down to the contact US section 16. What We Do: Let's go back. Hit that back button. Quick on what we do. And this is going to be this section right here. We're that we're going to edit. So for the 1st 1 I actually wanted to say Web design, so that's good. And then I'm gonna put in my own description and you can see it updates right there. Go back what we do. Number two inspected. Here we go. That in along with a description, and then I'll get my last one. And, um, one thing to keep in mind is when you're choosing a big header image, make sure it's dark or, ah, edit it to make it darker or something like that, so that you can read these words. Otherwise, it's gonna be really hard for your visitors to actually read these words. So now that I have all that, I would just go ahead and hit, save and publish 17. Our Skills Section: let's go back and hit back again. And now go into the pie chart section, which is, uh, this part right here. And so we can put a title and then a little subtitle and another block and even kind of a quote block text. But I actually don't want any of this, so I'm just gonna delete all of it. So don't just delete that to eat that go back section text, delete all of this and then the block quote Lee, all of this. So now it just goes straight into our skills. And then here we have the different skills, So ah, section chart number one. I'm going to put my skills in here. Number two, another skill number three and has put the last one. Okay. And as you can see, you could change this color if you want, but I'm just gonna leave those as is, and everything is updated as I want. It's seeing correct words down here, so I'll just go ahead and hit, save and publish 18. Recent Works Section: Now let's move on to recent works. So go down to recent works and section title is good. I'm just gonna leave it as is, and I'm gonna change out the images. And then these low goes down here as well as put different leaks so that when they click see project, it will take them to the page for the actual project. So let's start with Project One. You know, change image a blowed select file. Grab this image and ah, I've already cropped this image ahead of time. So it's 2 58 by 407 So Ah, that's why it's, you know, going appear very tall, like a portrait. So you may want to crop your images ahead of time and then project logo going to put in an image on and it chews image. And so there we go. And then last thing is, I'm going to put in a link so you can have it linked to wherever you want it to launch. Have it linked to, uh, the actual home page for bed without code. Put that in there. Okay, so now if they hover over it, obviously you can see it. It changes a little bit. And then if they hit C project, it will take them to this link. And so now I'm gonna do the same thing for ah, some of these other ones. I'm gonna skip Project number two. Ah will do that. After we do, these other ones could skip. We're going to something a little bit different. So for Project three, I am going to change image so it files and this one's for cycled will gifted, put in that image could in the logo and for the link grab that Put that in, go back. And now we just do our 4th 1 So what changed its image? Could in love our logo. And then, lastly, just Thea project you are. Oh, so those three or done and so for this last one. So we're still gonna put the image and logos. Let me actually just do that real quickly on this Last one is for a project, uh, or a company. I started in college called Ah Dickie Do studios. And if I could find the There we go and Dickey do studios is a company we started that makes how to iPhone app. So iPhone app that will teach you how to do certain skill, like how to play bass guitar and ah, we didn't really have I mean, we have a website for it, but mostly it's it's strictly for mobile users because we have multiple APS and such and ah , yeah, so I don't really want to direct them to a website. Actually, what I would like to do is create a page and have this direct them to the page on the CC project. It directs them to a page where I can put a lot of different stuff. Ah, about two key studios. We put a paragraph of text and then maybe put some images so they can kind of see some of the work I did on ah this project. So instead of just linking to some external website, I just want to link it to a page that will create in a second on this same website where they can see the work I did with Dickie do studios. So for now I'm going to save this and then we'll create a page for Dickie to studios 19. Creating a Page: So I'm going to exit out of the customizer just by hitting that X. And so here in the dashboard, I could either go to hover over new and then quick page, Or I could go to pages right here and add new. And it will take me to this editor where I can create and edit, uh, any new page. And so I'm going to call this page just icky to studios. I'm going to at an image of the very top, this one right here. And ah, we can change the size. I'll leave it as medium, though, And a lineman. I want this to just be right in the center, insert that enter a couple times and then I'm going to Ah, at a paragraph of text about Dickie do studios. Couple more enters, and now I'm going to add a gallery of images so that people can kind of see some of my work . I did on two key do studios, So Ah, as you can see, I hit add media, create gallery, and I'm gonna upload some more files. And so the files I'm going to upload let's see here this through this one. So these six right here. Oh, are open. And so he concedes, uploading them all together. And now that they're done, that was pretty fast, actually Hit create a new gallery. And so we can have this gallery show up in, ah, different columns and such. I'm gonna have it. Just do six columns and size. So, uh, by default set to thumb now, I'm gonna put that to medium, and I'm gonna make the order random, actually, so we'll do that, and then I'll just insert gallery. So there we go. And now I can just preview this so hit preview E scroll down. Here we go. I have that Dickie Do Studios logo and then this little paragraph of text about it, and then a bunch of different images off some of my work I did at Decugis Studios. So, no, I have a nice little portfolio page specifically for Dick et studios. So go ahead and publish this. Get that And again, I can ah view the the published page. Um, And again, everything looks good. So I'm just going to copy the URL to this page, and then I'm gonna go back to the customizer now. We'll go to recent works. Project number two and right here for product. You are? Oh, I'm gonna put in the page for Ah, for the dick you do studios page that I just created. So now this right here is going to link to that actual page. So it's even published, and let's actually look at the site. So it's Ah, refresh it. And if I scroll down here, you can see the different projects that I added, and it to key to studios. If I hit C project, it takes me to this dick you do studios page that I just created with, you know, some of these images and this text that I wrote up about Dick you two studios. 20. Testimonials Section: let's close some of these tabs and then go back to the customizer and we'll hit back back and we'll go to the testimonial section. And so here in the testimonial section, we're going to change the title. I'm just gonna put testimony eels, and I'm gonna delete the subtitle. No, it's updated and so they'll be able to scroll through these different testimonials. Let's go back. And ah, I actually only just wanted to show just two of them, So I'm going to delete everything in Ah, testimonial this testimonial in testimony of four under the same thing and testimonial. Three. Aziz Well, and then let's put on putting our own testing. One elsewhere, number one and two. So for number one, who is it going to be? The mystery character? And it is a guy I've worked with before uh, might look familiar to you. He has a just really familiar face. John. Brains and ah put, uh, well gifted. And there it is. Eso go back. I just wanted to gonna click on that, get my image and just f y. For some reason, If it's not a perfect square, it's going to crop it. Ah, that's going to skew it so ahead of time, make sure you crop it so that it's perfect square. This one is like 1 83 by 1 83 pixels. Because you have not It's going to get skewed. Okay, So when I have my testimonials, Mike Love, let's say our company that we all right worked with them with or maybe, ah, the client's company when you did work for them. So okay, it's we've got our testimonials in there. Uh, the image again. Make sure your image is a perfect square so that it doesn't get skewed and then name. And you could put companies well down here and then right here you can put ah, the actual text or quote that. Ah, the person said. Even though it's labeled as testimonial person named twice this one down here is the description or the actual testimonial itself that the person gave. So just make sure that we save this all hit save and publish 21. Creating a Blog Post: Now let's move on to the blawg or new section. So we hit back, back and click on latest news section, which is right here. And so pretty much our block posts get added to this section. And ah, inherited have to change the title if I want to. And I want to show some different video tutorials here. So rather than block posts or more just video tutorial. So I'm going to, ah, kind of label that website tutorials and give it a little subtitle in here. And so now you can see the changes reflected right there. I'll save that. And then let's actually create a couple of posts so that they show up here. So let's exit out of the customizer and at a new post, you just add our hover, renew and hit post or in the dashboard. You can do the same thing by going to posts and then add new. And so the name of this post is its editorial on America. For your website, put that there, put a little ah, blurb about it, and then if you have the YouTube you earl, you can just paste it directly in the editor and it automatically embed this video player. So that's Ah, pretty cool. And then I wanna have a featured image and the featured image serves as the thumb now, and it usually goes to the top of a block blawg post and you'll see Ah, the inaction in just a second. So let me get my family in my future damage hit set featured image and OK, so it's just go ahead and publish this and now let us publish. Let's take a look at our home page, so come over to here. Let's scroll down a little bit. Here we have it's changed to say website tutorials and ah, it's using this image from, ah, the featured image I put in there so that it has a thumbnail because if not, I didn't put the ah featured image in here than it would, it wouldn't have a an image. You just show the text and I want that. So I like that. And so if I click on it now, here is that post again the featured image goes at the top. Um, the little blurb and then right here is the embedded ah, video or the actual tutorial itself. 22. Featured Video Plus Plugin: Now with this post that I created, there is one thing that I don't really like. It's a little nit picky, but, um, I want to have the featured image so that you know, when someone goes to the lips when someone goes to the latest news section, they can see that thumbnail image. I want that to appear, but I don't want to appear here at the top because then it's kind of repetitive. You see this and then you see this and it's just yeah, I just repetitive. And, you know, we already have an image up here, too. So it's just kind of there for no reason. So what I would like is to have, ah, the video show up over here the top instead. But I still want to have this featured image for the thumbnail. And so, luckily, we were able to do that using a certain plug in. So we're gonna go to plug ins and add new and then here named the Plugging its featured video plus, So we'll install it and activated and completely free. And so now that I've done that, let's go back to posts. We'll go into this post And now that I've activated that plugging, you see this little, uh, tool tip right here. So, basically, um, we can just put in the URL of the video right into here, and it will ah replace this, uh, featured image right here pretty much anywhere. Where a future damage will go, It will be replaced by the video that would put in. So I'm going to Ah, grab that. You Earl no longer needed in here because it's gonna be showing up at the top. You know, put put it in here and and the loads there, it pulls it up. Now it's an update now Hit, Refresh right here in a fresh right here. And so were the future image used to be. Now we have this featured video. So it's just right at the top, which is nice, because, you know, as soon as they scroll down, there's a tutorial. And here now, instead of being a featured image, it's also just the thumbnail of the or actually embedded video player. So they could just click it right here and immediately start watching it. So that's pretty cool. I actually though, don't want this so some more picking us. I don't want this to be a video player, though, because it's like, really small. It's really cramped. And, um, you know, with my tutorials, I'm doing like a screen cast of the entire screen. So it's like they couldn't see it when in super small. And yeah, I would just rather have ah, having being image and then so that when they click in, then they'd be taken to the screen where they can have Ah, nice experience with the video player. Not on just some crap. It'll thing. Although I know they can hit this, but still And so, uh, if I go back to plug ins So here we see this is the new plug and we installed will hit media settings. And I believe you can also get to there by going to settings and in media. Um, but ah, so these are some configurations for that plug in. If I check this right here when viewing single page posts or pages, that means that pretty much is only going to do it. It's only gonna replace the featured image on the actual post itself. So all I did was check that that I would hit save changes and let's refresh both of these pages. And so this page still has the ah regular embedded video instead of the featured image, just like it was before. But now, here, instead of showing an actual embedded video, it is just showing a featured image, which is exactly what I wanted. So it's only replacing it right here. And so that's how that plugging works. Now that the featured video plug in is installed, let's create one more Post s so you can kind of see it in action again. And so let me just close out of this and will hit New Post. And so post name create a website from scratch. Let's grab the description. They sit in here and then So I couldn't just get my u R L for the YouTube video and just paste it right into this featured video and you'll notice. So right now, I haven't uploaded any future image for this video. But when I put in that URL, another cool thing the plug in will do is it will automatically get the, uh, pretty much the thumbnail of the YouTube video and put that into my featured image, which is really nice, because then I don't have to, ah, upload separately, another future image. Just say it's a little bit time. So what's it publish and we'll hit Refresh on our home page, and then we'll hit view post to see what this post looks like. So here you can see it's added, Ah, this, Ah new post with a nice, um, featured image that automatically pulled from the YouTube video. And then the actual post itself has the nice big video player up here at the top, and there's no you can't see any other featured image. It's being replaced by this video. So you know there's no ah, repetitive nous because we don't want to show a featured image of the same featured image it's already showing on the video. And so, yeah, that's just a great another plug in. And we've added our two posts, so ah, you can kind of get a feel for what it's gonna look like when you add any type of posts to this section. 23. Blog Sidebar Widgets: you may have noticed here on these posts, there's this side bar on the right, and the sidebar has different. Ah, things like recent posts, recent comments, archives, and each of these things is kind of its own separate block of content. And these air called widgets. So, for instance, the search bar is its own widget. Recent post is some widget archives is is its own widget. And these are kind off modular. Meaning they could be, like, taken out. You can put new ones in, um, you completely you can completely customize this bar to have whatever widgets you want. And you can even customize the widgets as well. And so to do so, we're gonna go over here and you can hover over it and then click on widgets. Or, if you were back in the actual dash bar dashboards gives me go to appearance and then widgets. And so here we have the sidebar, and so you can see all these different things are in here. And that's why it shows the search bar recent posts and comments and such, but actually want to take some of these out. Um, I'm gonna pretty much take out all of these except for recent posts in search. So I just click and drag, click and dry, click and drag to take these widgets off, and I can customize a recent post if I want. So I said I can say recent tutorials instead. And then all just hit save, and I want to add a widget of my own. So I'm just gonna get this one is just a blink pretty much campus blank canvas and just text. And I'm gonna say, Ah, get in touch so that no matter where they are in the site, it's really easy for them to ah can touch. So it's safe for that. And then let's come back and enter one of these block posts or tutorial posts. And if you scroll down now, we can see on the sidebar we have, you know, the search in recent tutorials and says recent tutorials instead of recent posts, we've gotten rid of some of the other widgets. And then we added this text widget, which just shows ah, our phone number and email. And as you can see there ah, on the same line and it's not. Email is not on a separate line, and I wanted to do that. So I'm gonna go to the text one and ah, put click on this automatically. Add paragraphs. It's save now when I hit Refresh, you can see the email has jumped to its own line rather than starting right after the phone number on the same line of as that one. 24. Footer and WP Editor Widget Plugin: Now let's edit the footer and we scroll down. Here is the footer. And these little blocks of information are you guessed it just widgets. So these are just different widgets. And so we can customize the footer by rearranging or removing or adding widgets to the foot area. Period. Excuse me. Just like we did to this side bar right here. So to do so, we are going to go back to the dashboard and to the widgets area. And so one of the first things I want to do is add a text widget to this. Ah, sidebar of the footer. Only problem is, if I want to add content, we don't have any editor buttons. So, for instance, when we are editing and post as we're adding content, we have these buttons appear which make it easy for us to add the type of content we want. I can add a image, you know, we can change the color of the text, that kind of thing, but not with these widgets. It doesn't give us that function on it. There is, however, a plug in that will give us that functionality. So I'm gonna go to plug ins bad new and look for WP editor widget, install and activate. And now when I go back to Widget Ah, In addition to just being able to add a text, regular plain text widget can add a rich text. So I'm gonna drag that in. And so with text, you know, it's just blink and I can't really form at the content very well, but with a rich text widget, I can. So I just hit edit content. And now when I'm adding my content, you can see I have all these buns up here. So have a nice predator. Makes it really easy for me to format it the way I want you. So just dragged the text went off and so here, I'm gonna put Ah, I am hopeful is kind of like an about me a little sniff it and ah, check there so that it outputs the title. So it actually shows the title when I I say this widget at it content and I'm going to add an image and I want the alignment to be set to none and ah, size thumb Now in certain to post There we go and then a little brief, uh, sentence or two about me saving close. And now when we go back to our site, go down to the bottom. And here in our footer, I have the image and some text, and now we can see Obviously, the text is Ah, by default gray and gray on gray is not easy to read. So luckily for us, we have this rich text wizard widget, which makes it really easy to format that text. So I could just highlight all this and make it white hit saving close. And now it's white. Now it's white and ah, so that's great. Also, the image seems to be a clickable links over. Click on it. It ah shows kind of ah, the actual image. And I don't want that to do that. So, um, I'm gonna go back into the, uh would you click on the image and here has ah, this link. I'm just gonna delete it so that it is no longer linked to anything. And so now it's saving close. Come back, hit, refresh. And it's no longer a link. And then my bios in white text. So it's easy to read, and so and I have this nice little, uh, kind of about me widget here at the bottom. Now let's go ahead and customize the rest of the footer. And you may have noticed that there already is some widgets in these Ah different locations in the Footer. Even though, for instance, inside we're number two. There's actually not a widget in there, and that's just because it has just some dummy content that's pre loaded so you can see what it will look like. But, ah, when we put a widget of our own, this will disappear, and it will only show our actual widget that we have in its place. So for sidebar number two, I want to add another rich text widget, and I'm just going to call this sites I'm running and have it shows some of my other sites no put title, click on Edit Content and so crab, uh, the domain names for some of my other sites. And so, if I were to say this as a XYZ, come back here, here, a fresh you can see that one. It's crate. Oh, because they're the fun is in gray, but to it's not clickable. These aren't clickable links, and I want them to be clickable links so people can easily go to the other sites I'm running. And so I am going to just highlight this part and actually copy it, and then click on this insert at it. Link, then where you are. L is. I'm going to paste and automatically adds this, http. Korn slash slash And so when I hit ad link, it turns this into a clickable link. So instead of just showing text, these will be clickable linked up leaks down there. So I just do that to all these. What? Okay. And that, And saving close. And when I hit refresh. Now, these are all clickable links to their respective sites moving on this follow US area. I actually do want it to have basically the same thing. So, uh, in the footer number three area, there is a special widget called social media mt. Social media. Sure, I got in there and you say, follow along, and ah, here we can put the euros for our actual profiles. So twitter dot com slash hooking his talk show my twitter handle. Even I don't really use Twitter that much. Um and then, yeah, you can put all of your other actual profiles in here just so I don't bore you. I'm just gonna put in a pound sign or number, sign our whatever you wanna call it. And ah, this kind of just acts as a placeholder. And if there's any of these that you don't want to show, just leave it blank and it won't show. So, for instance, school Plus I mean, let's be honest, who uses Google? Plus, So I'll just delete that and leave that blink and you'll notice that this Google plus, uh, thing is going to disappear. So I'd save and refresh ISS. And now there is no Google Plus, So ah, so, yeah, it's not showing up if you don't have, if you don't have anything in it. And then for the last area I actually just wanted to be as is, I wanted to show the latest posts. Um, you can, however, just drag in this latest post Mt. Latest posts widget and customize it so instead of it showing just to latest posts, I wanted to show three. Instead of saying latest posts, I wanted to say latest tutorials can't save on. Refresh it. And there we go. So now I've customized Ah, the footer by adding and customizing different widgets. 25. Add Contact Form: one of the last things were going to do is at a contact form to this contact US section. And to do so, we will go to plug ins, add new and we're going to look up Contact form seven. It is a great plug in for creating contact forms. I'm so inactivate. And now if we go to the customizer, you could see right here has this theme, documentation and documentation is ah, basically like how to guide their It's like the how to manual the manual for how to use something. So for the theme, it's it's the manual on how to use this theme. And so they have different questions. That they've answered here and we're looking for is some guidance on how to add a contact for him. So it actually says after he installed the plug in contact force of it, contact form seven, which we just did after doing that, copy and paste the code below into contact contact forms and then your contact form. So I'm just going to copy all of this and make sure you ah, have everything. If you're missing, you know, for instance, a bracket. My, uh, break something so I'm gonna copy it. I'm winning Exit out of here. And now that I have ah, this contact form seven installed. I have this thing that says contact contact forms by default. There is a contact form generated, and I'm going to highlight all this and delete it and add what I copied just barely from the documentation. Instead, it's save. And now if I go to ah, the customizer. So if if we look at theme says no contact form selected go to customize contact section and then select a contact form from the drop down. So we'll go to the customizer contact section, contact forms and then select This is that contact form that we just ah headed. Now if we scroll down there, we have our nice contact form and for title instead of thing, contact us, I'm gonna have It's a contact me because it's just for a single person freelancer. So we'll do that hit, saving publish And then when we hear refreshing their actual sight, never have it. Contact me with a nice contact form and ah, this form by default is going to go to the email. You used to install wordpress, which if you go to settings, you will find right here. And you can change if you so desire 26. Editor Files: each of these different sections is now pretty much complete. Just a few nitpicky items. I want to ah, adjust. So right here says what we dio and officials for an agency would be great. But if it's for just a single person freelancer, then I want to change is to say what I dio and instead of our skills right here, I would like to say my skills. And unfortunately, this theme does not allow you to change this And this wording, uh, easily through, for instance, the customizer. But there is a work around way to, ah, change this wording and so to do so. Movoto appearance and editor and back here these air actually all the files that are used to generate this theme and so you can actually see the actual code that was written to generate this team. And usually you don't want to change anything wreck here unless you absolutely know what you're doing. And even if you do know what you're doing, it's usually not good practice to make any changes to this, because when the theme updates, because the theme gets updates just like an iPhone app would, when it updates any changes you've made back here are gonna be completely wiped away. So if you do make any changes back here, it better be because one you know what you're doing and to their better re small changes so that if you end up updating, you can easily just put those changes back in. And that is the case for, uh, this change that I'm about to make. So section uh, hyphen about dot PHP. I'm gonna go into this file and I've already ahead of time Found out which files I need to edit and stuff. I'm not just randomly ah, saying, Oh, maybe it's in this file. Nobody figure out which ones need to be changed. And so the about section file is generating this right here. And so there's a place where it's tone it to put our skills. So I understand command control f ah, for our skills. And here I'm going to replace where it says are I'm going to just put my skills no had update and refresh. Now you can see it says my skills. And then right here I wanted to say what I do know what we dio And so the fire to change for this is called section Intro. So click on that and then I'll search for what we dio. And there it is. So now instead of we obviously what I dio So that's it. Just those changes, obviously. Ah, very small changes. So even if I end up updating the theme, I could easily go back and make those changes again if I want to, and now it says what I do right there. 27. Menu or Navigation Bar: we've now customized all the different sections of the site. There is only one last final thing to do. And so up here, if we hover over this hamburger menu, you'll see the NAB our or, uh, menu pops out right here and thes all use anchor links, something we talked about earlier. Which means it just links to a different spot on the same page. It doesn't take you to a new page. And ah, this is a default menu that was already created for us. And everything is great, except a couple of things. One, we disabled teen. So this section doesn't even exist. So I want to get rid of that on the menu as well. And then instead of saying news for where the video tutorials are, I'd like it to say something else. Maybe say tutorials or something like that. And so to create your own custom and you go to appearance and then menus. And here menu name, you can put anything you want. This is just for you to know which menu it is you're talking about. I won't be displayed anywhere, so I just put, uh, header menu, create menu and I can add some of the pages from this website. I can handsome a post where I could add custom links and I'm gonna add custom links. And so if you remember to create an anchor link, I just put the regular domain or you are Oh, and I need to make sure I paste over this stuff. So delete the existing http and paste it. You see already have my http. And then after the forest slash I put the number sign and then the name of the tag in this case for about it's just called about. So I will put about and then Lee text is what we want to appear right here. So if I want to change it to say about us, we're about about me or my skills, I could do that. And so it's just put, for instance, my skills to the menu, and I'm just going to check this so that Ah, the menu actually shows up in the header. So now it's just ah, keep making some more of these anchor links. So in the next one is a recent works someone to paste the regular domain. And then, after the four slash foot. Ah, number Sign works was the name of that tag, and I'll just put recent works right here. Add to menu testimonials is the name of the next ah tag name or for ah, the anchor link. So testimony eels, you know, put testimony, more nails in here as well. If I could spell. All right, then, team. I'm not I don't want a, uh, team. Ah, but nor link on women you saw Just skip over that and then for new. So the name of the tag to that area of the pages news. But I want to call it something else. I wanted to appear appear is tutorial soon pieces in number, sign news. And then our hero put tutorials at two menu and then my last one contact. So don't get that pace in number. Sign contact, and then I'll just call this contact and to menu, and we can rearrange things if we want to. But it's good as is, and so had saved menu fresh the page, and here's my nice new menu. You can see team and older exists, and instead of news, we have tutorials, and if you click any of them, it takes you down to that area of the page.