Freelancer — 440 | Site build | Homepage: testimonials

We’ll start by saying this part of the site build might be our favorite because it's the first time we get to use the CMS to drive dynamic content. Now some of those things sounds like more industry. Jargon CMS dynamic content, the, They are but that doesn't take anything away from the fact that we are about to rapidly add testimonials to our home page with images from each of those client projects. This is a huge deal when we're building this out we have to repeatedly asked why is this important to users people visiting the site? Well, the primary objective is to show people great interior design work, which we started doing right up top by doing this we're adding even more evidence more, work their team has done and by adding testimonials quotes from real clients. We can reinforce trusted Authority throughout this home page. We build this part in four steps we’ll create a CMS collection to drive the testimonials not just on this page, but for every client project were featuring on the site we’ll add content to that CMS will import a lot of what we've worked on with Rebecca and finally the part that's magic, magic which is where all of this links up and brings that static content to life spoiler alert the goal of this especially the last step is to give Rebecca and everyone at Hayes Valley the ability to log in and add more of their client projects including new pictures, new testimonials, and the website is going to support that she won't have to call us to add this content manually and as Freelancers saving ourselves from calls like that that saves us time and it makes our clients feel like they have superpowers because after we build this they will have super powers.

We'll start in Google Sheets. Now, there's a lot of information here, but it's fairly straightforward. We have a series of columns. And in these columns, we have the name of each project. These are all pieces of information that Rebecca sent us from Hayes Valley Interior Design so over here, we have the name of each project they've worked on. We have an image from each of these projects that we click on one of them. We can see what that image looks like and we have the project details right now. It's just lorem ipsum filler text. We have client testimonial these are from each of the clients. These are quotes that Rebecca provided. She asked her clients for these testimonials and for each project. We have one of the testimonials we have the location of that project. We have the type of project new build, whole home, renovation, kitchen renovation Etc. The date everything was completed. Then we have a project summary. So quick blurb about each project. Now, the reason we have all of this in a spreadsheet it's because in a couple steps, we're going to use this spreadsheet and actually import the information from there. So we don't have to manually enter it ourselves. It's also a good reference with the kind of data we have. Let's move this window out of the way we’ll be returning to it in a moment. But for now in our project, let's add a new collection do that from our CMS collections pain right here and we'll call The collectionollection client projects and a couple things happen we’ll notice right here have a plural version which is client project singular client project. This is fine. The structure is fine. But we want to focus on is the collection fields. We have the name of the project. We already know we want that. Let's add another field for Featured image. This is the image. There's one featured image for each client project. Let's hit image then we'll call it ‘featured image’. Now we can add help text. This might help for Rebecca and her team when they log in later for now, let's save the field and let's add our next field we’ll make this a rich text field for project details and we can continue through this process. Let's hit add field and do our next type which is client testimonial for that testimonial we could just do plain text that probably fits best for just a simple quote from each of the clients, ‘client testimonial’, and we can do a minimum character count. If we think that helps with our design gives these guidelines to Rebecca and her team but for now, we'll leave that blank say field. Let's add a field for the location again plaintext really simple text field will work fine here location we’ll hit save. Let's add another field this time for the type of project, ‘type of project’. Just hitting enter here add one more field for the date completed even though it's a number that might make sense to have a plain text field here at plain text and it will be date completed. We will add help text here enter the four-digit year.

2018-2019 Etc and that'll confirm for collaborators working on this project for Rebecca's team that they should put the four digit year and not a full written day because our design is going to be based on the year. It's a field we said that was our last field, there’s one more and that's the project summary new field to make this rich text. So rich text fields not only can have text but they can have some formatting bold text italics but images inside links the list goes on and on. So let's add rich text and we'll call this ‘project summary’.

Say field and that's our structure. That's the structure for all the data. We look over here at the editor preview. This is the kind of data that Rebecca's team can enter later. We'll be entering it now, but as they add other client projects, this is what they'll be presented with. Let's hit create collection. And with that our first step is done. Second Step. Add CMS content. Let's do that right now. We'll hit new client project. In other words. We're adding a new item to our CMS collection. Then that item is a client project and the name of this we're going to reference down below right here. We have our Hayes Valley Interior Design client project spreadsheet. Let's move that down here. It's going to be off screen in terms of what you see on the screen, but we're referencing it on the screen here. So what kind of content do we put in here? We're just going to use the first row from our spreadsheet. So the name of the project is ‘new home in Palo Alto’ the featured image we can click to browse, but that's right off screen here we’ll drag in Palo Alto feature and for project details. We're just going to copy and paste. From this spreadsheet project details were just going to copy and paste client testimonial, same deal copy and paste, location copy and paste. Although that could have been typed type new build. This is just the epitome of laziness they completed again. We're just copying and pasting all the content from that first row for this project inside the CMS and finally project summary. Let's put that here. So let's verify everything we have this is again very similar to what a collaborator would see when they log in later on but we've created a new home in Palo Alto. We'd added a featured image project details the client testimonial the location the type of project which is a new build the date completed which is 2017 and a project summary hit create, that's adding our first item to the CMS for the rest. Let's use CSV import and by that we simply mean click on Row 2. We're going to remove this row and the reason we're going to remove it is because we've already used this road before with imported this we’ve typed out or copied and pasted this information into the CMS already. So let's delete this row and the other eight projects were made from here. We can just go to file download as and we can download this as a comma-separated values of CSV document.

Now, how do we import it? Well in our CMS, we just go to import and drag that CSV drag that CSV. We just exported from Google Sheets and downloaded as a CSV, drag it right in here. Now. It's asking if this top row and that CSV we have that row we exported from Google Sheets. It's asking if it's the header and we're going to say yes. This is the header continue and all we have to do is map each of these fields like Oakland renovation, featured image, all of these fields to our CMS. So we're going to map to our field the name field obviously is just our name field for the featured image. We're going to map that to featured image for project details. We're going to map it to project details, for client testimonial, it's pretty straightforward here. We'll skip to the end where we've mapped all these fields but at the end of it we can take a look at the item preview off to the right here. And as we hover over each of these fields it directs us to what that information what that data looks like in context and we can switch between items. So this is Oakland renovation. Let's switch to the next item, which is a rustic kitchen rental. Next one is Richmond home build and we can get an idea of what this content looks like what these data look like once they're going to be imported and once you're done with that just import a client projects. And that's it. Our content is imported we can close out and see that we now have nine projects, the 8 we just imported plus the one we typed out or copied and pasted before, let's close out of the CMS because now after we've imported our CSV we can proceed to magic now. This is going to be really straightforward but it's going to take a second to get there and it's a little bit different from working on static content. So we'll start with a collection list and a collection list we can drag underneath our home hero section and by default it's a list that looks like this and that's okay. The first thing we have to do is link this to the source right now. It's set to none. So it's not pulling any information from anywhere. That's okay. What we want to do is go to client projects here that's going to link this to our client projects. We just worked on and now if we look at our list we can see there are nine different boxes, nine different areas, where content can go inside and that's expected. Let's keep the layout the way it is again. This is going to be a grid little bit later, but for now, let's keep the content the way it is and we'll add to that to each of these. The first we'll add is a div block. And the reason we're using a div block is because we want more flexibility over dimensions. This helps us use a background image to size things very similarly to how we did it in the home hero section. We use the same div block technique instead of background image on those. So let's do that right here with any of our div blocks selected. Let's go down and set a background image now instead of choosing an image. We're going to leave this blank stick with it. If we go over to element settings right here, we can pull our background image where it says get DG image get background image from client projects. Here's the magic part. It's going to go to this drop-down and choose featured image.

And right there it's pulling the featured image from each of these. It's pulling the featured image from each of our client projects and displaying it right here. Now. Why did we add that blank background image just a moment ago because that blank background image is what lets us format these images on all of them. So let's click example BG. This is our blank background image and we can choose cover we can choose to do it from the center and we can put some constraints on this you can set a height for each of these div locks. We could say we want each of them to be 300 pixels tall. I was 200 you can say 300 pixels tall that's 300 and just like that. We have a list with each item in our list each project. We have a background image. There's a div block inside each collection item. Now, you know who we are about organization. Let's double click to rename div block client image preview and you can call yours, whatever you'd like now with our collection list selected we can go over to grid, Now the default is block elements for this. That's okay. But if we choose grid all of our content just immediately organized into a grid and that grid looks pretty good like this. But if we go to edit our grid we can make some adjustments. Let's add two more columns and that looks pretty good. Maybe we can select that client image preview and instead of 300 we can go back to the accident before which was 200 that looks a little more realistic. And another thing to note here is we're showing 1, 2, 3, 9 client projects we could limit this so go to element settings again and make sure our collection list is selected. You can say limit items we can show 4 at a time. So we're showing just for client projects we can sort these later so we might want to do sort order and we can sort it by the date. It was completed maybe reverse alphabetical.

Alphabetical will go from low to high. So it will go 2017 2018 2019 reverse alphabetical will start with the most recent 2020 2019 20 18 and so on again you could have used a number here we could have used a number here but alphabet works fine for this demonstration. Let's it safe and that's it. We're seeing each of our client projects in descending order from the newest to the oldest. So if we go in and add a new project, which we don't have to demonstrate right now because we to finish this design, but if we go in and add a new client project and we date it 2020 or 2021 that will display first. So we have our client image preview. Let's put some text we want to put that testimonial in this design. So we'll go here add panel we’ll bring in a text block and we'll use the Navigator here to place it perfectly and by perfectly we mean perfectly. Perfectly except it's in the wrong spot. Let's move the client image preview that div block. Let's move that up. So we have some text underneath we can select any of these, again, the content in each of these is placed based on any one of them in CMS items and collection items like this. If you create content or put content inside one of them, it affects all the others. So by adding a text block to one, it added a text block to all of our collection items that's expected behavior so we can get the text from any field but we’ll want to pull is the client testimonial and just like that. We have client testimonials under each of these images. If we wanted which we can do for demonstration right here. We wanted to pull in another we could do a text block and pull the data was completed. It will show the year. It was completed underneath of each of these. So let's delete that one for now, but the idea that we have a testimonial which is dynamically being pulled from our collection and an image, which is dynamically being pulled from our collection is a really powerful thing. So let's work on design the grid gap we see, we’ll select our collection list. The grid gap we see should be about 16 pixels. That's the default that looks okay here we could adjust that so we could have the grid gap. Let's lock. It could make it 15 pixels. That could be Universal which means let's hit done go to our hero section before we forget and edit that grid to let's make it 15 pixels. So 15 pixels is our default we can do the same up here and the way we can do that with our home hero section selected. We can add some margin some space on the bottom and allow exactly 15 pixels. So that grid, that spacing around these items is starting to look pretty similar. We can select client image preview and add some lower margins. This is space underneath each of the images. Let's do 15 pixels there and we can do a few more things to adjust this to make this look exactly how we want it to look so we could select this text block and say ‘Testimonial Preview’ and make it gray. In fact instead of doing that lets click here and remove that let's reset that property because we can go to our body all pages tag. Like we did before and change our default there. Let's go to our body all pages tag and instead of black being the default or instead of light gray. Let's pick a darker gray color and we'll add that color to our swatches so we can use it everywhere. But that changed the paragraph color here. It also changed the testimonial preview color here. We can override that later. But that changes our default color for all content. That hasn't been overridden. Let's go in and drop that font size slightly. And again our line height is adjusting with us because we set that to 1.4 earlier. That's great. Let's set it to 1414 looks pretty good there and while we're at it, let's go up and change our home hero paragraph to 14 as well. 15 might look better. And we could tweak this for days but one of the things that's easy to notice when we're continuing to design like this is all of our stuff is right up against the edge. We could add a container to contain things. But another helpful thing is to use the body all pages tag. This is one of our favorites, go to the body all pages tag and add some padding on both sides, again, holding option or alt on PC and dragging to adjust both sides at once. Let's go to 15 pixels. So we're really getting that grid consistency. We're getting 15 pixels between the edge of the viewport and this content we're getting 15 pixels between the hero section and the testimonial section getting 15 pixels in between each of the testimonials were getting that grid type design looking really consistent. Now, what if we want to specify the featured images on the home page, there's a few ways to do that but one of them is really powerful. Let's go into the CMS and we'll go and edit our settings. The reason we're doing that is we want to add a new field. This new field is going to be a switch. We can just call this which featured what featured is going to do. It's going to allow us to, and we'll put this up on the top. So it's easy to access. It's going to allow us to go by item. So industrial Loft Renault, let's say this one maybe is not featured. We can click on master suite and Burlingame that can be a featured one. Let's switch that on save that and Cupertino Home build that looks like a featured one save, Richmond home build. That's a featured one. Rustic Kitchen Renault just going through and choosing some of our featured this will be the fourth one we’ll feature, we’ll hit save and here's what we can do we can say on this collection item we’ll just select any of these collection items go over to element settings and we can say we want to filter our selection what that means is adding a filter lets us choose, based on that switch, which images to display so we can say is this featured, when you're gonna choose that switch, and we're only showing this content if that featured switch is on hit save and now only our featured content is shown. It's still sorting it by the date completed. It's still showing the newest content first, but it's filtered. It's only showing those for because of that limit. It's only showing those four items that featured is switch to on. That's a ton, and we're going to come back to what we just made because we didn't just build the testimonials. We basically set the groundwork for what we’ll end up being the client project pages themselves, but that's what we just wrapped up here. We created a collection we some content we imported the rest from a CSV and we used magic to tie all that content to link it all to a dynamic design on our homepage.