How to Make an Online Portfolio Website from Scratch w/ WordPress for Photographers, Designers, etc. | Hoku Ho | Skillshare

How to Make an Online Portfolio Website from Scratch w/ WordPress for Photographers, Designers, etc.

Hoku Ho, Web Design

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (49m)
    • 1. Course Intro

      2:01
    • 2. Intro to WordPress

      2:38
    • 3. Getting Started Intro

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

      1:17
    • 5. How to Get the Cheapest Web Hosting

      4:32
    • 6. How to Register a Domain Name

      2:02
    • 7. What is Web Hosting?

      1:05
    • 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 Fukasawa Theme

      1:38
    • 12. Adding Image Posts

      5:00
    • 13. Adding Photo Gallery Posts

      4:35
    • 14. Adding Lightbox Plugin

      2:51
    • 15. Categories

      1:23
    • 16. Adding About Me Page

      1:41
    • 17. Adding Frequently Asked Questions Page

      1:16
    • 18. Adding Get in Touch Page

      3:20
    • 19. Logo

      0:46
    • 20. Widgets

      1:56
    • 21. Mobile Call & Email Plugin

      4:04

About This Class

Learn how to create a beautiful, portfolio website, in just one hour. This course is great for photographers, graphic designers, or anyone else who wants to showcase their work online, and acquire new clients.

Resources

NameCheap Domain Name- http://bit.ly/1jq5DG2

HostGator Web Hosting- http://bit.ly/1Lvb00R (25% coupon code: buildwithoutcode)

Theme- Fukasawa

Plugins

Responsive Lightbox by dFactory

Very Simple Contact Form

Call&Book Mobile Bar

Description

We’ll create an actual portfolio website using WordPress. You’ll see how everything is done, step by step, from start to finish. No experience and no coding required.

The site will include the following features:

  • image posts
  • photo galleries
  • about me page
  • frequently asked questions page
  • get in touch (contact me) page
  • contact form
  • responsive image lightbox
  • search bar
  • category pages for images and posts
  • one tap call button on mobile
  • one tap email button on mobile

In addition, the website is completely responsive, so it'll look good on any screen, tablet, or smartphone.

Never built a website before? Don’t have computer science degree? No worries, we’ll start from absolute zero. 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). This course is a great intro to WordPress, and since we’ll build with WordPress, you won’t need to know html, css, javascript, php, ruby… you get the idea.

WordPress is perfect for building a portfolio website. You’ll be able to get the site up and running quickly, adding content is a cinch, and you can maintain everything on the site on your own. We’ll be using Fukasawa WordPress theme, which is incredibly beautiful, easy to use, and best of all… it’s completely free!

If you want to display your photography, graphics, designs, or any other work on your own custom website, then this is the course for you. We’ve cut out the fluff, so that you can get your portfolio website online as quickly is possible. Now go get started!

Transcripts

1. Course Intro: welcome to this course on how to create a portfolio website from scratch. This is the perfect course for photographers, designers or anyone else who would like to showcase their work online or even find new customers through their website. My name is Hoku Ho on the instructor, and in this course I'll be showing you how to create this exact website that you're looking at from scratch. And we're gonna do everything step by step so that you can see exactly how it's done. Uh, in this website, you'll be able to add individual photos or graphics that you've created. You'll also be able to add photo albums or photo galleries of post with more than just one image. We'll also be able to categorize these different images. So, for instance, let's click on this beach category, and here we'll see just the images that have been added to this category. You'll also be able to at a search bar so that if your visitors are looking for a specific thing, they can use that search bar to find it. In addition, will add some pages like an about me page or ah, contact me or get in touch page where you can put your info and even at a contact form. This site is also completely responsive, so it will look good on any screen, tablet or smartphone. You can see the layout changes to fit the width of the screen, and we'll even add some special customization for mobile users. So this is an emulation of what the site will look like on iPhone six plus, and you can see here at the ball at the bottom. We have this little bar with this custom call now and email buttons to make it really easy for mobile users to get in touch with us and hopefully hire us. So this is the site will be creating in the course 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 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 6. 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. 7. 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 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 Fukasawa Theme: one of the main ways we customize our site is by changing the look and feel the site kind of the overall skin. And so to do that, we have to go to themes. So here, on the left hover appearance and then click on themes and so themes is what really determines with look and feel of your website again. And there's paid themes. There's free themes. We're going to go ahead and get a free theme, so just quicker here at new theme. And then here in the search bar, the name of theme we want to use is called Fuk Asawa. Hopefully, I'm pronouncing that right so tight that in and enter and you can quick on it too. Have a ah life preview of kind of what it's gonna look like with your current content. Unfortunately, don't have any real confident content. Just tell me content. So this is what it would look like with the dummy content. But we're gonna make it look a lot different like that. We want to make it look more like this image with, uh, you know, these different portfolio items showing kind of like Pinterest style, but this is what it will look like with our current content. So we're just gonna go ahead and hit, install and activate. And now if I click up here, do you see what are actual site? Looks like it has the Fouke Asawa theme activated. Um, but again, it only has our dummy content in there. And that's why it still looks pretty blink, but now will begin customizing this specific theme. 12. Adding Image Posts: Since this is a portfolio website, one of the main things we're gonna be doing is adding a lot of different images. So whether it's for ah, you know, your photography website or graphic design either way, we want to display our images right here so that everyone can see our beautiful work. So let's go back to the dashboard, and then we're gonna go to posts and then add new. So this is how we add images is through posts. And so you can see over here there's different formats of posts into standard gallery image video. If we want to add just a straight up image, we just click that right there and let's give it Ah, a featured image. So down here was a set featured image. This is where we're going to actually upload the actual image that we want. Teoh be displayed. So we'll click on future image Select files and we will get this Ah, picture of mountains here. It's a kind of a big image, so takes a little bit to load. Okay, well, quick set featured image down here, so we have our actual image loaded and then let's just give it a title and we'll call this Blue Bridges. And one other thing, the last thing we're going to do is give it a category. And so, uh, we can add new category and we'll call this counter category mountains. And so, um, for any image or blawg post in general, that is checked with this category mountains. It will all be grouped together so that we can sort them later or so that our users can easily sort you know, any post or images that are under the category mountains. So we have the title. We've put it to the right format of image. We've put it into a category, and we've put the actual image itself. So I was just hit publish, and then we'll hit view post right here. And so here is the actual post. And if we go to the home page, what is quick right here? Here we can see we have the thumbnail for this image. Now let's add some other images so you can see what it looks like with some other images Here. I'm going to just zoom out real quick and then go back to dashboard and we'll go to posts again. Add new and let's go get the image. So featured image. Remember, upload files, select files and we will get this. Ah, picture of these trees. Okay, It's set featured image and we'll just call this misty trees and change it to image under format. And then so for categories, um, this will not go into the mountains categories category will make its own category. You will call it forest and new. And so it's checked under forest. And so we have future damage. We have the category, the format title. So now I understand publish and view post and there is our image. It's in the right category and if we come back to our home page now we can see we have this other thumbnail. So we have the trees and then we have these ridges And then this dummy post it was came preloaded. As you may have noticed for these block posts, the only thing that shone for the thumb now is the featured image. The title is not shown, and that's because we changed the post format to just be image and for the steam. When the former is under image, the thumbnail will only show actual featured image and not the actual title, and the same goes for a description. So if we were to add a description to this post that said it or you know, the body of the Post So let's add some text in there. Update. Well, because it is said as format image, Esteem doesn't show thumb now, so or doesn't show anything but the featured image for the thumb now. So even though we've added a description just like the title, it's invisible. Just shows the featured image. But if we were to click on it, then we can see Oh, here's the title and then we can add any body text or description that we would like. 13. Adding Photo Gallery Posts: In addition to the single image Blawg Post, we can also make a gallery of a block post that contains multiple images, so this may be good for something. Let's say, you know, you take photos at a wedding and you want to upload the entire album, but you don't want every single photo to show up on the front page. You can create a gallery blawg post, where you know they'll have to actually click on the Post to see the rest of the images. And we can change the format so it actually does show, you know, the title and maybe a little bit of a description. So the people know it's not just a single image. So to create a gallery post, let's go toe new and then post and will create a pretty much an album of picks from Los Angeles. So let's say we went on a little trip, and we want to put all these into just one big gallery. But some ah words here in our description as well. And if we so, ah, if we select a featured image, let's go to upload select files and we will quick on this image right Here is our featured image set Feature an image. Okay, uh, let's add new category. We just call this one city. And so instead of changing this ah, to image, we're just gonna leave it as standard and we'll we'll be adding some pictures here. But first, let's just publish it and just show you what the thumbnail is going to look like. So publish. Then let's ah, take a look at our actual site. Okay, so here we go so you can see we have a featured image, but because this bloke hostess said, is standard and not image. This shows the title as well as this description, unlike these other posts. And if we don't want to show cause, you know, it's showing everything from, ah, this apart from the from the body Maybe we only want to show one line we can Ah, quick this insert read more tag And now it will only show this part in the thumbnail and the rest that will only be able to see but actually clicking on it so it doesn't show you know too much right away if we don't want it to. So we just had update and I will hit. Refresh Here and now you can see. And the excerpt Onley shows the first sentence and not this second sentence. Okay, so now it's at a gallery. And to do so will add media. And here, top left, create gallery. And for this, we're going to use this image, and we're gonna upload a couple other images as well. We will be using See this image and we will be using this image. Okay, now they're all loaded. Will hit, create new gallery. And here we can actually change the order or, ah, delete some If we realize after the fact, we don't want all of these. So I want to change the order. So I'm just gonna click it and drag it. So this the featured images, the last image I don't want it to be super. Ever done it and I'll hit. Ah, well beforehand, insert gallery. I'm gonna actually change the size from thumbnail too large so that when they're showing up on their page on the page, they're not just showing up is just these tiny little things that they're large and columns . I'm going to change that toe one. So we could have appearance. Three columns. But I just wanted to appear in one caller column and have them be large size now insert gallery and ever have. Even the list is showing a small it should show up is large when we actually, uh, save these changes. So I'm gonna save changes by hitting update. Now it's come back here, will hit, refresh and ah, click on the post. And so here we have the featured image, and then we have these images all, ah, from the gallery that we just added. 14. Adding Lightbox Plugin: Now, if you were to click on one of these images, what the steam does by default is let's quick on it. It creates a kind of its own page for each image and the name of this image. When I uploaded, it was just, you know, pretty much some random tech, so it's not super desirable. What I would really like is to have it pulled a light box in a light box is just It's kind of like those little pop ups, um, that instead of having to take you to a whole another page that completely reloads it just opens a little pop up right here so you can view the image and even scroll through to the other images. And that's what I would like. And so to, ah, get a light box for these images. I'm just going to install a certain plug in remember plug ins if you could get to them by going to hear plug ins and add new and remember that they, ah increased, you know, functionality the add functionality to your site. So I'm gonna install plugging that's going to allow us to have that lightbox functionality and so add new Ah, I'm going to search plug ins right here. The name of plug and I want is responsive Lightbox by D factory. So I'm just gonna hit, install now and activate plug in and responsive just means that ah, it will fit the width of the screen. So if my screen gets smaller, you can see this site is responsive. The words and such and actual layout changes a little bit so that it still looks good on the screen. And so ah, this light boxes also responsive as it gets smaller, the pictures are still gonna look good. So all I have to do for this plugging is activated. That's it. Come back here and hit, refresh. And now when I click on one of these images, you'll see here it's pulling up the light box. So instead of taking me to a whole nother page just pulls up the light box and I could just exit here and you know, very quickly see these pictures and I can also scroll through them. So if I just click the right arrow, it will scroll to the next image and ah, yeah, just makes it really easy, really clean Um and you know, the user doesn't have to reload a new page or anything, and again, they are responsive. So ah, once they opened the light box, if the screen were to get smaller, the picture or photo would adjust so that, Ah, it's not being skewed or anything like that. So it'll still look good. No matter what screen size or even if they're on a phone or tablet, the's photos are going to look good because of that responsive lightbox. 15. Categories: I want to get this main page All complete this part, at least so I'm gonna delete this. Ah, default. Hello, World Post. Yeah, I could do that just by going to posts. All post click on that. And then hello, world. I'll just check that, or I don't have to check if I could just hit trash right here and ah, that's deleted. So now when I come back here, I hit refresh, and that post is gone. But in addition to getting rid of that, I also want to add more post so that it looks more full and rail. So Ah, I'll just go ahead and add some or just regular image posts. I'm not gonna bore you. Um, so, uh, just go ahead and do that, and then when we come back, there should be a little bit more full. As you can see, I've added some or image posts, so the site looks more full and here in categories, you can see all the categories work now that we have a lot of different posts. So if I click on city, it only pulls up this post because this is the only post in the City category and then beach. There's a lot of them, and also if we click on just one individual post, so let's click on this one. We scroll down here, it shows the category it's in, and if we click on that, that will also take us to this beach category page. 16. Adding About Me Page: the lowly logo on the side bar. We have this link to sample page. We click on it. It's just an example of, Ah, page a sample page. It comes preloaded, and so we can put in our own pages right here. Um and so a lot of websites will have the navigation bar kind of the top Where you, you know, quick on different ah links to take you to different parts of site for this theme. It's right here on the side. And so we're going to delete this sample page and then put in a couple of our own actual pages. So to do so, we'll go back to the dashboard quick on pages, all pages and the sample page. We're just gonna hit trash, delete that one, and then we're gonna add first page. What is it about me page? So let's hit, add new, and you just type in here about me, and then I'm just gonna add a picture of myself. So upload this image, insert it. Let's make it. Ah, large, More full size. Okay, then below it all add a little blurb and hit publish. Okay, Now let's go back to the site and you can see the sample pages gone. Now we just have. It's about listening to be about me. Page click on that takes us to this about me page with this image and a short little bio about myself. 17. Adding Frequently Asked Questions Page: Another page we want to create is a frequently asked questions page. So let's go back to the dashboard pages. Add new mammal type in here frequently asked questions and let's hey similares and publish that. Now here we can click View page and here are some frequently asked questions. Ah, and you can see it appears here in the navigation bar on the left. One thing we do want to do maybe is too bold the actual question so they ah, it's easy to see what is the question and what is the answer. So we'll go back to edit page and no highlight the question. Part it board like the question part command be on Mac er control be just like with the Marks f word will also make it bold. So get those bold it update to save the changes. Go back to view page, and now it's a little bit easier toe. Decipher what is the question and what is the answer? 18. Adding Get in Touch Page: the last page I want to create is a contact me page. So we'll go back to, ah, the dashboard pages add new and I'll just put get in touch And I'm just gonna put ah phone number and email so they can reach out, You know, to hire me as their for tire for whatever may be. And I actually want these to stand out more. So I want him to be a little bigger, not just regular paragraph size. So if I click on toolbar toggle Children, a few more options here in the editor and I'm gonna highlight this and change it to a heading five and then let's just hit. Ah, it's a preview first, actually. And so here we are. We could see the phone number and the email, but in addition, I want to add a contact form so that they could use that if they I want to. So on, Shit save draft and then I'll go to plug ins. Add new so we can just add a plug in that will make it very easy for us to create. Ah, a nice little contact form. And so the contact form the plug in for the contact form is called very simple contact form . I would say it's very simple when it works very well. Install now, activate plugging. And so this is the contact form, says used short coat contact right here to display form on any page or use the widget. And so basically, we have to just paste this this contact within the brackets within any page, and it will display our contact form for us. So you gonna copy that? Let's go back to pages. You see, this is a draft. It's not. Publish it. We'll click on it to edit. So right under the phone number and email showing pace that contact. And this is pretty much alerting the plug in saying, Hey, put that contact form here on this part of the page. So let's hit, publish and we'll hit view page And there we go. We have the phone number email and then this nice little contact form. Very easy, obviously, and then getting touches here on the left and by default, it will send when someone fills this out. It will send this information to the email you used when you first installed WordPress and Ah, you can actually just change that by going to users and then quick on user, and you can change the email here. So this is the email that will receive any information that people fill out in that contact form. And just keep in mind that every once in a while this ah, email, they fell in the contact form will go to your spam folder. So if you're testing it out and it's you're not seeing the information sent to you, check your spam folder. It might be there. 19. Logo: this main portion is now complete so we can start customizing this side bar. So up here, we could actually put our own logo in here. And you do. So we can either go to customize right here or go back to the dashboard and then go to appearance and then click on customized Your weight will take us to here where we can make some customers ations to the theme and ah, here showing kind of in real time, the changes that will be making so side identity. We could change the wording that appears up. There are site title. We can change the accent color. Ah, some menus, widgets. And then here the logo. We could upload our own logo when it would replace this right here. However, I actually like it, so we'll just keep that 20. Widgets: under this navigation bar with the links to the other pages we can see, we have a search form archives categories, meta and so what? These are called widgets, so they're pretty much islands of information or functionality. So, you know, the search form kind of does its own thing. Doesn't really rely on archives or the navigation bar up here. It's kind of its own island of functionality, and it lets us search for different things on the site. Well, there's someone these widgets that we don't really want. So, for instance, archives. I don't want this display. So I'm going to get rid of this widget. And to do so, we'll go back to the dashboard. We could also what a widgets Right here. But ah, within the dashboard of frequent appearance and then widgets here, we can see we can change the order so I could put certain bar at the bottom. We can also get rid of other ones, were add other ones. And to do so, we just drag it on. And then, ah, we click this little arrow over here. Here we can customize the widget and based on the widget, it will Ah be customized differently. So all we're going to do is drag archives off of here, drag meta off. And so now we just have categories and search. So now when we go back to the site here, we have just like we want it. We have logo navigation and then the categories here at the top so that people can easily find the type of post or photo that they're looking for. And then here at the very bottom. Sorry. Well, not quite at the bottom of the very bottom. We have just this information about our site, but, um, right here, the lowest widget is just a search bar. So, you know, I could search plus Angeles, and it will show, uh, anything that is relevant to what I've typed in. 21. Mobile Call & Email Plugin: The last thing we're going to do is add one more plug in, and this plug in is going to help make it easy for people to call or email us when they're visiting our site on a mobile device and you'll see what it does in just a second. So we'll go to dashboard plug ins. Add new here in the search bar will type in call and book Mobile bar. That's the name of this plug in it. Install now and activate Plug in. So we have to do a few things just to customize it so we can never hit settings here or now it's installed. If we go to our settings here on the left, there will be this Colin Book Mobile bar. So quick on that. And so let's add the phone number and make sure to add your country code before so for the United States one and then area code and then by 5555 five Great. And so, in addition to having this button well, so it's gonna have this button, or if they click on it, it will automatically call this number or ah, they can click another button and we can have it be a button to, uh, make it for them to book something or scheduled appointment. Whatever. Maybe we're just gonna have this other button and just go to our frequently asked questions . Page, I'm just gonna put fax. And then, ah, I need to put the URL for the frequently asked questions Page right here. So let me just go grab that new our fax page. Copy that you are outpaced it in there and the icon for this frequently asked question. But it will be just that an info icon and then an email address because there's also a button for them to ah, easily send us an email so that you clicked email, and then it will open up their email client with this email just already pre loaded. So we'll just hit save, and then let's go back to our site. And so if we want to preview what our site will look like on a mobile device, if you're using Google, crone and ah, I highly recommend use Google Chrome for development because it just has a lot of friendly developer tools. We can just right click anywhere in the site quick inspect element. And I have this toggled. So by default, if I hit inspect omen, it will pull this thing up. And if I hit this right here, this little phone icon, then it will give me a preview of what? Ah, your website is going to look like on a smartphone. And so you can change this up here to be whatever device you want. Let's do iPhone six and then command are largely refresh it. And so here we have, uh, kind of, Ah, an emulation of what? Our site would look like an iPhone six. So again, this is a good reason to use Google chrome because they have these free developer tools. So you contest things like this where you can see what your site will look like on a smartphone. And as you can see here at the bottom, we now have a call. Now button a button to send email and this fax button. And so if they click this, it will allow them to easily call us to click this easily email us. And if they click this, it will take them to the frequently asked questions page so that plug in added this little bar here at the bottom for mobile phones and, you know, really helps. So that makes it really easy for prospective clients to call us or email us more. Ah, see the frequently asked questions. So ah, you know, it makes it really easy for them to get in touch with us. Hire us and ah, yeah, so that's what that last plug in does for our site.