How to Create a Personal/Portfolio Website | Create a Pro Website | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to Create a Personal/Portfolio Website

teacher avatar Create a Pro Website

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      How to Create a Personal/Portfolio Website - Introduction

      1:59

    • 2.

      Step #1: Get a Domain Name and Hosting

      6:13

    • 3.

      Step #2: Install WordPress

      2:33

    • 4.

      Step #3: Login and Change Your Password

      2:13

    • 5.

      Step #4: Customize Your Website

      36:37

    • 6.

      Step #5: Set Up Your Contact Form

      6:11

    • 7.

      Step #6: Add Your Header and Footer

      15:39

    • 8.

      Step #7: Edit For Mobile

      3:17

    • 9.

      Step #8: Publish Your Website!

      0:45

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

4,900

Students

2

Projects

About This Class

This class will teach you how to professionally create an awesome personal/portfolio website! By the end of the class,you'll have a beautiful and fully functioning website that can help you land jobs, clients, and mega style points with employers.

This class is taught step-by-step so it's very easy to follow along with your own website. I also include a free template of the website we will we making (in the Projects Tab > Resources), as well as follow along images for you.

*You will need to purchase a web hosting plan in order to have your own professional website! This will be discussed in the class.

This course is designed for:

-Beginners that have little to no experience with web design / development and want a professional website.

-Anyone that wants to develop a more impressive portfolio or resume.

-Anyone that wants to turn web design / development into a career.

Here's some of what you will learn:

-How to Secure a Domain Name and Web Hosting Plan

-How to Install WordPress

-How to Customize Your Website using Elementor

-How to Create a Contact Form

-How to Make Your Website Mobile & Tablet Responsive

-And more!

Click Here to Get Web Hosting

Download Website Templates

Download Follow Along Images

And as promised, here is the link to my video on How to Get a Professional Email!

Meet Your Teacher

Hey! I'm Dale and I'm here to teach you how to create professional websites for your business, portfolio, blog, and more with step-by-step easy to follow tutorials!

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. How to Create a Personal/Portfolio Website - Introduction: What's going on guys. In today's video, I'm going to show you how to make a personal website with WordPress. Let's take a look at the website I'm going to show you how to make. I designed this to be the perfect one-page design for an individual. It's got this awesome parallax effect. I'm also going to show you how to change all of the fonts and their colors, I'm going to show you how to change these icons and make them clickable. I'll show you how to create buttons that can go to different pages or they can jump to different areas on your website. I will also show you how to change your menu up here, how to make this transparent header and I'll also show you how to create this signature logo for your website and you don't need any software to do it, you can do it completely for free, so that's really cool. I'll also show you how to change all of these different sections so it doesn't have to just be films or photos or web design, you can change them to whatever you want. I'll show you how to create a photo gallery, put your videos on here, link up your Instagram and YouTube and Facebook or whatever other social media that you have. I will also show you how to create these icon list down here, as well as create a full contact page where people can send you e-mails and you've also got a map over here and the best part is that I made this entire website into a template which I'm giving you for free. You can find it by going into the Class Project tab and looking under Resources. I went from more of an outdoorsy theme for my website, but you can change it to anything that you want. This website layout as super versatile, and I will pull it up on mobile, on my phone. Here's what that looks like. Awesome. This is looking great on my phone and I'll also show you how to get your very own domain name, like I have here, and how to get your own hosting plan. Without further ado, my name is Dale M-c Ma nus, I make websites and I also show you how to do it step-by-step, whenever you guys are ready, let's get this started. 2. Step #1: Get a Domain Name and Hosting: Alright, so step number one, is to secure a domain name and hosting plan. A domain name is just the name of your website.com. A hosting plan is covered by a hosting company. They have these buildings full of all of these servers, and the servers light or rent space on the Internet, fill it with all of your pictures and videos and texts and so on, and then go live. Yes, you could do a free website, but you're going to be limited to the following things. You won't be able to monetize a free website with ads. You won't be able to install helpful plugins. You don't have an unlimited amount of themes that you can use to customize your website and you won't own your own domain name. It'll be something like your domain name,.WORDPRESS.COM. Hosting is necessary for having a website. Let's get started. Let's hop on over to hostgator.com. This is their homepage, so what we're going to do is go over to web hosting. You can see they have a few different plans here. The Hatchling Plan is what I recommend most if you're just starting out, and the Baby Plan is if you plan to have a bunch of domain names. If you know that you want to have like ten different domain names, go ahead and get the Baby Plan. The Business Plan is really only if you are trying to make a ton of money with your website, like I'm talking hundreds and thousands of dollars and you need all this extra bells and whistles. But for the sake of this tutorial, we're going to go ahead and do the Hatchling Plan. You can see it's the cheapest plan. Let's go ahead and hit buy now, and here is where you're going to get your domain name. This is the fun part. I highly recommend keeping your domain name under 15 characters, and I also recommend keeping it as simple as possible. For this, I'm going to be doing a personal website. I actually already bought dalemcmanus.com, which is my name. I'll hit enter and it'll say it's unavailable, because I already have it. What I'm going do is my middle name starts with an N. So I'm just going to pop an N in there and do dalemcmanus.com and Enter and there we go. It'll give you a bunch of different stuff like,.club,.site,.net. I highly recommend just sticking with the.com. We want you to be as legit as possible. Cool. Let's go all the way down and you're going to see that Add Domain Privacy Protection is checked on. That's good, because if you don't have this checked, you will get bombarded with spam calls from people that are asking to build your website and offer you all this stuff if you pay them. It's obnoxious. I made this mistake once in the very beginning when I made my first website ever, and it was terrible. I mean, my phone probably rang six to eight times a day with solicitors, so I highly recommend adding that domain privacy protection. Alright, next, we're going to go down and choose our Hosting Plan. We chose the Hatchling Plan, which is good, and we're also going to choose the Billing Cycle. As you can see, if you do 36 months, you're going to have the cheapest per month and overall, 275 a month if you commit to 36 months. Now, 36 months can be a lot for somebody to commit to. My next recommendation is doing the 12 months because you're buying your domain name for 12 months as well, makes the most sense to have them match up and it's still a pretty cheap plan. If you want, you just want to try it for one month and just see if you like it, maybe this is your first website, then you can go ahead and click one month. After you choose your billing cycle, we're going to create a username. I'll just do my full name, which is dalemcmanus and then do a security pin. Then we're going to fill out our billing info. I'm just going to go ahead and do this really quickly. Alright, cool. Once that's all filled out, we'll just go down to add additional services, and from here, you've got a Free SSL Certificate. What this means is, let's say I go to Apple.com. This little security thing. It says connection to secure, its little lock symbol here. That's what that is. If you're selling product on your website, like it's an e-commerce store or something like that, then I would recommend getting this SSL Certificate. It's included free here. Just leave it checked. You can go ahead and uncheck to protect your site from hackers, leave, get professional email unchecked. I actually have a whole another video showing you how to do this for free and then also uncheck backup your hard work. There's ways to do all this yourself, you don't need to include them in your package. Alright, so here's the fun part. Here is where you're going to save some money. In the Coupon section, it probably says Shared 3600 or something of that sort, go ahead and delete that and we're just going to put in createaprowebsite, all one word. What this is going to do once you hit validate, you can see bam, the price just dropped. At the time I'm recording this, this will save you up to about 60 percent depending on how much of a Billing Cycle you choose. This is my affiliate link. If you use it, it saves you money and it makes me a little bit so I can continue to do this all the time and provide more tutorials. It's a win-win for everybody. But if you don't like me and you don't want to use it, you can try to find one elsewhere. I guarantee this is the best deal that you're going to get, because I called Host Gator and worked out this special deal purely for my viewers. Let's just review this real quick. You can see we've got our domain registration for one year, which dropped from 15 to five bucks, which is awesome. We've got our hatchling plan, which was originally $10.95, which went down to 7.67, then our add ons is just our privacy protection, which again, I highly recommend. Let's go over to, sorry, we actually got to agree to the terms. You have read and agree, and then you can click checkout now. Once that is complete, it's just going to set everything up for you. 3. Step #2: Install WordPress: Now we're moving on to step two, which is to install WordPress. And WordPress is basically just a website builder. It actually powers about 30% of the Internet, which is a lot of freaking websites. And it's pretty easy to use. And I'm going to show you step-by-step. So let's go install it. Alright, so just go on over to the hosting tab up here. And then what we're going to do is go down to WordPress, one-click installation. So go ahead and click that. All right, so from here we're just going to pick where we want to install WordPress to. So we're gonna go to select your domain, and I'm going to select my domain. I had a bunch of options there. You will probably only have one. So then just click next. Alright, so now we're just going to give it a title and this will just be our name because this is not a company. This is a personal website. So if you had a company, you could put the name there. Admin user, I'm just going to do my name and first name, last name. Again, lots of excessive names for this is because it's a personal website. And then Admin email. So let's do our email. Cool. And then we'll just agree to the terms. And then click Install. Now WordPress is installing, awesome. And boom, just like that, it's done. So very important step right here is to save the installation details here. So what I'm going to do is copy these and then I'm just going to paste them wherever I save normal passwords and things like that because you're going to need this ridiculous password, this S71 yada, yada. But to get on initially we're going to need that crazy password. So make sure you save that. And then just click login. So you're brought to this page because Host Gator has to send out your domain name across the entire world that's got to connect to every server and say, "Hey, this domain name exists," and this process is called propagation. And they say it can take up to about 24 hours. I've never actually had to take that long. It's usually somewhere between 20 minutes and two hours. So in about 20 minutes, check back. And if you see a page that looks like this, then you're good to go and we can get started again with the tutorial. But take it as a mandatory break, go get a snack and come back soon. 4. Step #3: Login and Change Your Password: All right, so once we're at this page, we can move on to step number three, which has log in and change your password. Because we don't want to have that ridiculous crazy password that we saved earlier. So let's go ahead and instead of clicking the little green button that says admin login, the way that you should get used to signing in is by going up to your domain name and doing /WP- admin.By doing this, you can get in all the time because this little green button is not going to be here once you publish your site. So let's just hit enter. Now we can log in. So we can use either your username or your email address. I'll just do my username, which was just Dale then I will do that crazy password. I saved mine, so I'm just going to copy and paste it and then hit login. All right, we are in the WordPress dashboard and there's a lot of stuff going on here, so let's make it a lot easier to navigate and look a little cleaner. So we're just going to dismiss this and we're going to hit the X on pretty much everything. Let's just dismiss. We want this to look nice and clean like that. Don't want to scare you if this is your first time in WordPress. All right, so now that we've logged in and cleaned up our dashboard, let's go change our password. So let's go down to users and then go to all users.Then just click on your name. Now we'll go all the way down to the bottom and we'll do generate password and then just delete that one we don't want another crazy password, we want to make our own. So let's go ahead and just put in whatever password that you wanna put in. Now hit update the profile and there you go. That's how to change your password and now you can log in with that. So you can just use your name as your username and you can log in with your new password anytime. And remember, do your domain name /WP-admin. That is how to login to WordPress for your site. 5. Step #4: Customize Your Website: All right, so the best part, step number four, is to customize your website. So first we're going to get our theme, then we're going to download a couple of plugins that are going to help us out a lot, and then next, I'm going to give you a template that you can use that'll take away a lot of the hard work. So then you can just drag and drop and replace the images that you want and replace text and so on. I wanted to make it super easy for you guys. So first thing that we're going do is get our theme. Our theme is really just going to be used for our header and our footer. So I'll show you what I mean. I'll go over to createaprowebsite.com, which is my website. We're just going to get the theme purely for this header up here, this white part, and then the footer all the way at the bottom. Then the Page Builder, which is a plugin that we're going to get it's called Elementor. That's what we're going to use to actually design our whole website. But the theme we want to get just for that header. So let's go back and go over to appearance. Let's just go over to themes. Now from here, just scroll down, and you'll see this plus sign that says "Add New Theme" just click on that. So then we're going to go to "Search Themes, " and we'll type in "Ocean WP" Then you'll see it right here, the one that says, "Just do it" Just click on "Install" and then click "Activate," so now that that's activated, we're also going to install a few plugins. The first one is going to be Ocean Extra, which is just a little add on, a little bonus to our Ocean WP theme. Then we're also going to install a page builder called Elementor. Elementor is what's going to allow us to drag and drop and just visually build our page. So to do this, let's go on over, and let's go to "Plugins" and then go to "Add New." Then at the top, you'll probably see this theme recommends the following plugin, Ocean Extra. You can either install it from here, or you can search for it in the search plugins bar here. But we're going to do begin install plugin right here. We'll just do install. It'll say it's installing Ocean Extra. Then now it says plugin activated successfully. So let's go back to "Plugins" and then go to "Add New". Now we're going to get the Elementor page builder. So let's go to search plugins, and we'll just type in Elementor if I spelled that right. Then Elementor page builders, the first one here, it's got over one million active installations. So let's go ahead and click "Install Now" Then click on "Activate" so now it'll bring you to this little get started page. You can watch tutorial if you want, but we're just going to exit out of that. We don't need that. So before we get started with actually customizing our website, I provided you with a template that we're going to install now. So from your dashboard, you'll see the Elementor tab over here. Just go up to "My Templates" and then instead of doing "Add New Template," that's actually how you create them, go over to the "Import Templates" up at the top, and then it'll say "Choose File" we'll just hit "Choose File," and mine are on my desktop. But if you download them, they're probably in your downloads folder. So go over to personal website templates, and we'll do the personal website first. So I have the actual website template and then I have the footer template. But right now, we're going to do the personal website template and click "Open" and then "Import Now" Now, let's go back to "Import Templates" choose the file and will also put in that footer, "Open" and "Import Now". Now we've got our website and our footer templates in here. So let's go over and make a homepage. So just go up to the "Pages Tab" and then go to "Add New." So from here, just close out this little wonderful world of blocks thing, just close that and let's just call this homepage. So then on the right, just go to these drop-downs over here and click on "Page Attributes" and then change default template to Elementor full width. This is really important. So from here, then just go up to "Publish" and it'll say, "Are you ready to publish?" Nobody's actually looking at our site. This is just our way of saving it. So just click on "Publish." So then go up to your name at the top left and click "Visit Site" and open it up in a new window. From here, just click on "Customize," and what we want to do is we've now just made this homepage page, but our theme, which is ocean WP, is not recognizing this as the homepage. It's still showing us this hello world post template, and we want to get rid of that. So we want to make the connection to our new homepage that we just created. So go down to homepage settings and then click on "A Static Page" and then under homepage, click the "Select Button" and then just click on "Homepage." So if you had clicked "Save Draft" instead of "Publish," you probably won't see this here. You have to click publish in order for this new homepage to show up. So now that we've selected homepage, you can see we've got this full-width page that we can now play with, and we can now go add our template to it. So from here, click on "Publish" again, and then click on the "X" and let's go to "Edit Page" I'm actually going to close out of this old window here. So from here, let's do "Edit with Elementor." So here is the fun part now we can start actually customizing. So the way Elementor works is, you can just click on this new section button and then just select a structure. We'll just select the main one. If you click on this little Rubik's Cube looking symbol up here, you can now drag in all of these widgets. So you can drag in an image if you want, or heading, which is just text, and then you can change the text. I can just type my name, for instance, and then you can edit it, change the colors, all that stuff. But first, what I'm going to do is add our new template so that everything is made for you. I just wanted to show you real quick how all this stuff works. So first, let's go over to the "Add Template, " which is this little folder button, and then just go up to "My Templates" Then, you'll see our two templates that we imported. So we'll do the personal website one and then just click on the "Insert Button." Then it'll say, "Do you also want to import all the documents settings?" Just click on "Yes." There we go, so now we've got all of our widgets that I've created for you in here. But it ruined our full-page layout. So let's go back and change that. So on the left-hand side here, you'll see "Page Layout" all the way at the bottom. If you don't see this, it's under the "Settings" tab. Just go to "Elementor Full Width," and now it just updated again. So this is what it's supposed to look like, we're actually going to get rid of this little title up here. We're going to do our header, all that. But first, we're going to work on these main sections. So I've got all these sample images in here for you, which are all black and white. We're going to change them all. We're going to change text and so on. So as you can see, videos, photos section, just everything that you need contact page. Then right here is actually where our contact form is going to go. I'll show you how to do that later. So let's go all the way to the top and open back up this little sidebar. So this is how you open and close it. Just click on "Update" now that we've got that imported, and we're going to go get rid of this little title up here. So let's go out to these little three lines, looks like a hamburger, click on that, and then go to "Exit to Dashboard." Then go up to visit site again. You don't have to open it up in a new window this time and then just click on Customize. This Customize tab is how we customize our theme and then the edit with Elementor tab is how we customize our main page. Right now this title here is part of that theme, so we want to get rid of that. Let's go on down to the General Options tab and then from here go to page title. Then we're just going to go under style and it's on default right now, we're going to change that to hidden. Now it's gone, which is awesome. Let's click on "Publish" and then just click on the X and let's go back to edit with Elementor. Let's go ahead and change this main picture here to one of our own. If you're following along with me, I also provided a folder full of follow-along images for you, which you can find by going to the projects tab and looking under resources. The only ones that does not come with is pictures of myself because this is my website, so you're going to want to put a picture of yourself in this section. To do this, just right-click and then click on Edit section and then if we go over to the style, you'll see the background tab. If it's closed, just open it and then you can see the images here. If you have nothing here, it'll probably look something like this and you can just click on "Classic", "Background type" and then just go to image. Let's upload our own image. From here, you've got your media library, which has nothing in it right now. Well, actually it's got the sample pictures that I gave with you, so you can keep those in there. We've got our sample goat over here. Let's go back to upload files and let's upload a picture of ourselves here. My images, and then I'm just going to select this one of myself and click on "Open". Then click on "Insert media". One thing to note about putting pictures on your website is if there are way too high quality, it might look fantastic, but your website is going to take forever to load, which we don't want. We want it to load within a second or two. To fix this, what you can do is go to Optimizilla. Here we go optimizilla.com, it's got this old dinosaur guy. You can just click on "Upload files" and then select your image and open it and what the site will do is compress your image. It'll do an auto compression for you and if you scroll down you can see the difference. They look pretty similar right now, if I wanted to really compress it, I could bring it down to like a 45 and you'll probably see a little bit more of a difference, there we go. You can see it's a little bit more pixelated but what this does is save a lot of file space and it will load a lot quicker. I'm not going to go that much. I'd say a 70 is a pretty good compression, somewhere around 70 and then click" Apply" and then just download that image. Now this image I actually already compressed, so I'm just going to leave that in my downloads. Let's go back to Elementor. Again, this one was already compressed, so it should load fine. What you can do to change your position of your image, you can see I'm on center-center right now, you can do top-center and it'll move things down a little bit. You can do bottom center, puts me a little bit higher. If I'm looking at the page like that, I picked center-center originally because it just looks the best. Then we've got this parallax effect going on right now. Whenever I scroll the picture itself doesn't move. If you did want it to move, you can click under Attachment and change it to scroll and that'll actually now move with that page. I love the parallax effect, so I'm going to go back to that and click on ''Fixed.'' You can also change the size, right now it's set to cover. You can do contain, which looks ridiculous because you're just repeating the image. In my experience, cover is the best way to go. Now if you didn't want this block of picture here to be so wide, what you can do is go over to layout tab and then you'll see height, which is set to minimum height. If it's on default, change it to minimum height and then right now I have it set to a 780. You can bring that down to something like that and you can see it's a lot smaller now if you'd like that style. I love that big first image, it's what says the most about you. I'm pretty outdoorsy, so I've got a picture of myself outdoors. I'm just going to go back and change that to 780, I liked it the way it was. Now I've shown you how to edit that main image. If you wanted, or let's say you wanted these words to stand out a little bit more, what you can do is go to the style tab and then close the background tab and then go to background overlay. What you can do is set a color for this or click on the "Classic", which is a little paintbrush. Click on "Color" in this little box here and then what you can do is change the overlay color. What you can do is go all the way to black if you want and then the opacity is how dark or how light you want that to be. A one is like a 100 percent and then a zero is obviously zero percent. If you wanted, you could do that. I like that main image to be crystal clear. I can already see the words totally fine. I'm going to bring this back to transparent and close background overlay. We're actually going to do that for these sections down here. These already have background overlays on them. But for this one, I'd like it. Let's change our texts. Pretty simple. You just double-click and you can either edit it right there on the page. I could put my name and I do all caps, I like to be big and bold and important. Or you can change it over here, under title or if you wanted also you could put everything on the left or you could put it on the right and so on by changing the alignment. What's underneath this is a divider. I just wanted this little space between my name and then what I do. The divider, if you click on that, I'll see if I can scroll to get that in a better spot, there we go. If you click on that, you can change the width of it. Right now it's at 41, you can make it all the way out. You can make it a really small line if you want. I'm just going to go back to 41. You can change the weight. I have it set to a two. You can make it real thick if you want. I like the thin line. Then now let's replace this text with cool stuff that we do. I have this set to Italics, so it looks a little bit different than our main heading. Let's put this as videographer. I have a background in video and photography. I like to travel and make some films and stuff, so I'm going to put some of that on my website. I'll do videographer, change this to photographer. And then of course, what I'm doing right now, web developer. And if it's not italics, or maybe you want to change it from italics, you can select all of it. And then this little menu comes up and you can either click it or unclick it, if you want. I like it italicized. So if you would like to change the font, I kind of forgot this part, for the actual main header. So let's say you don't want this font. Double click that, or actually, you can just select the whole widget itself by clicking on this pen tool. And then go to style, and then go to typography, and you'll see this little pen tool again. Click on that, and you can change the font family to whatever you want. So I have it set to default. I'll just select one at random. Let's do that. So you can change the font, but I'm going to go back to default. And then you can change the size as well. So it's set to a 60. You can make it huge, you can make a smaller, thought 60 was a pretty good even point. And then you've got your usual text editing settings down here. So, let's go down and let's work on this about me section. So let's click on this section. So the tricky part here is, you've got a section which is the blue, which is the entire section. And then within that section, you've got two columns. And these two columns are set to full width. So it can be a little tricky to actually select one or the other. So I'll show you a little trick. If you want to select the actual section, you can right-click up in the blue area and just click edit section. If you want to select the column, you'll see this little gray symbol. It looks like two columns. You can just right-click on that and click on edit column. So now that we've done that, we actually want to have the column selected, go to style, and then we can change the background. So let's delete this one, and let's add in a new one. So, I'm going to go back to upload files, select files, and then I'm going to just select this photo of me. So again, these are the only two photos you don't have with you. You should be putting one's of yourself. So click on open. And again, don't forget to compress your images. So let's go over to insert media. There we are. And then from here, let's click on this column, so you can either click on it or right-click and hit edit column. Let's go to style again, and we'll change that background as well. So delete that. And let's add a new one. Go to upload files, select files, and then the follow along images. We'll double-click on that. And I'm going to add the one of this desert, I like that desert one. So I'm going to go with this outdoors theme, and I'm going to do kind of a hot and cold contrasts. I'm going to have lots of desert photos mixed with snow photos. So from here, we'll just click on insert media. And you can see this now has a background overlay on top of it. So let's close that. And if you wanted to edit that, just go to background overlay. And then you can change the opacity. So, I could have it lighter, darker, and so on. And if you ever do something and you're like, oh crap, I need to undo that. Just hit control z. And you can undo. And again, you can change the color as well of that overlay. Alright. So edit this text the same way, you can just double-click. If you go to style, you can change the font and so on and the text color. I already showed you all that. So here you just add whatever you wanted about yourself. I'm just going to leave it. And then now our button. So this is a fun part. So if you click on the little pen symbol here, or right-click and do edit button. It'll take us to where we can now change the button. So I wrote see portfolio here. And you can put in whatever link for this that you want to put in it. So if you have a separate link to your portfolio, you can put that in here. I have this setup as an anchor, to go to my films section or videos section which, if I push the button, it would actually jump down to this section. So, I'm actually going to leave that and I'll show you how to create these anchors a little bit later on. But this is where you would put in your URL. And if you want to change everything about the button, like the style and so on, just go up to style. You can change the button text by clicking on typography. And you can change the text color, the background color. So the text color is automatically set to white. If I want to change the background color, I can. So if I want to remember this color, I'm going to just copy that. So now, I can change it. So if I want it to be green and so on. For buttons, I recommend stuff like orange. I recommend kind of a light blue and a green. They stand out really well, amongst everything else. And your buttons are your biggest call to actions on your website. So if you're selling something or you want people to click on your portfolio, having these nice bold buttons is a great idea. So, I'm just going to go back to my original orange color. And then I'll close that. And then the hover color, if you click on the hover tab, this is a darker orange. So whenever I go over it, you can see I have it growing and, I have it get a little bit darker. So let's say, I want to make that even darker. I'll just bring that down like that. And you can see now it's kind of a brownish, orange-ish. So close that and then the hover animation is set to grow. So you could do anything you want. Let's say rotate, the whole button will kind of rotate a little bit, so you can pick whatever you want there. I just like the regular grow, nice and simple. And once you've created all of these elements, it doesn't matter if it's a whole section, or just a button. What you can do is, right-click over here and then just click on duplicate. And then you can drag that new button around wherever you wanted it. So if I wanted to put it down here, I could. So that's awesome. So I'm going to control z. Get rid of that. Okay. So let's go down and replace this goat. Got to get rid of our sample goat. So if you just right-click on this area and do edit section, go to style, delete him. Let's put in our new one. So go to upload files, select files. And I'm going to select the desert two. I like this epic picture. It's actually a picture I took, out in Peru, of my buddy Alex standing on the dunes. So that's cool. So let's do insert media. And there we go. This is also parallax, so it's cool. It goes from this picture of me and then, bam to him. So nobody's going to know that, that's not me. So I'm just going to pretend that's me. Again, if you want to make this smaller, go to layout tab and then change the minimum height up or down, however you want. Alright. So, I've got these icons in here. So let's change those. So the way I got these was again, go up to this Rubik's Cube looking symbol. And these are just regular icon, they're icon boxes actually. So if you drag that in, that's how you create those. So let's change these. So let's click on that button or right. It's going to keep telling me, whether I know how to right-click, just click. Got it. Anyway, edit icon box and you can change the text. You can change the little title here. So let's change this to films. If I can spell that right, there we go, films. And you can change the icon. So I'll just click on that. Let's type in film. And we'll get this little film strip. There's a million icons in here. Not really million, but there's a lot. You can pick all sorts of different ones. And I also have this hover set to kind of turn blue and grow. So if you wanted to change that, just go to style and then go to hover. And you can change that color and the animation. And if you're on the normal tab, you can change the size of the icon, if you want, and the color as well under primary color. So let's change this one to photos. And we'll just do a camera symbol. And we'll change this one to web design. And then change it to a laptop. Now, if you want to link these to things. So right now, if you hover over them, it's like ooh, I can click on that. So if you want to actually have it go to a link, there's a little button that says link to, or sorry, little section that says link to. And you can just put in your URL there. And again, you could do this as a jump button to somewhere else, which I will show you soon. Actually, no, I'm going to show you right now. So let's do hashtag. So you always have to do hashtag if you're linking to a different part of the same page. So let's do hashtag films. And what we want to do is just have this jump right down to this section. And we wanted to land just about like that. So you don't actually have to set that. All you have to do is pick the section. So if I right-click in this blue area up here, and do edit section, what we're going to do is go over to advanced, and this is where we're going to create a class ID. So we're just going to call this films, with no hashtag. And what this does is say, hey, this is the film section. So that whenever we push that button, it'll just go, oh, I know what it is and then move down to it. So let me show you what I'm talking about. So click on update. And then I'll close this and I'll just show you. So if I were to click on that button, boom, there we go. So that's how to create a jump button. Really cool. I love one-page designs. So jump buttons are like my best friend. So let's go open this back up and let's make the photos one go to #photos and web design will go to #web design. And I'm going to go down and change these as well. So photo section, make sure you're on the main section, not just one of these columns or widgets. Main section, go to advanced, class ID, let's call it Photos. And this has to perfectly match what you put in as that hashtag. And let's go down to web design, right click, advanced, web design. And while we're here, let's go change contact as well. So right-click advanced and contact, and let's just click update. Now, if I were to click on any of these, boom, takes me down. They're all working. Let's change our titles. I don't want this to save videos anymore. I'm going to double-click that and I'm going to save Films. I have this set to where it only shows two videos. What I did to get these videos is go to that little Rubik's Cube symbol, and then it is just the video widget and then you just drag them in here.But I've already got two set in here. Let's say you wanted four. What you'd want to do is have two columns, the way that we have it, and these columns have widgets inside of them. There's the main section, a column, and then a widget, is this one. If I wanted, I could right-click and duplicate that. It'll now create one below and I could do the same over here. Now I've got four and my page automatically opens up to create that space. But I want to leave just two, so I'm going to delete these. I just want to show you how to do that. I'm going to change. Just first before we change these videos, I'm going to change this button. I'm going to click on that or right-click. Then I want to make sure that I've got the right link in here. Right now it's got the link to my YouTube channel. If I were to click on that it will open up in a new window. It goes to my Travel Channel. Like I said, I like to make videos and I like to travel, so I just put them together and made this other YouTube channel, doesn't have a lot of subscribers but now if you want to subscribe to it, go right ahead. Let's go back and make sure that link is changed.Then if we want to change these videos, just right-click "Edit video" and then put in a new URL. I'm going to delete the automatic one that they have in there for me.I'm going go back to my YouTube channel and I'm just going to grab a video.This Peru one is my most popular. I'll click on that and I'll grab the URL at the top. Let's just go back and put that in and then we go. It's got my video in there. You can change a bunch of the settings here. You can make it auto-play. You can get rid of the player controls, you can make it loop, and so on. The video size will depend on the space that it's in. Let's say I had just one column instead of two, and this space was twice as big. It came down around here. This video would look twice as big. It is responsive to fit into certain spaces. Just keep that in mind. Let's change this one. Let's right-click on the little pen, "Edit video." Let's delete that and let's go grab another video. I'll do my Nicaragua video. There we go. URL, copy and let's put that in. Awesome. Moving on, photos, same thing. You can edit this the same way. If we want to change these photos. You can see now we've got one great big column and the reason is because this is actually a gallery. Instead of clicking on an individual picture, I have this setup as a gallery which is its own widget. If we click on "Edit image gallery", we can edit the whole widget and we've got four different images in here. The reason I haven't set up this way is because if you click on one, it will pull up in this little light box thing. It'll make the rest of your website darker. You can click on the arrows and scroll through images, which is really cool. Let's go and edit those. Let's go back. "Edit image gallery." Lets clear these images. It'll say, "Reset Gallery."We'll just say, "Delete." We'll go to "Add images." Then we'll go to, "Upload images" "Select files." Let's grab Machu Picchu, we'll grab the cathedral, the desert, and the waterfall. This are actually all images that I took on my travels. You all get to have those.Please don't resell them. If you do at least give me a cut of the money. Make sure those are all selected. All four of them are selected. Let's do "Create a new gallery." Then you can select which image you want first. I'll just show you can change these around. Let's do Machu Picchu first. Let's go to inside gallery. There we go. Now we've got all four images in here. Now if you notice, What the heck, why is this one bigger than the other? It's thrown off the whole look. That doesn't look good. Let's fix that. If you go back to "Add images" and then let's go to "Edit gallery". Let's click on this waterfall image. That was the one that was bigger. Actually, click on one of these so you can see the size is 1920 by 1080, and the waterfall is 2048 by 1365. Let's change that. Let's go to "Edit Image". We're going to go to "Aspect ratio" and we're going to change that to 1920 by 1080. Then what we're going to do is just drag. You're just going to click anywhere in here and drag that up. Now that's got that perfect 1920 aspect ratio and then just select the corner and drag that so it's full-width and just make sure it's positioned where you want it. I'll just say something like that. Then click on the little Crop Image tool again. Now we've just cropped our image. Let's hit "Save". There's a few clicks to actually do that. It was confusing the first time I did it, so make sure you do all of those steps. Now let's just do "Insert gallery" and now that image is fixed. So now it looks nice and clean. Again, if we click on these, we can just go through all of them. Cool. Moving on, next section, "Website design". Make sure you change this button. I have this one set is blue. It's just going to my contacts. I did get a copy. Let's say, somebody wanted me to make their website, I would just want that to jump all the way down to my contact page. Again, I'll show you how to do a contact form. Make sure you edit that and if we want to, so you can see these are all individual ones. These are all icon boxes. If I go to the little Rubik's cube and I originally dragged in and icon box and what I did was instead of having, being up and down like this, I did eye composition and I did left and that's how I made it look like that. You can also do right if you want to put it on the right side of the screen. But let's just delete that. I just wanted to show you how I made that. I can also create links to all these. Right now I just have these as symbols just to show you what I do and all these. I can write a little description. But if I wanted, I could actually make them link to different sections by putting a link in here. Then over in this column is just where I have examples of some other websites I've made which if you guys are some of my following, that's been following me for a little while, these are actually old tutorials that I did. You can change those as well just by clicking in there and then doing "Choose Image" and putting in your own images. I actually already forgot, I did not change the backgrounds here, so let's go back to the "Film section" and do "Edit section", go to the "Style tab". Let's just change that background. Delete that one. Let's do a mountain photo. Want to mix it up a little bit and also have that set to Fix, which is our parallax. Let's go down to the photo section, change that background to go to style, get rid of sample goat. Then just select the desert and do "Insert media". Then we'll go down to "Website design" and then we'll do "Edit section". Change this one to let's go to "Upload files", select files and let's do the Space one. Click "Open", "Insert media" and now we've got our space, which is cool. Then lastly, let's do contact, "Edit section", sample goat and let's upload our last one. What did we not selected yet? The dunes. Let's do that. Then click on "Insert media". There we go. Before we move on to putting in our contact form, I just want to show you if you want to change the colors of all of these different little title sections, just right-click, go to "Style" and then go to "Color". I have this set as a very dark gray. Full black is something you don't want to put on your websites. Full black, just doesn't look quite as professional as a dark gray, so a lot of companies will do dark gray. Again, with a white, you could do either a full white or you could do an off light gray and then you could change your title to black. That's just had to change those colors of those sections. Again, if I want to do something really dark, I just do 1_c, 1_c, 1_c. This is just a very dark gray. 6. Step #5: Set Up Your Contact Form: Step number 5 is to set up our Contact Form. To get our contact form, let us just update this and then we are going to go to this little hamburger symbol and then go to Exit to Dashboard. Then go down to Plugins and then go to Add new and then we will just go to Search plugins and we will type in Contact Form 7 elementor and then if we go down, you will see the Contact Form 7 widget for elementor page builder. That is the one that we want, so just click Install now and then click Activate. Now that one is activated, we are going to go back to Add new, and we are going to get the Contact Form 7 plugin. One was just the widget for elementor and the other is the actual Contact Form plugin so do Install Now on the Contact Form 7 plugin and then activate.Okay cool. Now that that is done, just go over to this left hand side and you will see the contact section. Just click on Contact Form and then you will see we have Contact Forms 1, which is fine so just click on that and you can change the name if you want so I will just call this Dale's Contact Form and what we are going to do is go to the Mail tab and then from here you can change the e-mail address that you wanted to go to. Right now it is going to my creative Pro website Gmail so this should automatically put your e-mail in. But if it doesn't, go ahead and put your e-mail in and then go up to the Messages tab and from here you can change what all of the messages say so whenever they send one successfully, it will say, "Thank you for your message has been sent." I don't know. It has been sent sounds like Dwight shrewd from the office. It is a little too formal, so let us just make it a little more fun. Let us say, "Your message was received" Exclamation point. Wow, I do not know how to spell. There we go. Your message was received cool, and failed to send. There was an error trying to send your message. Please try again. We don't want them to try again later, I will just get into Please try again. so you can pretty much just edit all of these however you want. Once you do that, now let us go over to save and let us actually go in and add that to our page. Let us go up to Our name and then go to Visit Site and then we will go to Edit with elementor. Now let us go all the way down to the bottom again and this is where we are going to add it. So If you go over to your widgets over here and you scroll all the way to the bottom. You should now see the Void Contact Form 7 and just drag that in and then it will say select Contact Form and we will just select Dale's Contact Form or whatever your Contact Form was. Cool. It just added it and it is transparent so I can't want to fix that. I wanted to have white backgrounds here in these lines. What we are going to do is go over to Style Contact Form and then you are going to see all of these little sections where you can put in some short code. But we going to ignore all of these except for the text area, CSS, and the Input type text. From here you can see it's got this little suggestion. It says Background is red, it saying that that is what you can put into change the color of the background. If you just follow what it says, it is pretty simple so just type background, colon, and let us just say white and then boom, our background is white, which is cool. I'm just going to copy that and I'm going to paste that in this one as well, which is the text area, which is also where you put your message. There it goes, it is all white. That really wasn't any coding wasn't too scary. So let us click on Update so we want to make sure that we are saving once and a while and if you would like to change the color of the button, we can do that in here as well. If you just scroll down and you go to Submit button, you can also change that background color as well so we will just change that real quick so I can show you so we will do background. Let us just say red, it will change to red. You can do blue and it doesn't get dark blue. I'm going to do light blue and it will stay as light blue. The light blue is the default and then you can also do the button hover as well, which is just under here. But again, I'm going to leave it the way that it is. Now we can go over here and you can just right-click on this widget, which is your icon list and you can edit your phone number and your e-mail and your address. This icon list you can change all of the symbols so you can change your phone number and then you can change it to whatever symbol you want some, maybe you want the form with the square in it, and so on. Works like all the other icons and you can change their color by going to Style and then going to Icon. But I'm going to leave them the way that they are and then the map, if we edit Google Maps, we can put in any address so I just put in Silicon Valley, don't actually live there and never even been there. Just sounds techie, so that is why I threw that in there. But you can put in your business address or if you don't even want this thing, you can just delete it altogether. Aside from the header and the footer, this website is looking fantastic. Pretty much everything is working correctly. All the buttons are hooked up. We have set our anchors so that when we need to, we can just click on something and it will bring us to where we need to go. 7. Step #6: Add Your Header and Footer: So now we can move on to step number six, which is add your header, and your footer. All right, so let's go on over to update, and what we're going to do is, go over to the little hamburger icon and go to, exit to dashboard. Actually, let's go back, go to visit site. Sorry about that, and we're going to go over to Customize. Cool, so here's your header it's super blank and boring right now. So let's change that. So, Let's go over to the top bar first, and go to General, and let's just uncheck, enable to bar, that's that little bar on top of the header, says, "Place your content here." We want to get rid of that, so that's gone, and go back, and then let's go over to Header, and then we'll just go over to General, and then you can change the style of your header. So if you want, you could do a transparent header, which I think I'm going to go for. So now you can see that that's gone, it's fully transparent, and what you can do if you want is you can go down to the bottom where it says, transparent header settings and select background color, and then just scroll down and just pick any random color let's just say black, which I'm not actually going to pick but if you go to the little opacity slider here, it says a 100, you can slide that all the way over, and you can now change the transparency, which is really cool, but I'm going to clear this, I just want to leave it at the default full transparency. So now what we're going to do is change my name here. So, a lot of people put a logo here if they have a company. What I'm going to actually do is put a signature here but if you have a logo that you have for your own personal brand, I'll show you how to put it here too. It all works the same way, but I'm going to show you how to make a signature and put that in. So to do this, just go up to a new tab and type in Sketch.io, and hit enter, and then just select English, or whatever language that you speak. So, You'll be brought to a page that looks something like this, and normally you could just draw on here with a black pen and get a signature, but we want our signature to come out white. So what I'm going to do first, is go over to this little layers panel here, and I'm just going to delete that Background, so I'm going to select these three little dots and I'm going to say delete. So that is gone. Now what we want to do is see what we're doing. If we write white on this, we'll be able to see it, but it won't be that clear. So we're going to go over to this little plus sign it says New, and let's just add a blueprint background, but we're going to end up deleting it, don't worry. So now just go up to the tools button up here at the very very top left, and just stick with the calligraphy pen, and it's already in white, if it's in black, you can just select it and change it to white. So, just keep the default pen and just draw your signature. I'm just going to do a rough signature here, you might have to do it a few times. That's not the best, but we'll keep it. All right, so now what we are going to do is go over to the layers panel again, and I'm just going to delete that background again. I just wanted it there so I can see what I was doing. So, just delete, and then now that that's done, I'm going to go over to the little export icon, kind of looks like a floppy disk, your standard save symbol, and we want to save as a PNG. The reason we want to PNG is going to have this transparent background. So, if you have a JPEG for instance, that same symbol will end up coming out with a white background, so what's going to happen is we're just going to have this big white block, that looks like nothing. So a PNG, with no background on it is going to be our best bet. So just click Save PNG, and then that'll go to your Downloads folder, and what I also want to do is get a black version of my initials, and I will show you why in just a second. So, first let's go over to the layers, and let's just delete, all of these layers that I made for my signature, and let's go back to the tools, and let's change our outline to black, and if I want, I can bring the size up a little bit, make it nice and thick, and I'm just going to create a DM, for Dale McManus, just like that, and now go to export again and then save as PNG. Cool. So now we can exit out of this, and we're going to go back from General, and we're going to go to Logo, and then we're going to go to Select logo, and we're going to go to Upload Files and then Select Files, and then just go to your downloads, and then just select, your signature, click Open, all right, there it is, and then click Select, and it'll ask you if you want to crop, we can't actually see it. There was a little bit of space on mine, so I'll just drag this in a little bit but if you want, you can also just hit the skip cropping button, but I'm just going to crop that little bit of end off there, so now you can see we've got a signature, and there it is. It's huge. So we're going to bring that down. So, Let's just go to Max Width, and let's just bring that to say,188, somewhere around there, maybe 180, if you want to be right on point. Awesome. So, Now if you want to add a symbol up here where this little page icon is, this is called a favicon or a site identity. So I'll show you how to add that really quick, so let's go back, and then go back one more time, and then go to Site Identity, and then here is where you can put in that image. So we can just go down to Select image, and then I will go to Upload Files, Select Files, and then I will get my black initials, and then hit Select, and then we'll ask you to crop, and if you want, you can drag this down. So I will do something like that, and then hit Crop Image, and then, there is my initials way at the top there. So that's cool, and while we're here, we also want to change our site title and our tagline. So right now if we hover over this, it'll say, " Dale McManus - Just another Wordpress website ", that's boring. We want it to say," Dane McManus." And we can put, Videographer.photographer.web developer. So now if we click on Publish, that will change. So let's go back, and if you want to see what this looks like fully, you can just go down to Hide Controls, and that's what it'll look like, let's cancel out these downloads. I love the transparent header, but it's missing something. What we need is a menu because we need buttons up here at the top right, where we can click on them and jump to different parts of our website. So what we're going to do is go back to this little arrow to open up our customizer, and then just hit the back arrow, back arrow again, and then we're going to go to Menus. Then we're going to create a new menu. Let's click on that and we'll just call it Primary Menu and then it'll say where do you want this menu to appear? We disable the Top Bar, which we don't want. We want the Main. Just check on Main and then scroll down and hit the "Next Button". Now let's add some items to that menu. Click on the "Add Items" button, and let's add some custom links. If you had different pages, let's say, you had a separate page for contact that had a contact form on it, you would find your pages here in this drop-down. Which it automatically reverts to. But I'm going to close that and I'm just going to do a Custom Link and from here, I'm going to put in a hashtag films. Because remember I had that anchor on my videos section that was called films. We want to jump to that. I want the text to say films and I'll add that to menu and let's do another one. That is photos and we'll do hashtag photos. Oops, I forgot the hashtag and the p. Add to Menu and then we'll do, what else do we have? Web design. We'll do hashtag web design and then we'll just say web design, Add to Menu and then we'll also do contact and then we'll do link text is contact, and then Add to Menu and actually, let's do an about me while we're up here too. Lets just do hashtag about. We'll call it About Me and we'll actually have to go back and create that anchor for that section. We can't forget that. Just do Add to menu. Cool. Now, if you click in this area, you can see we've got these new buttons up here, which is cool. If you click on "Films", boom, jumps down to Films. Works perfectly. Now, if you want to change the look of these buttons, I'll show you how to do that. Just go back and then go back one more time and then we're actually going to go down to Header. Instead of the Menu section, we're going to be in Header, and then we're going to go to Menu, which is within the Header section. A little confusing. But let's go down and let's do the colors. Link Color, we can change that. Let's say, I'll make it a purple just so you can see what I'm talking about. Now, the actual text has changed to purple. You can select any color that you want. Let's say, a white. Personally I don't think white stands out very well. I actually liked the default. I'm going to leave it at default. But you can also change the Link Cover Color. Let's say, I wanted it as more of an orange. I'll select that and let's just do color a reddish-orange. There we go, which is pretty cool. Matches my background a little bit. I'm going to leave that. But now that that's done, I'm going to click on "Publish" so that we can save our work and let's go slap in our Footer. If we go all the way down, it just ends and it just says this whole OceanWP theme by Nick. We're going to get rid of that. Let's go back and we'll go back again and then just go down to Footer Bottom and then what we're going to do is just uncheck enabled Footer Bottom. We're just going to get rid of that whole thing all together and there we go. Go back and then we're going to go to Footer Widgets and this is where we're going to add our template that I gave you. If you go to Select Template, you'll see there's nothing there. What the heck? Where's our template? We imported it. Well, you need to add it to the My Library version of the Theme Panel. Little confusing. I'll show you what I'm talking about. Just click "Publish" if you haven't already, and then click the "X" and then go back to the Dashboard and then you'll see this little wheel that says Theme Panel and if you did not install Ocean Extra in the beginning like we did, then you won't see this. Make sure that that's installed and then go to My Library, then just go to Add New. We're just going to call this Footer, then go to Template and we're just going to do Elementor Full Width, just like we did the first time. Then click "Publish", then we're going to go to Edit With Elementor. What we're doing is just building a separate page just for our Footer. Then we're going to put that on our main page. First, just go over to this little folder and we already imported that template earlier. We can just go up to My Templates and then you'll see the Footer that we put in earlier. Just click "Insert" and say "Yes" we want to put in all the documents settings, and boom, there's our Footer. If it changes back to this boxy layout, again, just go to Page Layout and then go to Elementor Full Width. Then click on "Update". Now, that it's full width, we can edit this the way that we want it. What we can do is just click on this little button here and change this to your name if you want. It set to mine. You can change these buttons as well. If we go to this widget, right-click "Edit Social Icons". You can change those to yours. I currently have them as my YouTube, and Facebook, and Instagram. Then before we leave, this back to top button, let's just click "Edit" button. As you can see, I've got hashtag top. This will be a jump button that'll go all the way back to the top. Let's go back to our main site and add in this Footer. Let's click on "Update" and then up to this little hamburger, and then click "Exit to Dashboard." Then let's go back to our main site again. Click on "Customize", then let's just scroll all the way to the bottom again so that we can see our Footer. Let's go back to Footer Widgets and then go to Select Template again and you should see it there and just click on "Footer". Now, our Footer is in there, but it looks a little funky. Let's fix it. First and foremost, our padding, let's just make sure that that is set to zero all the way around. That'll tighten things up a bit. Then to get rid of this spot on the side, let's just click on the "Add Container" to get rid of the invisible container around it. Now it is a full width footer. Now we can test all these links if we want. Let's make sure that this button works, which it does. If you did not delete this main section up here to create your own, I already had it with a class ID called Top. I'll show you what I mean. Let's just open this up and I'll click "Publish", save our work and we'll hit the "X". We'll go to Edit With Elementor. What we can do is right click in this section, go to Edit Section, Advanced tab at the top and you can see Class ID says "top". Whenever we hit our button at the bottom and our Footer, it'll jump to the top. As long as you didn't delete that, it should already be that way. 8. Step #7: Edit For Mobile: Now, step seven is to edit for mobile. So 52% of global online traffic comes from a mobile device, so more people are on the Internet on their phones than they are on desktops, a little bit more. So it's really, really important that we edit this site for mobile as well. We want it to be responsive for phones and tablet. So what we're going to do is open this back up, and we're just going to make sure that everything is looking good on mobile. So just go down to this little Desktop Computer symbol and then click Mobile. So now we can look at it, we can scroll all the way down. This is looking pretty good. If you wanted to make this text smaller, you can. So you can just click on that, and then if you go to Style, go to Typography. So you can see these little symbols. If you're on Desktop mode, this will be a different setting than what is on mobile. So if you wanted, you can change that to whatever you'd like. Let's just put it at a 50. So whatever you do on one setting will not be changed on another. So let's keep scrolling down and make sure that everything is looking good. Ignore this little box here, nobody can actually see that. And this is looking pretty good. So our button's a little off here. If we wanted, we can click on that and then change the alignment to left, so it's kind of in-line. Cool. So let's keep going down, make sure that everything looks good, which it does. Looking good, looking good. Nothing looks funky. If you wanted, if something looks kind of funky, maybe it's too wide, it's taking up too much space, what you can do is just right-click on that section, go to Advanced and just give it some padding. So this will kind of cushion things in a little bit, like that. So I gave it an overall 15 on the top and bottom. Let's say I want some extra space here, I can uncheck this little link, and under the top, I can give it, let's say more of like a 30. I'll give the bottom a 30, so that gives a little bit more room on the top and the bottom. So that's how that works in case you need to fix something. So let's keep going down. Everything's looking good. Awesome. So now let's make sure that everything looks good on tablet. So go to Tablet. So let's just double check it. Everything is looking pretty good. Honestly, I think everything's looking fine. So let's go back to Desktop. And before I forget, let's go back up to the About Me section and let's make sure that we right-click, Edit section, go to Advanced and then go to Class ID, and we'll say, "about", because we wanted that button at the top, so click Update. We wanted that button at the top to go to our About page. So let's go make sure it works. Make sure you click on Update and then go down to Preview Changes, and now we're at our site. So if we click on About Me, it goes to our About Me section, which is great. 9. Step #8: Publish Your Website!: Hi guys. So, last but not least, step number eight is to publish your website. Let's go back to the dashboard, and then from here at the top you will see your site is currently displaying a coming soon page. Once you're ready to launch, click here. Let's just go ahead and click here. So that was how to create a personal website. I really hope you guys enjoyed this class. If you want more free, and awesome website tips and tutorials, then please follow me on skill share and checkout my teacher page for more classes. Also, ratings and reviews go a long way for me as an instructor. But if you choose not to leave one, that's totally okay. Thank you for watching create a pro website and I will see you guys on the next video.