We’ve made significant progress in our portfolio build so far, but this is where things start to accelerate, because when we say visual CMS, what do we mean?
[Sara] Yeah, what do you mean?
[McGuire] Great question, Sara.
A content management system lets us set up a database, a Collection of information like client projects, or blog posts, or menu items, but after we get all that information into a database we can design with it, visually. That means we can link parts of our design, we can connect placeholders to that data.
[Sara] Those data.
[McGuire] Those data.
But this means we’re able to design faster, and we can add new items that adhere to the designs we build out. And, we’ll do this in five parts: we’ll set up the basic structure, we’ll create our CMS Collection (this is the database of project), we’ll add content to that Collection, we’ll show how we can use the CSV to more quickly import that data --
[Sara] Those data
[McGuire] Those data.
And finally we’ll build out our design referencing the items in that Collection, which really does feel like magic. Let’s start with the structure. Same basic concept as before, with the top section, let’s grab a section element. We'll use the navigator this time to place it at the bottom, we’ll put it right here, underneath our existing section, and with this section we’ll use the same class. We’ll go over to the selector field here, and we’ll type in section. And when we do, we bring along all those style values from before. We’ve got the sixty pixels on the top, and the sixty pixels on the bottom. This is padding, space inside that element. And we want to do something else here. We want to add a heading. Let’s drag in a heading. We can drag it right into that section. This time we want it to be an H2, our top level heading on the page. I elevate user experiences using telekinesis, that’s our H1, our top level heading. This one will be an H2. And, let’s double-click and edit that to say, Selected Projects, and a few things we can change here. First off, let’s change our styling. Of course, we could use our heading style from down below. We can also duplicate that class, so this can be secondary heading, and decrease the font size since it’s an H2, twenty-eight pixels. And if you notice over here on the left side, the H2 goes all the way up to the section. And that’s because we haven’t yet added our container. So the other part of our structure is going to be the container element. Let’s go up and add a container. We want to add this inside the section, and of course if we grab our secondary heading, and put it inside, we have our container, keeping everything neatly bound. Now, notice how it does not match the container in the nav bar, or the container in here. That’s because those are using the container class. With our container down here selected, let’s go up and make sure the container class is applied. Now it matches. Again, at any time, we can change something like the maximum width, and it affects all containers using that class. We’re fine with twelve hundred. One more text element to add here. Let’s add a paragraph. This paragraph can be basic, lorem ipsum, we can use placeholder paragraph text. Maybe get rid of some of it. Let’s stop here. And we can even set a maximum width. Over here we set a maximum width of four fifty, so maybe on this paragraph here we can set another maximum width of four fifty, like that. Now there’s a ton of space here, our secondary heading has that sixty pixels that we used on this heading. So for our secondary heading let’s decrease that maybe to twenty pixels or even ten pixels might be okay, fifteen. And, with that paragraph selected, we might want to drop down that color. Just decrease it’s opacity maybe to, let’s see, so we’re using our contrast ratio checker here. If it’s this low, it's a little low, let’s put it up to maybe sixty percent looks pretty good on this paragraph. That’s looking okay, at least while there’s a black background. If we change this later, for instance if we change this section’s background color, or we change all our section’s background color to red, of course that contrast won’t be high enough now. If we go in to edit that text color, we can see it’s failing. We’d have to increase that white color, even at full it’s failing. Also, this is hideous and it sears the retinas. Let’s change it back. Command Z, undo, very quickly, very quickly, very quickly.
Well, we built it once. Let’s build it again, but faster. Command Shift Z to redo. And we’re back. But, there’s one more thing to notice here. We created spacing here, we created padding of sixty pixels on the top here, we created sixty pixels underneath this heading, between the heading and the image, between here and the end of this section is another sixty pixels. But, if you look at this section, sixty pixels doesn’t go all the way down to that heading. If we click our secondary heading here, we can see there’s twenty pixels of margin. Let’s remove that. So it’s even and matched. But we can always change this stuff later.
But for right now, let’ s move into creating our CMS Collection, and this is the part we describe as magic. So, let’s go over here to CMS on the left side, and let’s create our Collection. And our Collection name is going to be Projects. And we want to add some fields. First off, this name will be the project name. Each of these Collection fields will hold the data for each project. So we want to make sure we’re listing out fields for every type of data we want to track. So, for clients, we’re going to want a brief description. Let’s go to plain text. And we’ll say this is a brief project description. If we want to add an image, maybe an image for each project, let’s go to image, and let’s say project image. Let’s add another field. Maybe for each project we want a different color. So let’s say project color. We can design with this color. It could be unique, it could be matched to each project. Let’s add another field. This time with an option dropdown, this can be the type of project, or project type. And, let’s add a few options. Maybe we do illustration; let’s add another option for web design. These are all the types of projects Megan wants to feature. Maybe prototyping. And finally let’s add one more for general UX design. So four options, let’s save that and add another field. We want to add the year, let’s do a plain text field for project year. Another plain text field for the name of let’s say, client name, the name of the client on that project. Let’s add another one for the project details, rich text, project details. We can show these on each project page. And just two more. Let’s add a field which is a link. We want a link to the project, so we’ll call it project link. And one more, final field, let’s add multiple images. So for each client project, we want to be able to add multiple images. Let’s say project images. And here’s what happens: when we press, Create Collection, suddenly we have this blank database and we can add a new project. That’s taking the name new project, that’s the project Collection we just added, let’s press New Project. And suddenly, we can add one of Megan’s projects.
Now, for Megan’s first project let’s type, investment-app. Slug is okay. Brief project description, we have something on our clipboard already. Let’s drag in an image here, so we have this investment app, we can just add the Bluerock.jpg here, we’ll just drag it right in. We can paste in a project color. The type of project is a UX design project. The project year is 2021. The client name is NewStar Dollars, and the project details, we can type these or just paste them in from something like GoogleDocs. Let’s paste that right in. And for the project link, let’s make it Google.com for right now. Finally, for project images, let’s go back and add the other ones we didn’t add. So let’s deselect Bluerock, drag these four right in, and that’s it. We’ve added four images to this multi-image field. And that’s it. We can press Create, and now we’ve created that investment app client.
Now, there’s a faster way to do this. If we have all the data in something like a CSV or any type of spreadsheet, let’s move over to Google Sheets here, we can say hey, maybe we have the project names and these descriptions, we have them all written out in a spreadsheet. So, we can say, let’s remove the investment app right here, maybe reorganize them, although we can do it right inside of Webflow if we want, but the important part is that we export the data, we save it as a CSV, a comma separated values sheet. Go to File, go to Download, Comma Separated Values. And, back in Webflow, we can import this, right into our Collection. We can just drag that CSV we just downloaded right in. And, the reason we deleted the one we already typed in is because we don’t want duplicate projects. We had four, all of them listed in the CSV, but we typed out the first one together. So now we’re importing three in that CSV. We’re going to indicate that top row is indeed the header, and we’ll hit Continue, and we’re just going to match each of these field types. Most of them already lined up. If we have a few brief descriptions, which we want to map to a field, sometimes this happens if it's not named exactly how we named it when we made the Collection. Let’s make sure this goes to brief project description. And then project color, that's correct. Project type, let’s map that too. And finally let’s link that link to project, let’s map the link to project to the project link field. When we’re ready, we can import those three projects, and we’ve imported all our CMS content. Press Close, we have all four right here. Now, up on the top right here, we can click this little pin icon, and we can add the project color, we can do the project year, we could do the project link, well they’re all Google right now. Let’s do project description, and we can preview all the data in our database inside our Collection right here. Now we’re ready for the magic part.
So, let’s close out of the CMS, and we’re back in our main page. Let’s go and add a Collection list. Now, a Collection list references a Collection. It’s just a list of things from that Collection. So let’s put it under the paragraph. You can see we have three kind of placeholder Collection items, but we need to link this to our projects. This is the list of CMS Collections, we have one, our projects Collection. Let’s click that. Suddenly you can see right here, we have a list of each of the four projects. Each project we added to that database, to that Collection. Here’s the impressive part. We can go ahead and drag in something like a heading, let’s drag that into any of these fields, doesn’t matter which ones. Put in architectural website, since it’s in the H2 category, since this is the H2 and we’re still in the same section, let’s make these H3s. And, nothing really impressive right now. It just says heading four times. But, if we click this little cog, and we actually get the text from, we go to get text from, we can link this to the project name. And suddenly, we have a list of each of these. Let’s go ahead and add in a paragraph. Let’s go in, drag in a paragraph element, again we’re placing this in the Collection item. So, any of them we can put in, social network, this one in this Collection item right underneath, social network, again by default it’s just a paragraph but we can get that text for that paragraph from the brief project description. Again, creating a link between these headings and these paragraphs, and the data in our Collection. Let’s add another one. Let’s add a text element, this time text block right above the heading. Let’s make this the project type. And, one more text block, let’s add a text block at the bottom here. Again, inside each of these Collection items we have a text block on the top, we have a heading, we have a paragraph, let’s put that at the bottom, and let’s call this one, let’s just name it view project. Notice how as we’re doing this on any one line it’s affecting all of them, and that's because when you make a change in any one Collection item, it affects all other Collection items. So it affects the architectural, the social network, the meditation app website, and the investment app.
So, let’s do a couple things to design this the way we want to design it. First, let’s make sure our Collection item is selected and what we’ll do here is do a couple things. Let’s first make sure we have a Div block inside that Collection item. A Div block is just a rectangle. It does what we tell it to do. We can put things inside that rectangle. We can put things outside that rectangle. It doesn’t matter. Let’s drag those four things. The Div block is going to contain our text block. Let’s put in our heading, let’s put in our paragraph. We’re just putting that paragraph right inside the Div block, and the text block we can put that in too. So the Div block now has all four of our elements. Here’s why this is important. We can select the Div block, and set its background color. We can go to element settings, and get its background color from our projects, from that particular project color. We can see, we’re now styling these things. It doesn’t look great yet, but we’re now styling these things based on each Collection item's data, like the background color. So maybe with our Collection items selected, go back to element settings, let’s just add some margin at the bottom, maybe thirty pixels. Let’s collapse this Div block because we want to do one more thing. We want to add an image. So let’s get an image element, let’s drag it not in the Div block but under the Div block, and let’s get that image from our project image field. Now, it’s kind of taking up all the space available right now. It’s not very good looking. So, what we can use is CSS grid. We can select our Collection item, this is the parent element that contains that Div block that has all of those data inside, and it has the image. It has the image element inside. So with our Collection items selected, let’s change our display to grid. And, by default, we have four cells. Let’s remove that bottom row, right-click, and Delete Row. Let’s increase the spacing to maybe thirty pixels here, let’s press Done. Now we have this kind of side-by-side design. In fact, we might even want to get rid of that. Let’s actually remove this spacing altogether. Looks good. We have this kind of side-by-side design, so we can select our Div block here, maybe add some padding, let’s do thirty pixels on all sides. That looks pretty good. Maybe we want View Project to be at the bottom, so with this Div block selected, let’s name it. Instead of using the Div block default class name, let’s call this Project Details. And, we can add flex box to this. Flex box lets us sort things in any one of two directions. So if we want to sort things vertically or horizontally, we can click flex box. This is horizontal, but we can switch this to vertical. And, what flex box allows us to do since we set it on the project details, the Div block that parent, we can select any children of that parent,. So let’s open this up, click that text block, and we can set it’s top margin to auto. And that pushes it all the way down to the bottom.
So, couple more things. Let’s select our Heading 3, and you can do this on any of them our Heading 3, let’s add a class, let’s call it Project Name Preview. And we can set a different font on this, let’s set the font to DM Serif, let’s do a weight of four hundred, let’s decrease the font size to twenty. Twenty looks pretty good. And for these top text blocks, let’s decrease the opacity. Let’s drop these a little bit. That looks pretty good. Same thing here. We can apply a lower opacity. And, for organization’s sake, let’s make sure as we’re making these new classes, as we’re changing each of these items, we’re keeping things organized. So let’s say this is, Project Type Preview. And we might want to change this parent element. Let’s go into the Collection item, let’s hit Edit Grid, or we can just go up to the top here, and hit Edit Grid, and maybe we want to move this over. So let’s change this, these fraction units, actually point seven five is pretty good. We can always click in, and point eight. That looks okay. Let’s hit Done. And so we’ve kind of offset our design here. So we have a description on the left, with the view project button, which we’ll add in a moment. Again we should say this is button text. And we have all four projects added right here.
Now, we’ve set up a visual hierarchy here. Where our H1 is clearly the big headline, the H2 is on a second level, and each of these H3s is on a third level. And the nature of our Collection list, the way we have each client project following the same structure, that lends itself to visual repetition. Repetition establishes rhythm in our design, and it makes scanning through our projects clear and easy to preview. And like we said, the great thing about building it this way, is not only can we change the design down the road, but as we change stuff in our database, in our Collection, the design is going to update to reflect those changes. Now, we’re making huge progress, and we’re even nearing the end of the work on the homepage. In fact, after this we’re just adding two more parts. The contact form, and the footer. And then we’ll go through the entire homepage to make sure it’s responsive on different devices like tablets and mobile phones.
[Grimur] Hang on. I’m texting. I mean I’m reviewing some of the hero sections and navorgations on Tweet-hir. And Insta. Using the hashtag #21DayPortfolio. But I actually mistyped the hashtag, which is profoundly embarrassing. But yeah. Let me know when we’re filming.
