- [Instructor] The next thing I'd like to add to the Pixelford website is a portfolio. A portfolio usually consists of a top level page that has sort of a list of the types of projects that you might be looking at, and those link to subpages, which will contain more information. Usually that's the way a portfolio is set up. There's a lot of ways to build portfolios in WIX. You can build them, the way I'm going to do this is with separate webpages. I'm going to walk you through how to do that. There's also some apps that are available for WIX that you could install and use those to build your portfolio, and so that's another option you might want to explore. By now, you should know how to start this process. Of course, we're going to start by making our page, so we'll come over here to Menus & Pages, add our page. As always, you can use one of these layouts if you want. You'll notice there isn't a topic over here called portfolios specifically, but projects might be a good fit as to what you want to do with your portfolio. Services might be another option, even about might have a layout here that you like depending on what it is you want to do with your portfolio. I have gone through these. I'm not a fan of any of these for what I want to do, so I am going to choose a blank page. I'm going to call this Portfolio, and say Done. And this is going to put my portfolio link at the end of all of the links that I've created so far. And in fact, all these links are just in the order of the pages that I created. You can rearrange these, of course. Simply drag and drop your page where you'd like it to appear. So I'd like to go home and then to the portfolio. And I'm going to move about down here after contact or before contact, and that will just sort of group together that about and contact information there towards the end of our navigation bar. So I'm going to click on Portfolio to go back there and then close out of my window. And this will get me started. So now I can add to this site section if I want to add a section for my portfolio or add elements. I'm actually going to start with elements over here. There are lots of possibilities that you might choose from if you were setting up a page that's kind of a landing page that's going to send you in different directions. That's really what we're trying to do here. We want to show the options, and then those options will be clickable and send us to different parts of the website. So with that in mind, we might consider doing a strip of some kind. Remember some of these strips, particularly down here under services and such, those might have a layout that you might want to work with, or there are gallery options here, depending on the kind of portfolio that you're building and how many options you have. It might make sense to do a sort of a gallery layout here, there's a lot of those choices to choose from. I'm actually going to go down here to list. And if you think about it, what we have is a list of things that you can choose from. These are the different types of photography that Pixelford has to offer. And there's some number of these. So we can look at the various types of layouts that we have here for this. They could be numbers, they could have little insets with text, they might have icons associated with them, and so forth. So you just kind of have to find one that you like. And of course then there's some blank ones down here that are that wire framing sort of option that you can spice up with your own pictures and colors, and such. I'm actually going to choose this last one here that's a series of round images with these buttons just to show you how you can make this work. So I'll just click on that and it will show up here inside of my webpage. So what we have now is clearly the wrong pictures, and some buttons that are here. And this is in what's called a repeater for WIX. And the idea behind a repeater is that the layout for one will affect the layout for all of these, which is good. We actually want them to all look the same. So to set this up, let's just start working on the first one here. We can swap this out for a different picture. Notice that we have a couple of options here. There's a regular state, that's what this is going to look like on the page, and then when we hover over it, something will change. Notice that that picture diameter shrunk just slightly. So as we hover on these, the picture is going to shrink just a little bit. That of course is something that you can change if you want or you can turn off all together. But that's why you have two tabs up here on the top. So let's start by swapping out our image. If you select the image, we're going to click Change Image, and we'll have more images that we need to upload, so we'll click on our Upload Media, Upload From Computer, and we're going to go to Folder 03_01 in our Exercise Files folder and select these four images. And we can put these inside of a folder if we want or we can leave them out unfiled this way. If you wanted to put them into a folder, there is an option for doing so. There's an icon up here where you can create a folder, and you can drag and drop your images if you're starting to get overwhelmed by having too many images that are here on the page. So I'm going to start here with my engagement photo, and I'll select that and I'll say Choose Image, and that'll swap out my engagement image right here. And so, then I can click on my settings. I will come back to this in a little while to set up the link, but of course this is where I would set up a link to a page of engagement photos, and it'll ask me for what's in the image, man and woman drawing a heart in the sand on the beach. Click for engagements. And so that's what that's going to be. Our button is going to say engagements. So if you double click on the button, we can type that in, engagements. And again, we'll come back to this to set up our link later once we have the Engagements page created. We can make this button a little bit bigger. Once again, notice that all of the buttons are getting bigger as we pull the button to make it larger, and then recenter these just by dragging around. And then the last thing is we have these words, like VR headsets here. I don't think there's really anything to say about this beyond what we have here. So I am going to click on that text and simply delete it. And then I'm going to pull my images down just a little bit. I can grab my button, double click on that button, and I'm going to pull that up a little bit just to get rid of some of that extra space in between the picture and the button. And the shape of that repeater is what I want now. Now I can go through and I can drop in the pictures for the remaining items here and change the buttons accordingly. So let's do that real quick. We'll click on our button, we'll change the image. This next one is going to be fashion. Click on the gear. And just to keep this short, I'm just going to say fashion, click on our button, and the text we'll type in here is fashion. Once again, just double click on that button to get to this box. Then we'll go to our next one. We'll select our image and change that image. We're going to choose family. We'll change our button to say family, and of course, change our gear to also say family. And then finally, we'll do our last one. Change the image here. This one is going to be travel. And click the gear. Travel. Click the button, double click the button, have it say travel. Okay, great. The other thing you might notice is that this is not our colors. So it's a lovely dark blue but it's not in the Pixelford color palette. So this is another thing we can change. If you click the button to select it and we go to Design, we can choose a different design for the button. Of course, there are bewildering variety of types of buttons here that are already pre-designed for you and so forth. So if you find one of these, you can just sort of mouse over them and try them all out. Or we can just go to Customized Design, and as always, I tend to just kind of go the lower key route here. I'm just going to change my fill to the purple that we have been using, and that will change all of our buttons. And then the last thing that we might want to do, we can always change our section background. So click outside of this, change our section background. Maybe we want a light gray color here. I kind of like that light blue gray, so we'll do that. And as soon as we put that in place, notice that we actually have some white boxes around each of these items, kind of like a card. And if you like that effect, you certainly could keep it. We can go through and change these now. So if we select our first item here, you'll notice that we have a button at the top that says Change Background. If we click that, we can then change our color, and we can make that background any color we want. So if you wanted to change it, you like the idea of a different background, but you want a different color, you can certainly do that. Or if you just change it to the same background as the section color, then that box goes away. So that is what I'm going to do. And oddly, you'll have to do this for each one of these particular cards. I'm not sure why they don't all change together as they normally do with a repeater, but that's just what we're going to have to do. So we just go through and change the backgrounds. All right, so we have most of a portfolio page here now. The last thing I want to do is add a title to this page. So I'm going to make my section just a little bit bigger by grabbing this little arrow here. I'm going to grab my repeater. I'm just going to pull that down a little bit to make a little bit of room up there on the top. And then I'll add a text element, and this will be a Heading 1, drag and drop. We try to center it here on the page, sort of, we'll type in the word Portfolio in uppercase letters, and then make the box a little bit bigger to accommodate all those letters. Here we go, and we can center that. Great, so once it looks more or less reasonable like this, as always, then the next thing to do is to view this in a preview mode. So let's go to Preview Mode. Here's how this looks on desktop. Looks great. Let's go to mobile. Double check that. And we may want to make a few tweaks here. So the image with the buttons, that looks great here on the page, we may want to move this word Portfolio. So let's go back to the editor and let's grab the word Portfolio. And remember, the changes that we make here are only on mobile. They don't show up on desktop. So I'm going to reduce the size of my box, and then I'm just going to drag this around a little bit until I get it kind of lined up where I want it. You can always double click on it. You can make it a little bit bigger if you want it a little bit bigger. And if it gets too big, such that it does just what it did here, which is wrap onto another line, then you just adjust the size of the text box and recenter it. There, that looks a little bit better for mobile. We can always double check it in preview, make sure that it's looking good there as well. And it does. So we are in great shape. We now have our top level portfolio page and we are ready to take a look at this for our portfolio subpages.