Freelancer — 520 | Site build | Team page

The design team, the people doing the work at Hayes Valley Interior Design. Not only is it important to give people an idea of who they might be working with but these designers bring a ton of reputability to the Hayes Valley brand. People might be searching for Rebecca or her colleagues online, and seeing that team learning about the people behind the work, that can help users feel more confident in picking this particular firm. We’ll cover this part similarly to how we build out the portfolio. We’ll use a lot of the same techniques to save us a ton of time. We'll do the hero section. Then we'll work on the CMS, we’ll add some content, we’ll import the rest, then magic. Link everything up so the team members generate themselves. Hey Siri, add a reminder to write a short story about an AI driven design team that automatically. Okay we'll do our hero section first. We're on the home page right now. So let's go to the pages panel and add a new page. This will be ‘our design team’, enter, and this is where we can place our hero section. We’ll drag in a section we’ll use an existing class. We have called it hero section again, the more we do this the more we're saving time because we've created a lot of these classes before. For hero section we can add portfolio and then just duplicate that class, call it ‘team’ and instead of a photo and a gradient, let's do something a little bit different here. We're still using the same height, the same basic size styling, the same layout, but let's delete all of these instead of using an image or a gradient. Let's try a solid color. For now let's try black, but we can change this and make it more interesting and just a moment. Before we continue from our hero section, before we add the elements, let's add two symbols. Of course our nav bar, which goes right in the body on the top, and then let's add our second symbol, we’ll go down and grab the footer that will go underneath everything else. Okay now for our hero section, we have two pieces of content. Let's check our content strategy notes. We have our heading or H1. This is meet the design team. Let's drag in a heading. This is an H1. It says ‘meet the design team’. Maybe meet our design team and we'll use a class we've already created, major heading, and then we have a combo class which is darker. That's not correct. We have a combo class which is secondary, and then we'll add a paragraph underneath that. We’ll put the paragraph right underneath the heading and it will say whatever we paste in. Command V or Control V on PC, That's it. Now remember on each of the other sections the paragraph here. We set some constraints by applying a specific paragraph style. It was hero paragraph. That looks pretty good. Okay. So this looks maybe a little intense with all this black. This color is quite heavy. We could try some other colors we could pull that, that's okay. We could also use our eye dropper tool and pull something else from their logo. Maybe this purple color. We'll go with that for right now, but we might want to change it a little bit later and maybe when we get design notes from Rebecca. That leads us from the hero section to the CMS. Now, we want to create a team members collection. So to do that we'll go and create another collection. We’ll call this one team members and we can add fields for each of these. We want name. We want title. We already have name, so let's add a field for title. This can also be plain text, call it ‘title’. Let's save that field and another one. We also want team member since, cancel that, got to select the field first. We want a plain text ‘team member since’, say field, let's create bio for the biography. It helps to have rich text, that way later if we want to include links inside that biography, if you want to include photos in their longer biography we can do that at another time. So let's add rich text, we’ll call it bio. We can hit enter this time, add field. This is the final field and this is going to be an image field. This will be for the head shot. The main image that, the main image, the main image, the photo of the particular person. Let's do image, and that's it. That's our basic structure for the CMS. Let's hit create collection and move on to the content. To add content we're just going to press new team member and we’ll do Rebecca's name first. ‘Rebecca Tilden’, president team member since 2009, and for her biography, let's reference that spreadsheet of information. This is another spreadsheet. We're just switching over to. This is a spreadsheet in Google Sheets that we've organized based on the information Rebecca gave us. This is each person's name, their title team member, since their biography is has been already formatted in HTML, but really just put text here if we wanted. Let's copy the bio to the clipboard, move back over and paste, finally we have this image field. This is where we're going to choose the specific headshot, the specific photo of the team member and go into team images and we'll pick Rebecca Tilden and that's it. We can go in and press create but that's adding our first piece of content. The rest we’re just going to import and if we go over to our CSV, or if we go over to a spreadsheet now and try to save a CSV, Rebecca will be exported along with the rest. We don't want to do that. The reason is ,we've already added Rebecca. So in this we can delete the row and export the CSV this way we'll go to download as comma-separated values and once we've done that we can import it right into the CMS and go up to import and drag the CSV dragging, it from off screen here right inside. This is the header row. That's correct. So let's hit continue and we'll make sure to link each of these up. We’ll map to the existing field we created when we used the sample, when we used Rebecca, her name. Then we'll go over to map to existing field for the second one. This is obviously title, team member since obviously map to team member since, biography will map to that rich text field we created for bio, and image will map the image here to the correct field, and we can preview this displaying each item right here. We can preview and see what each person's name. Here's what Callie looks like. Here's what Adina looks like and as we scroll through, as we click through each of these examples, we're getting a preview of the content we're importing. Let's press import five team members and that's it. Sit close, and we have all 6 members all 6 members we want to feature listed in the CMS, right inside our team members collection and that moves us to magic. This is the last portion. This is where we take all that information. We brought in and build out our design inside the page. So our design team were here right now. Let's first reference before we build let's reference how we did portfolio. So with portfolio we had this client projects grid, we could call this default grid. It's not very descriptive but it's a little less specific so we can use it on multiple pages. Then when we pull in our design team, when we pull in that collection list, we can just drag it in between the hero section in the footer, we’ll let go there and we'll link it right up to team members instantly we can see all our team members are listed. There's an entry for each team member that we imported. Okay. So let's close out of this we’ll open up that collection list wrapper so we can access the collection list itself. Let's choose display grid or we can just go in and use default grid.

When we applied that class, we're getting all that styling we did on the other grid inside of portfolio, but it's applying that same styling to this grid for team members. So let's build it out that way. Let's add an image for each person just to control the size. Let's use a div block again and this div block we can say is ‘team member image’ and we'll set a background, we’ll add a background image to this. Choose image. That's not going to work. In fact, we want to pull our background image from element settings instead get background image from image. That's each person, their tiled a little oddly right now. That's all right, we could go in and since we already added that example bg.PNG, since we just hit add image before you can go in and set it to cover. Let's set this one to center now. It's everyone's teeth and nose. Let's adjust our design, go in and add a height maybe, 350 pixels. It looks pretty good and underneath we're going to want to put their name.

This will be H2s so we can drag into any one of these, we can drag a heading. Now, be careful here, because if we just let go above team member image that heading is going to be inside that team member image. We want it inside the collection item, but we want it underneath the team member image. So we'll just move that right up. So let's select any of these make it an H2. And since we're in collection items making a change to one thing inside one collection item affects all the collection items. So these have all been turned to H2s. Let's take heading two, go in and apply that heading style. We have that secondary heading style. That looks pretty good. We did create a combo class which was less space, but we don't need to use that. Let's remove that combo class just undo and with any of these headings selected we can go in press the cog here and get that text we can get the text from the name, the name field. So we see Thomas we see Adina, we see each person's name right underneath their photograph. The other thing we want to use on this page is the text block, we want to pull in text to show with their title, right underneath their name. We’ll drag a text field in, we’ll get the text from their title so we can see it says Adina Katal and it's Junior designer. Let's grab that heading and see what happens if we use less space, we created that combo class before. Nope, not great. In fact, we might want to create a combo class which says ‘less bottom margin’. There are many more efficient ways to name classes here. We're moving fairly rapidly and we can clean up naming a little bit later. Let's grab margin bottom and set that to zero. That looks okay. We might want 5 pixels, somewhere in between, that looks pretty good. Now for this text block, there are different types of styles we could use we could build on something we've used before. So if we go to portfolio, we had this style right here this rich text block this style had already been changed to 14 so we could apply rich text block to that but we might want control over exactly how each of these is listed. So it might make sense to create a new class for this. Let's call it ‘team member title’ and we can control a few things here. Maybe all caps, little bit smaller, and some letter spacing. We could go bolder. Decrease that size a little more. That's not at all accessible. In fact these changes easily undone holding down option and removing those changes so we can get ourselves back to a good starting point. Might actually want to go with Playfair for this one as well.

Now what if we want when we click on each of these team members, to go to the specific team member page? Well, that's exactly what we want. So let's build that functionality and to do that, we'll use a link block, a link block is just a div lock that links somewhere. We'll put that right inside the collection item, and from there, we'll drag in team member image, we can put that inside link block again. If we grab anything we can just pull it to the right that will Nest the content inside. Now the styling is changed on all of these and that's for a specific reason. We never told team member image to be a particular width and it's basing that width on other content inside. So Adina's name here. That's exactly as wide as her photograph is being adjusted. Same with Thomas McCormick. Each div block here is being sized based on these secondary headings because they're the widest piece of content inside. So we could override this if we go back to our portfolio section we can go in and see how we styled these link blocks. If we click that, turns out we have a class called link block. Let's try using that on our design team. Go in, we’ll select the link block, let’s drill down into our default grid, select our link block and apply that class of link block.

That's better. Okay. So because we made that change before inside the other collection list. It's automatically removed the underlying, it's removed that blue text. It looks a lot better here. Okay, so our link block, where will it take you? Let's press the cog and we'll pull that, we’ll pull that link from the current team member. That means upon clicking Thomas McCormick, it'll take you to Thomas McCormick's page, same with Adina, same with Callie, same with everyone else. Now. How do we want to sort this information with our collection item or default grid right here selected. This is our collection list, we’ll go to element settings and we'll choose a sort order. We can sort not by title, not by name, not by any of these dates or times. We could do it with team members sins and Z to A, if we do that and hit save, it'll show us because we're using a text field, the newest team members first, they joined later. So that number is higher. Z to A is the same thing as nine down to zero. It's reverse numerical order. So if we want a numerical order we could just switch this a A to Z. This will show the earliest years, Rebecca and her team members that started in 2009 first, and then as team members are added this will sort them in chronological order based on when they joined Hayes Valley Interior Design. Now, each of these team members links to their specific page if we go to preview and click Rebecca Tilden, that's Rebecca's page and we have a page that was automatically generated for each team member. If we switch back to our design team, we can see our hero section. We can see each team member and that's it. We made our hero section. We created a team members collection. We added content we imported the rest and we used magic to link everything up and what we'll do next is make our design responsive and functional on all kinds of devices. Then we'll take that content. We just added each of these team members and build out a design that will feature a full biography on everyone's page.